eddev 2.0.0-beta.12 → 2.0.0-beta.121

package/dist/app/server/server-context.js

@@ -1,7 +1,12 @@
-import { parseURL, stringifyParsedURL, withQuery } from "ufo";
+import { parseURL, stringifyParsedURL, withQuery, withTrailingSlash } from "ufo";
+import { fetchWP } from "../../node/utils/fetch-wp.js";
 import { filterHeader } from "./utils/headers.js";
 import { createUrlReplacer } from "./utils/replace-host.js";
-const PROXY_RESPONSE_HEADERS = ["content-type", "set-cookie", /^x-/, "cache-control"];
+import { pageCache, queryCache, swr } from "./utils/swr-cache.js";
+import { QueryMonitor } from "../utils/query-monitor.js";
+import chalk from "chalk";
+import { inspect } from "node:util";
+const PROXY_RESPONSE_HEADERS = ["content-type", "set-cookie", /^x-/, "cache-control", /woocommerce/, "location"];
 const PROXY_REQUEST_HEADERS = [
     "content-type",
     "accept",
@@ -11,28 +16,49 @@ const PROXY_REQUEST_HEADERS = [
     "referer",
     "user-agent",
     "authorization",
+    "woocommerce-session",
 ];
+const VARIES_HEADERS = ["Authorization", "woocommerce-session"];
+let runtime;
 export class ServerContext {
     dev;
     origin;
-    replaceUrls;
+    _urlReplacer;
+    rpcBases = [];
+    config;
+    static main;
     constructor(conf) {
         this.dev = conf.dev;
         this.origin = conf.origin;
+        this.rpcBases = conf.rpcBases ?? [];
+        this.config = conf.config;
         if (conf.replaceUrls) {
-            this.replaceUrls = createUrlReplacer(conf.replaceUrls);
+            this._urlReplacer = createUrlReplacer(conf.replaceUrls);
         }
+        ServerContext.main = this;
+    }
+    replaceUrls(text, origin) {
+        if (this._urlReplacer) {
+            return this._urlReplacer(text, origin);
+        }
+        return text;
+    }
+    get runtime() {
+        return runtime;
+    }
+    static setRuntime(rt) {
+        runtime = rt;
     }
     getOriginUrl(url) {
         const parsed = parseURL(url);
-        const parsedOrigin = parseURL(env.origin);
+        const parsedOrigin = parseURL(this.origin);
         parsed.host = parsedOrigin.host;
         parsed.protocol = parsedOrigin.protocol;
         return stringifyParsedURL(parsed);
     }
     async fetchOrigin(url, opts) {
         url = this.getOriginUrl(url);
-        const response = await fetch(url, {
+        const response = await fetchWP(url, {
             ...opts,
             headers: {
                 "Content-Type": "application/json",
@@ -50,8 +76,8 @@ export class ServerContext {
             }
         });
         let text = await response.text();
-        if (opts?.replaceUrls && this.replaceUrls) {
-            text = this.replaceUrls(text);
+        if (opts?.replaceUrls) {
+            text = this.replaceUrls(text, opts.newOrigin);
         }
         return new Response(text, {
             status: response.status,
@@ -59,22 +85,185 @@ export class ServerContext {
             headers,
         });
     }
+    debugLogQueryMonitor(kind, uri, monitor) {
+        if (!QueryMonitor.hasLogEntries(monitor))
+            return;
+        let indentLevel = 2;
+        const finalOutput = [];
+        let label = "";
+        if (kind === "props") {
+            label = "While fetching props for " + uri + "";
+        }
+        else if (kind === "query") {
+            label = "While querying " + uri + " via REST API";
+        }
+        else if (kind === "mutation") {
+            label = "While mutating " + uri + " via REST API";
+        }
+        else if (kind === "app") {
+            label = "While fetching app data";
+        }
+        finalOutput.push(chalk.whiteBright("➜ " + label));
+        function printEntry(entry) {
+            finalOutput.push(indent(indentLevel, chalk.whiteBright("➜ " + entry.file) + " " + chalk.gray(entry.label ? `(${entry.label})` : "")));
+            indentLevel += 2;
+            if (entry.log && entry.log.length) {
+                for (let item of entry.log) {
+                    let output = "";
+                    let prefix = "";
+                    let message = item.message;
+                    let stack = [];
+                    if (item.type === "php_error") {
+                        prefix = chalk.red("PHP Error:");
+                    }
+                    else if (item.type === "php_warning") {
+                        prefix = chalk.yellow("PHP Warning:");
+                    }
+                    else if (item.type === "php_notice") {
+                        prefix = chalk.yellow("PHP Notice:");
+                    }
+                    else if (item.type === "GRAPHQL_DEBUG") {
+                        prefix = chalk.cyan("debug:");
+                    }
+                    else if (item.type === "error" && item.extensions?.category === "user") {
+                        prefix = chalk.red("UserError:");
+                    }
+                    else {
+                        prefix = chalk.gray((item.type || "Log") + ":");
+                    }
+                    if (typeof message !== "string") {
+                        message = inspect(message, { depth: 4 });
+                    }
+                    if (item.debugMessage) {
+                        message += "\n" + chalk.gray(item.debugMessage);
+                    }
+                    output += prefix + " " + message;
+                    if (item.path) {
+                        stack.push(chalk.gray(" at path " + JSON.stringify(item.path)));
+                    }
+                    if (item.file) {
+                        stack.push(chalk.gray(`at ${chalk.white(item.file)} line ${item.line || "??"}`));
+                    }
+                    if (item.stack?.length) {
+                        stack.push(item.stack
+                            .filter((line) => {
+                            return line !== item.file + ":" + item.line;
+                        })
+                            .slice(0, 4)
+                            .map((line) => "  " + chalk.gray(line))
+                            .join("\n"));
+                    }
+                    if (stack.length > 0) {
+                        output += indent(2, "\n" + stack.join("\n"));
+                    }
+                    finalOutput.push(indent(indentLevel, "➜ " + output));
+                }
+            }
+            for (let child of entry.children ?? []) {
+                printEntry(child);
+            }
+            indentLevel -= 2;
+        }
+        for (let entry of monitor) {
+            printEntry(entry);
+        }
+        console.debug(finalOutput.join("\n"));
+    }
     async fetchRouteData(req) {
-        const fetchUrl = withQuery(req.pathname, {
-            ...req.query,
-            _props: req.withAppData ? "all" : "1",
-            _ssr: "1",
-            _debug: this.dev ? "1" : undefined,
+        /**
+         * Calculcate the cache key.
+         * For route data, the cache key is the pathname.
+         * TODO: Potential support for Vercel draft mode.
+         */
+        let cacheKey = "fetchRouteData:" + req.pathname;
+        const result = await swr({
+            key: cacheKey,
+            cache: pageCache,
+            forceFresh: this.dev,
+            getFreshValue: async (ctx) => {
+                ctx.metadata.createdTime;
+                const fetchUrl = withQuery(withTrailingSlash(req.pathname), {
+                    _props: "1",
+                    _ssr: "1",
+                    _debug: this.dev ? "1" : undefined,
+                });
+                const result = await this.fetchOrigin(fetchUrl, {
+                    cache: "no-cache",
+                    replaceUrls: true,
+                    newOrigin: req.newOrigin,
+                    headers: {
+                        "Content-Type": "application/json",
+                        Accept: "application/json",
+                    },
+                    redirect: "manual",
+                });
+                const preferredCacheDuration = parseInt(result.headers.get("x-ed-cache-duration") ?? "");
+                if (isFinite(preferredCacheDuration)) {
+                    ctx.metadata.ttl = preferredCacheDuration * 1000;
+                }
+                let resultStatus = result.status;
+                let resultHeaders = new Headers(result.headers);
+                let resultData = {};
+                // Special case for redirects
+                if (result.headers.get("location")) {
+                    let location = result.headers.get("location");
+                    let status = result.status;
+                    if (this.replaceUrls) {
+                        location = this.replaceUrls(location);
+                    }
+                    resultHeaders.delete("location");
+                    return {
+                        status: 200,
+                        headers: resultHeaders,
+                        data: JSON.stringify({ redirect: location, status: status }),
+                    };
+                }
+                resultData = await result.json();
+                if (resultData && typeof resultData === "object") {
+                    resultData.__generated = new Date().toISOString();
+                }
+                if (resultData.queryMonitor) {
+                    this.debugLogQueryMonitor("props", req.pathname, resultData.queryMonitor);
+                }
+                return {
+                    status: resultStatus,
+                    headers: resultHeaders,
+                    data: JSON.stringify(resultData),
+                };
+            },
         });
-        return this.fetchOrigin(fetchUrl, {
-            cache: "no-cache",
-            replaceUrls: true,
-            headers: {
-                "Content-Type": "application/json",
-                Accept: "application/json",
-                ...this.extractRequestHeaders(req.headers),
+        return new Response(result.data, {
+            status: result.status,
+            headers: result.headers,
+        });
+    }
+    async fetchAppData() {
+        const data = await swr({
+            key: "fetchAppData",
+            cache: pageCache,
+            getFreshValue: async (ctx) => {
+                const response = await this.fetchOrigin("/_appdata", {
+                    cache: "no-cache",
+                    replaceUrls: true,
+                    headers: {
+                        "Content-Type": "application/json",
+                        Accept: "application/json",
+                    },
+                });
+                const result = await response.json();
+                const preferredCacheDuration = parseInt(response.headers.get("x-ed-cache-duration") ?? "");
+                if (isFinite(preferredCacheDuration)) {
+                    ctx.metadata.ttl = preferredCacheDuration * 1000;
+                }
+                if (result.queryMonitor) {
+                    this.debugLogQueryMonitor("app", "", result.queryMonitor);
+                }
+                result.__generated = new Date().toISOString();
+                return result;
             },
+            forceFresh: this.dev,
         });
+        return data;
     }
     extractRequestHeaders(req) {
         const headers = {};
@@ -89,14 +278,52 @@ export class ServerContext {
     }
     async fetchNamedQuery(req) {
         const url = `/wp-json/ed/v1/query/${req.name}?params=${encodeURIComponent(JSON.stringify(req.params))}`;
-        return this.fetchOrigin(url, {
-            cache: "no-cache",
-            replaceUrls: true,
-            headers: {
-                ...this.extractRequestHeaders(req.headers),
-                "Content-Type": "application/json",
-                Accept: "application/json",
-            },
+        const key = `fetchNamedQuery:${req.name}:${JSON.stringify(req.params)}`;
+        const fetch = async () => {
+            const result = await this.fetchOrigin(url, {
+                cache: "no-cache",
+                replaceUrls: true,
+                headers: {
+                    ...this.extractRequestHeaders(req.headers),
+                    "Content-Type": "application/json",
+                    Accept: "application/json",
+                },
+            });
+            const preferredCacheDuration = parseInt(result.headers.get("x-ed-cache-duration") ?? "");
+            let resultStatus = result.status;
+            let resultHeaders = result.headers;
+            let resultData = await result.json();
+            if (resultData && typeof resultData === "object") {
+                resultData.__generated = new Date().toISOString();
+            }
+            if (resultData.queryMonitor) {
+                this.debugLogQueryMonitor("query", req.name, resultData.queryMonitor);
+            }
+            return {
+                status: resultStatus,
+                headers: resultHeaders,
+                data: JSON.stringify(resultData),
+                cacheTime: isFinite(preferredCacheDuration) ? preferredCacheDuration * 1000 : undefined,
+            };
+        };
+        // If headers like 'Authorization' are set, then we shouldn't cache.
+        const hasVariedHeaders = VARIES_HEADERS.some((key) => !!req.headers[key]);
+        // Get the result, either from cache or by fetching.
+        const result = hasVariedHeaders
+            ? await fetch()
+            : await swr({
+                key,
+                cache: queryCache,
+                forceFresh: this.dev,
+                getFreshValue: async (ctx) => {
+                    const result = await fetch();
+                    ctx.metadata.ttl = result.cacheTime;
+                    return result;
+                },
+            });
+        return new Response(result.data, {
+            status: result.status,
+            headers: result.headers,
         });
     }
     async fetchMutation(req) {
@@ -113,4 +340,54 @@ export class ServerContext {
             body: JSON.stringify(req.body),
         });
     }
+    get allowedCorsOrigins() {
+        let result = [];
+        if (this.config.serverless.endpoints) {
+            result.push(...Object.keys(this.config.serverless.endpoints));
+            result.push(...Object.values(this.config.serverless.endpoints));
+            result = result.filter((origin) => origin !== "*");
+        }
+        if (this.config.serverless.cors?.origins) {
+            result.push(...this.config.serverless.cors.origins);
+        }
+        return result;
+    }
+    getCorsOrigin(originHeader) {
+        const parsed = parseURL(originHeader);
+        if (this.allowedCorsOrigins.includes(parsed.host)) {
+            return originHeader;
+        }
+        if (this.allowedCorsOrigins.includes("*")) {
+            return "*";
+        }
+    }
+    getCorsHeaders(origin) {
+        if (!origin)
+            return {};
+        const allowedOrigin = this.getCorsOrigin(origin);
+        if (allowedOrigin) {
+            return {
+                "Access-Control-Allow-Methods": "OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE",
+                "Access-Control-Allow-Origin": allowedOrigin,
+                "Access-Control-Allow-Credentials": "true",
+                "Access-Control-Allow-Headers": "*",
+                "Access-Control-Expose-Headers": "*",
+            };
+        }
+        return {};
+    }
+}
+function indent(count, str) {
+    const indent = " ".repeat(count);
+    return str
+        .split("\n")
+        .map((line) => indent + line)
+        .join("\n");
+}
+function indentAllButFirst(count, str) {
+    const indent = " ".repeat(count);
+    return str
+        .split("\n")
+        .map((line, i) => (i === 0 ? line : indent + line))
+        .join("\n");
 }

package/dist/app/server/utils/replace-host.d.ts

@@ -7,4 +7,4 @@ export type UrlReplacerConf = {
         replace: boolean;
     }[];
 };
-export declare function createUrlReplacer(conf: UrlReplacerConf): (text: string) => string;
+export declare function createUrlReplacer(conf: UrlReplacerConf): (text: string, newOrigin?: string) => string;

package/dist/app/server/utils/replace-host.js

@@ -2,7 +2,7 @@ export function createUrlReplacer(conf) {
     // Create a regular expression to match the URL
     // Note that that the regex doesn't necessarily match the entire URL
     const lookup = new RegExp(conf.from.replace(/https?[:\\\/]+/, "https?[:\\/\\\\]+") + "([a-z0-9\\-_/\\\\]+)", "ig");
-    return (text) => {
+    return (text, newOrigin) => {
         return text.replace(lookup, (url) => {
             // Strip out the origin, to create a relative path
             const path = url.replace(/https?:[\/\\]+[^\/\\]+/, "");
@@ -18,10 +18,18 @@ export function createUrlReplacer(conf) {
                         return url;
                     }
                     else {
-                        return path;
+                        break;
                     }
                 }
             }
+            if (newOrigin) {
+                if (isEscaped) {
+                    return newOrigin.replace(/\//g, "\\/") + path;
+                }
+                else {
+                    return newOrigin + path;
+                }
+            }
             return path;
             // if (path.startsWith("/wp-content/uploads/")) {
             //   if (!conf.ignoreUploads) {

package/dist/app/server/utils/swr-cache.d.ts

@@ -0,0 +1,4 @@
+import { Cache, CachifiedOptions } from "@epic-web/cachified";
+export declare const pageCache: Cache<any>;
+export declare const queryCache: Cache<any>;
+export declare function swr<T>(args: CachifiedOptions<T>): Promise<T>;

package/dist/app/server/utils/swr-cache.js

@@ -0,0 +1,31 @@
+import { LRUCache } from "lru-cache";
+import { cachified, totalTtl } from "@epic-web/cachified";
+function createCache() {
+    const lruInstance = new LRUCache({ max: 1000 });
+    const lru = {
+        set(key, value) {
+            const ttl = totalTtl(value?.metadata);
+            return lruInstance.set(key, value, {
+                ttl: ttl === Infinity ? undefined : ttl,
+                start: value?.metadata?.createdTime,
+            });
+        },
+        get(key) {
+            return lruInstance.get(key);
+        },
+        delete(key) {
+            return lruInstance.delete(key);
+        },
+    };
+    return lru;
+}
+export const pageCache = createCache();
+export const queryCache = createCache();
+export function swr(args) {
+    return cachified({
+        ttl: args.ttl ?? 10_000,
+        swr: 3600_000,
+        fallbackToCache: 15_000,
+        ...args,
+    });
+}

package/dist/app/utils/APIProvider.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from "react";
+export declare function APIProvider(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;

package/dist/app/utils/APIProvider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryProvider } from "./query-client.js";
+export function APIProvider(props) {
+    return _jsx(QueryProvider, { children: props.children });
+}

package/dist/app/utils/BlockErrorBoundary.d.ts

@@ -0,0 +1,19 @@
+import { Component, ErrorInfo, ReactNode } from "react";
+import { BlocksContext, ContentBlock } from "../lib/blocks/ContentBlocks.js";
+interface Props {
+    block: ContentBlock;
+    blockContext: BlocksContext;
+    children: ReactNode;
+}
+interface State {
+    hasError: boolean;
+    error?: Error;
+    errorInfo?: ErrorInfo;
+}
+export declare class BlockErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/app/utils/BlockErrorBoundary.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import { errorHandling } from "../lib/runtime/errorHandling.js";
+import { ErrorMessage } from "./ErrorMessage.js";
+export class BlockErrorBoundary extends Component {
+    state = {
+        hasError: false,
+    };
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true, error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        if (errorHandling.onReactError) {
+            errorHandling.onReactError({
+                type: "block",
+                block: this.props.block,
+                error,
+                componentStack: errorInfo.componentStack,
+            });
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            const err = this.state.error;
+            let display = env.dev ? _jsx(ErrorMessage, { error: err }) : null;
+            if (errorHandling.renderFallback) {
+                display = errorHandling.renderFallback({
+                    type: "block",
+                    block: this.props.block,
+                    error: err,
+                }, display);
+            }
+            return display;
+        }
+        return this.props.children;
+    }
+}

package/dist/app/utils/ErrorMessage.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    error: Error;
+};
+export declare function ErrorMessage({ error }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/app/utils/ErrorMessage.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ErrorMessage({ error }) {
+    return (_jsx("pre", { style: {
+            backgroundColor: "#060309",
+            fontSize: "12px",
+            color: "#d92a0b",
+            outline: "1px solid #d92a0b",
+            outlineOffset: "-4px",
+            borderRadius: "6px",
+            padding: "12px 16px",
+            overflowX: "auto",
+            fontFamily: '"Roboto Mono", Menlo, monospace',
+        }, children: error.stack ?? String(error) }));
+}

package/dist/app/utils/RouteErrorBoundary.d.ts

@@ -0,0 +1,18 @@
+import { Component, ErrorInfo, ReactNode } from "react";
+import { RouteState } from "../lib/routing/types.js";
+interface Props {
+    route: RouteState;
+    children: ReactNode;
+}
+interface State {
+    hasError: boolean;
+    error?: Error;
+    errorInfo?: ErrorInfo;
+}
+export declare class RouteErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/app/utils/RouteErrorBoundary.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import { errorHandling } from "../lib/runtime/errorHandling.js";
+import { ErrorMessage } from "./ErrorMessage.js";
+export class RouteErrorBoundary extends Component {
+    state = {
+        hasError: false,
+    };
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true, error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        if (errorHandling.onReactError) {
+            errorHandling.onReactError({
+                type: "route",
+                route: this.props.route,
+                error,
+                componentStack: errorInfo.componentStack,
+            });
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            const err = this.state.error;
+            let display = env.dev ? _jsx(ErrorMessage, { error: err }) : null;
+            if (errorHandling.renderFallback) {
+                display = errorHandling.renderFallback({
+                    type: "route",
+                    route: this.props.route,
+                    error: err,
+                }, display);
+            }
+            return display;
+        }
+        return this.props.children;
+    }
+}

package/dist/app/utils/asset-capture.d.ts

@@ -0,0 +1,2 @@
+export declare const AssetCaptureContext: import("react").Context<Set<string>>;
+export declare const useAssetCapture: () => Set<string>;

package/dist/app/utils/asset-capture.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+export const AssetCaptureContext = createContext(new Set());
+export const useAssetCapture = () => {
+    return useContext(AssetCaptureContext);
+};

package/dist/app/utils/hydration-debugger.d.ts

@@ -0,0 +1,13 @@
+export type HydrationErrorSnapshot = {
+    html: string;
+    error: Error;
+    info: any;
+};
+export declare const hydrationDebug: {
+    initialHTML: string;
+    events: HydrationErrorSnapshot[];
+    add(item: {
+        error: Error;
+        info: any;
+    }): void;
+};

package/dist/app/utils/hydration-debugger.js

@@ -0,0 +1,11 @@
+import { proxy } from "valtio";
+export const hydrationDebug = proxy({
+    initialHTML: "",
+    events: [],
+    add(item) {
+        hydrationDebug.events.push({
+            html: document.querySelector("#_app")?.innerHTML ?? "",
+            ...item,
+        });
+    },
+});

package/dist/app/utils/query-client.d.ts

@@ -1,2 +1,4 @@
 import { QueryClient } from "@tanstack/react-query";
+import { PropsWithChildren } from "react";
 export declare function getQueryClient(): QueryClient;
+export declare function QueryProvider(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;