link clicking

example/deep/component.tsx

@@ -10,7 +10,8 @@ export default ()=>
     return <div class="p-4 text-red-500">
         <Iso.Metas title="Component!"/>
         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>
+        <button className="p-4 bg-red-500 text-white" onClick={e=>{countSet(countGet+1); routeSet(["lol", "idk"], {count:countGet+1});}}>{countGet}</button>
         Component!!!
+        <a href="/custom/page" className="p-2 text(lg blue-500) font-bold">a link</a>
     </div>;
 };

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 <Router.Context.Provider value={[routeGet, routeUpdate]}>

server.tsx

@@ -35,7 +35,7 @@ const Transpileable =(inFilePath:string):boolean=>
 };
 const Transpile =async(inCode:string, inKey:string):Promise<string>=>
 {
-    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;
 };