switch/case rendering

This commit is contained in:
Seth Trowbridge 2023-04-15 12:39:08 -04:00
parent ca556e3a68
commit 8ed6a4b029
4 changed files with 63 additions and 3 deletions

View File

@ -13,6 +13,12 @@ export default ()=>
<h1 class="my-2 font(bold serif) text(2xl)">Title!!</h1>
<h2>subtitle</h2>
<Component/>
<Iso.Switch>
<Iso.Case value="page/:slug">
About Us
</Iso.Case>
<Iso.Case value="lol/idk">lol/idk</Iso.Case>
</Iso.Switch>
</div>;
};

View File

@ -12,6 +12,6 @@ export default ()=>
Route is: {routeGet.Path.toString()}
<button className="p-4 bg-red-500 text-white" onClick={e=>{countSet(countGet+1); routeSet(["lol", "idk"], {count:countGet+1});}}>{countGet}</button>
Component!!!
<a href="/custom/page" className="p-2 text(lg blue-500) font-bold">a link</a>
<a href="/page/about-us" className="p-2 text(lg blue-500) font-bold">a link</a>
</div>;
};

View File

@ -98,3 +98,57 @@ export const Router = {
return React.useContext(Router.Context);
}
};
type SwitchContext = {depth:number, keys:Record<string, string>};
export const SwitchContext = React.createContext({depth:0, keys:{}} as SwitchContext);
export const Switch =({children}:{children:typeof React.Children})=>
{
const contextSelection = React.useContext(SwitchContext);
const [contextRoute] = Router.Consumer();
const routeSegment = contextRoute.Path.slice(contextSelection.depth);
const checkChild =(inChild:{props:{value?:string}})=>
{
if(inChild?.props?.value)
{
const parts = inChild.props.value.split("/");
if(parts.length > routeSegment.length)
{
return false;
}
const output:SwitchContext = {depth:contextSelection.depth+parts.length, keys:{}};
for(let i=0; i<parts.length; i++)
{
const partRoute = routeSegment[i];
const partCase = parts[i];
if(partCase[0] == ":")
{
output.keys[partCase.substring(1)] = partRoute;
}
else if(partCase != "*" && partCase != partRoute)
{
return false;
}
}
return output;
}
return false;
}
for(let i=0; i<children.length; i++)
{
const newContextValue = checkChild(children[i]);
if(newContextValue)
{
console.log(children[i]);
const child = children[i]?.props?.children || children[i];
return <SwitchContext.Provider value={newContextValue}>Route Rendred!{child}</SwitchContext.Provider>
}
}
return null;
};
export const Case =({children, value}:{children:typeof React.Children, value?:string})=>
{
return <>{children}</>;
};
export const useRouteVars =()=> React.useContext(SwitchContext).keys;