@esportsplus/routing 0.0.19 → 0.0.20

package/build/middleware/dispatch.d.ts

@@ -1,3 +1,9 @@
-import { Request, Responder } from '../types';
-declare const _default: <R>(request: Request<R>) => import("../types").Response<R>;
+import { Request } from '../types';
+import { Router } from '../router';
+declare const _default: <R>(request: Request & {
+    data: {
+        parameters?: Record<PropertyKey, unknown> | undefined;
+        route?: import("../router/route").Route<R> | undefined;
+    };
+}) => import("../types").Response<R>;
 export default _default;

package/build/middleware/dispatch.js

@@ -1,6 +1,6 @@
 export default (request) => {
     let { route } = request.data;
-    if (!route) {
+    if (route === undefined) {
         throw new Error(`Routing: route dispatching failed, route is undefined!`);
     }
     return route.dispatcher(request);

package/build/middleware/index.d.ts

@@ -1,11 +1,13 @@
-import { Middleware, Request, Response } from '../types';
 import dispatch from './dispatch';
 import match from './match';
-declare const factory: <R>(...fns: Middleware<R>[]) => import("@esportsplus/middleware/build/types").Next<Request<R>, Response<R>>;
 declare const _default: {
-    dispatch: <R>(request: Request<R>) => Response<R>;
-    factory: <R_1>(...fns: Middleware<R_1>[]) => import("@esportsplus/middleware/build/types").Next<Request<R_1>, Response<R_1>>;
-    match: <R_2>(router: import("../router").Router<R_2>, subdomain?: string | undefined) => Middleware<R_2>;
+    dispatch: <R>(request: import("../types").Request & {
+        data: {
+            parameters?: Record<PropertyKey, unknown> | undefined;
+            route?: import("../router/route").Route<R> | undefined;
+        };
+    }) => import("../types").Response<R>;
+    match: <R_1>(router: import("../router").Router<R_1>, subdomain?: string | undefined) => import("../types").Middleware<R_1>;
 };
 export default _default;
-export { dispatch, factory, match };
+export { dispatch, match };

package/build/middleware/index.js

@@ -1,8 +1,4 @@
-import middleware from '@esportsplus/middleware';
 import dispatch from './dispatch';
 import match from './match';
-const factory = (...fns) => {
-    return middleware(...fns);
-};
-export default { dispatch, factory, match };
-export { dispatch, factory, match };
+export default { dispatch, match };
+export { dispatch, match };

package/build/router/route.js

@@ -1,4 +1,4 @@
-import { factory } from '../middleware';
+import middleware from '@esportsplus/middleware';
 class Route {
     dispatch = null;
     name = null;
@@ -15,7 +15,7 @@ class Route {
                 this.dispatch = (request) => this.responder(request);
             }
             else {
-                this.dispatch = factory(...this.stack, (request => this.responder(request)));
+                this.dispatch = middleware(...this.stack, (request => this.responder(request)));
             }
         }
         return this.dispatch;

package/build/spa.d.ts

@@ -1,14 +1,14 @@
-import { Request, Router } from './types';
+import { Middleware, Response, Router } from './types';
 declare function back(): void;
 declare function forward(): void;
 declare const _default: <R>(router: Router<R>) => {
     back: typeof back;
     forward: typeof forward;
+    middleware: (...fns: Middleware<R>[]) => () => Response<R>;
     redirect: (path: string, { state, values }: {
         state?: Record<PropertyKey, unknown> | undefined;
         values?: unknown[] | undefined;
     }) => void;
-    request: Request<R>;
     uri: (path: string, values?: unknown[]) => string;
 };
 export default _default;

package/build/spa.js

@@ -1,3 +1,6 @@
+import { reactive } from '@esportsplus/reactivity';
+import middleware from '@esportsplus/middleware';
+let cache = [], registered = false;
 function back() {
     window.history.back();
 }
@@ -11,7 +14,7 @@ function normalize(uri) {
     return uri;
 }
 function request() {
-    let { hash, hostname, href, origin, port, protocol } = new URL(window?.location?.href || ''), path = hash?.replace('#/', '/')?.split('?') || ['/', ''];
+    let { hash, hostname, href, origin, port, protocol } = new URL(window.location?.href || ''), path = hash ? hash.slice(1).split('?') : ['/', ''];
     return {
         data: {},
         href,
@@ -21,27 +24,38 @@ function request() {
         path: path[0],
         port,
         protocol,
-        query: Object.fromEntries((new URLSearchParams(path[1])).entries())
+        query: path[1] ? Object.fromEntries((new URLSearchParams(path[1])).entries()) : {}
     };
 }
-export default (router) => {
-    let state = request();
-    window.addEventListener('popstate', () => {
-        let values = request();
+function event() {
+    let values = request();
+    for (let i = 0, n = cache.length; i < n; i++) {
+        let state = cache[i];
         for (let key in values) {
             state[key] = values[key];
         }
-    });
+    }
+}
+export default (router) => {
+    let state = reactive(request());
+    cache.push(state);
+    if (!registered) {
+        registered = true;
+        window.addEventListener('popstate', event);
+    }
     return {
         back,
         forward,
+        middleware: (...fns) => {
+            let pipeline = middleware(...fns);
+            return () => pipeline(state);
+        },
         redirect: (path, { state, values }) => {
             if (path.startsWith('https://') || path.startsWith('http://')) {
                 return window.location.replace(path);
             }
             window.history.pushState((state || {}), '', normalize(router.uri(path, values || [])));
         },
-        request: state,
         uri: (path, values = []) => {
             return normalize(router.uri(path, values || []));
         }

package/build/types.d.ts

@@ -1,7 +1,7 @@
 import { Middleware as M, Next as N } from '@esportsplus/middleware';
 import { Route, Router } from './router';
-type Middleware<R> = M<Request<R>, Response<R>>;
-type Next<R> = N<Request<R>, Response<R>>;
+type Middleware<R> = M<Request, Response<R>>;
+type Next<R> = N<Request, Response<R>>;
 type Options<R> = {
     middleware?: Middleware<R>[];
     name?: string;
@@ -9,8 +9,8 @@ type Options<R> = {
     responder: Responder<R>;
     subdomain?: string;
 };
-type Request<R> = {
-    data: ReturnType<Router<R>['match']> & Record<PropertyKey, unknown>;
+type Request = {
+    data: Record<PropertyKey, unknown>;
     href: string;
     hostname: string;
     method: string;
@@ -21,6 +21,6 @@ type Request<R> = {
     query: Record<string, unknown>;
     subdomain?: string;
 };
-type Responder<R> = (request: Request<R>) => Response<R>;
+type Responder<R> = (request: Request) => Response<R>;
 type Response<R> = Promise<R> | R;
 export { Middleware, Next, Options, Request, Responder, Response, Route, Router };

package/package.json

@@ -1,7 +1,8 @@
 {
     "author": "ICJR",
     "dependencies": {
-        "@esportsplus/middleware": "^0.0.5"
+        "@esportsplus/middleware": "^0.0.5",
+        "@esportsplus/reactivity": "^0.0.30"
     },
     "devDependencies": {
         "@esportsplus/typescript": "^0.0.1"
@@ -16,5 +17,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.19"
+    "version": "0.0.20"
 }

package/src/middleware/dispatch.ts

@@ -1,10 +1,11 @@
-import { Request, Responder } from '~/types';
+import { Request } from '~/types';
+import { Router } from '~/router';
 
 
-export default <R>(request: Request<R>): ReturnType<Responder<R>> => {
+export default <R>(request: Request & { data: ReturnType<Router<R>['match']> }) => {
     let { route } = request.data;
 
-    if (!route) {
+    if (route === undefined) {
         throw new Error(`Routing: route dispatching failed, route is undefined!`);
     }
 

package/src/middleware/index.ts

@@ -1,13 +1,6 @@
-import { Middleware, Request, Response } from '~/types';
-import middleware from '@esportsplus/middleware';
 import dispatch from './dispatch';
 import match from './match';
 
 
-const factory = <R>(...fns: Middleware<R>[]) => {
-    return middleware<Request<R>, Response<R>>(...fns);
-};
-
-
-export default { dispatch, factory, match };
-export { dispatch, factory, match };
+export default { dispatch, match };
+export { dispatch, match };

package/src/router/route.ts

@@ -1,5 +1,5 @@
 import { Middleware, Next, Responder } from '~/types';
-import { factory } from '~/middleware';
+import middleware from '@esportsplus/middleware';
 
 
 class Route<R> {
@@ -22,7 +22,7 @@ class Route<R> {
                 this.dispatch = (request) => this.responder(request);
             }
             else {
-                this.dispatch = factory(...this.stack, (request => this.responder(request)));
+                this.dispatch = middleware(...this.stack, (request => this.responder(request)));
             }
         }
 

package/src/spa.ts

@@ -1,4 +1,10 @@
-import { Request, Router } from './types';
+import { reactive } from '@esportsplus/reactivity';
+import { Middleware, Request, Response, Router } from './types';
+import middleware from '@esportsplus/middleware';
+
+
+let cache: Request[] = [],
+    registered = false;
 
 
 function back() {
@@ -17,9 +23,9 @@ function normalize(uri: string) {
     return uri;
 }
 
-function request<R>(): Request<R> {
-    let { hash, hostname, href, origin, port, protocol } = new URL( window?.location?.href || '' ),
-        path = hash?.replace('#/', '/')?.split('?') || ['/', ''];
+function request(): Request {
+    let { hash, hostname, href, origin, port, protocol } = new URL( window.location?.href || '' ),
+        path = hash ? hash.slice(1).split('?') : ['/', ''];
 
     return {
         data: {},
@@ -30,26 +36,42 @@ function request<R>(): Request<R> {
         path: path[0],
         port,
         protocol,
-        query: Object.fromEntries( (new URLSearchParams(path[1])).entries() )
+        query: path[1] ? Object.fromEntries( (new URLSearchParams(path[1])).entries() ) : {}
     };
 }
 
+function event() {
+    let values = request();
 
-export default <R>(router: Router<R>) => {
-    let state = request<R>();
-
-    window.addEventListener('popstate', () => {
-        let values = request<R>();
+    for (let i = 0, n = cache.length; i < n; i++) {
+        let state = cache[i];
 
         for (let key in values) {
             // @ts-ignore
             state[key] = values[key];
         }
-    });
+    }
+}
+
+
+export default <R>(router: Router<R>) => {
+    let state = reactive( request() );
+
+    cache.push(state);
+
+    if (!registered) {
+        registered = true;
+        window.addEventListener('popstate', event);
+    }
 
     return {
         back,
         forward,
+        middleware: (...fns: Middleware<R>[]) => {
+            let pipeline = middleware<Request, Response<R>>(...fns);
+
+            return () => pipeline(state);
+        },
         redirect: (path: string, { state, values }: { state?: Record<PropertyKey, unknown>; values?: unknown[] }) => {
             if (path.startsWith('https://') || path.startsWith('http://')) {
                 return window.location.replace(path);
@@ -57,7 +79,6 @@ export default <R>(router: Router<R>) => {
 
             window.history.pushState( (state || {}), '', normalize(router.uri(path, values || [])) );
         },
-        request: state,
         uri: (path: string, values: unknown[] = []) => {
             return normalize( router.uri(path, values || []) );
         }

package/src/types.ts

@@ -2,9 +2,9 @@ import { Middleware as M, Next as N } from '@esportsplus/middleware';
 import { Route, Router } from './router';
 
 
-type Middleware<R> = M<Request<R>, Response<R>>;
+type Middleware<R> = M<Request, Response<R>>;
 
-type Next<R> = N<Request<R>, Response<R>>;
+type Next<R> = N<Request, Response<R>>;
 
 type Options<R> = {
     middleware?: Middleware<R>[];
@@ -14,8 +14,8 @@ type Options<R> = {
     subdomain?: string;
 };
 
-type Request<R> = {
-    data: ReturnType<Router<R>['match']> & Record<PropertyKey, unknown>;
+type Request = {
+    data: Record<PropertyKey, unknown>;
     href: string;
     hostname: string;
     method: string;
@@ -27,7 +27,7 @@ type Request<R> = {
     subdomain?: string;
 };
 
-type Responder<R> = (request: Request<R>) => Response<R>;
+type Responder<R> = (request: Request) => Response<R>;
 
 type Response<R> = Promise<R> | R;