spinning-router 0.0.1

package/dist/Location.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Location: import("react").Context<string>;

package/dist/Location.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Location = void 0;
+const react_1 = require("react");
+exports.Location = (0, react_1.createContext)("");

package/dist/Routes.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export type AsyncComponent = (arg: any) => Promise<JSX.Element>;
+export type Route = {
+    path: string;
+    routes?: Routes;
+    component?: AsyncComponent;
+};
+export type Routes = Route[];

package/dist/Routes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/SpinningRouter.d.ts

@@ -0,0 +1,16 @@
+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<{
+        error: any;
+    }>;
+    notFoundPage?: React.ComponentType;
+    loadingIndicator?: React.ComponentType;
+}>;
+export {};

package/dist/SpinningRouter.js

@@ -0,0 +1,110 @@
+"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.SpinningRouter = exports.matchRoute = exports.doMatchRoute = 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 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 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);
+            }
+            else {
+                setElement(notFoundPage);
+            }
+        }
+        catch (error) {
+            console.log(error);
+            setElement(errorPage({ error }));
+        }
+        finally {
+            setOverlay(undefined);
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        invokeRoute(hash);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const updateHash = () => __awaiter(void 0, void 0, void 0, function* () {
+            setHash(location.hash.substring(1));
+            yield invokeRoute(location.hash.substring(1));
+        });
+        window.addEventListener("hashchange", updateHash);
+        window.addEventListener("softRefresh", updateHash);
+        return () => {
+            window.removeEventListener("hashchange", updateHash);
+            window.removeEventListener("softRefresh", updateHash);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(Location_1.Location.Provider, Object.assign({ value: hash }, { children: [element, overlay] })));
+};
+exports.SpinningRouter = SpinningRouter;

package/dist/components/DefaultErrorPage.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const DefaultErrorPage: React.FC<{
+    error: any;
+}>;

package/dist/components/DefaultErrorPage.js

@@ -0,0 +1,6 @@
+"use strict";
+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] });
+exports.DefaultErrorPage = DefaultErrorPage;

package/dist/components/DefaultLoadingIndicator.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DefaultLoadingIndicator: React.FC;

package/dist/components/DefaultLoadingIndicator.js

@@ -0,0 +1,12 @@
+"use strict";
+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: {
+        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" })] })) })) })));
+exports.DefaultLoadingIndicator = DefaultLoadingIndicator;

package/dist/components/DefaultNotFoundPage.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DefaultNotFoundPage: React.FC;

package/dist/components/DefaultNotFoundPage.js

@@ -0,0 +1,6 @@
+"use strict";
+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" });
+exports.DefaultNotFoundPage = DefaultNotFoundPage;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { link } from "./link";
+export { navigate } from "./navigate";
+export { AsyncComponent, Route, Routes } from "./Routes";
+export { softRefresh } from "./softRefresh";
+export { SpinningRouter } from "./SpinningRouter";

package/dist/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinningRouter = exports.softRefresh = exports.navigate = exports.link = void 0;
+var link_1 = require("./link");
+Object.defineProperty(exports, "link", { enumerable: true, get: function () { return link_1.link; } });
+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; } });

package/dist/link.d.ts

@@ -0,0 +1 @@
+export declare const link: (strings: TemplateStringsArray, ...values: any[]) => string;

package/dist/link.js

@@ -0,0 +1,22 @@
+"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)}`;
+        }
+        else {
+            return `#${s.substring(1)}`;
+        }
+    }
+    if (s.startsWith("/")) {
+        return "#" + s;
+    }
+    else {
+        return "#/" + s;
+    }
+};
+exports.link = link;

package/dist/navigate.d.ts

@@ -0,0 +1 @@
+export declare const navigate: (strings: TemplateStringsArray, ...values: any[]) => void;

package/dist/navigate.js

@@ -0,0 +1,8 @@
+"use strict";
+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);
+};
+exports.navigate = navigate;

package/dist/softRefresh.d.ts

@@ -0,0 +1 @@
+export declare const softRefresh: () => void;

package/dist/softRefresh.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.softRefresh = void 0;
+const softRefresh = () => {
+    window.dispatchEvent(new Event("softRefresh"));
+};
+exports.softRefresh = softRefresh;

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "spinning-router",
+  "version": "0.0.1",
+  "description": "n/a",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "UNLICENSED",
+  "files": [
+    "/dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0 || >19"
+  }
+}