eddev 0.3.35 → 2.0.0-beta.1

package/dist/app/lib/routing/context.js

@@ -0,0 +1,129 @@
+import { createContext } from "react";
+import { RouteLoader } from "./loader";
+const NOOP_ROUTE = {
+    component: () => null,
+    id: "initial",
+    hash: "",
+    key: "initial",
+    pathname: "",
+    props: {},
+    uri: "",
+    view: "_unknown",
+    search: "",
+    query: {},
+    returnState: undefined,
+};
+export const RouterContext = createContext({
+    loader: new RouteLoader(),
+    async navigate(url) { },
+    async prefetch(url) { },
+    async preload(url) { },
+    subscribe(fn) {
+        return () => { };
+    },
+    replaceHash(hash) { },
+    replaceQuery(query) { },
+    handleClickEvent(e, originalHref) { },
+    emitEvent(event) { },
+});
+export const RouterStateContext = createContext({
+    history: [NOOP_ROUTE],
+    activeRoute: NOOP_ROUTE,
+    blockers: [],
+});
+export const RouteItemContext = createContext(NOOP_ROUTE);
+// type StoreHook<State> = <Slice = State>(
+//   selector?: (state: State) => Slice,
+//   areEqual?: (a: Slice, b: Slice) => boolean,
+// ) => Slice
+// type Store<T> = {
+//   subscribe(sub: (value: T) => void): () => void
+//   value: T
+//   update(next: T): void
+// }
+// function createStore<T>(initial: T): Store<T> {
+//   let value = initial
+//   const subscribers = new Set<(value: T) => void>()
+//   return {
+//     subscribe(sub: (value: T) => void) {
+//       subscribers.add(sub)
+//       return () => {
+//         subscribers.delete(sub)
+//       }
+//     },
+//     get value() {
+//       return value
+//     },
+//     update(nextValue: T) {
+//       value = nextValue
+//       if (subscribers.size) {
+//         console.log("UPDATE", value)
+//         startTransition(() => {
+//           for (let sub of subscribers) {
+//             sub(value)
+//           }
+//         })
+//       }
+//     },
+//   }
+// }
+// export function createStoreHook<T>(store: Store<T>): StoreHook<T> {
+//   const hook = (selector: any) => {
+//     const get = () => (selector ? selector(store.value) : store.value)
+//     return useSyncExternalStore(store.subscribe, get, get)
+//   }
+//   return hook as StoreHook<T>
+// }
+// export function createStoreContextHook<T>(ctx: Context<Store<T>>): StoreHook<T> {
+//   const hook = (selector: any) => {
+//     const store = useContext(ctx)
+//     const get = () => (selector ? selector(store.value) : store.value)
+//     return useSyncExternalStore(store.subscribe, get, get)
+//   }
+//   return hook as StoreHook<T>
+// }
+// export const RouterContext = createContext<Store<RouterAPI>>(null!)
+// export const RouterStateContext = createContext<Store<RouterAPIState>>(null!)
+// export const RouteContext = createContext<Store<RouteState>>(null!)
+// const NOOP_ROUTE: RouteState = {
+//   component: () => null,
+//   id: "initial",
+//   hash: "",
+//   key: "initial",
+//   pathname: "",
+//   props: {},
+//   uri: "",
+//   view: "_unknown",
+//   search: "",
+//   query: {},
+//   returnState: undefined,
+// }
+// export const createRouteItemStore = (initial?: RouteState) => {
+//   return createStore<RouteState>(initial ?? NOOP_ROUTE)
+// }
+// export function createRouterAPIStore(initial?: RouterAPI) {
+//   return createStore<RouterAPI>(
+//     initial ?? {
+//       loader: new RouteLoader(),
+//       async navigate(url) {},
+//       async prefetch(url) {},
+//       async preload(url) {},
+//       subscribe(fn) {
+//         return () => {}
+//       },
+//       replaceHash(hash) {},
+//       replaceQuery(query) {},
+//       handleClickEvent(e, originalHref) {},
+//       emitEvent(event) {},
+//     },
+//   )
+// }
+// export function createRouterStateStore(initial?: RouterAPIState) {
+//   return createStore<RouterAPIState>(
+//     initial ?? {
+//       history: [],
+//       activeRoute: NOOP_ROUTE,
+//       blockers: [],
+//     },
+//   )
+// }

package/dist/app/lib/routing/hooks/useIsSSR.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Use this function to help with SSR edge-cases.
+ *
+ * On the server, this hook will always return `true`.
+ *
+ * On the client, this hook will return `true` once, after hydration, and then switch to `false`.
+ */
+export declare function useIsSSR(): boolean;

