spinning-router 0.0.1 → 0.0.3

package/dist/Location.d.ts

@@ -1,2 +1,8 @@
-/// <reference types="react" />
-export declare const Location: import("react").Context<string>;
+export type LocationType = {
+    path: string;
+    match: string;
+    parameters: {
+        [key: string]: string;
+    };
+};
+export declare const Location: import("react").Context<LocationType>;

package/dist/Location.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Location = void 0;
 const react_1 = require("react");
-exports.Location = (0, react_1.createContext)("");
+exports.Location = (0, react_1.createContext)({ path: "", match: "", parameters: {} });

package/dist/Routes.d.ts

@@ -1,8 +1,23 @@
-/// <reference types="react" />
-export type AsyncComponent = (arg: any) => Promise<JSX.Element>;
+export type AsyncComponent = (parameters: any) => Promise<JSX.Element>;
 export type Route = {
     path: string;
     routes?: Routes;
     component?: AsyncComponent;
 };
-export type Routes = Route[];
+export type Routes = readonly Route[];
+export type AllPaths<R extends Routes, Prefix extends string = ""> = R extends readonly [infer First extends Route, ...infer Rest extends readonly Route[]] ? (First extends {
+    path: infer P extends string;
+    routes?: infer S;
+} ? `${Prefix}${P}` | (S extends Routes ? AllPaths<S, `${Prefix}${P}`> : never) : never) | AllPaths<Rest, Prefix> : never;
+export interface Register {
+}
+export type Path = AllPaths<Register extends {
+    routes: infer Routes;
+} ? Routes : never>;
+type SplitPathSegments<S extends string, Delimiter extends string = "/", Parts extends string[] = []> = S extends `${infer Head}${Delimiter}${infer Tail}` ? SplitPathSegments<Tail, Delimiter, [...Parts, Head]> : [...Parts, S];
+type FilterColonParams<T> = T extends `:${infer Param}` ? Param : never;
+type PathParameterName<P extends Path> = FilterColonParams<SplitPathSegments<P>[number]>;
+export type PathParameters<P extends Path> = {
+    [key in PathParameterName<P>]?: string | number;
+};
+export {};

package/dist/SpinningRouter.d.ts

@@ -1,10 +1,5 @@
 import React from "react";
 import { Routes } from "./Routes";
-type Parameters = {
-    [key: string]: any;
-};
-export declare const doMatchRoute: (routes: Routes, path: string[], parentParameters: Parameters) => Promise<JSX.Element>;
-export declare const matchRoute: (routes: Routes, path: string) => Promise<JSX.Element | undefined>;
 export declare const SpinningRouter: React.FC<{
     routes: Routes;
     errorPage?: React.FC<{
@@ -13,4 +8,3 @@ export declare const SpinningRouter: React.FC<{
     notFoundPage?: React.ComponentType;
     loadingIndicator?: React.ComponentType;
 }>;
-export {};

package/dist/SpinningRouter.js

@@ -9,82 +9,37 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpinningRouter = exports.matchRoute = exports.doMatchRoute = void 0;
+exports.SpinningRouter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Location_1 = require("./Location");
 const DefaultLoadingIndicator_1 = require("./components/DefaultLoadingIndicator");
 const DefaultErrorPage_1 = require("./components/DefaultErrorPage");
 const DefaultNotFoundPage_1 = require("./components/DefaultNotFoundPage");
-const doMatchRoute = (routes, path, parentParameters) => __awaiter(void 0, void 0, void 0, function* () {
-    for (let r of routes) {
-        const rPath = r.path.split("/").filter(e => e != "");
-        if ((r.routes && rPath.length <= path.length) || rPath.length == path.length) {
-            let parameters = Object.assign({}, parentParameters);
-            let match = true;
-            for (let i in rPath) {
-                if (rPath[i].startsWith(":")) {
-                    parameters[rPath[i].substring(1)] = path[i];
-                }
-                else {
-                    if (rPath[i] != path[i]) {
-                        match = false;
-                    }
-                }
-            }
-            if (match) {
-                let children = undefined;
-                if (r.routes) {
-                    children = yield (0, exports.doMatchRoute)(r.routes, path.slice(rPath.length), parameters);
-                }
-                if (r.component) {
-                    parameters["children"] = children;
-                    return r.component(parameters);
-                }
-                else {
-                    if (children) {
-                        return children;
-                    }
-                }
-            }
-        }
-    }
-    throw "Not Found";
-});
-exports.doMatchRoute = doMatchRoute;
-const matchRoute = (routes, path) => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-        return (0, exports.doMatchRoute)(routes, path.split("/").filter(e => e != ""), {});
-    }
-    catch (error) {
-        if (error == "Not Found") {
-            return undefined;
-        }
-        else {
-            throw error;
-        }
-    }
-});
-exports.matchRoute = matchRoute;
+const matchRoute_1 = require("./matchRoute");
 const SpinningRouter = ({ routes, errorPage = DefaultErrorPage_1.DefaultErrorPage, notFoundPage = DefaultNotFoundPage_1.DefaultNotFoundPage, loadingIndicator = DefaultLoadingIndicator_1.DefaultLoadingIndicator }) => {
     const [hash, setHash] = (0, react_1.useState)(() => location.hash.substring(1));
     const [element, setElement] = (0, react_1.useState)(undefined);
     const [overlay, setOverlay] = (0, react_1.useState)(undefined);
+    const [parameters, setParameters] = (0, react_1.useState)({});
     const invokeRoute = (path) => __awaiter(void 0, void 0, void 0, function* () {
         setOverlay(loadingIndicator);
         try {
-            const element = yield (0, exports.matchRoute)(routes, path);
-            setElement(element);
-            if (element) {
-                setElement(element);
+            const match = yield (0, matchRoute_1.matchRoute)(routes, path);
+            if (match) {
+                setElement(match.element);
+                setParameters(match.parameters);
             }
             else {
                 setElement(notFoundPage);
+                setParameters({});
             }
+            window.scrollTo(0, 0);
         }
         catch (error) {
-            console.log(error);
+            window.scrollTo(0, 0);
             setElement(errorPage({ error }));
+            setParameters({});
         }
         finally {
             setOverlay(undefined);
@@ -105,6 +60,6 @@ const SpinningRouter = ({ routes, errorPage = DefaultErrorPage_1.DefaultErrorPag
             window.removeEventListener("softRefresh", updateHash);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(Location_1.Location.Provider, Object.assign({ value: hash }, { children: [element, overlay] })));
+    return ((0, jsx_runtime_1.jsxs)(Location_1.Location.Provider, { value: { path: hash, match: "", parameters }, children: [element, overlay] }));
 };
 exports.SpinningRouter = SpinningRouter;

package/dist/components/DefaultErrorPage.js

@@ -2,5 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultErrorPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DefaultErrorPage = ({ error }) => (0, jsx_runtime_1.jsxs)("p", { children: ["Unhandled error: ", "" + error] });
+const DefaultErrorPage = ({ error }) => {
+    if (error && error.stack && error.message) {
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { children: error.message }), (0, jsx_runtime_1.jsx)("pre", { children: error.stack })] }));
+    }
+    else {
+        return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h4", { children: "" + error }) }));
+    }
+};
 exports.DefaultErrorPage = DefaultErrorPage;

