eddev 0.3.35 → 2.0.0-beta.1

package/dist/app/lib/routing/components/BrowserRouter.js

@@ -0,0 +1,351 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, useTransition } from "react";
+import { isRelative, parseURL, resolveURL } from "ufo";
+import { RouterContext, RouterStateContext } from "../context";
+import { RouteLoader } from "../loader";
+import { getLinkHandlerMode, normalizeRoute, parseQuery, stringifyRouteLink } from "../utils";
+import { AppRenderer } from "./RouteRenderer";
+const loader = new RouteLoader();
+let initialRoute;
+let initialRouteHydrated = false;
+if (env.client && !env.admin) {
+    const initialData = window._PAGE_DATA;
+    const appData = initialData.appData;
+    loader.setAppData(appData.data);
+    loader.populateRouteData(document.location.pathname, initialData);
+    const initialURL = parseURL(document.location.href);
+    initialRoute = normalizeRoute({
+        id: "initial",
+        component: loader.getRouteComponent(initialData.view),
+        pathname: initialURL.pathname,
+        hash: "",
+        props: initialData.viewData?.data ?? {},
+        search: "",
+        query: {},
+        view: initialData.view,
+    });
+}
+function parseHrefPath(url) {
+    if (isRelative(url)) {
+        url = resolveURL(document.location.href, url);
+    }
+    const parsed = parseURL(url);
+    return parsed.pathname;
+}
+function parseHref(url) {
+    if (isRelative(url)) {
+        url = resolveURL(document.location.href, url);
+    }
+    return parseURL(url);
+}
+function parseRouteLink(url) {
+    const parsed = parseHref(url);
+    return {
+        pathname: parsed.pathname,
+        query: parseQuery(parsed.search),
+        hash: parsed.hash,
+    };
+}
+function historyStateForRoute(route) {
+    return {
+        id: route.id,
+        key: route.key,
+        view: route.view,
+        state: route.returnState,
+    };
+}
+let index = 0;
+function getHistoryId() {
+    return String(index++);
+}
+let lastRouterState = null;
+export function BrowserRouter(props) {
+    const pendingRoute = useRef(null);
+    // const [activeRoute, setActiveRoute] = useState<RouteState>(initialRoute)
+    const [transitioning, startTransition] = useTransition();
+    const [routerState, setRouterState] = useState(() => ({
+        activeRoute: initialRoute,
+        history: [initialRoute],
+        blockers: [],
+    }));
+    if (lastRouterState !== routerState) {
+        lastRouterState = routerState;
+    }
+    const { internals, api } = useMemo(() => {
+        let subscribers = new Set();
+        let state = routerState;
+        const setState = (update) => {
+            state = {
+                ...state,
+                ...update,
+            };
+            setRouterState(state);
+        };
+        const internals = {
+            transitionEnded: null,
+            updateRoute: null,
+            poppedState: null,
+        };
+        history.scrollRestoration = "manual";
+        const emitEvent = (event) => {
+            subscribers.forEach((fn) => fn(event));
+        };
+        const captureState = () => {
+            const state = {
+                scrollTop: document.scrollingElement.scrollTop,
+                scrollLeft: document.scrollingElement.scrollLeft,
+            };
+            emitEvent({ type: "capture-restorable-state", state: state });
+            return state;
+        };
+        internals.updateRoute = (route) => {
+            replaceRoute({
+                ...state.activeRoute,
+                ...route,
+            }, false);
+        };
+        const historyCache = new Map();
+        function setHistory(history) {
+            setState({
+                history,
+                activeRoute: history[history.length - 1],
+            });
+            for (let item of history) {
+                historyCache.set(item.id, item);
+            }
+        }
+        internals.poppedState = (href, data) => {
+            const stack = state.history;
+            // Is the route in our history stack? (going back)
+            const index = stack.findIndex((item) => item.id === data.id);
+            if (index >= 0) {
+                const route = stack[index];
+                return doRouteTransition({
+                    url: route.uri,
+                    route,
+                    goingBack: true,
+                    history: stack.slice(0, index),
+                    restoreState: route.returnState ?? data.state,
+                    shouldPush: false,
+                });
+            }
+            // Is the route in our history _cache_? (probably going forward)
+            if (historyCache.has(data.id)) {
+                const route = historyCache.get(data.id);
+                return doRouteTransition({
+                    url: route.uri,
+                    route,
+                    goingBack: false,
+                    history: stack,
+                    restoreState: route.returnState ?? data.state,
+                    shouldPush: false,
+                });
+            }
+            return doRouteTransition({
+                url: href,
+                goingBack: true,
+                history: [],
+                restoreState: data.state,
+                shouldPush: false,
+            });
+        };
+        const replaceRoute = (_route, updateBrowser = true) => {
+            const route = normalizeRoute(_route);
+            setHistory([...state.history.slice(0, -1), route]);
+            if (updateBrowser) {
+                history.replaceState(historyStateForRoute(route), "", route.uri);
+            }
+        };
+        function getActiveRoute() {
+            const stack = state.history;
+            return stack[stack.length - 1];
+        }
+        async function doRouteTransition(args) {
+            // clearPending()
+            const link = parseRouteLink(args.url);
+            let cancelled = false;
+            const currentRoute = getActiveRoute();
+            // Remember scroll position and other state on the outgoing route
+            currentRoute.returnState = captureState();
+            const hasRouteData = !!args.route || loader.hasRouteData(link.pathname);
+            // Emit a navigation event
+            emitEvent({
+                type: "navigate:start",
+                link,
+                currentRoute: currentRoute,
+                hasPreloadedData: hasRouteData,
+                goingBack: !!args.goingBack,
+                cancel() {
+                    cancelled = true;
+                },
+            });
+            if (cancelled)
+                return;
+            const data = await loader.loadRouteData(parseHrefPath(args.url));
+            if (!data.view) {
+                console.error("No `view` property in route data");
+                return;
+            }
+            const lazyComponent = loader.getRouteComponent(data.view);
+            if (!lazyComponent) {
+                console.error(`No component found for view: ${data.view}`);
+            }
+            const route = args.route ??
+                normalizeRoute({
+                    id: getHistoryId(),
+                    hash: link.hash,
+                    search: "",
+                    query: link.query,
+                    pathname: link.pathname,
+                    view: data.view,
+                    props: data.viewData?.data ?? {},
+                    component: lazyComponent,
+                    returnState: args.restoreState ?? {},
+                });
+            setState({
+                pendingRoute: route,
+            });
+            emitEvent({
+                type: "navigate:data-ready",
+                currentRoute,
+                loadedRoute: route,
+                link,
+            });
+            emitEvent({
+                type: "navigate:will-change",
+                currentRoute,
+                loadedRoute: route,
+                link,
+            });
+            internals.transitionEnded = () => {
+                internals.transitionEnded = null;
+                // Update the URL
+                // if (!returnState) {
+                //   route.returnState = captureState()
+                // }
+                emitEvent({
+                    type: "navigate:changed",
+                    currentRoute: route,
+                    lastRoute: currentRoute,
+                    link,
+                });
+            };
+            startTransition(() => {
+                pendingRoute.current = route;
+                setHistory([...(args.history || state.history), route]);
+                if (args.shouldPush) {
+                    history.pushState(historyStateForRoute(route), "", stringifyRouteLink(route));
+                }
+            });
+        }
+        const api = {
+            loader: loader,
+            async navigate(url) {
+                doRouteTransition({
+                    url: url,
+                    shouldPush: true,
+                    goingBack: false,
+                });
+            },
+            replaceHash(hash) {
+                replaceRoute({
+                    ...getActiveRoute(),
+                    hash,
+                });
+            },
+            replaceQuery(query) {
+                replaceRoute({
+                    ...getActiveRoute(),
+                    query,
+                });
+            },
+            async prefetch(url) {
+                try {
+                    const link = parseRouteLink(url);
+                    if (loader.hasRouteData(link.pathname))
+                        return;
+                    emitEvent({ type: "preload:start", currentRoute: getActiveRoute(), link });
+                    const data = await loader.loadRouteData(link.pathname).then((data) => {
+                        emitEvent({ type: "preload:data-ready", currentRoute: getActiveRoute(), link, data });
+                    });
+                }
+                catch (err) {
+                    emitEvent({ type: "error", error: err, critical: false });
+                }
+            },
+            async preload(url) {
+                try {
+                    const link = parseRouteLink(url);
+                    if (loader.hasRouteData(link.pathname))
+                        return;
+                    emitEvent({ type: "preload:start", currentRoute: getActiveRoute(), link });
+                    const data = await loader.loadRouteData(link.pathname);
+                    emitEvent({ type: "preload:data-ready", currentRoute: getActiveRoute(), link, data });
+                    if (data.view) {
+                        const lazyComponent = loader.getRouteComponent(data.view);
+                        await lazyComponent.preload();
+                        emitEvent({ type: "preload:finished", currentRoute: getActiveRoute(), link, data });
+                    }
+                }
+                catch (err) {
+                    emitEvent({ type: "error", error: err, critical: false });
+                }
+            },
+            subscribe(fn) {
+                subscribers.add(fn);
+                return () => {
+                    subscribers.delete(fn);
+                };
+            },
+            handleClickEvent(e, originalHref) {
+                const { mode, href } = getLinkHandlerMode(e, originalHref);
+                if (mode === "ignore") {
+                    e.preventDefault();
+                    return;
+                }
+                else if (mode === "native") {
+                    return;
+                }
+                else if (mode === "navigate" && href) {
+                    e.preventDefault();
+                    api.navigate(href);
+                }
+            },
+            emitEvent,
+        };
+        return {
+            api,
+            internals,
+        };
+    }, []);
+    useEffect(() => {
+        if (!transitioning && internals.transitionEnded) {
+            internals.transitionEnded();
+        }
+    }, [transitioning]);
+    useEffect(() => {
+        if (!initialRouteHydrated && !transitioning) {
+            initialRouteHydrated = true;
+            // Calculate the bits we care about
+            const hash = document.location.hash;
+            const query = parseQuery(document.location.search);
+            if (Object.keys(query).length > 0 || hash) {
+                startTransition(() => {
+                    internals.updateRoute?.({ query, hash });
+                });
+            }
+        }
+    }, [transitioning]);
+    useEffect(() => {
+        // Handle popState
+        // const router = useRouterStore.getState()
+        const onPopState = (e) => {
+            internals.poppedState?.(document.location.href, e.state ?? {});
+        };
+        window.addEventListener("popstate", onPopState);
+        return () => {
+            window.removeEventListener("popstate", onPopState);
+        };
+    }, []);
+    return (_jsx(RouterContext.Provider, { value: api, children: _jsx(RouterStateContext.Provider, { value: routerState, children: _jsx(AppRenderer, {}) }) }));
+}

