swtl

A Service Worker Templating Language (swtl) for component-like templating i...

Service WorkerTemplating
thepassle/swtl

README

swtl


Check out the swtl-starter app


A Service Worker Templating Language (swtl) for component-like templating in service workers. Streams templates to the browser as they're being parsed, and handles rendering iterables/Responses in templates by default.

  1. ```bash
  2. npm i swtl
  3. ```

Example


  1. ```js
  2. import { html, Router, CacheFirst } from 'swtl';
  3. import { BreadCrumbs } from './BreadCrumbs.js'

  5. function HtmlPage({children, title}) {
  6.   return html`<html><head><title>${title}</title>head><body>${children}</body>html>`;
  7. }

  9. function Footer() {
  10.   return html`<footer>Copyright</footer>`;
  11. }

  13. const router = new Router({
  14.   routes: [
  15.     {
  16.       path: '/',
  17.       render: ({url, params, query, request}) => html`
  18.         <${HtmlPage} title="Home">
  19.           <h1>Home</h1>
  20.           <nav>
  21.             <${BreadCrumbs} path=${request.url.pathname}/>
  22.           </nav>
  23.           ${fetch('./some-partial.html')}
  24.           ${caches.match('./another-partial.html')}
  25.           <ul>
  26.             ${['foo', 'bar', 'baz'].map(i => html`<li>${i}</li>`)}
  27.           </ul>
  28.           <${CacheFirst} file="./some-file.html"/>
  29.           <${Footer}/>
  30.         <//>
  31.       `
  32.     },
  33.   ]
  34. });

  36. self.addEventListener('fetch', (event) => {
  37.   if (event.request.mode === 'navigate') {
  38.     event.respondWith(router.handleRequest(event.request));
  39.   }
  40. });
  41. ```

Router


Uses URLPattern internally for matching thepaths. The render callback gets passed the native [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object, as well as any route params or query params.

  1. ```js
  2. import { html, Router } from 'swtl';

  4. const router = new Router({
  5.   routes: [
  6.     {
  7.       path: '/',
  8.       render: () => html`<h1>Home</h1>`
  9.     },
  10.     {
  11.       path: '/:foo',
  12.       render: ({params}) => html`<h1>${params.foo}</h1>`
  13.     },
  14.     {
  15.       path: '/:foo/:bar',
  16.       render: ({params}) => html`<h1>${params.foo}/${params.bar}h1>`
  17.     },
  18.     {
  19.       path: '/:foo/:bar',
  20.       render: ({url, params, query, request}) => html`<h1>${params.foo}/${params.bar}h1>`
  21.     },
  22.   ]
  23. });

  25. self.addEventListener('fetch', (event) => {
  26.   if (event.request.mode === 'navigate') {
  27.     event.respondWith(router.handleRequest(event.request));
  28.   }
  29. });
  30. ```

baseHref


You can also specify a baseHref, for example if your app is served under a specific base route, like https://my-app.com/foo/bar/:

  1. ```js
  2. const router = new Router({
  3.   baseHref: '/foo/bar/',
  4.   routes: [
  5.     {
  6.       // The url will be: https://my-app.com/foo/bar/
  7.       path: '',
  8.       render: () => html`<${Home}/>`
  9.     },
  10.     {
  11.       // The url will be: https://my-app.com/foo/bar/users/1
  12.       path: 'users/:id',
  13.       render: ({params}) => html`<${User} id=${params.id}/>`
  14.     }
  15.   ]
  16. });
  17. ```

Note that you also have the set the base tag in your HTML:
  1. ```html
  2. <base href="/foo/bar/">
  3. ```

fallback


You can also provide a fallback in case no routes are matched. If you don't provide a fallback, the request will not be handled by the service worker, and go through to the network.

  1. ```js
  2. const router = new Router({
  3.   routes: [
  4.     {
  5.       path: '/',
  6.       render: () => html`<${Home}/>`
  7.     }
  8.   ],
  9.   fallback: ({query, request}) => html`<${NotFound}/>`
  10. });
  11. ```