eno/lib/iso.tsx

import TWPreTail from "https://esm.sh/v115/@twind/preset-tailwind@1.1.4/es2022/preset-tailwind.mjs";
import TWPreAuto from "https://esm.sh/v115/@twind/preset-autoprefix@1.0.7/es2022/preset-autoprefix.mjs";
import React from "react";

export const CSS = {
    presets: [TWPreTail(), TWPreAuto()],
    hash:false
};

if(!window.innerWidth)
{
    import(import.meta.resolve("../../server.tsx")).then(()=>{console.log("...imported!");});
}

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:""
};

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


export type Children = string | number | React.JSX.Element | React.JSX.Element[];

type RoutePath = Array<string>;
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];
type RouteProps = {children:Children, url?:URL };
export const Router = {
    Parse(url:URL):RouteState
    {
        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;
    },
    Context:React.createContext([{URL:new URL("https://original.route/"), Path:[], Params:{}, Anchor:""}, ()=>{}] as RouteContext),
    Provider(props:RouteProps)
    {
        const [routeGet, routeSet] = React.useState(Router.Parse(props.url || new URL(document.location.href)));
        const [dirtyGet, dirtySet] = React.useState(true);

        const routeUpdate:RouteContext[1] =(inPath, inParams, inAnchor)=>
        {
            const clone = new URL(routeGet.URL);
            inPath && (clone.pathname = inPath.join("/"));
            inParams && (clone.search = new URLSearchParams(inParams as Record<string, string>).toString());
            routeSet({
                URL:clone,
                Path: inPath || routeGet.Path,
                Params: inParams || routeGet.Params,
                Anchor: inAnchor || routeGet.Anchor
            });
        };

        // when the state changes, update the page url
        React.useEffect(()=> dirtyGet ? dirtySet(false) : history.pushState({...routeGet, URL:undefined}, "", routeGet.URL), [routeGet.URL.href]);

        React.useEffect(()=>{
            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]}>{props.children}</Router.Context.Provider>;
    },
    Consumer()
    {
        return React.useContext(Router.Context);
    }
};

type SwitchContext = {depth:number, keys:Record<string, string>};
export const SwitchContext = React.createContext({depth:0, keys:{}} as SwitchContext);
export const Switch =({children}:{children:Children})=>
{
    let fallback = null;
    if(Array.isArray(children))
    {
        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)
                {
                    return false;
                }
    
                const output:SwitchContext = {depth:contextSelection.depth+parts.length, keys:{}};
                for(let i=0; i<parts.length; i++)
                {
                    const partRoute = routeSegment[i];
                    const partCase = parts[i];
                    if(partCase[0] == ":")
                    {
                        output.keys[partCase.substring(1)] = partRoute;
                    }
                    else if(partCase != "*" && partCase != partRoute)
                    {
                        return false;
                    }
                }
                return output;
            }
            return false;
        }

        for(let i=0; i<children.length; i++)
        {
            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;
};
export const Case =({children, value}:{children:Children, value?:string, default?:true})=>null;
export const useRouteVars =()=> React.useContext(SwitchContext).keys;

export type FetchCachOptions = {CacheFor:number, CacheOnServer:boolean, DelaySSR:boolean, Seed:boolean};
export type FetchRecord = {URL:string, Promise?:Promise<FetchRecord>, CachedAt:number, Error?:string, JSON?:object} & FetchCachOptions;
type FetchGuide = [Record:FetchRecord, Init:boolean, Listen:boolean];
export type FetchHookState = [Data:undefined|object, Updating:boolean];
export const Fetch = {
    Cache:new Map() as Map<string, FetchRecord>,
    ServerBlocking:false as false|Promise<FetchRecord>[],
    ServerTouched:false as false|Set<FetchRecord>,
    ServerRemove:false as false|Set<FetchRecord>,
    Seed(seed:FetchRecord[])
    {
        seed.forEach(r=>{
            //r.Promise = Promise.resolve(r);
            Fetch.Cache.set(r.URL, r)
        });
    },
    DefaultOptions:{CacheFor:60, CacheOnServer:true, DelaySSR:true, Seed:true} as FetchCachOptions,
    Request(URL:string, Init?:RequestInit|null, CacheFor:number = 60, CacheOnServer:boolean = true, DelaySSR:boolean = true, Seed:boolean = true):FetchGuide
    {
        let check = Fetch.Cache.get(URL);
        
        const load =(inCheck:FetchRecord)=>
        {
            Fetch.Cache.set(URL, inCheck);
            inCheck.CachedAt = 0;
            inCheck.Promise = fetch(URL, Init?Init:undefined).then(resp=>resp.json()).then((json)=>{
                inCheck.JSON = json;
                inCheck.CachedAt = new Date().getTime();
                console.log(`...cached!`);
                return inCheck;
            });
            return inCheck;
        };

        if(!check)
        {
            // not in the cache
            // - listen

            console.log(`making new cache record...`);
            return [load({URL, CacheFor, CachedAt:0, CacheOnServer, DelaySSR, Seed}), false, true];
        }
        else if(check.CachedAt == 0)
        {
            // loading started but not finished
            // - listen
            // - possibly init if there is something in JSON

            console.log(`currently being cached...`);
            return [check, check.JSON ? true : false, true];
        }
        else
        {
            console.log(`found in cache...`);
            let secondsAge = (new Date().getTime() - check.CachedAt)/1000;
            if(secondsAge > check.CacheFor)
            {
                // cached but expired
                // - listen
                // - init
                console.log(`...outdated...`);
                return [load(check), true, true];
            }
            else
            {
                // cached and ready
                // - init
                console.log(`...retrieved!`);
                return [check, true, false];
            }

        }
    },

    Use(URL:string, Init?:RequestInit|null, Options?:FetchCachOptions)
    {
        const config = {...Fetch.DefaultOptions, ...Options};
        const [receipt, init, listen] = Fetch.Request(URL, Init, config.CacheFor, config.CacheOnServer, config.DelaySSR, config.Seed);
        const initialState:FetchHookState = init ? [receipt.JSON, listen] : [undefined, true];
        const [cacheGet, cacheSet] = React.useState(initialState);

        if(Fetch.ServerBlocking && Fetch.ServerTouched && config.DelaySSR) // if server-side rendering
        {
            if(listen) // if the request is pending
            {
                receipt.Promise && Fetch.ServerBlocking.push(receipt.Promise); // add promise to blocking list
                return [undefined, listen] as FetchHookState; // no need to return any actual data while waiting server-side
            }
            else // if request is ready
            {
                receipt.Seed && Fetch.ServerTouched.add(receipt); // add record to client seed list (if specified in receipt.seed)
                return [receipt.JSON, false] as FetchHookState;
            }
        }

        React.useEffect(()=>
        {
            if(listen)
            {
                //const receipt = Fetch.Request(URL, Init, CacheFor, CacheOnServer, DelaySSR);
                receipt.Promise?.then(()=>cacheSet([receipt.JSON, receipt.CachedAt === 0]));
            }
        }
        , []);

        return cacheGet;
    }
};