package/dist/app/lib/routing/components/ClientOnly.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react";
+type Props = PropsWithChildren<{
+    /** An optional fallback, to be shown before the client component. */
+    fallback?: React.ReactNode;
+}>;
+/**
+ * Renders children, but only on the client.
+ *
+ * The optional 'fallback' prop can be used to show a loading state or placeholder content while the client bundle is loading.
+ */
+export declare function ClientOnly(props: Props): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/app/lib/routing/components/ClientOnly.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { useIsSSR } from "../hooks/useIsSSR";
+/**
+ * Renders children, but only on the client.
+ *
+ * The optional 'fallback' prop can be used to show a loading state or placeholder content while the client bundle is loading.
+ */
+export function ClientOnly(props) {
+    const mounted = useIsSSR();
+    if (!mounted)
+        return props.fallback ?? null;
+    return _jsx(Fragment, { children: props.children });
+}

package/dist/app/lib/routing/components/Link.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithRef, ElementType, ReactElement } from "react";
+type Props<T extends ElementType = "a"> = NoInfer<Omit<ComponentPropsWithRef<T>, "href">> & {
+    href?: string | null;
+    target?: string | null;
+    as?: T;
+};
+export declare const Link: <T extends ElementType = "a">(props: Props<T>) => ReactElement;
+/**
+ * Provides information about the given href parameter, such as whether it is active, whether a child page is active, or whether it is loading.
+ *
+ * This is used internally by the `<Link />` component for the `data-active`, `data-child-active` and `data-pending` attributes, but is exposed for use in custom components.
+ */
+export declare function useLinkState(href: string): {
+    active: boolean;
+    childActive?: undefined;
+    pending?: undefined;
+} | {
+    active?: undefined;
+    childActive?: undefined;
+    pending?: undefined;
+} | {
+    active: "path" | "query" | "exact" | undefined;
+    childActive: boolean | undefined;
+    pending: "path" | "query" | "exact" | undefined;
+};
+export {};

