router started

example/deep/component.tsx

@@ -4,9 +4,13 @@ import * as Iso from "@eno/iso";
 export default ()=>
 {
     const [countGet, countSet] = React.useState(1);   
+
+    const [routeGet, routeSet] = Iso.Router.Consumer();
+
     return <div class="p-4 text-red-500">
         <Iso.Metas title="Component!"/>
-        <button className="p-4 bg-red-500 text-white" onClick={e=>{countSet(countGet+1)}}>{countGet}</button>
+        Route is: {routeGet.Path.toString()}
+        <button className="p-4 bg-red-500 text-white" onClick={e=>{countSet(countGet+1); routeSet(["lol", "idk"], {count:countGet});}}>{countGet}</button>
         Component!!!
     </div>;
 };

lib/iso.tsx

@@ -31,4 +31,48 @@ export const Metas =(props:{concatListed?:boolean; dropUnlisted?:boolean}&MetasI
     }
 
     return null;
-}
+}
+
+type RoutePath = Array<string>;
+type RouteParams = Record<string, string>;
+type RouteState = {URL:URL, Path:string[]};
+type RouteContext = [Route:RouteState, Update:(inPath?:RoutePath, inParams?:RouteParams)=>void];
+type RouteProps = {children:typeof React.Children, url?:URL };
+export const Router = {
+    Path(url:URL)
+    {
+        return url.pathname.substring(1, url.pathname.endsWith("/") ? url.pathname.length-1 : url.pathname.length).split("/");
+    },
+    Context:React.createContext([{URL:new URL("https://original.route/"), Path:[]}, ()=>{}] as RouteContext),
+    Provider(props:RouteProps)
+    {
+        const url = props.url || new URL(document.location.href);
+        const path = Router.Path(url);
+
+        const [routeGet, routeSet] = React.useState({URL:url, Path:path} as RouteState);
+        //const routeUpdate:RouteContext[1] =(inURL:URL)=>routeSet({URL:inURL, Path:Router.Path(inURL)});
+        const routeUpdate:RouteContext[1] =(inPath?:RoutePath, inParams?:RouteParams)=>
+        {
+            const clone = new URL(routeGet.URL.href);
+            inPath && (clone.pathname = `/${inPath.join("/")}`);
+            inParams && (clone.search = new URLSearchParams(inParams).toString());
+            routeSet({
+                URL:clone,
+                Path: inPath ? inPath : routeGet.Path
+            });
+        };
+
+        React.useEffect(()=>history.pushState({Path:routeGet.Path, Params:routeGet.URL.search}, "", routeGet.URL), [routeGet.URL.href]);
+        React.useEffect(()=>{
+            window.addEventListener("popstate", ()=>routeUpdate());
+        }, []);
+
+        return <Router.Context.Provider value={[routeGet, routeUpdate]}>
+            {props.children}
+        </Router.Context.Provider>;
+    },
+    Consumer()
+    {
+        return React.useContext(Router.Context);
+    }
+};

server.tsx

@@ -3,7 +3,7 @@ import * as MIME from "https://deno.land/std@0.180.0/media_types/mod.ts";
 import { debounce } from "https://deno.land/std@0.151.0/async/debounce.ts";
 import SSR from "https://esm.sh/v113/preact-render-to-string@6.0.2";
 import * as Twind from "https://esm.sh/@twind/core@1.1.3";
-import React, {JSX, createElement as h} from "react";
+import React from "react";
 import * as Iso from "@eno/iso";
 
 let hosted = import.meta.resolve("./");
@@ -141,12 +141,12 @@ Deno.serve({ port: Deno.args[0]||3000 }, async(_req:Request) =>
 {
     const url:URL = new URL(_req.url);
     const pathParts = url.pathname.substring(1, url.pathname.endsWith("/") ? url.pathname.length-1 : url.pathname.length).split("/");
-    const pathLast = pathParts[pathParts.length-1];
-    const pathExt:string|undefined = pathLast.split(".")[1];
+    const pathLast = pathParts.at(-1);
+    const pathExt:string|undefined = pathLast?.split(".")[1];
 
     console.log(pathParts, pathLast, pathExt);
 
-    console.log(`Request for "${url.pathname}"...`);
+    console.log(`Request for "${url.pathname}"...`);    
 
     if(_req.headers.get("upgrade") == "websocket")
     {
@@ -221,7 +221,7 @@ FileListen("${url.pathname}", reloadHandler);`;
         }
         else
         {
-            const results = Twind.extract(SSR(<App/>), TwindInst);
+            const results = Twind.extract(SSR(<Iso.Router.Provider url={url}><App/></Iso.Router.Provider>), TwindInst);
 
             type = `text/html`;
             body = `<!doctype html>
@@ -240,8 +240,9 @@ FileListen("${url.pathname}", reloadHandler);`;
             import {render, createElement as H} from "react";
             import * as Twind from "https://esm.sh/@twind/core@1.1.3";
             import {default as App, CSS} from "@eno/app";
+            import {Router} from "@eno/iso";
             Twind.install(CSS);
-            render(H(()=>H(App)), document.querySelector("#app"));
+            render( H(Router.Provider, null, H(App)), document.querySelector("#app"));
         </script>
     </body>
 </html>`;