#16 issue/router #18
@ -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
32
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]}>
|
||||
|
@ -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;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user