preact-hashish-router 0.0.17 → 0.1.0

package/README.md

@@ -7,7 +7,7 @@
 - Error handling integration with `ErrorRoute`.
 - Fully typed.
 - Ultra lightweight.
-- No external dependencies.
+- Minimal external dependencies.
 
 ## Installation
 
@@ -22,16 +22,16 @@ npm install preact-hashish-router@latest
 First, ensure your application is wrapped within the router context. This will allow you to access routes and related functions.
 
 ```tsx
-import { ErrorRoute, Route, Router, RouterErrorBoundary } from "preact-hashish-router";
-import _404 from "./routes/404";
+import { Route, Router, RouterErrorBoundary } from "preact-hashish-router";
 import AboutPage from "./routes/About";
 import HomePage from "./routes/Home";
 import ProductPage from "./routes/Product";
 
 export default function App() {
   return (
-    <Router type="hash"> {/* <-- or browser */}
-      <RouterErrorBoundary>
+    // or hash for hash-based routing
+    <RouterErrorBoundary>
+      <Router type="browser">
         <Route path="/">
           <HomePage />
         </Route>
@@ -43,12 +43,8 @@ export default function App() {
         <Route path="/product/:id">
           <ProductPage />
         </Route>
-
-        <ErrorRoute>
-          <_404 />
-        </ErrorRoute>
-      </RouterErrorBoundary>
-    </Router>
+      </Router>
+    </RouterErrorBoundary>
   );
 }
 ```