package/dist/app/lib/routing/hooks/useIsSSR.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+let isSSR = true;
+/**
+ * Use this function to help with SSR edge-cases.
+ *
+ * On the server, this hook will always return `true`.
+ *
+ * On the client, this hook will return `true` once, after hydration, and then switch to `false`.
+ */
+export function useIsSSR() {
+    const [value, setValue] = useState(isSSR);
+    useEffect(() => {
+        if (!isSSR)
+            return;
+        setValue(false);
+        const timer = setTimeout(() => {
+            isSSR = false;
+        }, 5000);
+        return () => clearTimeout(timer);
+    }, []);
+    return value;
+}

package/dist/app/lib/routing/hooks/useRestorableState.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Works exactly like useState, but allows back and forward navigation to restore the previous state.
+ * You must pass a unique ID as an additional first parameter to ensure the state is restored correctly.
+ */
+export declare function useRestorableState<T>(key: string, fallback?: T): any[];

package/dist/app/lib/routing/hooks/useRestorableState.js

@@ -0,0 +1,17 @@
+import { useState } from "react";
+import { useRoute, useRouterEvents } from "..";
+/**
+ * Works exactly like useState, but allows back and forward navigation to restore the previous state.
+ * You must pass a unique ID as an additional first parameter to ensure the state is restored correctly.
+ */
+export function useRestorableState(key, fallback) {
+    const route = useRoute();
+    const initial = route.returnState?.[key] ?? fallback;
+    const [state, setState] = useState(initial);
+    useRouterEvents((event) => {
+        if (event.type === "capture-restorable-state") {
+            event.state[key] = state;
+        }
+    });
+    return [state, setState];
+}

package/dist/app/lib/routing/hooks/useRoute.d.ts

@@ -0,0 +1,2 @@
+import { RouteState } from "../types";
+export declare function useRoute(): RouteState;

package/dist/app/lib/routing/hooks/useRoute.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { RouteItemContext } from "../context";
+export function useRoute() {
+    return useContext(RouteItemContext);
+}

package/dist/app/lib/routing/hooks/useRouteTransition.d.ts

@@ -0,0 +1,4 @@
+import type { RouteState } from "../types";
+type TransitionFunction = (currentRoute: RouteState, nextRoute: RouteState) => void | Promise<any | void>;
+export declare function useRouteTransition(func: TransitionFunction): void;
+export {};

package/dist/app/lib/routing/hooks/useRouteTransition.js

@@ -0,0 +1,12 @@
+import { useEffect, useRef } from "react";
+import { useRouter } from "./useRouter";
+export function useRouteTransition(func) {
+    const subscribe = useRouter((r) => r.subscribe);
+    const handler = useRef(func);
+    handler.current = func;
+    useEffect(() => subscribe((event) => {
+        if (event.type === "navigate:will-change") {
+            handler.current(event.currentRoute, event.loadedRoute);
+        }
+    }), []);
+}

package/dist/app/lib/routing/hooks/useRouter.d.ts

@@ -0,0 +1,2 @@
+import { RouterAPI } from "../types";
+export declare function useRouter<T = RouterAPI>(selector?: (r: RouterAPI) => T): T;

package/dist/app/lib/routing/hooks/useRouter.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { RouterContext } from "../context";
+export function useRouter(selector) {
+    const router = useContext(RouterContext);
+    if (selector) {
+        return selector(router);
+    }
+    else {
+        return router;
+    }
+}

package/dist/app/lib/routing/hooks/useRouterEvents.d.ts

@@ -0,0 +1,2 @@
+import type { RouterEvent } from "../types";
+export declare function useRouterEvents(handler: (event: RouterEvent) => void): void;

package/dist/app/lib/routing/hooks/useRouterEvents.js

@@ -0,0 +1,10 @@
+import { useEffect, useRef } from "react";
+import { useRouter } from "./useRouter";
+export function useRouterEvents(handler) {
+    const subscribe = useRouter((r) => r.subscribe);
+    const ref = useRef(handler);
+    ref.current = handler;
+    useEffect(() => subscribe((e) => {
+        ref.current(e);
+    }), []);
+}

package/dist/app/lib/routing/hooks/useRouterState.d.ts

@@ -0,0 +1,2 @@
+import { RouterAPIState } from "../types";
+export declare function useRouterState<T = RouterAPIState>(selector?: (state: RouterAPIState) => T): T;

