eno/lib/iso.tsx

245 lines
8.9 KiB
TypeScript
Raw Normal View History

2023-04-05 20:05:21 -04:00
import React from "react";
2023-04-05 23:34:20 -04:00
type Meta = {title:string, description:string, keywords:string, image:string, canonical:string }
type MetaKeys = keyof Meta;
export const Meta:Meta = {
title:"",
description:"",
keywords:"",
image:"",
canonical:""
2023-04-05 20:05:21 -04:00
};
2023-04-05 23:34:20 -04:00
type MetasInputs = { [Property in MetaKeys]?: string };
export const Metas =(props:{concatListed?:boolean; dropUnlisted?:boolean}&MetasInputs):null=>
{
const additive = props.concatListed ? (key:MetaKeys, value:string)=> Meta[key] += value : (key:MetaKeys, value:string)=> Meta[key] = value;
const subtractive = props.dropUnlisted ? (key:MetaKeys)=> Meta[key] = "" : (key:MetaKeys)=> {};
Object.keys(Meta).forEach((key)=>{
const metaKey = key as MetaKeys;
const propValue = props[metaKey]||"";
propValue ? additive(metaKey, propValue) : subtractive(metaKey);
})
if(window.innerWidth)
{
document.title = Meta.title;
}
return null;
2023-04-13 22:23:04 -04:00
}
2023-04-16 21:33:09 -04:00
export type Children = string | number | React.JSX.Element | React.JSX.Element[];
2023-04-13 22:23:04 -04:00
type RoutePath = Array<string>;
2023-04-14 06:58:12 -04:00
type RouteParams = Record<string, string|number|boolean>;
type RouteState = {URL:URL, Path:RoutePath, Params:RouteParams, Anchor:string};
type RouteContext = [Route:RouteState, Update:(inPath?:RoutePath, inParams?:RouteParams, inAnchor?:string)=>void];
2023-04-16 21:33:09 -04:00
type RouteProps = {children:Children, url?:URL };
2023-04-13 22:23:04 -04:00
export const Router = {
2023-04-14 06:58:12 -04:00
Parse(url:URL):RouteState
2023-04-13 22:23:04 -04:00
{
2023-04-14 06:58:12 -04:00
const Path = url.pathname.substring(1, url.pathname.endsWith("/") ? url.pathname.length-1 : url.pathname.length).split("/");
const Params:RouteParams = {};
new URLSearchParams(url.search).forEach((k, v)=> Params[k] = v);
const Anchor = url.hash.substring(1);
return {URL:url, Path, Params, Anchor} as RouteState;
2023-04-13 22:23:04 -04:00
},
2023-04-14 06:58:12 -04:00
Context:React.createContext([{URL:new URL("https://original.route/"), Path:[], Params:{}, Anchor:""}, ()=>{}] as RouteContext),
2023-04-13 22:23:04 -04:00
Provider(props:RouteProps)
{
2023-04-14 06:58:12 -04:00
const [routeGet, routeSet] = React.useState(Router.Parse(props.url || new URL(document.location.href)));
2023-04-14 21:41:01 -04:00
const [dirtyGet, dirtySet] = React.useState(true);
2023-04-13 22:23:04 -04:00
2023-04-14 06:58:12 -04:00
const routeUpdate:RouteContext[1] =(inPath, inParams, inAnchor)=>
2023-04-13 22:23:04 -04:00
{
2023-04-14 06:58:12 -04:00
const clone = new URL(routeGet.URL);
inPath && (clone.pathname = inPath.join("/"));
inParams && (clone.search = new URLSearchParams(inParams as Record<string, string>).toString());
2023-04-13 22:23:04 -04:00
routeSet({
URL:clone,
2023-04-14 06:58:12 -04:00
Path: inPath || routeGet.Path,
Params: inParams || routeGet.Params,
Anchor: inAnchor || routeGet.Anchor
2023-04-13 22:23:04 -04:00
});
};
2023-04-14 06:58:12 -04:00
// when the state changes, update the page url
2023-04-14 21:41:01 -04:00
React.useEffect(()=> dirtyGet ? dirtySet(false) : history.pushState({...routeGet, URL:undefined}, "", routeGet.URL), [routeGet.URL.href]);
2023-04-14 06:58:12 -04:00
React.useEffect(()=>{
2023-04-14 21:41:01 -04:00
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);
}
}
})
2023-04-13 22:23:04 -04:00
}, []);
2023-04-16 21:33:09 -04:00
return <Router.Context.Provider value={[routeGet, routeUpdate]}>{props.children}</Router.Context.Provider>;
2023-04-13 22:23:04 -04:00
},
Consumer()
{
return React.useContext(Router.Context);
}
2023-04-15 12:39:08 -04:00
};
type SwitchContext = {depth:number, keys:Record<string, string>};
export const SwitchContext = React.createContext({depth:0, keys:{}} as SwitchContext);
2023-04-16 21:33:09 -04:00
export const Switch =({children}:{children:Children})=>
2023-04-15 12:39:08 -04:00
{
2023-04-16 21:33:09 -04:00
let fallback = null;
if(Array.isArray(children))
2023-04-15 12:39:08 -04:00
{
2023-04-16 21:33:09 -04:00
const contextSelection = React.useContext(SwitchContext);
const [contextRoute] = Router.Consumer();
const routeSegment = contextRoute.Path.slice(contextSelection.depth);
const checkChild =(inChild:{props:{value?:string}})=>
{
if(inChild?.props?.value)
{
const parts = inChild.props.value.split("/");
if(parts.length > routeSegment.length)
2023-04-15 12:39:08 -04:00
{
2023-04-16 21:33:09 -04:00
return false;
2023-04-15 12:39:08 -04:00
}
2023-04-16 21:33:09 -04:00
const output:SwitchContext = {depth:contextSelection.depth+parts.length, keys:{}};
for(let i=0; i<parts.length; i++)
2023-04-15 12:39:08 -04:00
{
2023-04-16 21:33:09 -04:00
const partRoute = routeSegment[i];
const partCase = parts[i];
if(partCase[0] == ":")
{
output.keys[partCase.substring(1)] = partRoute;
}
else if(partCase != "*" && partCase != partRoute)
{
return false;
}
2023-04-15 12:39:08 -04:00
}
2023-04-16 21:33:09 -04:00
return output;
2023-04-15 12:39:08 -04:00
}
2023-04-16 21:33:09 -04:00
return false;
2023-04-15 12:39:08 -04:00
}
2023-04-16 21:33:09 -04:00
for(let i=0; i<children.length; i++)
2023-04-15 12:39:08 -04:00
{
2023-04-16 21:33:09 -04:00
const childCase = children[i];
const childCaseChildren = childCase.props?.__args?.[2] || childCase.props.children;
const newContextValue = checkChild(childCase);
if(newContextValue)
{
return <SwitchContext.Provider value={newContextValue}>{childCaseChildren}</SwitchContext.Provider>
}
if(childCase?.props?.default && !fallback)
{
console.log(routeSegment);
fallback = childCaseChildren;
}
}
}
return fallback;
2023-04-15 12:39:08 -04:00
};
2023-04-16 21:33:09 -04:00
export const Case =({children, value}:{children:Children, value?:string, default?:true})=>null;
2023-04-18 22:22:59 -04:00
export const useRouteVars =()=> React.useContext(SwitchContext).keys;
2023-04-21 20:27:37 -04:00
export type FetchRecord = {URL:string, CacheFor:number, CachedAt:number, CacheOnServer:boolean, Promise?:Promise<FetchRecord>, DelaySSR:boolean, Error?:string, JSON?:object};
2023-04-18 22:22:59 -04:00
export const Fetch = {
Cache:new Map() as Map<string, FetchRecord>,
2023-04-21 20:27:37 -04:00
ServerBlocking:false as false|Promise<FetchRecord>[],
2023-04-21 22:21:04 -04:00
ServerTouched:false as false|Set<FetchRecord>,
2023-04-21 20:27:37 -04:00
Seed(seed:FetchRecord[])
{
seed.forEach(r=>{
r.Promise = Promise.resolve(r);
Fetch.Cache.set(r.URL, r)
});
},
2023-04-20 21:07:26 -04:00
Request(URL:string, Init?:RequestInit, CacheFor:number = 60, CacheOnServer:boolean = true, DelaySSR:boolean = true)
2023-04-18 22:22:59 -04:00
{
let check = Fetch.Cache.get(URL);
2023-04-19 20:56:30 -04:00
const load =(inCheck:FetchRecord)=>
2023-04-18 22:22:59 -04:00
{
Fetch.Cache.set(URL, inCheck);
2023-04-19 20:56:30 -04:00
inCheck.CachedAt = 0;
inCheck.Promise = fetch(URL, Init).then(resp=>resp.json()).then((json)=>{
inCheck.JSON = json;
inCheck.CachedAt = new Date().getTime();
console.log(`...cached!`);
return inCheck;
});
2023-04-18 22:22:59 -04:00
return inCheck;
}
if(!check)
{
console.log(`making new cache record...`);
2023-04-20 21:07:26 -04:00
return load({URL, CacheFor, CachedAt:0, CacheOnServer, DelaySSR});
2023-04-18 22:22:59 -04:00
}
2023-04-19 20:56:30 -04:00
else if(check.CachedAt == 0)
2023-04-18 22:22:59 -04:00
{
console.log(`currently being cached...`);
return check;
}
2023-04-19 20:56:30 -04:00
else
2023-04-18 22:22:59 -04:00
{
console.log(`found in cache...`);
2023-04-19 20:56:30 -04:00
let secondsAge = (new Date().getTime() - check.CachedAt)/1000;
2023-04-18 22:22:59 -04:00
if(secondsAge > check.CacheFor)
{
console.log(`...outdated...`);
2023-04-19 20:56:30 -04:00
return load(check);
2023-04-18 22:22:59 -04:00
}
else
{
console.log(`...retrieved!`);
return check;
}
}
2023-04-19 20:56:30 -04:00
},
2023-04-20 21:07:26 -04:00
Use(URL:string, Init?:RequestInit, CacheFor:number = 60, CacheOnServer:boolean = true, DelaySSR:boolean = true)
2023-04-19 20:56:30 -04:00
{
type FetchHookState = [Data:undefined|object, Updating:boolean];
const [cacheGet, cacheSet] = React.useState([undefined, true] as FetchHookState);
2023-04-21 20:27:37 -04:00
if(Fetch.ServerBlocking && DelaySSR)
2023-04-20 21:07:26 -04:00
{
const receipt = Fetch.Request(URL, Init, CacheFor, CacheOnServer, DelaySSR);
if(receipt.CachedAt === 0 && receipt.Promise)
{
2023-04-21 20:27:37 -04:00
Fetch.ServerBlocking.push(receipt.Promise);
}
else
{
Fetch.ServerTouched.add(receipt);
2023-04-20 21:07:26 -04:00
}
return [receipt.JSON, receipt.CachedAt === 0];
}
2023-04-19 20:56:30 -04:00
React.useEffect(()=>
{
2023-04-20 21:07:26 -04:00
const receipt = Fetch.Request(URL, Init, CacheFor, CacheOnServer, DelaySSR);
receipt.Promise?.then(()=>cacheSet([receipt.JSON, receipt.CachedAt === 0]));
2023-04-19 20:56:30 -04:00
}
, []);
return cacheGet;
2023-04-18 22:22:59 -04:00
}
2023-04-20 21:07:26 -04:00
};