404 fallback routes

app.tsx

@@ -2,8 +2,8 @@ import {Route, useRoute} from ">able/iso-router.tsx";
 
 const Tracer =()=>
 {
-    const {nestedDepth, pathIndex} = useRoute();
-    return <div>Depth: {nestedDepth}, Index:{pathIndex}</div>
+    const {nestedDepth, pathIndex, blocked} = useRoute();
+    return <div>Depth: {nestedDepth}, Index:{pathIndex}, Match:{blocked.value}</div>
 }
 
 export default ()=><div>
@@ -11,23 +11,17 @@ export default ()=><div>
     <nav class="flex gap-10 p-6">
         <a href="/">Home</a>
         <a href="/about">About</a>
+        <a href="/404">404</a>
     </nav>
-    <Route path={[]}>
-        
-        <p>home page! <Tracer/></p>
-    </Route>
+    <Route path={[]}><p>home page!</p></Route>
     <Route path={["about"]}>
-        
         <nav class="flex gap-10 p-6">
             <a href="/about/more">more</a>
+            <a href="/about/404">more 404</a>
         </nav>
-        <Route path={[]}>
-            
-            <p>About page! <Tracer/></p>
-        </Route>
-        <Route path={["more"]}>
-            
-            <p>more!<Tracer/></p>
-        </Route>
+        <Route path={[]}><p>About page!</p></Route>
+        <Route path={["more"]}><p>more!</p></Route>
+        <Route><span>couldnt find it</span></Route>
     </Route>
+    <Route><p>404 :(</p></Route>
 </div>;

iso-router.tsx

@@ -22,10 +22,21 @@ export const Meta =(props:MetaFields)=> { useMeta(props); return null; }
 
 
 //////// Router
+type RouteContextData = {
+    /** Current nested depth of the router */ nestedDepth:number,
+    /** Index into the page path to start matching routes */ pathIndex:number,
+    /** Collection of keys from matched routes ("page/:key/") */ keys: Record<string, string>,
+    blocked: Signal.Signal<string | false>
+}
+const context = React.createContext({nestedDepth:0, pathIndex:0, keys:{}, blocked:Signal.signal(false as false|string)} as RouteContextData);
 //// Create Signals
 export const pageURL = Signal.signal(new URL(globalThis?.location.href || ""));
 export const pagePath = Signal.signal([] as string[]);
-Signal.effect(()=> pagePath.value = pageURL.value.pathname.split("/").filter(part=>part!=""));
+Signal.effect(()=>{
+    //@ts-ignore 1337 hax
+    if(context){context.__.blocked.value = false;}
+    pagePath.value = pageURL.value.pathname.split("/").filter(part=>part!="");
+});
 //// Add handlers
 globalThis.addEventListener("click", e=>
 {
@@ -44,14 +55,7 @@ globalThis.addEventListener("click", e=>
     })
 });
 globalThis.addEventListener("popstate", _=> pageURL.value = new URL(globalThis.location.href) );
-/// Rendering context
-type RouteContextData = {
-    /** Current nested depth of the router */ nestedDepth:number,
-    /** Index into the page path to start matching routes */ pathIndex:number,
-    /** Collection of keys from matched routes ("page/:key/") */ keys: Record<string, string>,
-    blocked: Signal.Signal<string | false>
-}
-const context = React.createContext({nestedDepth:0, pathIndex:0, keys:{}, blocked:Signal.signal(false as false|string)} as RouteContextData);
+//// Rendering context
 type PathFields = {pathAfter:string[], pathBefore:[], compare:typeof compare}
 const compare =(pathA:string[], pathB:string[])=>
 {
@@ -88,21 +92,21 @@ export const useRoute =()=> {
     const pathBefore = pathFull.slice(0, Math.max(0, routeContext.pathIndex-1));
     return { ...routeContext, pathAfter, pathBefore, compare } as PathFields&RouteContextData;
 }
-export const Route =(props:{path:string[], children:React.ReactNode|React.ReactNode[]}):React.JSX.Element|null=>
+export const Route =(props:{path?:string[], children:React.ReactNode|React.ReactNode[]}):React.JSX.Element|null=>
 {
-    const {nestedDepth, pathIndex, pathAfter, compare, keys} = useRoute();
-    const check = compare(props.path, pathAfter);
-    if (check)
+    const {nestedDepth, pathIndex, pathAfter, compare, keys, blocked} = useRoute();
+
+    if(blocked.peek()){ return null; }
+
+    const passOn:RouteContextData = { nestedDepth:nestedDepth+1, pathIndex, keys, blocked:Signal.signal(false) }
+    if(props.path)
     {
-        return <context.Provider value={{
-            nestedDepth:nestedDepth+1,
-            pathIndex:pathIndex+check.comparisonSize,
-            keys: {...keys, ...check.keys},
-            blocked:Signal.signal(false)
-        }}>{props.children}</context.Provider>;
-    }
-    else
-    {
-        return null;
+        const check = compare(props.path, pathAfter);
+        if (!check){ return null; }
+    
+        blocked.value = "/"+props.path.join("/");
+        passOn.pathIndex += check.comparisonSize;
+        passOn.keys = {...keys, ...check.keys};
     }
+    return <context.Provider value={passOn}>{props.children}</context.Provider>;
 }