package/dist/app/lib/routing/components/Link.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { parseURL, resolveURL, withoutTrailingSlash } from "ufo";
+import { useIsSSR } from "../hooks/useIsSSR";
+import { useRouter } from "../hooks/useRouter";
+import { isSameOrigin } from "../utils";
+import { useRoute } from "../hooks/useRoute";
+import { useRouterState } from "../hooks/useRouterState";
+export const Link = forwardRef((props, ref) => {
+    const Comp = props.as || "a";
+    if (env.admin) {
+        return (_jsx(Comp, { ref: ref, ...props, href: props.href ?? undefined, onClick: (e) => {
+                props.onClick?.(e);
+                e.preventDefault();
+            } }));
+    }
+    else {
+        const preload = useRouter((r) => r.preload);
+        const handleClickEvent = useRouter((r) => r.handleClickEvent);
+        const state = useLinkState(props.href ?? "");
+        return (_jsx(Comp, { ref: ref, "data-active": state.active ?? undefined, "data-child-active": state.childActive ?? undefined, "data-pending": state.pending ?? undefined, ...props, href: props.href ?? undefined, onMouseEnter: (e) => {
+                if (props.onMouseEnter) {
+                    props.onMouseEnter(e);
+                }
+                preload(props.href);
+            }, onClick: (e) => {
+                props.onClick?.(e);
+                handleClickEvent(e, props.href ?? undefined);
+            } }));
+    }
+});
+// @ts-ignore
+Link.displayName = "Link";
+/**
+ * Provides information about the given href parameter, such as whether it is active, whether a child page is active, or whether it is loading.
+ *
+ * This is used internally by the `<Link />` component for the `data-active`, `data-child-active` and `data-pending` attributes, but is exposed for use in custom components.
+ */
+export function useLinkState(href) {
+    const route = useRoute();
+    const pendingRoute = useRouterState((r) => r.pendingRoute);
+    const isSSR = useIsSSR();
+    const state = useMemo(() => {
+        // If we're in SSR mode, do a quick and dirty check, which relies on the href being relative.
+        if (isSSR) {
+            if (href === route.pathname)
+                return {
+                    active: true,
+                };
+            return {};
+        }
+        // Bail out for external links
+        if (!href || !isSameOrigin(href)) {
+            return {};
+        }
+        const hrefUrl = parseURL(resolveURL(href));
+        const active = route ? compareUri(route, hrefUrl) : undefined;
+        const childActive = !active && route ? isSubpath(hrefUrl.pathname, route.pathname) : undefined;
+        const pending = pendingRoute ? compareUri(pendingRoute, hrefUrl) : undefined;
+        return {
+            active,
+            childActive,
+            pending,
+        };
+    }, [isSSR, href, route, pendingRoute]);
+    return state;
+}
+/**
+ * Returns the active-ness state for the given link.
+ * path = the path matches, but not the query/hash
+ * query = the path and query matches, but not the hash
+ * exact = the path, query and hash all match exactly
+ */
+function compareUri(route, href) {
+    // If they're directly equal, then jump straight to a 'hash' match
+    if (withoutTrailingSlash(route.pathname) === withoutTrailingSlash(href.pathname)) {
+        if (route.search.replace(/^\?/, "") === href.search.replace(/^\?/, "")) {
+            if (route.hash === href.hash) {
+                return "exact";
+            }
+            return "query";
+        }
+        return "path";
+    }
+}
+function isSubpath(parentPath, childPath) {
+    if (withoutTrailingSlash(parentPath) === withoutTrailingSlash(childPath)) {
+        return false;
+    }
+    if (childPath.startsWith(parentPath)) {
+        return true;
+    }
+}

