SethTrowbridge/eno
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases 2 Wiki Activity

link clicking

Browse Source
This commit is contained in:
Seth Trowbridge 2023-04-14 21:41:01 -04:00
parent 64a4a82ac8
commit ca556e3a68
3 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/deep/component.tsx
View File

@ -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>;
};

32
lib/iso.tsx
View File

@ -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]}>

2
server.tsx
View File

@ -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;
};