@@ -61,10 +57,10 @@ The `useRouter` hook gives you access to the router context to programmatically
 import { useRouter } from "preact-hashish-router";
 
 function HomePage() {
-  const router = useRouter();
+  const { go, params, path, searchParams } = useRouter();
 
   function goToAbout() {
-    router.go("/about");
+    go("/about");
   }
 
   return (
@@ -93,26 +89,6 @@ export default function Header() {
 }
 ```
 
-### `<Redirect />` Component
-
-```tsx
-import { Redirect } from "preact-hashish-router";
-
-export default function ProductPage() {
-  return (
-    <>
-      <header>
-        <nav>
-          <A href="/">Home</A>
-          <A href="/about">About</A>
-        </nav>
-      </header>
-      <Redirect to="/" />
-    </>
-  );
-}
-```
-
 ## Development
 
 If you have any improvements or find any issues, feel free to contribute or open an issue in the associated repository.

package/dist/A.d.ts

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

package/dist/A.js

@@ -1,16 +1,13 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { forwardRef } from "preact/compat";
-import { useMemo } from "preact/hooks";
-import { useInternalRouter } from "./useInternalRouter";
-export const A = forwardRef(({ href, className, ...props }) => {
-    const router = useInternalRouter();
-    const isActive = useMemo(() => router.path === href?.split("?")[0], [router.path, href]);
-    const browserRouterClickAnchorHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (!href)
-            return;
-        router.go(href.toString());
-    };
-    return (_jsx("a", { href: router.type === "browser" ? href : `#${href}`, className: className, "data-route-active": isActive, ...props, onClick: router.type === "browser" ? browserRouterClickAnchorHandler : undefined }));
+import { useHashisherContext } from "./context";
+export const A = forwardRef(({ href, ...props }, forwardedRef) => {
+    const { go } = useHashisherContext();
+    if (!href) {
+        throw new Error("A: href must be defined");
+    }
+    return (_jsx("a", { ref: forwardedRef, href: href, onClick: (event) => {
+            event.preventDefault();
+            go(href);
+        }, ...props }));
 });

package/dist/RenderMatchedRoute.d.ts

@@ -0,0 +1,3 @@
+import { VNode } from "preact";
+export declare const RenderMatchedRoute: () => VNode<any>;
+export declare const set_not_found_element: (el: VNode<any>) => void;

package/dist/RenderMatchedRoute.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { Suspense } from "preact/compat";
+import { useHashisherContext } from "./context";
+export const RenderMatchedRoute = () => {
+    const { active_route_data } = useHashisherContext();
+    if (!active_route_data)
+        return not_found_element;
+    if (active_route_data.component === null) {
+        return not_found_element;
+    }
+    if (active_route_data.lazy) {
+        return _jsx(Suspense, { fallback: active_route_data.fallback, children: active_route_data.component });
+    }
+    return active_route_data.component;
+};
+let not_found_element = _jsx("div", { children: "404 Not Found" });
+export const set_not_found_element = (el) => {
+    not_found_element = el;
+};

package/dist/Route.d.ts

@@ -1,9 +1,17 @@
 import { VNode } from "preact";
-import { PropsWithChildren } from "preact/compat";
-export type RouteProps = PropsWithChildren & {
+export type RouteProps = {
+    /** The route path matcher
+     *  @example "/"
+     *  "/product/:id"
+     *  "/paper/*"
+     *  "/docs/**"
+     */
     path: string;
-    exact?: boolean;
+    /** The node that will be rendered if match */
+    element: VNode<any>;
+    /** Shoud be wrapped in a \<Suspense /> tag */
     lazy?: boolean;
+    /** Fallback to display when the element is loading when lazy is true */
     fallback?: VNode;
 };
-export declare function Route(props: RouteProps): import("preact").ComponentChildren;
+export declare function Route(props: RouteProps): import("preact").JSX.Element;

package/dist/Route.js

@@ -1,31 +1,6 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { Suspense, useLayoutEffect, useState } from "preact/compat";
-import { matchRoute } from "./match";
-import { useInternalRouter } from "./useInternalRouter";
+import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
+import { add_route_to_matcher } from "./router/matcher";
 export function Route(props) {
-    const router = useInternalRouter();
-    const [render, setRender] = useState(false);
-    useLayoutEffect(() => {
-        setRender(false);
-        if (props.exact === undefined) {
-            props.exact = false;
-        }
-        if (props.exact === true && router.path !== props.path) {
-            return;
-        }
-        const matches = matchRoute(router.path || "/", props.path);
-        if (props.exact === false && matches === undefined) {
-            return;
-        }
-        router.setParams(matches?.params || {});
-        router.setRest(matches?.rest);
-        router.setItMatch(true);
-        setRender(true);
-    }, [router.path]);
-    if (!render)
-        return null;
-    if (props.lazy) {
-        return _jsx(Suspense, { fallback: props.fallback ?? _jsx("div", { children: "Loading..." }), children: props.children });
-    }
-    return props.children;
+    add_route_to_matcher(props.path, props);
+    return _jsx(_Fragment, {});
 }

package/dist/Router.d.ts

@@ -1,16 +1,9 @@
+import { VNode } from "preact";
 import { PropsWithChildren } from "preact/compat";
-import { RouterContext } from "./context";
-type RouterProps = PropsWithChildren & {
-    type: RouterContext["type"];
-    /**
-     * Only for `hash` routers.
-     *
-     * Decide if the initial pathname will be rewrite as the initial hash.
-     *
-     * `Caution`: This will replace the initial url hash
-     * @default false
-     */
-    redirect_path_to_hash?: boolean;
-};
+export type RouterProps = PropsWithChildren<{
+    type: "browser";
+}>;
 export declare const Router: (props: RouterProps) => import("preact").JSX.Element;
-export {};
+export declare const NotFound: (props: {
+    element: VNode<any>;
+}) => import("preact").JSX.Element;

package/dist/Router.js

@@ -1,101 +1,66 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { useLayoutEffect, useMemo, useState } from "preact/hooks";
-import { router_context } from "./context";
-const get_hash_route = () => location.hash.slice(1) || "/";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useCallback, useLayoutEffect, useState } from "preact/hooks";
+import { findRoute } from "rou3";
+import { parseURL } from "ufo";
+import { HashisherContext } from "./context";
+import { RenderMatchedRoute, set_not_found_element } from "./RenderMatchedRoute";
+import { Matcher } from "./router/matcher";
 export const Router = (props) => {
-    const [path, setPath] = useState("");
-    const [query, setQuery] = useState("");
-    const [params, setParams] = useState({});
-    const [rest, setRest] = useState("");
-    const [itMatch, setItMatch] = useState(false);
-    const router_type = useMemo(() => {
-        return props.type;
-    }, [props.type]);
-    const hashEffectHandler = {
-        listener: () => {
-            const [newPath, query] = get_hash_route().split("?");
-            setQuery(query || "");
-            setPath(newPath);
-            if (newPath !== path) {
-                setItMatch(false);
+    const [active_path, set_active_path] = useState(() => {
+        if (typeof window !== "undefined")
+            return window.location.pathname;
+        return null;
+    });
+    const [params, setParams] = useState(undefined);
+    const [searchParams, setSearchParams] = useState(new URLSearchParams());
+    const [active_route_data, set_active_route_data] = useState(null);
+    const execute_path_change = useCallback((raw_path) => {
+        const url = parseURL(window.location.href);
+        const newPath = raw_path === null ? url.pathname : raw_path;
+        const route_data = findRoute(Matcher, undefined, newPath);
+        if (!route_data) {
+            set_active_path(newPath);
+            setSearchParams(new URLSearchParams(url.search));
+            set_active_route_data(null);
+            setParams(undefined);
+            if (props.type === "browser") {
+                window.history.pushState(null, "", newPath);
             }
-        },
-        effect: () => {
-            window.addEventListener("hashchange", hashEffectHandler.listener);
-        },
-        cleanUp: () => {
-            window.removeEventListener("hashchange", hashEffectHandler.listener);
-        },
-    };
-    const browserEffectHandler = {
-        listener: () => {
-            setPath(location.pathname);
-            setQuery(location.search.split("?")[1] || "");
-            if (path !== location.pathname) {
-                setItMatch(false);
-            }
-        },
-        effect: () => {
-            window.addEventListener("popstate", browserEffectHandler.listener);
-        },
-        cleanUp: () => {
-            window.removeEventListener("popstate", browserEffectHandler.listener);
-        },
-    };
-    useLayoutEffect(() => {
-        if (router_type !== "hash")
             return;
-        const [path, query] = get_hash_route().split("?");
-        setQuery(query || "");
-        setPath(path);
-        if (props.redirect_path_to_hash === true) {
-            if (location.pathname !== "/") {
-                location.hash = location.pathname;
-                location.pathname = "";
-            }
         }
-        hashEffectHandler.effect();
-        return () => hashEffectHandler.cleanUp();
+        set_active_path(newPath);
+        setSearchParams(new URLSearchParams(url.search));
+        setParams({ ...route_data.params });
+        set_active_route_data({ ...route_data.data });
+        if (props.type === "browser") {
+            window.history.pushState(null, "", newPath);
+        }
     }, []);
     useLayoutEffect(() => {
-        if (router_type !== "browser")
+        if (props.type !== "browser")
             return;
-        setPath(location.pathname);
-        setQuery(location.search.split("?")[1] || "");
-        browserEffectHandler.effect();
-        return () => browserEffectHandler.cleanUp();
+        const listener = () => {
+            execute_path_change(null);
+        };
+        window.addEventListener("popstate", listener);
+        listener();
+        return () => {
+            window.removeEventListener("popstate", listener);
+        };
     }, []);
-    const handlerManualRouteChange = (newPath) => {
-        const [np, nq] = newPath.split("?");
-        if (path === np && query === nq)
-            return;
-        if (router_type === "hash") {
-            location.hash = newPath;
-            return;
-        }
-        if (router_type === "browser") {
-            setPath(np);
-            setQuery(nq || "");
-            if (path !== np) {
-                setItMatch(false);
-            }
-            history.pushState(null, "", new URL(newPath, location.origin));
-            return;
-        }
+    const go_imperative = (newPath) => {
+        const pathname = parseURL(newPath).pathname;
+        execute_path_change(pathname);
     };
-    const ProviderValue = useMemo(() => {
-        return {
-            path,
-            go: handlerManualRouteChange,
-            itMatch,
-            setItMatch,
-            type: router_type,
-            query,
+    return (_jsxs(HashisherContext.Provider, { value: {
+            active_path,
+            searchParams,
             params,
-            rest,
-            setParams,
-            setRest,
-        };
-    }, [path, handlerManualRouteChange, itMatch, setItMatch, router_type]);
-    return _jsx(router_context.Provider, { value: ProviderValue, children: props.children });
+            active_route_data,
+            go: go_imperative,
+        }, children: [props.children, _jsx(RenderMatchedRoute, {})] }));
+};
+export const NotFound = (props) => {
+    set_not_found_element(props.element);
+    return _jsx(_Fragment, {});
 };

package/dist/RouterErrorBoundary.js

@@ -1,15 +1,11 @@
 import { jsxs as _jsxs } from "preact/jsx-runtime";
 import { Component } from "preact";
 export class RouterErrorBoundary extends Component {
-    constructor() {
-        super(...arguments);
-        this.state = { error: null };
-    }
+    state = { error: null };
     static getDerivedStateFromError(error) {
         return { error: error.message };
     }
     componentDidCatch(error) {
-        console.error(error);
         this.setState({ error: error.message });
     }
     render() {

package/dist/context.d.ts

@@ -1,14 +1,22 @@
-import { Matches } from "./match";
-export type RouterContext = {
-    type: "hash" | "browser";
-    path: string;
-    query: string;
-    go: (r: string) => void;
-    itMatch: boolean;
-    setItMatch: (r: boolean) => void;
-    params: Matches["params"];
-    setParams: (p: Matches["params"]) => void;
-    rest: Matches["rest"];
-    setRest: (r: Matches["rest"]) => void;
-};
-export declare const router_context: import("preact").Context<RouterContext | null>;
+import { RouteMatched } from "./router/matcher";
+export type HashisherContextVal = {
+    active_path: string | null;
+    params: RouteMatched["params"];
+    active_route_data: RouteMatched["data"] | null;
+    searchParams: URLSearchParams;
+};
+export type HashisherContextMethods = {
+    go(newPath: string): void;
+};
+export declare const HashisherContext: import("preact").Context<HashisherContextVal & HashisherContextMethods>;
+export declare const useHashisherContext: () => HashisherContextVal & HashisherContextMethods;
+export declare function useParams<T extends Record<string, string>>(): T & {
+    _?: string;
+};
+export declare function useSearchParams(): URLSearchParams;
+export declare const useRouter: () => {
+    path: string | null;
+    params: Record<string, string> | undefined;
+    go: (newPath: string) => void;
+    searchParams: URLSearchParams;
+};

package/dist/context.js

@@ -1,2 +1,38 @@
 import { createContext } from "preact";
-export const router_context = createContext(null);
+import { useContext } from "preact/hooks";
+export const HashisherContext = createContext({
+    active_path: "",
+    active_route_data: null,
+    params: undefined,
+    searchParams: new URLSearchParams(),
+    go() { },
+});
+export const useHashisherContext = () => {
+    const c = useContext(HashisherContext);
+    if (!c)
+        throw new Error("useHashisherContext should be inside a HashisherContext provider");
+    return c;
+};
+export function useParams() {
+    const c = useContext(HashisherContext);
+    if (!c)
+        throw new Error("useParams should be inside a HashisherContext provider");
+    return c.params;
+}
+export function useSearchParams() {
+    const c = useContext(HashisherContext);
+    if (!c)
+        throw new Error("useSearchParams should be inside a HashisherContext provider");
+    return c.searchParams;
+}
+export const useRouter = () => {
+    const c = useContext(HashisherContext);
+    if (!c)
+        throw new Error("useRouter should be inside a HashisherContext provider");
+    return {
+        path: c.active_path,
+        params: c.params,
+        go: c.go,
+        searchParams: c.searchParams,
+    };
+};

package/dist/index.d.ts

@@ -1,7 +1,5 @@
 export * from "./A";
-export * from "./ErrorRoute";
-export * from "./Redirect";
+export * from "./context";
 export * from "./Route";
 export * from "./Router";
 export * from "./RouterErrorBoundary";
-export * from "./useRouter";

package/dist/index.js

@@ -1,7 +1,5 @@
 export * from "./A";
-export * from "./ErrorRoute";
-export * from "./Redirect";
+export * from "./context";
 export * from "./Route";
 export * from "./Router";
 export * from "./RouterErrorBoundary";
-export * from "./useRouter";

package/dist/router/matcher.d.ts

@@ -0,0 +1,11 @@
+import { VNode } from "preact";
+import { MatchedRoute } from "rou3";
+import { RouteProps } from "../Route";
+export type MatcherPayload = {
+    component: VNode<any>;
+    lazy: boolean;
+    fallback: VNode<any> | null;
+};
+export type RouteMatched = MatchedRoute<MatcherPayload>;
+export declare const Matcher: import("rou3").RouterContext<MatcherPayload>;
+export declare const add_route_to_matcher: (path: string, data: Omit<RouteProps, "path">) => void;

package/dist/router/matcher.js

@@ -0,0 +1,9 @@
+import { addRoute, createRouter } from "rou3";
+export const Matcher = createRouter();
+export const add_route_to_matcher = (path, data) => {
+    addRoute(Matcher, undefined, path, {
+        component: data.element,
+        fallback: data.fallback || null,
+        lazy: Boolean(data.lazy),
+    });
+};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "preact-hashish-router",
-  "version": "0.0.17",
+  "version": "0.1.0",
   "type": "module",
   "module": "dist/index.js",
   "description": "A simple router for preact",
   "scripts": {
     "build": "tsc -p ./tsconfig.lib.json",
-    "format": "prettier --write src app --ignore-unknown",
+    "format": "prettier --write src app --ignore-unknown --cache",
     "app:dev": "vite",
-    "prepublishOnly": "npm run build && npm run format",
+    "prepublishOnly": "npm run build",
     "push": "npm version patch && git push",
     "push-minor": "npm version minor && git push",
     "push-major": "npm version major && git push"
@@ -16,9 +16,6 @@
   "exports": {
     ".": "./dist/index.js"
   },
-  "peerDependencies": {
-    "preact": "^10.26.2"
-  },
   "keywords": [
     "preact",
     "router",
@@ -37,17 +34,25 @@
     "url": "https://github.com/LiasCode/preact-hashish-router"
   },
   "devDependencies": {
-    "@preact/preset-vite": "^2.10.1",
-    "@types/node": "^22.13.4",
-    "prettier": "^3.5.1",
-    "prettier-plugin-organize-imports": "^4.1.0",
-    "typescript": "^5.7.3",
-    "vite": "^6.1.0"
+    "@preact/preset-vite": "^2.10.2",
+    "@types/node": "^22.17.1",
+    "preact-render-to-string": "^6.5.13",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.2.0",
+    "typescript": "^5.9.2",
+    "vite": "^6.3.5"
   },
   "files": [
     "dist",
     "LICENSE",
     "package.json",
     "README.md"
-  ]
+  ],
+  "peerDependencies": {
+    "preact": "^10.27.0"
+  },
+  "dependencies": {
+    "rou3": "^0.7.3",
+    "ufo": "^1.6.1"
+  }
 }

package/dist/useInternalRouter .d.ts

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

package/dist/useInternalRouter .js

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