router started

This commit is contained in:
Seth Trowbridge 2023-04-13 22:23:04 -04:00
parent 4d3760d92c
commit 06266d7ca6
3 changed files with 57 additions and 8 deletions

View File

@ -4,9 +4,13 @@ import * as Iso from "@eno/iso";
export default ()=> export default ()=>
{ {
const [countGet, countSet] = React.useState(1); const [countGet, countSet] = React.useState(1);
const [routeGet, routeSet] = Iso.Router.Consumer();
return <div class="p-4 text-red-500"> return <div class="p-4 text-red-500">
<Iso.Metas title="Component!"/> <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!!! Component!!!
</div>; </div>;
}; };

View File

@ -31,4 +31,48 @@ export const Metas =(props:{concatListed?:boolean; dropUnlisted?:boolean}&MetasI
} }
return null; 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);
}
};

View File

@ -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 { 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 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 * 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"; import * as Iso from "@eno/iso";
let hosted = import.meta.resolve("./"); 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 url:URL = new URL(_req.url);
const pathParts = url.pathname.substring(1, url.pathname.endsWith("/") ? url.pathname.length-1 : url.pathname.length).split("/"); const pathParts = url.pathname.substring(1, url.pathname.endsWith("/") ? url.pathname.length-1 : url.pathname.length).split("/");
const pathLast = pathParts[pathParts.length-1]; const pathLast = pathParts.at(-1);
const pathExt:string|undefined = pathLast.split(".")[1]; const pathExt:string|undefined = pathLast?.split(".")[1];
console.log(pathParts, pathLast, pathExt); console.log(pathParts, pathLast, pathExt);
console.log(`Request for "${url.pathname}"...`); console.log(`Request for "${url.pathname}"...`);
if(_req.headers.get("upgrade") == "websocket") if(_req.headers.get("upgrade") == "websocket")
{ {
@ -221,7 +221,7 @@ FileListen("${url.pathname}", reloadHandler);`;
} }
else 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`; type = `text/html`;
body = `<!doctype html> body = `<!doctype html>
@ -240,8 +240,9 @@ FileListen("${url.pathname}", reloadHandler);`;
import {render, createElement as H} from "react"; 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/@twind/core@1.1.3";
import {default as App, CSS} from "@eno/app"; import {default as App, CSS} from "@eno/app";
import {Router} from "@eno/iso";
Twind.install(CSS); Twind.install(CSS);
render(H(()=>H(App)), document.querySelector("#app")); render( H(Router.Provider, null, H(App)), document.querySelector("#app"));
</script> </script>
</body> </body>
</html>`; </html>`;