(basic) meta inheritance

This commit is contained in:
Seth Trowbridge 2024-05-17 17:33:19 -04:00
parent 11359a906f
commit d02b768050
2 changed files with 33 additions and 13 deletions

14
app.tsx
View File

@ -1,10 +1,4 @@
import {Route, useRoute} from ">able/iso-router.tsx"; import {Route, useRoute, Meta} from ">able/iso-router.tsx";
const Tracer =()=>
{
const {nestedDepth, pathIndex, blocked} = useRoute();
return <div>Depth: {nestedDepth}, Index:{pathIndex}, Match:{blocked.value}</div>
}
export default ()=><div> export default ()=><div>
<h1 class="p-4 bg-red-500 text-white">App</h1> <h1 class="p-4 bg-red-500 text-white">App</h1>
@ -13,6 +7,7 @@ export default ()=><div>
<a href="/about">About</a> <a href="/about">About</a>
<a href="/404">404</a> <a href="/404">404</a>
</nav> </nav>
<Meta title="default title"/>
<Route path={[]}><p>home page!</p></Route> <Route path={[]}><p>home page!</p></Route>
<Route path={["about"]}> <Route path={["about"]}>
<nav class="flex gap-10 p-6"> <nav class="flex gap-10 p-6">
@ -21,7 +16,10 @@ export default ()=><div>
</nav> </nav>
<Route path={[]}><p>About page!</p></Route> <Route path={[]}><p>About page!</p></Route>
<Route path={["more"]}><p>more!</p></Route> <Route path={["more"]}><p>more!</p></Route>
<Route><span>couldnt find it</span></Route> <Route>
<Meta title="about error!"/>
<span>couldnt find it</span>
</Route>
</Route> </Route>
<Route><p>404 :(</p></Route> <Route><p>404 :(</p></Route>
</div>; </div>;

View File

@ -2,17 +2,40 @@ import * as Signal from "@preact/signals";
import * as React from "react"; import * as React from "react";
///////// Metas ///////// Metas
type MetaFields = {title?:string, description?:string}; type MetaFields = {title?:string, description?:string}
type MetaRecord = MetaFields&{id:string} type MetaRecord = MetaFields&{id:string, baked?:MetaFields}
const Stack = [] as MetaRecord[]; const Stack = [] as MetaRecord[];
const StackPush =(m:MetaRecord)=> {Stack.push(m); Update();} const StackPush =(m:MetaRecord)=>
{
m.baked = {...(Stack.at(-1)?.baked || {}), ...m};
/*
const previous = Stack.at(-1)?.baked;
if(previous)
{
Object.entries(previous).forEach(([key, prevValue], i)=>
{
const fields = m.baked as Record<string, string>;
const currValue = fields[key];
if(currValue)
{
}
fields[key] = prevValue + concat + currValue;
})
}
*/
Stack.push(m); Update();
}
const StackPop =(id:string)=> {Stack.splice(Stack.findIndex( item => item.id === id ), 1); Update();} const StackPop =(id:string)=> {Stack.splice(Stack.findIndex( item => item.id === id ), 1); Update();}
const Update =()=> document.title = Stack[Stack.length-1]?.title || "---"; const Update =()=> document.title = Stack.at(-1)?.baked?.title || "---";
Update(); Update();
export const useMeta=(fields:MetaFields)=> export const useMeta=(fields:MetaFields)=>
{ {
const id = React.useId(); const id = React.useId();
React.useEffect(()=>{ React.useEffect(()=>{
StackPush({...fields, id}); StackPush({...fields, id});
return ()=>StackPop(id); return ()=>StackPop(id);
}, []); }, []);
@ -20,7 +43,6 @@ export const useMeta=(fields:MetaFields)=>
export const Meta =(props:MetaFields)=> { useMeta(props); return null; } export const Meta =(props:MetaFields)=> { useMeta(props); return null; }
//////// Router //////// Router
type RouteContextData = { type RouteContextData = {
/** Current nested depth of the router */ nestedDepth:number, /** Current nested depth of the router */ nestedDepth:number,