From ca556e3a68a3e9505ca18050fb7d28cf20c4de7f Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Fri, 14 Apr 2023 21:41:01 -0400 Subject: [PATCH] link clicking --- example/deep/component.tsx | 3 ++- lib/iso.tsx | 32 ++++++++++++++++++++++---------- server.tsx | 2 +- 3 files changed, 25 insertions(+), 12 deletions(-) diff --git a/example/deep/component.tsx b/example/deep/component.tsx index c47499c..5bed3d8 100644 --- a/example/deep/component.tsx +++ b/example/deep/component.tsx @@ -10,7 +10,8 @@ export default ()=> return
Route is: {routeGet.Path.toString()} - + Component!!! + a link
; }; \ No newline at end of file diff --git a/lib/iso.tsx b/lib/iso.tsx index 0bab3f3..8333a1f 100644 --- a/lib/iso.tsx +++ b/lib/iso.tsx @@ -22,9 +22,6 @@ export const Metas =(props:{concatListed?:boolean; dropUnlisted?:boolean}&MetasI const propValue = props[metaKey]||""; propValue ? additive(metaKey, propValue) : subtractive(metaKey); }) - - console.log(`rendering metas`, Meta) - if(window.innerWidth) { document.title = Meta.title; @@ -51,7 +48,7 @@ export const Router = { Provider(props:RouteProps) { const [routeGet, routeSet] = React.useState(Router.Parse(props.url || new URL(document.location.href))); - const [dirtyGet, dirtySet] = React.useState(false); + const [dirtyGet, dirtySet] = React.useState(true); const routeUpdate:RouteContext[1] =(inPath, inParams, inAnchor)=> { @@ -64,17 +61,32 @@ export const Router = { Params: inParams || routeGet.Params, Anchor: inAnchor || routeGet.Anchor }); - dirtySet(true); }; // when the state changes, update the page url - React.useEffect(()=>{ - history.pushState({...routeGet, URL:undefined}, "", routeGet.URL); - }, [routeGet.URL.href]); + React.useEffect(()=> dirtyGet ? dirtySet(false) : history.pushState({...routeGet, URL:undefined}, "", routeGet.URL), [routeGet.URL.href]); React.useEffect(()=>{ - // when the history changes, update the state - window.addEventListener("popstate", ({state})=>{routeUpdate(state.Path, state.Params, state.Anchor)}); + history.replaceState({...routeGet, URL:undefined}, "", routeGet.URL); + window.addEventListener("popstate", ({state})=> + { + dirtySet(true); + routeUpdate(state.Path, state.Params, state.Anchor); + }); + document.addEventListener("click", e=> + { + const t = e.target as HTMLAnchorElement; + if(t.href) + { + const u = new URL(t.href); + if(u.origin == document.location.origin) + { + e.preventDefault(); + const parts = Router.Parse(u); + routeUpdate(parts.Path, parts.Params, parts.Anchor); + } + } + }) }, []); return diff --git a/server.tsx b/server.tsx index d818c79..06c98d5 100644 --- a/server.tsx +++ b/server.tsx @@ -35,7 +35,7 @@ const Transpileable =(inFilePath:string):boolean=> }; const Transpile =async(inCode:string, inKey:string):Promise=> { - const transpile = await ESBuild.transform(inCode, { loader: "tsx", sourcemap: "inline", minify:true }); + const transpile = await ESBuild.transform(inCode, { loader: "tsx", sourcemap: "inline", minify:false }); Transpiled.set(inKey, transpile.code); return transpile.code; };