preact-hashish-router 0.1.11 → 0.1.13

package/README.md

@@ -103,6 +103,72 @@ export default function Header() {
 }
 ```
 
+### DataRouter
+
+Alternative you can use `createDataRouter`
+
+```tsx
+import { createDataRouter, NotFound, RouterErrorBoundary } from "preact-hashish-router";
+import { lazy } from "preact/compat";
+import { AllLevelWildcard } from "./routes/AllLevelWildcard";
+import { Home } from "./routes/Home";
+import { OneLevelWildcard } from "./routes/OneLevelWildcard";
+import { ProductDetails } from "./routes/ProductDetails";
+
+const AboutLazy = lazy(() => import("./routes/About"));
+
+const DataRouter = createDataRouter([
+  {
+    path: "/",
+    element: <Home />,
+    children: [
+      {
+        path: "about",
+        lazy: true,
+        fallback: <h1>Loading About...</h1>,
+        element: <AboutLazy />,
+        children: [
+          {
+            path: "test",
+            element: <h1>About/test</h1>,
+          },
+        ],
+      },
+      {
+        path: "product/:id",
+        element: <ProductDetails />,
+      },
+      {
+        path: "one-level-wildcard/*",
+        element: <OneLevelWildcard />,
+      },
+      {
+        path: "all-level-wildcard/**",
+        element: <AllLevelWildcard />,
+      },
+    ],
+  },
+]);
+
+export function App() {
+  return (
+    <RouterErrorBoundary>
+      <DataRouter
+        onRouteDidChange={(url) => {
+          console.log("onRouteDidChange", url);
+        }}
+        onBeforeRouteChange={(url) => {
+          console.log("onBeforeRouteChange", url);
+        }}
+      >
+        <NotFound element={<h1>Custom Not Found Element</h1>} />
+      </DataRouter>
+    </RouterErrorBoundary>
+  );
+}
+```
+
 ## Development
 
 If you have any improvements or find any issues, feel free to contribute or open an issue in the associated repository.
+

package/dist/NotFound.d.ts

@@ -1,4 +1,4 @@
-import type { VNode } from "preact";
+import { type VNode } from "preact";
 export declare const NotFound: (props: {
     element: VNode<any>;
 }) => import("preact").JSX.Element;

package/dist/Route.d.ts

@@ -1,4 +1,4 @@
-import type { VNode } from "preact";
+import { type VNode } from "preact";
 export type RouteProps = {
     /** The route path matcher
      *  @example "/"

package/dist/Router.d.ts

@@ -15,13 +15,13 @@ export type RouterProps = PropsWithChildren<{
      */
     redirect_path_to_hash?: boolean;
     /**
-     * Trigger hook before the next route calcultation begin
+     * Trigger hook before push new route entry
      */
-    onBeforeRouteChange?: () => Promise<void> | void;
+    onBeforeRouteChange?: (path: string) => Promise<void> | void;
     /**
-     * Trigger hook when the next route calcultation finish
+     * Trigger hook after push new route entry
      */
-    onRouteDidChange?: () => Promise<void> | void;
+    onRouteDidChange?: (path: string) => Promise<void> | void;
     /**
      * If true don't trigger hooks on first render
      * @default false

package/dist/createDataRouter.d.ts

@@ -0,0 +1,5 @@
+import type { RouteProps } from "./Route";
+export type RouteData = RouteProps & {
+    children?: RouteData[] | undefined;
+};
+export declare function createDataRouter(data: RouteData[]): ({ type: router_type, ignoreInitial, ...props }: import("./Router").RouterProps) => import("preact").JSX.Element;

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export { NotFound } from "./NotFound";
 export { Route } from "./Route";
 export { Router } from "./Router";
 export { RouterErrorBoundary } from "./RouterErrorBoundary";
+export { createDataRouter, type RouteData } from "./createDataRouter";

package/dist/index.js

@@ -1 +1 @@
-import{forwardRef as A}from"preact/compat";import{createContext as k}from"preact";import{useContext as c}from"preact/hooks";var s=k({active_path:"",active_route_data:null,params:void 0,searchParams:new URLSearchParams,async go(){}}),p=()=>{let e=c(s);if(!e)throw new Error("useHashisherContext should be inside a HashisherContext provider");return e};function E(){let e=c(s);if(!e)throw new Error("useParams should be inside a HashisherContext provider");return e.params}function D(){let e=c(s);if(!e)throw new Error("useSearchParams should be inside a HashisherContext provider");return e.searchParams}var U=()=>{let e=c(s);if(!e)throw new Error("useRouter should be inside a HashisherContext provider");return{path:e.active_path,params:e.params,searchParams:e.searchParams,go:e.go}};import{jsx as B}from"preact/jsx-runtime";var z=A(({href:e,...t},r)=>{let{go:n}=p();if(!e)throw new Error("A: href must be defined");return B("a",{ref:r,href:e,onClick:o=>{o&&o.type==="click"&&(o.ctrlKey||o.metaKey||o.altKey||o.shiftKey||o.button!==0)||(o.preventDefault(),n(e))},...t})});import{Fragment as K,jsx as _}from"preact/jsx-runtime";var W=e=>(F(e.element),_(K,{})),R=_("div",{children:"404 Not Found"}),F=e=>{R=e},l=()=>R;import{addRoute as T,createRouter as O}from"rou3";var f=O(),P=(e,t)=>{T(f,void 0,e,{component:t.element,fallback:t.fallback||null,lazy:!!t.lazy})};import{Fragment as G,jsx as J}from"preact/jsx-runtime";function q(e){return P(e.path,e),J(G,{})}import{useCallback as Y,useLayoutEffect as w,useRef as Z,useState as u}from"preact/hooks";import{findRoute as $}from"rou3";import{parseURL as C}from"ufo";import{Suspense as Q}from"preact/compat";import{jsx as X}from"preact/jsx-runtime";var y=()=>{let{active_route_data:e}=p();return e?e.component===null?l():e.lazy?X(Q,{fallback:e.fallback,children:e.component}):e.component:l()};import{jsx as ee,jsxs as te}from"preact/jsx-runtime";var I=({type:e="browser",ignoreInitial:t=!1,...r})=>{let[n,o]=u("/"),[g,v]=u(void 0),[b,H]=u(new URLSearchParams),[V,M]=u(null),h=Z(0),i=Y(async a=>{console.log({ignoreInitial:t,renderCount:h}),t===!0?h.current!==0&&await r.onBeforeRouteChange?.():await r.onBeforeRouteChange?.();let{params:m,path:d,route_data:S,search_params:L}=await j(a,e);e==="browser"&&window.history.pushState(null,"",d),e==="hash"&&(window.location.hash=d),o(d),v(m),H(L),M(S),t===!0?h.current!==0&&await r.onRouteDidChange?.():await r.onRouteDidChange?.(),h.current+=1},[e,r.onBeforeRouteChange,r.onRouteDidChange]);w(()=>{if(e!=="browser")return;let a=()=>{i(null)};return window.addEventListener("popstate",a),a(),()=>{window.removeEventListener("popstate",a)}},[i,e]),w(()=>{if(e!=="hash")return;let a=()=>{i(null)};return window.addEventListener("hashchange",a),a(),()=>{window.removeEventListener("hashchange",a)}},[i,e]);let N=async a=>{let m=C(a).pathname;i(m)};return te(s.Provider,{value:{active_path:n,searchParams:b,params:g,active_route_data:V,go:N},children:[r.children,ee(y,{})]})},j=async(e,t="browser")=>{let r=C(window.location.href),n=e||"";e===null&&(t==="hash"?n=r.hash:n=r.pathname);let o=$(f,void 0,n);return o?{path:n,search_params:new URLSearchParams(r.search),route_data:{...o.data},params:{...o.params}}:{path:n,search_params:new URLSearchParams(r.search),route_data:null,params:void 0}};import{Component as re}from"preact";import{jsxs as oe}from"preact/jsx-runtime";var x=class extends re{state={error:null};static getDerivedStateFromError(t){return{error:t.message}}componentDidCatch(t){this.setState({error:t.message})}render(){return this.state.error?this.props.fallback?this.props.fallback:oe("p",{children:["Oh no! We ran into an error: ",this.state.error]}):this.props.children}};export{z as A,W as NotFound,q as Route,I as Router,x as RouterErrorBoundary,E as useParams,U as useRouter,D as useSearchParams};
+import{forwardRef as A}from"preact/compat";import{createContext as E}from"preact";import{useContext as c}from"preact/hooks";var i=E({active_path:"",active_route_data:null,params:void 0,searchParams:new URLSearchParams,async go(){}}),p=()=>{let e=c(i);if(!e)throw new Error("useHashisherContext should be inside a HashisherContext provider");return e};function z(){let e=c(i);if(!e)throw new Error("useParams should be inside a HashisherContext provider");return e.params}function B(){let e=c(i);if(!e)throw new Error("useSearchParams should be inside a HashisherContext provider");return e.searchParams}var U=()=>{let e=c(i);if(!e)throw new Error("useRouter should be inside a HashisherContext provider");return{path:e.active_path,params:e.params,searchParams:e.searchParams,go:e.go}};import{jsx as W}from"preact/jsx-runtime";var F=A(({href:e,...r},t)=>{let{go:a}=p();if(!e)throw new Error("A: href must be defined");return W("a",{ref:t,href:e,onClick:o=>{o&&o.type==="click"&&(o.ctrlKey||o.metaKey||o.altKey||o.shiftKey||o.button!==0)||(o.preventDefault(),a(e))},...r})});import{Fragment as K}from"preact";import{jsx as g}from"preact/jsx-runtime";var T=e=>(O(e.element),g(K,{})),y=g("div",{children:"404 Not Found"}),O=e=>{y=e},R=()=>y;import{Fragment as G}from"preact";import{addRoute as $,createRouter as q}from"rou3";var P=q(),u=(e,r)=>{$(P,void 0,e,{component:r.element,fallback:r.fallback||null,lazy:!!r.lazy})};import{jsx as J}from"preact/jsx-runtime";function I(e){return u(e.path,e),J(G,{})}import{useCallback as Y,useLayoutEffect as C,useRef as Z,useState as m}from"preact/hooks";import{findRoute as j}from"rou3";import{parseURL as v}from"ufo";import{Suspense as Q}from"preact/compat";import{jsx as X}from"preact/jsx-runtime";var w=()=>{let{active_route_data:e}=p();return e?e.component===null?R():e.lazy?X(Q,{fallback:e.fallback,children:e.component}):e.component:R()};import{jsx as te,jsxs as re}from"preact/jsx-runtime";var x=({type:e="browser",ignoreInitial:r=!1,...t})=>{let[a,o]=m("/"),[l,H]=m(void 0),[V,k]=m(new URLSearchParams),[M,N]=m(null),d=Z(0),h=Y(async n=>{let{params:f,path:s,route_data:D,search_params:L}=await ee(n,e);r===!0?d.current!==0&&await t.onBeforeRouteChange?.(s):await t.onBeforeRouteChange?.(s),e==="browser"&&window.history.pushState(null,"",s),e==="hash"&&(window.location.hash=s),o(s),H(f),k(L),N(D),r===!0?d.current!==0&&await t.onRouteDidChange?.(s):await t.onRouteDidChange?.(s),d.current+=1},[e,t.onBeforeRouteChange,t.onRouteDidChange]);C(()=>{if(e!=="browser")return;let n=()=>{h(null)};return window.addEventListener("popstate",n),n(),()=>{window.removeEventListener("popstate",n)}},[h,e]),C(()=>{if(e!=="hash")return;let n=()=>{h(null)};return window.addEventListener("hashchange",n),n(),()=>{window.removeEventListener("hashchange",n)}},[h,e]);let S=async n=>{let f=v(n).pathname;h(f)};return re(i.Provider,{value:{active_path:a,searchParams:V,params:l,active_route_data:M,go:S},children:[t.children,te(w,{})]})},ee=async(e,r="browser")=>{let t=v(window.location.href),a=e||"";e===null&&(r==="hash"?a=t.hash:a=t.pathname);let o=j(P,void 0,a);return o?{path:a,search_params:new URLSearchParams(t.search),route_data:{...o.data},params:{...o.params}}:{path:a,search_params:new URLSearchParams(t.search),route_data:null,params:void 0}};import{Component as oe}from"preact";import{jsxs as ae}from"preact/jsx-runtime";var _=class extends oe{state={error:null};static getDerivedStateFromError(r){return{error:r.message}}componentDidCatch(r){this.setState({error:r.message})}render(){return this.state.error?this.props.fallback?this.props.fallback:ae("p",{children:["Oh no! We ran into an error: ",this.state.error]}):this.props.children}};function ne(e){return b(e),x}function b(e,r=""){for(let t of e){let a=se(r,t.path);u(a,{element:t.element,fallback:t.fallback,lazy:t.lazy}),t.children&&t.children.length>0&&b(t.children,a)}}var se=(e,r)=>{let t=e.split("/").filter(Boolean),a=r.split("/").filter(Boolean);for(let l of a)t.push(l);return`/${t.join("/")}`};export{F as A,T as NotFound,I as Route,x as Router,_ as RouterErrorBoundary,ne as createDataRouter,z as useParams,U as useRouter,B as useSearchParams};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-hashish-router",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "description": "A simple router for preact",
   "scripts": {
@@ -45,19 +45,19 @@
     "README.md"
   ],
   "dependencies": {
-    "rou3": "0.7.3",
+    "rou3": "0.7.7",
     "ufo": "1.6.1"
   },
   "peerDependencies": {
     "preact": "10.27.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
-    "@types/node": "22.18.0",
+    "@biomejs/biome": "2.0.6",
+    "@types/node": "24.7.2",
     "changelogen": "0.6.2",
-    "esbuild": "0.25.9",
+    "esbuild": "0.25.11",
     "prettier": "3.6.2",
-    "prettier-plugin-organize-imports": "4.2.0",
-    "typescript": "5.9.2"
+    "prettier-plugin-organize-imports": "4.3.0",
+    "typescript": "5.9.3"
   }
 }