eddev 2.0.0-beta.115 → 2.0.0-beta.116

package/dist/app/entry/ssr-root-client.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useSnapshot } from "valtio";
 import { BrowserRouter } from "../lib/routing/components/BrowserRouter.js";
 import { clientMetaTags } from "../lib/routing/context.js";
 import { APIProvider } from "../utils/APIProvider.js";
+import { DevUILoader } from "../lib/devtools/loader.js";
 export function SSRClientRoot(props) {
-    return (_jsxs(APIProvider, { children: [_jsx(DynamicMetaTags, {}), _jsx(BrowserRouter, {})] }));
+    return (_jsxs(APIProvider, { children: [_jsx(BrowserRouter, {}), _jsxs(_Fragment, { children: [_jsx(DynamicMetaTags, {}), _jsx(DevUILoader, {})] })] }));
 }
 function DynamicMetaTags() {
     const dynamicTags = useSnapshot(clientMetaTags).tags;

package/dist/app/entry/ssr-root.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { SSRRouter } from "../lib/routing/components/SSRRouter.js";
 import { getRouteMeta, normalizeRoute } from "../lib/routing/utils.js";
 import { APIProvider } from "../utils/APIProvider.js";
@@ -6,16 +6,16 @@ export function SSRRoot(props) {
     const loader = props.loader;
     loader.setAppData(props.initialData.appData.data);
     loader.populateRouteData(props.pathname, props.initialData);
-    return (_jsx(APIProvider, { children: _jsx(SSRRouter, { loader: loader, route: normalizeRoute({
-                id: "initial",
-                component: loader.getRouteComponent(props.initialData.view),
-                key: "",
-                props: props.initialData.viewData.data,
-                view: props.initialData.view,
-                search: "",
-                pathname: props.pathname,
-                query: {},
-                hash: "",
-                meta: getRouteMeta(props.initialData),
-            }) }) }));
+    return (_jsxs(APIProvider, { children: [_jsx(SSRRouter, { loader: loader, route: normalizeRoute({
+                    id: "initial",
+                    component: loader.getRouteComponent(props.initialData.view),
+                    key: "",
+                    props: props.initialData.viewData.data,
+                    view: props.initialData.view,
+                    search: "",
+                    pathname: props.pathname,
+                    query: {},
+                    hash: "",
+                    meta: getRouteMeta(props.initialData),
+                }) }), _jsx(_Fragment, {})] }));
 }

package/dist/app/lib/blocks/editor/editor-config.js

@@ -8,7 +8,6 @@ export function configureEditorBlocks(config) {
     const wp = window.wp;
     let hideStyles = document.getElementById("title-hider");
     hideStyles?.remove();
-    console.log("CONFIG", config);
     if (config.hideTitle) {
         hideStyles = document.createElement("style");
         hideStyles.id = "title-hider";
@@ -17,7 +16,6 @@ export function configureEditorBlocks(config) {
         display: none !important;
       }
     `;
-        console.log("hideStyles", hideStyles);
         document.head.appendChild(hideStyles);
     }
     if (config.template) {
@@ -141,17 +139,24 @@ export function updateTemplateConfig() {
     }
 }
 export function watchEditorTemplate() {
-    let lastTemplate = "unknown";
-    wp.data.subscribe(() => {
-        setTimeout(() => {
-            const post = wp.data.select("core/editor").getCurrentPost();
-            let template = wp.data.select("core/editor").getPostEdits()?.template ?? post?.template ?? "";
-            if (template !== lastTemplate) {
-                lastTemplate = template;
+    let lastKey = "unknown";
+    let timer = 0;
+    const update = () => {
+        const post = wp.data.select("core/editor").getCurrentPost();
+        const template = wp.data.select("core/editor").getPostEdits()?.template ?? post?.template ?? "";
+        const key = [post.type, template, post.slug, post.title].join(";");
+        if (key !== lastKey) {
+            lastKey = key;
+            clearTimeout(timer);
+            timer = setTimeout(() => {
                 updateTemplateConfig();
-            }
-        }, 10);
+            }, 20);
+        }
+    };
+    wp.data.subscribe(() => {
+        update();
     });
+    update();
 }
 function setWrapperBlock(blockName, blocks) {
     const wp = window.wp;

package/dist/app/lib/blocks/editor/installGutenbergHooks.js

@@ -3,11 +3,11 @@ import { useEffect } from "react";
 import { useSnapshot } from "valtio";
 import { getBlockMetadata } from "../block-utils.js";
 import { InlineEditingContextProvider } from "../inline-editing.js";
+import { EditorHighlights } from "./EditorHighlights.js";
 import { BlockContext, EditableBlock } from "./EditorSupport.js";
 import { blocksByTag } from "./blocks-by-tag.js";
 import { editorConfigStore, getEditingPostInfo, watchEditorTemplate } from "./editor-config.js";
 import { rootBlocks } from "./root-blocks.js";
-import { EditorHighlights } from "./EditorHighlights.js";
 function listenForHandleResize() {
     let interval = setInterval(() => {
         let viewportTarget = document.querySelector(".interface-interface-skeleton__content");
@@ -23,14 +23,24 @@ function listenForHandleResize() {
 }
 export function whenEditorIsReady() {
     return new Promise((resolve) => {
+        let ready = false;
         const unsubscribe = wp.data.subscribe(() => {
             // This will trigger after the initial render blocking, before the window load event
             // This seems currently more reliable than using __unstableIsEditorReady
             if (wp.data.select("core/editor").isCleanNewPost() || wp.data.select("core/block-editor").getBlockCount() > 0) {
+                if (ready)
+                    return;
+                ready = true;
                 unsubscribe();
                 resolve();
             }
         });
+        setTimeout(() => {
+            if (ready)
+                return;
+            unsubscribe();
+            resolve();
+        }, 1000);
     });
 }
 export function installEDGutenbergHooks() {
@@ -54,7 +64,9 @@ export function installEDGutenbergHooks() {
     wp.richText.unregisterFormatType("core/language");
     wp.richText.unregisterFormatType("core/keyboard");
     wp.richText.unregisterFormatType("core/text-color");
-    whenEditorIsReady().then(() => watchEditorTemplate());
+    whenEditorIsReady().then(() => {
+        watchEditorTemplate();
+    });
     // Recalculate registered blocks when rootBlocks change
     rootBlocks.listen();
     wp.hooks.addFilter("blocks.registerBlockType", "ed", (item, name) => {

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

@@ -2,6 +2,7 @@ import { PropsWithChildren } from "react";
 import { type RouterAPI } from "../types.js";
 type Props = PropsWithChildren<{
     routerRef?: React.MutableRefObject<RouterAPI | null>;
+    onReady?: () => void;
 }>;
 export declare function BrowserRouter(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -423,5 +423,8 @@ export function BrowserRouter(props) {
             window.removeEventListener("popstate", onPopState);
         };
     }, []);
+    useEffect(() => {
+        props.onReady?.();
+    }, []);
     return (_jsx(RouterContext.Provider, { value: api, children: _jsx(RouterStateContext.Provider, { value: routerState, children: _jsx(AppRenderer, {}) }) }));
 }

package/dist/app/server/render-ssr-page.js

@@ -15,6 +15,7 @@ export async function getSsrStream(args) {
     const stream = await new Promise(async (resolve, reject) => {
         // console.log("Rendering to pipable")
         const stream = renderToPipeableStream(jsx, {
+            identifierPrefix: "ed",
             onShellReady() {
                 // console.log("Shell ready")
                 resolve(stream);

package/dist/app/server/server-context.d.ts

@@ -3,6 +3,7 @@ import { RequestHeaders } from "vinxi/http";
 import type { EDConfig } from "../../node/project/config.js";
 import { TrackerTags } from "../lib/routing/types.js";
 import { UrlReplacerConf } from "./utils/replace-host.js";
+import { QueryMonitor } from "../utils/query-monitor.js";
 export type ServerContextArgs = {
     dev: boolean;
     origin: string;
@@ -36,6 +37,7 @@ export declare class ServerContext {
         replaceUrls?: boolean;
         newOrigin?: string;
     }): Promise<Response>;
+    debugLogQueryMonitor(kind: "props" | "mutation" | "query" | "app", uri: string, monitor: QueryMonitor.Entry[]): void;
     fetchRouteData(req: {
         pathname: string;
         headers?: RequestHeaders;

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

@@ -3,6 +3,9 @@ import { fetchWP } from "../../node/utils/fetch-wp.js";
 import { filterHeader } from "./utils/headers.js";
 import { createUrlReplacer } from "./utils/replace-host.js";
 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",
@@ -82,6 +85,87 @@ 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 });
+                    }
+                    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) {
         /**
          * Calculcate the cache key.
@@ -135,6 +219,9 @@ export class ServerContext {
                 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,
@@ -165,6 +252,9 @@ export class ServerContext {
                 if (isFinite(preferredCacheDuration)) {
                     ctx.metadata.ttl = preferredCacheDuration * 1000;
                 }
+                if (result.queryMonitor) {
+                    this.debugLogQueryMonitor("app", "", result.queryMonitor);
+                }
                 result.__generated = new Date().toISOString();
                 return result;
             },
@@ -203,6 +293,9 @@ export class ServerContext {
             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,
@@ -281,3 +374,17 @@ export class ServerContext {
         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/utils/query-monitor.d.ts

@@ -0,0 +1,25 @@
+export declare namespace QueryMonitor {
+    type LogEntry = {
+        type: "php_warning" | "php_error" | "php_notice" | "error" | "GRAPHQL_DEBUG" | (string & {});
+        message: any;
+        line?: number;
+        file?: string;
+        stack?: string[];
+        locations?: {
+            line: number;
+            column: number;
+        }[];
+        path?: string[];
+        extensions?: {
+            category?: string;
+        };
+    };
+    type Entry = {
+        file: string;
+        duration: number;
+        label?: "app" | "page" | "block" | "query" | "mutation" | (string & {});
+        log: LogEntry[];
+        children?: Entry[];
+    };
+    function hasLogEntries(entry: Entry[]): boolean;
+}

package/dist/app/utils/query-monitor.js

@@ -0,0 +1,7 @@
+export var QueryMonitor;
+(function (QueryMonitor) {
+    function hasLogEntries(entry) {
+        return entry.some((e) => e.log.length > 0 || (e.children && hasLogEntries(e.children)));
+    }
+    QueryMonitor.hasLogEntries = hasLogEntries;
+})(QueryMonitor || (QueryMonitor = {}));

package/dist/node/cli/cli.js

@@ -79,12 +79,12 @@ program
         rootDir: process.cwd(),
         reportPluginCompatibility: true,
     });
-    const result = await project.verifyOriginAccess();
-    if (!result.success) {
-        projectLog.fail(result.message);
-        process.exit(1);
-        return;
-    }
+    // const result = await project.verifyOriginAccess()
+    // if (!result.success) {
+    //   projectLog.fail(result.message)
+    //   process.exit(1)
+    //   return
+    // }
     const infoWriter = new BuildInfoWriter(project);
     infoWriter.watch();
     infoWriter.write();
@@ -122,6 +122,8 @@ program
             // We ignore SSL errors in dev mode.
             if (typeof args[0] === "string" && args[0].includes("NODE_TLS_REJECT_UNAUTHORIZED"))
                 return;
+            if (typeof args[0] === "string" && args[0].includes("useLayoutEffect does nothing"))
+                return;
             serverlessLog.error(...args);
         };
         console.warn = (...args) => {

package/dist/node/cli/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "2.0.0-beta.115";
+export declare const VERSION = "2.0.0-beta.116";

package/dist/node/cli/version.js

@@ -1 +1 @@
-export const VERSION = "2.0.0-beta.115";
+export const VERSION = "2.0.0-beta.116";

package/dist/node/compiler/vinxi-codegen.js

@@ -134,6 +134,9 @@ export function createVinxiCodegen(opts) {
             hydrateRoot(
               document.getElementById('root')!,
               <React.Suspense><SSRClientRoot assets={getAssets()} metaTags={window._PAGE_DATA.meta.head} /></React.Suspense>,
+              {
+                identifierPrefix: "ed",
+              }
             )
 
           if (import.meta.hot) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "2.0.0-beta.115",
+  "version": "2.0.0-beta.116",
   "description": "",
   "main": "index.js",
   "type": "module",