package/dist/app/lib/routing/hooks/useRouterState.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { RouterStateContext } from "../context";
+export function useRouterState(selector) {
+    const ctx = useContext(RouterStateContext);
+    if (selector)
+        return selector(ctx);
+    return ctx;
+}

package/dist/app/lib/routing/hooks/useSearchParams.d.ts

@@ -0,0 +1,10 @@
+export type SearchParamAPI<T> = {
+    set<K extends keyof T>(key: K, value: T[K]): void;
+    setAll: (value: T) => void;
+    setter<K extends keyof T>(key: K): (value: T[K]) => void;
+    reset(): void;
+    get<K extends keyof T>(key: K): T[K];
+};
+export declare function useSearchParams<T extends {
+    [K: string]: any;
+}>(defaultValue: T): [T, SearchParamAPI<T>];

package/dist/app/lib/routing/hooks/useSearchParams.js

@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+import { useRoute } from "./useRoute";
+import { useRouter } from "./useRouter";
+export function useSearchParams(defaultValue) {
+    const route = useRoute();
+    const replaceQuery = useRouter((r) => r.replaceQuery);
+    const result = useMemo(() => ({
+        ...defaultValue,
+        ...route.query,
+    }), [route.query]);
+    const update = (patch) => {
+        const value = { ...result, ...patch };
+        for (let key in defaultValue) {
+            if (defaultValue[key] === value[key] || [null, undefined].includes(value[key])) {
+                delete value[key];
+            }
+        }
+        replaceQuery(value);
+    };
+    return [
+        result,
+        {
+            set: (key, value) => update({ ...result, [key]: value }),
+            setAll: (value) => update(value),
+            setter: (key) => (value) => update({ ...result, [key]: value }),
+            reset: () => update({}),
+            get: (key) => result[key],
+        },
+    ];
+}

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

@@ -0,0 +1,13 @@
+export * from "./types";
+export * from "./components/Link";
+export * from "./components/ScrollRestoration";
+export * from "./components/RouteRenderer";
+export * from "./components/ClientOnly";
+export * from "./hooks/useRoute";
+export * from "./hooks/useRouteTransition";
+export * from "./hooks/useRouter";
+export * from "./hooks/useRouterEvents";
+export * from "./hooks/useRouterState";
+export * from "./hooks/useRestorableState";
+export * from "./hooks/useIsSSR";
+export * from "./hooks/useSearchParams";

package/dist/app/lib/routing/index.js

@@ -0,0 +1,13 @@
+export * from "./types";
+export * from "./components/Link";
+export * from "./components/ScrollRestoration";
+export * from "./components/RouteRenderer";
+export * from "./components/ClientOnly";
+export * from "./hooks/useRoute";
+export * from "./hooks/useRouteTransition";
+export * from "./hooks/useRouter";
+export * from "./hooks/useRouterEvents";
+export * from "./hooks/useRouterState";
+export * from "./hooks/useRestorableState";
+export * from "./hooks/useIsSSR";
+export * from "./hooks/useSearchParams";

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

@@ -0,0 +1,30 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import { DynamicComponent } from "../dynamic/dynamic";
+import { RouteData } from "./types";
+export type RouteCacheEntry = {
+    data: RouteData;
+    component: FunctionComponent;
+};
+export declare class RouteError extends Error {
+    message: string;
+    statusCode: number;
+    constructor(message: string, statusCode: number);
+}
+export declare class RouteLoader {
+    entries: Map<string, Promise<RouteData>>;
+    components: Map<string, DynamicComponent<any>>;
+    appData: AppData;
+    private fetchImpl;
+    private processProps;
+    id: number;
+    setFetchImpl(impl: typeof fetch): void;
+    setPropsPreprocessor(processProps: (props: string) => string): void;
+    private getKey;
+    private getPropsURL;
+    hasRouteData(pathname: string): boolean;
+    loadRouteData(pathname: string, withAppData?: boolean): Promise<RouteData>;
+    setAppData(appData: AppData): void;
+    populateRouteData(pathname: string, data: RouteData): void;
+    getRouteComponent<K extends keyof ViewProps>(view: K): DynamicComponent<FunctionComponent<ViewProps[K]>>;
+    get appComponent(): DynamicComponent<FunctionComponent<PropsWithChildren<AppData>>>;
+}

package/dist/app/lib/routing/loader.js

