(basic) meta inheritance
This commit is contained in:
parent
11359a906f
commit
d02b768050
14
app.tsx
14
app.tsx
@ -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>;
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user