preact-hashish-router 0.0.6 → 0.0.7

package/dist/A.d.ts

@@ -0,0 +1,5 @@
+import { AnchorHTMLAttributes, PropsWithChildren } from "preact/compat";
+export type AProps = PropsWithChildren & AnchorHTMLAttributes;
+export declare const A: import("preact").FunctionalComponent<import("preact/compat").PropsWithoutRef<AProps> & {
+    ref?: import("preact").Ref<HTMLAnchorElement>;
+}>;

package/dist/A.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { forwardRef } from "preact/compat";
+import { useCallback, useMemo } from "preact/hooks";
+import { useRouter } from "./useRouter";
+export const A = forwardRef(({ href, className, ...props }) => {
+    const router = useRouter();
+    const isActive = useMemo(() => {
+        return router.path === href;
+    }, [router.path, href]);
+    const browserRouterClickAnchorHandler = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        router.go(href.toString());
+    }, [router.type]);
+    return (_jsx("a", { href: router.type === "browser" ? href : `#${href}`, className: className, "data-route-active": isActive, ...props, onClick: router.type === "browser" ? browserRouterClickAnchorHandler : undefined }));
+});

package/dist/ErrorRoute.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from "preact/compat";
+export declare function ErrorRoute(props: PropsWithChildren<{
+    lazy?: boolean;
+}>): import("preact").ComponentChildren;

package/dist/ErrorRoute.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { Suspense } from "preact/compat";
+import { useRouter } from "./useRouter";
+export function ErrorRoute(props) {
+    const router = useRouter();
+    if (router.itMatch)
+        return null;
+    if (props.lazy) {
+        return _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: props.children });
+    }
+    return props.children;
+}

package/dist/Route.d.ts

@@ -0,0 +1,10 @@
+import { VNode } from "preact";
+import { PropsWithChildren } from "preact/compat";
+type RouteProps = PropsWithChildren & {
+    path: string;
+    exact?: boolean;
+    lazy?: boolean;
+    fallback?: VNode;
+};
+export declare function Route(props: RouteProps): import("preact").ComponentChildren;
+export {};

package/dist/Route.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { Suspense } from "preact/compat";
+import { useRouter } from "./useRouter";
+export function Route(props) {
+    const router = useRouter();
+    if (props.exact === undefined) {
+        props.exact = true;
+    }
+    if (props.exact && router.path !== props.path) {
+        return null;
+    }
+    else if (!router.path.includes(props.path)) {
+        return null;
+    }
+    router.setItMatch(true);
+    if (props.lazy) {
+        return _jsx(Suspense, { fallback: props.fallback ?? _jsx("div", { children: "Loading..." }), children: props.children });
+    }
+    return props.children;
+}

package/dist/Router.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "preact/compat";
+import { RouterContext } from "./context";
+type RouterProps = PropsWithChildren & {
+    type: RouterContext["type"];
+};
+export declare const Router: (props: RouterProps) => import("preact").JSX.Element;
+export {};

package/dist/Router.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { router_context } from "./context";
+const get_hash_route = () => location.hash.slice(1) || "/";
+export const Router = (props) => {
+    const [path, setPath] = useState(get_hash_route());
+    const [query, setQuery] = useState("");
+    const [itMatch, setItMatch] = useState(false);
+    const router_type = useMemo(() => {
+        return props.type;
+    }, [props.type]);
+    const hashEffectHandler = {
+        listener: () => {
+            const [path, query] = get_hash_route().split("?");
+            setQuery(query || "");
+            setPath(path);
+            setItMatch(false);
+        },
+        effect: () => {
+            if (location.hash === "")
+                location.hash = "/";
+            window.addEventListener("hashchange", hashEffectHandler.listener);
+        },
+        cleanUp: () => {
+            window.removeEventListener("hashchange", hashEffectHandler.listener);
+        },
+    };
+    const browserEffectHandler = {
+        listener: () => {
+            setPath(location.pathname);
+            setQuery(location.search || "");
+            setItMatch(false);
+        },
+        effect: () => {
+            window.addEventListener("popstate", browserEffectHandler.listener);
+        },
+        cleanUp: () => {
+            window.removeEventListener("hashchange", browserEffectHandler.listener);
+        },
+    };
+    useEffect(() => {
+        if (router_type !== "hash")
+            return;
+        const [path, query] = get_hash_route().split("?");
+        setQuery(query || "");
+        setPath(path);
+        hashEffectHandler.effect();
+        return () => hashEffectHandler.cleanUp();
+    }, []);
+    useEffect(() => {
+        if (router_type !== "browser")
+            return;
+        setPath(location.pathname);
+        setQuery(location.search || "");
+        browserEffectHandler.effect();
+        return () => browserEffectHandler.cleanUp();
+    }, []);
+    const handlerManualRouteChange = (r) => {
+        setPath(r);
+        setItMatch(false);
+        if (router_type === "hash") {
+            location.hash = r;
+            return;
+        }
+        if (router_type === "browser") {
+            history.pushState(null, "", new URL(r, location.origin));
+            return;
+        }
+    };
+    const ProviderValue = useMemo(() => {
+        return { path, go: handlerManualRouteChange, itMatch, setItMatch, type: router_type, query };
+    }, [path, handlerManualRouteChange, itMatch, setItMatch, router_type]);
+    return _jsx(router_context.Provider, { value: ProviderValue, children: props.children });
+};

