@esportsplus/routing 0.0.30 → 0.0.32

package/build/browser.d.ts

@@ -1,17 +1,17 @@
-import { Middleware, Router } from './types';
+import { Middleware, Next, Request, Router } from './types';
 declare function back(): void;
 declare function forward(): void;
 declare const _default: <T>(instance?: Router<T> | undefined) => {
     back: typeof back;
     forward: typeof forward;
-    match: (subdomain?: string) => {
-        parameters?: Record<PropertyKey, unknown> | undefined;
-        route?: import("./router/route").Route<T> | undefined;
+    match: {
+        (subdomain?: string): {
+            parameters?: Record<PropertyKey, unknown> | undefined;
+            route?: import("./router/route").Route<T> | undefined;
+        };
+        middleware(subdomain?: string): (request: Request<T>, next: Next<T>) => import("@esportsplus/template/build/types").Template;
     };
-    middleware: (...middleware: Middleware<T>[]) => ({ parameters, route }: {
-        parameters?: Record<PropertyKey, unknown> | undefined;
-        route?: import("./router/route").Route<T> | undefined;
-    }) => T;
+    middleware: (...middleware: Middleware<T>[]) => () => T;
     redirect: (path: string, values?: unknown[]) => void;
     router: Router<T>;
     uri: (path: string, values?: unknown[]) => string;

package/build/browser.js

@@ -1,13 +1,28 @@
-import { reactive } from '@esportsplus/reactivity';
+import { effect, reactive, root } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
 import pipeline from '@esportsplus/pipeline';
 import factory from './router';
-let cache = [], registered = false;
+let cache = [];
 function back() {
     window.history.back();
 }
 function forward() {
     window.history.forward();
 }
+function href() {
+    let { hash, hostname, href, origin, port, protocol } = new URL(window.location?.href || ''), path = hash ? hash.slice(1).split('?') : ['/', ''];
+    return {
+        data: {},
+        href,
+        hostname,
+        method: 'GET',
+        origin,
+        path: path[0],
+        port,
+        protocol,
+        query: path[1] ? Object.fromEntries((new URLSearchParams(path[1])).entries()) : {},
+    };
+}
 function normalize(uri) {
     if (uri[0] === '/') {
         return '#' + uri;
@@ -15,7 +30,7 @@ function normalize(uri) {
     return uri;
 }
 function onpopstate() {
-    let values = request();
+    let values = href();
     for (let i = 0, n = cache.length; i < n; i++) {
         let state = cache[i];
         for (let key in values) {
@@ -23,55 +38,53 @@ function onpopstate() {
         }
     }
 }
-function request() {
-    let { hash, hostname, href, origin, port, protocol } = new URL(window.location?.href || ''), path = hash ? hash.slice(1).split('?') : ['/', ''];
-    return {
-        data: {},
-        href,
-        hostname,
-        method: 'GET',
-        origin,
-        path: path[0],
-        port,
-        protocol,
-        query: path[1] ? Object.fromEntries((new URLSearchParams(path[1])).entries()) : {},
-    };
-}
 export default (instance) => {
-    let router = instance || factory(), state = reactive(request());
-    cache.push(state);
-    if (!registered) {
-        registered = true;
+    let request = reactive(href()), router = instance || factory();
+    if (cache.push(request) === 1) {
         window.addEventListener('hashchange', onpopstate);
     }
+    function match(subdomain) {
+        if (router.subdomains !== null) {
+            for (let i = 0, n = router.subdomains.length; i < n; i++) {
+                if (!request.hostname.startsWith(router.subdomains[i])) {
+                    continue;
+                }
+                subdomain = router.subdomains[i];
+                break;
+            }
+        }
+        return router.match(request.method, request.path, subdomain || '');
+    }
+    match.middleware = (subdomain) => {
+        let state = reactive({
+            parameters: undefined,
+            route: undefined
+        });
+        effect(() => {
+            let { parameters, route } = match(subdomain);
+            state.parameters = parameters;
+            state.route = route;
+        });
+        return (request, next) => {
+            return html `${() => {
+                if (state.route === undefined) {
+                    throw new Error(`Routing: route is undefined!`);
+                }
+                return root(() => {
+                    request.data.parameters = state.parameters;
+                    request.data.route = state.route;
+                    return next(request);
+                });
+            }}`;
+        };
+    };
     return {
         back,
         forward,
-        match: (subdomain) => {
-            let match = subdomain || state.subdomain;
-            if (match === undefined) {
-                if (router.subdomains) {
-                    for (let i = 0, n = router.subdomains.length; i < n; i++) {
-                        if (!state.hostname.startsWith(router.subdomains[i])) {
-                            continue;
-                        }
-                        match = router.subdomains[i];
-                        break;
-                    }
-                }
-                if (match === undefined) {
-                    match = '';
-                }
-            }
-            return router.match(state.method, state.path, match);
-        },
+        match,
         middleware: (...middleware) => {
             let instance = pipeline(...middleware);
-            return ({ parameters, route }) => {
-                state.data.parameters = parameters;
-                state.data.route = route;
-                return instance(state);
-            };
+            return () => instance(request);
         },
         redirect: (path, values = []) => {
             if (path.indexOf('://') !== -1) {

package/package.json

@@ -2,7 +2,8 @@
     "author": "ICJR",
     "dependencies": {
         "@esportsplus/pipeline": "^0.0.5",
-        "@esportsplus/reactivity": "^0.1.2"
+        "@esportsplus/reactivity": "^0.1.3",
+        "@esportsplus/template": "^0.1.5"
     },
     "devDependencies": {
         "@esportsplus/typescript": "^0.0.3"
@@ -17,5 +18,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.30"
+    "version": "0.0.32"
 }

package/src/browser.ts

@@ -1,11 +1,11 @@
-import { reactive } from '@esportsplus/reactivity';
-import { Middleware, Request, Router } from './types';
+import { effect, reactive, root } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { Middleware, Next, Request, Router } from './types';
 import pipeline from '@esportsplus/pipeline';
 import factory from './router';
 
 
-let cache: Request<any>[] = [],
-    registered = false;
+let cache: Request<any>[] = [];
 
 
 function back() {
@@ -16,6 +16,23 @@ function forward() {
     window.history.forward();
 }
 
+function href<T>(): Request<T> {
+    let { hash, hostname, href, origin, port, protocol } = new URL( window.location?.href || '' ),
+        path = hash ? hash.slice(1).split('?') : ['/', ''];
+
+    return {
+        data: {},
+        href,
+        hostname,
+        method: 'GET',
+        origin,
+        path: path[0],
+        port,
+        protocol,
+        query: path[1] ? Object.fromEntries( (new URLSearchParams(path[1])).entries() ) : {},
+    };
+}
+
 function normalize(uri: string) {
     if (uri[0] === '/') {
         return '#' + uri;
@@ -25,7 +42,7 @@ function normalize(uri: string) {
 }
 
 function onpopstate() {
-    let values = request();
+    let values = href();
 
     for (let i = 0, n = cache.length; i < n; i++) {
         let state = cache[i];
@@ -37,69 +54,67 @@ function onpopstate() {
     }
 }
 
-function request<T>(): Request<T> {
-    let { hash, hostname, href, origin, port, protocol } = new URL( window.location?.href || '' ),
-        path = hash ? hash.slice(1).split('?') : ['/', ''];
-
-    return {
-        data: {},
-        href,
-        hostname,
-        method: 'GET',
-        origin,
-        path: path[0],
-        port,
-        protocol,
-        query: path[1] ? Object.fromEntries( (new URLSearchParams(path[1])).entries() ) : {},
-    };
-}
-
 
 export default <T>(instance?: Router<T>) => {
-    let router = instance || factory<T>(),
-        state = reactive( request<T>() );
-
-    cache.push(state);
+    let request = reactive( href<T>() ),
+        router = instance || factory<T>();
 
-    if (!registered) {
-        registered = true;
+    if (cache.push(request) === 1) {
         window.addEventListener('hashchange', onpopstate);
     }
 
-    return {
-        back,
-        forward,
-        match: (subdomain?: string) => {
-            let match = subdomain || state.subdomain;
-
-            if (match === undefined) {
-                if (router.subdomains) {
-                    for (let i = 0, n = router.subdomains.length; i < n; i++) {
-                        if (!state.hostname.startsWith(router.subdomains[i])) {
-                            continue;
-                        }
-
-                        match = router.subdomains[i];
-                        break;
-                    }
+    function match(subdomain?: string) {
+        if (router.subdomains !== null) {
+            for (let i = 0, n = router.subdomains.length; i < n; i++) {
+                if (!request.hostname.startsWith(router.subdomains[i])) {
+                    continue;
                 }
 
-                if (match === undefined) {
-                    match = '';
-                }
+                subdomain = router.subdomains[i];
+                break;
             }
+        }
 
-            return router.match(state.method, state.path, match);
-        },
+        return router.match(request.method, request.path, subdomain || '');
+    }
+
+    match.middleware = (subdomain?: string) => {
+        let state = reactive<ReturnType<typeof router.match>>({
+                parameters: undefined,
+                route: undefined
+            });
+
+        effect(() => {
+            let { parameters, route } = match(subdomain);
+
+            state.parameters = parameters;
+            state.route = route;
+        });
+
+        return (request: Request<T>, next: Next<T>) => {
+            return html`${() => {
+                if (state.route === undefined) {
+                    throw new Error(`Routing: route is undefined!`);
+                }
+
+                return root(() => {
+                    request.data.parameters = state.parameters;
+                    request.data.route = state.route;
+
+                    return next(request);
+                });
+            }}`;
+        };
+    };
+
+    return {
+        back,
+        forward,
+        match,
         middleware: (...middleware: Middleware<T>[]) => {
             let instance = pipeline(...middleware);
 
-            return ({ parameters, route }: ReturnType<typeof router.match>) => {
-                state.data.parameters = parameters;
-                state.data.route = route;
-
-                return instance(state);
-            };
+            return () => instance(request);
         },
         redirect: (path: string, values: unknown[] = []) => {
             if (path.indexOf('://') !== -1) {