package/dist/app/lib/routing/components/RouteRenderer.d.ts

@@ -0,0 +1,9 @@
+import { RouteState } from "../types";
+export declare const AppRenderer: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare function MainRoute(): import("react/jsx-runtime").JSX.Element;
+export declare function RouteDisplay(props: {
+    route: RouteState;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace RouteDisplay {
+    var displayName: string;
+}

package/dist/app/lib/routing/components/RouteRenderer.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, Suspense, useMemo } from "react";
+import { RouteItemContext } from "../context";
+import { useRouter } from "../hooks/useRouter";
+import { useRouterState } from "../hooks/useRouterState";
+export const AppRenderer = memo(() => {
+    const { appData, appComponent: AppComponent } = useRouter().loader;
+    const { activeRoute } = useRouterState();
+    const app = useMemo(() => {
+        return (_jsx(AppComponent, { ...appData, children: _jsx(MainRoute, {}) }));
+    }, [AppComponent, appData]);
+    return (_jsx(Suspense, { children: _jsx(RouteItemContext.Provider, { value: activeRoute, children: app }) }));
+});
+export function MainRoute() {
+    const activeRoute = useRouterState((s) => s.activeRoute);
+    return _jsx(RouteDisplay, { route: activeRoute });
+}
+export function RouteDisplay(props) {
+    const Component = props.route.component;
+    if (!Component) {
+        console.error("No component for route");
+    }
+    return useMemo(() => {
+        let child = !!Component && _jsx(Component, { ...props.route.props });
+        return _jsx(RouteItemContext.Provider, { value: props.route, children: child });
+    }, [Component, props.route, props.route]);
+}
+RouteDisplay.displayName = "RouteDisplay";

package/dist/app/lib/routing/components/SSRRouter.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+import { RouteLoader } from "../loader";
+import { RouteState } from "../types";
+type Props = PropsWithChildren<{
+    route: RouteState;
+    loader: RouteLoader;
+}>;
+export declare function SSRRouter(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/app/lib/routing/components/SSRRouter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { RouterContext, RouterStateContext } from "../context";
+import { useRouter } from "../hooks/useRouter";
+import { useRouterState } from "../hooks/useRouterState";
+import { AppRenderer } from "./RouteRenderer";
+export function SSRRouter(props) {
+    const router = useRouter();
+    const routerState = useRouterState();
+    router.loader = props.loader;
+    routerState.history = [props.route];
+    routerState.activeRoute = props.route;
+    return (_jsx(Suspense, { children: _jsx(RouterContext.Provider, { value: router, children: _jsx(RouterStateContext.Provider, { value: routerState, children: _jsx(AppRenderer, {}) }) }) }));
+}

package/dist/app/lib/routing/components/ScrollRestoration.d.ts

@@ -0,0 +1,15 @@
+type Props = {
+    /** An optional restoration function, allowing you to handle scroll restoration manually */
+    restore?: (scroll: {
+        top: number;
+        left: number;
+        direction: "back" | "forward";
+    }) => void;
+    /** The scroll behaviour @default instant */
+    behaviour?: ScrollBehavior;
+};
+/**
+ * Enables scroll restoration when navigation backwards, as well as resetting scroll position when navigating forwards.
+ */
+export declare function ScrollRestoration(props: Props): null;
+export {};

package/dist/app/lib/routing/components/ScrollRestoration.js

@@ -0,0 +1,32 @@
+import { useRouterEvents } from "../hooks/useRouterEvents";
+/**
+ * Enables scroll restoration when navigation backwards, as well as resetting scroll position when navigating forwards.
+ */
+export function ScrollRestoration(props) {
+    const restore = props.restore ??
+        ((scroll) => document.scrollingElement?.scrollTo({
+            behavior: props.behaviour ?? "instant",
+            left: scroll.left,
+            top: scroll.top,
+        }));
+    useRouterEvents((event) => {
+        if (event.type === "navigate:changed") {
+            // console.log("Changed! Restoring scroll", event.currentRoute)
+            if (event.currentRoute.returnState) {
+                restore({
+                    top: event.currentRoute.returnState.scrollTop ?? 0,
+                    left: event.currentRoute.returnState.scrollLeft ?? 0,
+                    direction: "back",
+                });
+            }
+            else {
+                restore({
+                    top: 0,
+                    left: 0,
+                    direction: "forward",
+                });
+            }
+        }
+    });
+    return null;
+}

package/dist/app/lib/routing/context.d.ts

@@ -0,0 +1,5 @@
+import { Context } from "react";
+import { RouterAPI, RouterAPIState } from "./types";
+export declare const RouterContext: Context<RouterAPI>;
+export declare const RouterStateContext: Context<RouterAPIState>;
+export declare const RouteItemContext: Context<import("./types").TypedRouteState<"_unknown", {}>>;