Merge pull request #10 from thepassle/refactor/refactorings

refactor: some refactoring

packages/core/README.md

@@ -28,7 +28,7 @@ const router = new Router({
   routes: [
     {
       path: '/',
-      render: ({url, params, query, request}) => html`
+      response: ({url, params, query, request}) => html`
         <${HtmlPage} title="Home">
           <h1>Home</h1>
           <nav>
@@ -56,7 +56,7 @@ self.addEventListener('fetch', (event) => {
 
 ## Router
 
-Uses [URLPattern](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) internally for matching the `paths`. 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.
+Uses [URLPattern](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) internally for matching the `paths`. The `response` 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.
 
 ```js
 import { html, Router } from 'swtl';
@@ -65,19 +65,19 @@ const router = new Router({
   routes: [
     {
       path: '/',
-      render: () => html`<h1>Home</h1>`
+      response: () => html`<h1>Home</h1>`
     },
     {
       path: '/:foo',
-      render: ({params}) => html`<h1>${params.foo}</h1>`
+      response: ({params}) => html`<h1>${params.foo}</h1>`
     },
     {
       path: '/:foo/:bar',
-      render: ({params}) => html`<h1>${params.foo}/${params.bar}</h1>`
+      response: ({params}) => html`<h1>${params.foo}/${params.bar}</h1>`
     },
     {
       path: '/:foo/:bar',
-      render: ({url, params, query, request}) => html`<h1>${params.foo}/${params.bar}</h1>`
+      response: ({url, params, query, request}) => html`<h1>${params.foo}/${params.bar}</h1>`
     },
   ]
 });
@@ -100,12 +100,12 @@ const router = new Router({
     {
       // The url will be: https://my-app.com/foo/bar/
       path: '',
-      render: () => html`<${Home}/>`
+      response: () => html`<${Home}/>`
     },
     {
       // The url will be: https://my-app.com/foo/bar/users/1
       path: 'users/:id',
-      render: ({params}) => html`<${User} id=${params.id}/>`
+      response: ({params}) => html`<${User} id=${params.id}/>`
     }
   ]
 });
@@ -125,7 +125,7 @@ const router = new Router({
   routes: [
     {
       path: '/',
-      render: () => html`<${Home}/>`
+      response: () => html`<${Home}/>`
     }
   ],
   fallback: ({query, request}) => html`<${NotFound}/>`
@@ -134,7 +134,7 @@ const router = new Router({
 
 ### `plugins`
 
-You can also provide plugins. You can add global plugins that will run for every route, or add plugins for specific routes only. If you return a `Response` from a plugin, the router will return that response to the browser instead of your `render` function.
+You can also provide plugins. You can add global plugins that will run for every route, or add plugins for specific routes only. If you return a `Response` from a plugin, the router will return that response to the browser instead of your `response` function.
 
 ```js
 import { Router, html, HtmlResponse } from 'swtl';
@@ -154,7 +154,7 @@ const router = new Router({
   routes: [
     {
       path: '/',
-      render: () => html`<${Home}/>`,
+      response: () => html`<${Home}/>`,
       /**
        * These plugins run for this route only
        */
@@ -201,7 +201,7 @@ const router = new Router({
   routes: [
     {
       path: '/foo',
-      render: () => html`foo`,
+      response: () => html`foo`,
       options: {
         headers: {
           'content-type': 'text/xml'
@@ -360,6 +360,26 @@ const template = html`
 `;
 ```
 
+If you're using SWTL in a more SPA-like PWA app, you can also use the following strategies:
+```js
+import { networkFirst, networkOnly, cacheFirst, cacheOnly } from 'swtl';
+
+import { Router } from 'swtl';
+
+const router = new Router({
+  routes: [
+    {
+      path: '/images/*.svg',
+      response: cacheFirst
+    },
+  ]
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(router.handleRequest(event.request));
+});
+```
+
 ## Out of order streaming
 
 For out of order streaming you can use the built-in `Await` component and provide a `promise` property:

packages/core/demo/sw.js

@@ -56,7 +56,7 @@ const router = new Router({
   routes: [
     {
       path: "/a",
-      render: () => html`a`,
+      response: () => html`a`,
       // plugins: [
       //   {
       //     name: 'a-plugin',
@@ -70,7 +70,7 @@ const router = new Router({
     },
     {
       path: "/b",
-      render: () => html`b`,
+      response: () => html`b`,
       // plugins: [
       //   {
       //     name: 'b-plugin',
@@ -82,11 +82,11 @@ const router = new Router({
     },
     // {
     //   path: '/',
-    //   render: () => html`hi<my-el foo=1>baz</my-el>`,
+    //   response: () => html`hi<my-el foo=1>baz</my-el>`,
     // },
     {
       path: "/",
-      render: ({ params, query, request }) => html`
+      response: ({ params, query, request }) => html`
         <${HtmlPage}>
           <h1>home</h1>
           <my-el></my-el>
@@ -114,19 +114,19 @@ const router = new Router({
     },
     {
       path: "/foo",
-      render: ({ params, query, request }) =>
+      response: ({ params, query, request }) =>
         html`<${HtmlPage}><h1>Foo</h1><//>`,
     },
     // {
     //   path: '/bar',
-    //   render: ({params, query, request}) => html`<${HtmlPage}>
+    //   response: ({params, query, request}) => html`<${HtmlPage}>
     //     <${Baz}>abc<//>
     //     efg
     //   <//>`
     // },
     // {
     //   path: '/baz',
-    //   render: ({params, query, request}) => html`
+    //   response: ({params, query, request}) => html`
     //     <${HtmlPage}>
     //       <${Baz}>abc<//>
     //       <h3>hello</h3>

packages/core/dev.js

@@ -1,5 +1,5 @@
 import { html } from './html.js';
-import { render, renderToString, handle } from './render.js';
+import { render, renderToString } from './render.js';
 import { Await, when } from './await.js';
 import { Slot } from './slot.js';
 import { LitElement, css, html as litHtml } from 'lit';
@@ -91,16 +91,22 @@ function HtmlPage2({children}) {
   return children;
 }
 
-const fixture = html`
-  <${HtmlPage}>
-    <h1>home</h1>
-      <my-el></my-el>
-    <ul>
-      
-    </ul>
-    <h2>footer</h2>
-  <//>
-`
+
+// class MyEl extends LitElement {
+//   static styles = css`:host { color: red }`
+//   static properties = { disabled: { type: Boolean } };
+//   render() {
+//     return litHtml`<h1>hello ${this.disabled ? 'foo' : 'bar'}</h1>`;
+//   }
+// }
+// customElements.define('my-el', MyEl);
+
+// html`
+//   <${HtmlPage}>
+//     <h1>home</h1>
+//     <my-el></my-el>
+//   <//>
+// `
 
 const r = unwrap(fixture);
 console.log(1, r);

packages/core/index.js

@@ -8,6 +8,10 @@ export {
   CacheFirst,
   CacheOnly,
   NetworkOnly,
+  networkFirst,
+  cacheFirst,
+  cacheOnly,
+  networkOnly
 } from './strategies.js';
 
 /**

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swtl",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "",
   "main": "index.js",
   "type": "module",

packages/core/router.js

@@ -31,7 +31,7 @@ export class Router {
     this.customElementRenderers = customElementRenderers;
 
     this.fallback = {
-      render: fallback,
+      response: fallback,
       params: {}
     };
     this.routes = routes.map(route => ({
@@ -69,15 +69,15 @@ export class Router {
       if (match) {
         matchedRoute = {
           options: route.options,
-          render: route.render,
+          response: route.response,
           params: match?.pathname?.groups ?? {},
           plugins: route.plugins,
         };
         break;
       }
     }
 
-    const route = matchedRoute?.render ?? this?.fallback?.render;
+    const route = matchedRoute?.response ?? this?.fallback?.response;
     if (route) {
       const url = new URL(request.url);
       const query = Object.fromEntries(new URLSearchParams(url.search));

packages/core/strategies.js

@@ -7,21 +7,25 @@
  */
 
 /** @param {StrategyParams} params */
-export function NetworkFirst({file, children}) {
-  return fetch(file).catch(() => caches.match(file).then(r => r || children));
-}
+export const NetworkFirst = ({file, children}) => fetch(file).catch(() => caches.match(file).then(r => r || children));
 
 /** @param {StrategyParams} params */
-export function CacheFirst({file, children}) {
-  return caches.match(file).then(r => r || fetch(file).catch(() => children));
-}
+export const CacheFirst = ({file, children}) => caches.match(file).then(r => r || fetch(file).catch(() => children));
 
 /** @param {StrategyParams} params */
-export function CacheOnly({file, children}) {
-  return caches.match(file).then(r => r || children);
-}
+export const CacheOnly = ({file, children}) => caches.match(file).then(r => r || children);
 
 /** @param {StrategyParams} params */
-export function NetworkOnly({file, children}) {
-  return fetch(file).catch(() => children);
-}
+export const NetworkOnly = ({file, children}) => fetch(file).catch(() => children);
+
+/** @param {Request} request */
+export const networkFirst = (request) => fetch(request).catch(() => caches.match(request));
+
+/** @param {Request} request */
+export const cacheFirst = (request) => caches.match(request).then(r => r || fetch(request));
+
+/** @param {Request} request */
+export const cacheOnly = (request) => caches.match(request);
+
+/** @param {Request} request */
+export const networkOnly = (request) => fetch(request);

packages/core/test/router.test.js

@@ -15,7 +15,7 @@ describe('Router', () => {
       routes: [
       {
         path: '/foo',
-        render: () => html`foo`
+        response: () => html`foo`
       }
     ]});
 
@@ -32,7 +32,7 @@ describe('Router', () => {
       routes: [
       {
         path: '/foo',
-        render: () => html`foo`,
+        response: () => html`foo`,
         options: {
           status: 300,
           headers: {

packages/core/types.ts

@@ -54,14 +54,14 @@ export interface Plugin {
 
 export interface Route {
   path: string,
-  render: (params: RouteArgs) => RouteResult,
+  response: (params: RouteArgs) => RouteResult,
   plugins?: Plugin[],
   options?: RequestInit
 }
 
 export interface MatchedRoute {
   params: Record<string, string>;
-  render: (params: RouteArgs) => RouteResult;
+  response: (params: RouteArgs) => RouteResult;
   plugins?: Plugin[];
   options?: RequestInit;
 }