example/app.tsx

@@ -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>;
 };
 

example/deep/component.tsx

@@ -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>;
 };

lib/iso.tsx

@@ -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;