@@ -0,0 +1,106 @@
+import { parseURL, stringifyParsedURL, stringifyQuery, withTrailingSlash } from "ufo";
+import { viewManifestReader } from "../internal";
+export class RouteError extends Error {
+    message;
+    statusCode;
+    constructor(message, statusCode) {
+        super(message);
+        this.message = message;
+        this.statusCode = statusCode;
+    }
+}
+export class RouteLoader {
+    entries = new Map();
+    components = new Map();
+    appData = null;
+    fetchImpl = (url, opts) => fetch(url, opts);
+    processProps = null;
+    id = Math.random();
+    setFetchImpl(impl) {
+        this.fetchImpl = impl;
+    }
+    setPropsPreprocessor(processProps) {
+        this.processProps = processProps;
+    }
+    getKey(url) {
+        const { pathname } = parseURL(url);
+        return pathname.replace(/\/$/, "").replace(/^\//, "");
+    }
+    getPropsURL(pathname, opts) {
+        const sampleUrl = env.client ? document.location.href : env.origin;
+        const origin = parseURL(sampleUrl);
+        let propsPath = withTrailingSlash(pathname);
+        let query = {};
+        if (opts.serverless) {
+            query["_debug"] = opts.debug ? "1" : "0";
+            query["_props"] = opts.appData ? "all" : "1";
+            query["_ssr"] = "1";
+        }
+        else {
+            query["_debug"] = opts.debug ? "1" : "0";
+            query["_props"] = opts.appData ? "all" : "1";
+            query["_ssr"] = "0";
+        }
+        return stringifyParsedURL({
+            auth: origin.auth,
+            host: origin.host,
+            protocol: origin.protocol,
+            pathname: propsPath,
+            search: stringifyQuery(query),
+        });
+    }
+    hasRouteData(pathname) {
+        const cacheKey = this.getKey(pathname);
+        return this.entries.has(cacheKey);
+    }
+    async loadRouteData(pathname, withAppData = false) {
+        const cacheKey = this.getKey(pathname);
+        // Cached value?
+        if (this.entries.has(cacheKey))
+            return this.entries.get(cacheKey);
+        const requestUrl = this.getPropsURL(pathname, {
+            appData: withAppData,
+            serverless: env.serverless,
+            debug: env.dev,
+        });
+        const promise = this.fetchImpl(requestUrl, {})
+            .then((response) => response.text())
+            .then((text) => {
+            if (this.processProps) {
+                text = this.processProps(text);
+            }
+            try {
+                return JSON.parse(text);
+            }
+            catch (err) {
+                throw new RouteError(`JSON parse error for route '${pathname}':\n${err?.message}`, 500);
+            }
+        })
+            .then((data) => {
+            if (data.redirect) {
+                const redirect = data.redirect;
+                data = this.loadRouteData(redirect).then((data) => {
+                    data.canonical = redirect;
+                    return data;
+                });
+            }
+            this.entries.set(cacheKey, new Promise((resolve) => resolve(data)));
+            return data;
+        });
+        this.entries.set(cacheKey, promise);
+        return promise;
+    }
+    setAppData(appData) {
+        this.appData = appData;
+    }
+    populateRouteData(pathname, data) {
+        const cacheKey = this.getKey(pathname);
+        this.entries.set(cacheKey, new Promise((resolve) => resolve(data)));
+    }
+    getRouteComponent(view) {
+        return viewManifestReader.value[view];
+    }
+    get appComponent() {
+        return viewManifestReader.value["_app"];
+    }
+}

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

@@ -0,0 +1,138 @@
+import { FunctionComponent } from "react";
+import type { RouteLoader } from "./loader";
+import { LinkHandlerMode, PointerOrMouseEvent } from "./utils";
+export type ParsedRouteTags = Record<"title" | "meta" | "script" | "style" | "link", {
+    [key: string]: string;
+}[]>;
+export interface RouteData {
+    view: string;
+    editLink?: string;
+    viewType: "react" | "html";
+    viewData: any;
+    appData: any;
+    redirect?: string;
+    canonical?: string;
+    meta?: {
+        head: ParsedRouteTags;
+        footer: ParsedRouteTags;
+    };
+}
+export type RouteReturnState<T = {}> = {
+    scrollTop: number;
+    scrollLeft: number;
+} & T;
+export type RouteLink = {
+    pathname: string;
+    query: Record<string, string | string[]>;
+    hash: string;
+};
+export type RouterEvent = {
+    type: "clicked";
+    link: RouteLink;
+    currentRoute: RouteState;
+    href: string;
+    mode: LinkHandlerMode;
+} | {
+    type: "capture-restorable-state";
+    state: RouteReturnState<Record<string, any>>;
+} | {
+    type: "navigate:start";
+    link: RouteLink;
+    currentRoute: RouteState;
+    hasPreloadedData: boolean;
+    goingBack?: boolean;
+    cancel: () => void;
+} | {
+    type: "navigate:data-ready";
+    link: RouteLink;
+    currentRoute: RouteState;
+    loadedRoute: RouteState;
+} | {
+    type: "navigate:will-change";
+    link: RouteLink;
+    currentRoute: RouteState;
+    loadedRoute: RouteState;
+} | {
+    type: "navigate:changed";
+    link: RouteLink;
+    lastRoute: RouteState;
+    currentRoute: RouteState;
+} | {
+    type: "preload:start";
+    link: RouteLink;
+    currentRoute: RouteState;
+} | {
+    type: "preload:data-ready";
+    link: RouteLink;
+    currentRoute: RouteState;
+    data: RouteData;
+} | {
+    type: "preload:finished";
+    link: RouteLink;
+    currentRoute: RouteState;
+    data: RouteData;
+} | {
+    type: "error";
+    critical: false;
+    error: Error;
+};
+export type RouterSubscriber = (event: RouterEvent) => void;
+export type RouterAPIState = {
+    /** Router chain */
+    history: RouteState[];
+    /** The top-most, active route */
+    activeRoute: RouteState;
+    /** The pending route */
+    pendingRoute?: RouteState;
+    pendingRouteReady?: boolean;
+    /** Transition blockers */
+    blockers: Promise<void>[];
+};
+export type RouterAPI = {
+    /** Preload a page and it's components */
+    preload: (url: string) => Promise<void>;
+    /** Prefetch the data for a page, but not it's components. */
+    prefetch: (url: string) => Promise<void>;
+    /** Begin transitioning to a new page */
+    navigate: (url: string, returnState?: RouteReturnState) => Promise<void>;
+    /** Replace the browser search params value with the given data, without transitioning the route */
+    replaceQuery: (search: Record<string, string | string[]>) => void;
+    /** Replace the hash */
+    replaceHash: (hash: string) => void;
+    /** Handle link clicking events */
+    handleClickEvent(e: PointerOrMouseEvent, href?: string): void;
+    /** A reference to the route loader (mostly for internal use) */
+    loader: RouteLoader;
+    /** Subscribe to events */
+    subscribe: (subscribe: RouterSubscriber) => () => void;
+    /** This function is used by the routing system automatically */
+    emitEvent: (event: RouterEvent) => void;
+};
+export type TypedRouteState<T, TProps> = {
+    /** A unique ID, representing this history item. */
+    id: string;
+    /** A unique hash, representing this URL/page */
+    key: string;
+    /** The current path of the route eg. `"/about"` */
+    pathname: string;
+    /** The un-parsed querystring, eg. `"?foo=bar"` */
+    search: string;
+    /** The parsed querystring, parsed using the `qs` library, which supports arrays. */
+    query: Record<string, string | string[]>;
+    /** The hash of the route, eg. `"#section"` */
+    hash: string;
+    /** The normalised URI, composed from pathname, query and hash */
+    uri: string;
+    /** An object that can hold transient state, like scroll position. When a user navigates back to a page, this state is included along with router events. See `useRestorableState` for more info. */
+    returnState?: RouteReturnState;
+    /** The name of the template, like `front-page` or `single-event` */
+    view: T;
+    /** The view component for the current route. */
+    component: FunctionComponent<TProps>;
+    /** The props for this route, to be passed to the component. */
+    props: TProps;
+};
+export type RouteState = {
+    [K in keyof ViewProps]: TypedRouteState<K, ViewProps[K]>;
+}[keyof ViewProps];
+export type AnyRouteState = TypedRouteState<string, any>;

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

@@ -0,0 +1,15 @@
+import { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from "react";
+import { RouteLink, RouteState } from "./types";
+export declare function isSameOrigin(url: string): boolean;
+export type PointerOrMouseEvent = MouseEvent | PointerEvent | ReactMouseEvent | ReactPointerEvent;
+export type LinkHandlerMode = {
+    mode: "ignore" | "navigate" | "native";
+    href?: string;
+};
+export declare function getLinkHandlerMode(e?: PointerOrMouseEvent, href?: string): LinkHandlerMode;
+type Partialize<T, TKeys extends keyof T> = Partial<Pick<T, TKeys>> & Omit<T, TKeys>;
+export declare function normalizeRoute(route: Partialize<RouteState, "uri" | "returnState" | "key">): RouteState;
+export declare function stringifyRouteLink(route: RouteLink): string;
+export declare function parseQuery(query: string): Record<string, string | string[]>;
+export declare function stringifyQuery(query: any): string;
+export {};