diff --git a/example/deep/component.tsx b/example/deep/component.tsx
index 22970d5..c47499c 100644
--- a/example/deep/component.tsx
+++ b/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
-
+ Route is: {routeGet.Path.toString()}
+
Component!!!
;
};
\ No newline at end of file
diff --git a/lib/iso.tsx b/lib/iso.tsx
index 9243188..3f5f020 100644
--- a/lib/iso.tsx
+++ b/lib/iso.tsx
@@ -31,4 +31,48 @@ export const Metas =(props:{concatListed?:boolean; dropUnlisted?:boolean}&MetasI
}
return null;
-}
\ No newline at end of file
+}
+
+type RoutePath = Array;
+type RouteParams = Record;
+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
+ {props.children}
+ ;
+ },
+ Consumer()
+ {
+ return React.useContext(Router.Context);
+ }
+};
\ No newline at end of file
diff --git a/server.tsx b/server.tsx
index f668358..d818c79 100644
--- a/server.tsx
+++ b/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(), TwindInst);
+ const results = Twind.extract(SSR(), TwindInst);
type = `text/html`;
body = `
@@ -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"));