package/dist/RouterErrorBoundary.d.ts

@@ -0,0 +1,14 @@
+import { Component, VNode } from "preact";
+import { PropsWithChildren } from "preact/compat";
+export declare class RouterErrorBoundary extends Component<PropsWithChildren & {
+    fallback?: VNode;
+}> {
+    state: {
+        error: any;
+    };
+    static getDerivedStateFromError(error: any): {
+        error: any;
+    };
+    componentDidCatch(error: any): void;
+    render(): import("preact").ComponentChildren;
+}

package/dist/RouterErrorBoundary.js

@@ -0,0 +1,23 @@
+import { jsxs as _jsxs } from "preact/jsx-runtime";
+import { Component } from "preact";
+export class RouterErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error: error.message };
+    }
+    componentDidCatch(error) {
+        console.error(error);
+        this.setState({ error: error.message });
+    }
+    render() {
+        if (this.state.error) {
+            if (this.props.fallback)
+                return this.props.fallback;
+            return _jsxs("p", { children: ["Oh no! We ran into an error: ", this.state.error] });
+        }
+        return this.props.children;
+    }
+}

package/dist/context.d.ts

@@ -0,0 +1,9 @@
+export type RouterContext = {
+    path: string;
+    query: string;
+    go: (r: string) => void;
+    itMatch: boolean;
+    setItMatch: (r: boolean) => void;
+    type: "hash" | "browser";
+};
+export declare const router_context: import("preact").Context<RouterContext>;

package/dist/context.js

@@ -0,0 +1,2 @@
+import { createContext } from "preact";
+export const router_context = createContext(null);

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./A";
+export * from "./ErrorRoute";
+export * from "./Route";
+export * from "./Router";
+export * from "./RouterErrorBoundary";
+export * from "./useRouter";

package/dist/index.js

@@ -0,0 +1,6 @@
+export * from "./A";
+export * from "./ErrorRoute";
+export * from "./Route";
+export * from "./Router";
+export * from "./RouterErrorBoundary";
+export * from "./useRouter";

package/dist/useRouter.d.ts

@@ -0,0 +1 @@
+export declare function useRouter(): import("./context").RouterContext;

package/dist/useRouter.js

@@ -0,0 +1,9 @@
+import { useContext } from "preact/hooks";
+import { router_context } from "./context";
+export function useRouter() {
+    const context = useContext(router_context);
+    if (!context) {
+        throw new Error("useRoute should be used within a Router");
+    }
+    return context;
+}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "preact-hashish-router",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
+  "module": "dist/index.js",
   "description": "A simple router for preact",
   "scripts": {
     "build": "tsc -p ./tsconfig.json",
@@ -12,7 +13,7 @@
     "push-major": "npm version major && git push"
   },
   "exports": {
-    ".": "./index.ts"
+    ".": "./dist/index.js"
   },
   "peerDependencies": {
     "preact": "^10.26.2"
@@ -29,6 +30,7 @@
   "author": "LiasCode",
   "devDependencies": {
     "@preact/preset-vite": "^2.10.1",
+    "preact-hashish-router": "^0.0.6",
     "prettier": "^3.5.1",
     "prettier-plugin-organize-imports": "^4.1.0",
     "typescript": "^5.7.3",
@@ -36,6 +38,7 @@
   },
   "files": [
     "src",
+    "dist",
     "LICENSE",
     "package.json",
     "README.md"