package/dist/components/DefaultLoadingIndicator.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultLoadingIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DefaultLoadingIndicator = () => ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
+const DefaultLoadingIndicator = () => ((0, jsx_runtime_1.jsx)("div", { style: {
         position: "fixed",
         top: "40%",
         left: "50%",
         transform: "translate(-50%, -50%)",
         opacity: 1
-    } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "200", height: "200", viewBox: "0 0 50 50" }, { children: (0, jsx_runtime_1.jsxs)("path", Object.assign({ fill: "#000000", d: "M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" }, { children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", values: "0; 0.1; 1.0", dur: "0.5s" }), (0, jsx_runtime_1.jsx)("animateTransform", { attributeType: "xml", attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "1s", repeatCount: "indefinite" })] })) })) })));
+    }, children: (0, jsx_runtime_1.jsx)("svg", { width: "200", height: "200", viewBox: "0 0 50 50", children: (0, jsx_runtime_1.jsxs)("path", { fill: "#000000", d: "M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "opacity", values: "0; 0.1; 0.5", dur: "2s" }), (0, jsx_runtime_1.jsx)("animateTransform", { attributeType: "xml", attributeName: "transform", type: "rotate", from: "0 25 25", to: "360 25 25", dur: "1s", repeatCount: "indefinite" })] }) }) }));
 exports.DefaultLoadingIndicator = DefaultLoadingIndicator;

package/dist/components/DefaultNotFoundPage.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultNotFoundPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DefaultNotFoundPage = () => (0, jsx_runtime_1.jsx)("p", { children: "Not found" });
+const DefaultNotFoundPage = () => (0, jsx_runtime_1.jsx)("h4", { children: "Not found" });
 exports.DefaultNotFoundPage = DefaultNotFoundPage;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { link } from "./link";
+export { unsafeLink } from "./link";
 export { navigate } from "./navigate";
-export { AsyncComponent, Route, Routes } from "./Routes";
+export { AsyncComponent, Route, Routes, Path, Register } from "./Routes";
 export { softRefresh } from "./softRefresh";
 export { SpinningRouter } from "./SpinningRouter";
+export { Location } from "./Location";

package/dist/index.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpinningRouter = exports.softRefresh = exports.navigate = exports.link = void 0;
+exports.Location = exports.SpinningRouter = exports.softRefresh = exports.navigate = exports.unsafeLink = exports.link = void 0;
 var link_1 = require("./link");
 Object.defineProperty(exports, "link", { enumerable: true, get: function () { return link_1.link; } });
+var link_2 = require("./link");
+Object.defineProperty(exports, "unsafeLink", { enumerable: true, get: function () { return link_2.unsafeLink; } });
 var navigate_1 = require("./navigate");
 Object.defineProperty(exports, "navigate", { enumerable: true, get: function () { return navigate_1.navigate; } });
 var softRefresh_1 = require("./softRefresh");
 Object.defineProperty(exports, "softRefresh", { enumerable: true, get: function () { return softRefresh_1.softRefresh; } });
 var SpinningRouter_1 = require("./SpinningRouter");
 Object.defineProperty(exports, "SpinningRouter", { enumerable: true, get: function () { return SpinningRouter_1.SpinningRouter; } });
+var Location_1 = require("./Location");
+Object.defineProperty(exports, "Location", { enumerable: true, get: function () { return Location_1.Location; } });

package/dist/link.d.ts

@@ -1 +1,3 @@
-export declare const link: (strings: TemplateStringsArray, ...values: any[]) => string;
+import { Path, PathParameters } from "./Routes";
+export declare const unsafeLink: (path: string, values?: any) => string;
+export declare const link: <P extends Path>(path: P, values?: PathParameters<P>) => string;

package/dist/link.js

@@ -1,22 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.link = void 0;
-const link = (strings, ...values) => {
-    const s = String.raw({ raw: strings }, ...values);
-    if (s.startsWith("~")) {
-        const id = document.location.hash.split("/")[1];
-        if (id) {
-            return `#/${id}${s.substring(1)}`;
+exports.link = exports.unsafeLink = void 0;
+const Location_1 = require("./Location");
+const react_1 = require("react");
+const unsafeLink = (path, values) => {
+    let result = [];
+    for (let part of path.split("/")) {
+        if (part.startsWith(":")) {
+            const key = part.substring(1);
+            let value = values && values[key] !== undefined ? values[key] : (0, react_1.useContext)(Location_1.Location).parameters[key];
+            result.push(encodeURIComponent(value));
         }
         else {
-            return `#${s.substring(1)}`;
+            result.push(part);
         }
     }
-    if (s.startsWith("/")) {
-        return "#" + s;
-    }
-    else {
-        return "#/" + s;
-    }
+    return "#" + result.join("/");
 };
-exports.link = link;
+exports.unsafeLink = unsafeLink;
+exports.link = exports.unsafeLink;

package/dist/matchRoute.d.ts

@@ -0,0 +1,10 @@
+import { Routes } from "./Routes";
+type Match = {
+    path: string;
+    parameters: {
+        [key: string]: string;
+    };
+    element: JSX.Element;
+};
+export declare const matchRoute: (routes: Routes, query: string) => Promise<Match | undefined>;
+export {};

package/dist/matchRoute.js

@@ -0,0 +1,45 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchRoute = void 0;
+const doMatchRoute = (routes, querySplitted, parameters) => __awaiter(void 0, void 0, void 0, function* () {
+    for (let r of routes) {
+        const pathSplitted = r.path.split("/").filter(e => e != "");
+        if ((r.routes && pathSplitted.length <= querySplitted.length) || pathSplitted.length == querySplitted.length) {
+            if (pathSplitted.every((e, i) => e.startsWith(":") || e == querySplitted[i])) {
+                parameters = Object.assign(Object.assign({}, parameters), Object.fromEntries(pathSplitted
+                    .map((pathPart, i) => ({ pathPart, queryPath: querySplitted[i] }))
+                    .filter(({ pathPart }) => pathPart.startsWith(":"))
+                    .map(({ pathPart, queryPath }) => [pathPart.substring(1), decodeURIComponent(queryPath)])));
+                if (r.routes) {
+                    let subRoute = yield doMatchRoute(r.routes, querySplitted.slice(pathSplitted.length), parameters);
+                    return {
+                        element: r.component ? yield r.component(Object.assign(Object.assign({}, parameters), { children: subRoute.element })) : subRoute.element,
+                        path: r.path + "/" + subRoute.path,
+                        parameters: subRoute.parameters
+                    };
+                }
+                else {
+                    return {
+                        element: r.component ? yield r.component(Object.assign({}, parameters)) : undefined,
+                        path: r.path,
+                        parameters
+                    };
+                }
+            }
+        }
+    }
+    return undefined;
+});
+const matchRoute = (routes, query) => __awaiter(void 0, void 0, void 0, function* () {
+    return yield doMatchRoute(routes, query.split("/").filter(e => e != ""), {});
+});
+exports.matchRoute = matchRoute;

package/dist/navigate.d.ts

@@ -1 +1,2 @@
-export declare const navigate: (strings: TemplateStringsArray, ...values: any[]) => void;
+import { Path, PathParameters } from "./Routes";
+export declare const navigate: <P extends Path>(path: P, values?: PathParameters<P>) => void;

package/dist/navigate.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.navigate = void 0;
 const link_1 = require("./link");
-const navigate = (strings, ...values) => {
-    window.location.hash = (0, link_1.link)(strings, ...values);
+const navigate = (path, values) => {
+    window.location.hash = (0, link_1.link)(path, values);
 };
 exports.navigate = navigate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spinning-router",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "n/a",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,4 +13,4 @@
   "peerDependencies": {
     "react": "^18.2.0 || >19"
   }
-}
+}