cleanup

example/app.tsx

@@ -1,23 +1,25 @@
-import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.1.4";
+import TWPreTail from "https://esm.sh/v115/@twind/preset-tailwind@1.1.4/es2022/preset-tailwind.mjs";
-import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.7";
+import TWPreAuto from "https://esm.sh/v115/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs";
 import React from "react";
 import Component from "./deep/component.tsx";
 import * as Iso from "@eno/iso";
 
 export default ()=>
 {
-    console.log(Iso.Meta);
-    const [countGet, countSet] = React.useState(1);   
     return <div class="p-4 font-sans">
         <Iso.Metas title="Main Page!"/>
         <h1 class="my-2 font(bold serif) text(2xl)">Title!!</h1>
         <h2>subtitle</h2>
         <Component/>
         <Iso.Switch>
-            <Iso.Case value="page/:slug">
+            <Iso.Case value="page">
-                About Us
+                <Iso.Switch>
+                    <Iso.Case value="about-us">About us!</Iso.Case>
+                    <Iso.Case default>sorry no page</Iso.Case>
+                </Iso.Switch>
             </Iso.Case>
             <Iso.Case value="lol/idk">lol/idk</Iso.Case>
+            <Iso.Case default><p>404!</p></Iso.Case>
         </Iso.Switch>
     </div>;
 };

lib/iso.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-
 type Meta = {title:string, description:string, keywords:string, image:string, canonical:string }
 type MetaKeys = keyof Meta;
 export const Meta:Meta = {
@@ -30,11 +29,14 @@ export const Metas =(props:{concatListed?:boolean; dropUnlisted?:boolean}&MetasI
     return null;
 }
 
+
+export type Children = string | number | React.JSX.Element | React.JSX.Element[];
+
 type RoutePath = Array<string>;
 type RouteParams = Record<string, string|number|boolean>;
 type RouteState = {URL:URL, Path:RoutePath, Params:RouteParams, Anchor:string};
 type RouteContext = [Route:RouteState, Update:(inPath?:RoutePath, inParams?:RouteParams, inAnchor?:string)=>void];
-type RouteProps = {children:typeof React.Children, url?:URL };
+type RouteProps = {children:Children, url?:URL };
 export const Router = {
     Parse(url:URL):RouteState
     {
@@ -89,9 +91,7 @@ export const Router = {
             })
         }, []);
 
-        return <Router.Context.Provider value={[routeGet, routeUpdate]}>
+        return <Router.Context.Provider value={[routeGet, routeUpdate]}>{props.children}</Router.Context.Provider>;
-            {props.children}
-        </Router.Context.Provider>;
     },
     Consumer()
     {
@@ -101,54 +101,61 @@ export const Router = {
 
 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})=>
+export const Switch =({children}:{children:Children})=>
 {
-    const contextSelection = React.useContext(SwitchContext);
+    let fallback = null;
-    const [contextRoute] = Router.Consumer();
+    if(Array.isArray(children))
-    const routeSegment = contextRoute.Path.slice(contextSelection.depth);
-    const checkChild =(inChild:{props:{value?:string}})=>
     {
-        if(inChild?.props?.value)
+        const contextSelection = React.useContext(SwitchContext);
-        {   
+        const [contextRoute] = Router.Consumer();
-            const parts = inChild.props.value.split("/");
+        const routeSegment = contextRoute.Path.slice(contextSelection.depth);
-            if(parts.length > routeSegment.length)
+        const checkChild =(inChild:{props:{value?:string}})=>
-            {
+        {
-                return false;
+            if(inChild?.props?.value)
-            }
+            {   
-
+                const parts = inChild.props.value.split("/");
-            const output:SwitchContext = {depth:contextSelection.depth+parts.length, keys:{}};
+                if(parts.length > routeSegment.length)
-            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;
                 }
+    
+                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 output;
+            return false;
         }
-        return false;
+
+        for(let i=0; i<children.length; i++)
+        {
+            const childCase =  children[i];
+            const childCaseChildren = childCase.props?.__args?.[2] || childCase.props.children;
+            const newContextValue = checkChild(childCase);
+            if(newContextValue)
+            {
+                return <SwitchContext.Provider value={newContextValue}>{childCaseChildren}</SwitchContext.Provider>
+            }
+            if(childCase?.props?.default && !fallback)
+            {
+                console.log(routeSegment);
+                fallback = childCaseChildren;
+            }
+        } 
     }
 
-    for(let i=0; i<children.length; i++)
+    return fallback;
-    {
-        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 Case =({children, value}:{children:Children, value?:string, default?:true})=>null;
 export const useRouteVars =()=> React.useContext(SwitchContext).keys;

server.tsx

@@ -35,7 +35,7 @@ const Transpileable =(inFilePath:string):boolean=>
 };
 const Transpile =async(inCode:string, inKey:string):Promise<string>=>
 {
-    const transpile = await ESBuild.transform(inCode, { loader: "tsx", sourcemap: "inline", minify:false});
+    const transpile = await ESBuild.transform(inCode, { loader: "tsx", minify:true});
     Transpiled.set(inKey, transpile.code);
     return transpile.code;
 };
@@ -181,7 +181,7 @@ Deno.serve({ port: Deno.args[0]||3000 }, async(_req:Request) =>
 
         const isLib = url.pathname.startsWith(`/${LibPath}/`);
 
-        if(Transpileable(pathLast))
+        if(Transpileable(url.pathname))
         {
             type = `application/javascript`;
             if(isLib)
@@ -232,13 +232,12 @@ FileListen("${url.pathname}", reloadHandler);`;
         <meta charset="utf-8"/>
         <style data-twind>${results.css}</style>
         <script type="importmap">${JSON.stringify(ImportObject)}</script>
-        <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
     </head>
     <body>
         <div id="app">${results.html}</div>
         <script type="module">
             import {render, createElement as H} from "react";
-            import * as Twind from "https://esm.sh/@twind/core@1.1.3";
+            import * as Twind from "https://esm.sh/v115/@twind/core@1.1.3/es2022/core.mjs";
             import {default as App, CSS} from "@eno/app";
             import {Router} from "@eno/iso";
             Twind.install(CSS);