From 06266d7ca6c7a79728505428ec0f148bb26e5246 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Thu, 13 Apr 2023 22:23:04 -0400 Subject: [PATCH] router started --- example/deep/component.tsx | 6 ++++- lib/iso.tsx | 46 +++++++++++++++++++++++++++++++++++++- server.tsx | 13 ++++++----- 3 files changed, 57 insertions(+), 8 deletions(-) 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")); `;