eddev 2.0.0-beta.76 → 2.0.0-beta.78

package/dist/app/entry/HydrationOverlay.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { OverlayProps } from "./types";
+export declare function HydrationOverlay({ integrations }: OverlayProps): React.ReactPortal | null;

package/dist/app/entry/HydrationOverlay.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore
+import beautify from "beautify";
+import { createPortal } from "react-dom";
+import { useEffect, useState } from "react";
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued";
+import { hydrationDebug } from "../utils/hydration-debugger";
+import { useSnapshot } from "valtio";
+// Remove emotion-inserted style tags from the HTML string from the server
+// as they get removed before hydration, so they shouldn't show in the diff
+// (pollutes the diff and makes it unusable)
+function removeEmotionStyleTags(htmlString = "") {
+    const regex = /<style\s+data-emotion(?:="[^"]*"|[^>])*>[\s\S]*?<\/style>/g;
+    return htmlString.replace(regex, "");
+}
+const DiffViewer = ReactDiffViewer.default
+    ? ReactDiffViewer.default
+    : ReactDiffViewer;
+export function HydrationOverlay({ integrations }) {
+    const [SSRHtml, setSSRHtml] = useState("");
+    const [CSRHtml, setCSRHtml] = useState("");
+    const [showModal, setShowModal] = useState(true);
+    const [hasHydrationMismatch, setHasHydrationMismatch] = useState(false);
+    useEffect(() => {
+        // @ts-ignore
+        const ssrHtml = hydrationDebug.initialHTML;
+        // hydrationDebug.add({ error: new Error(), info: null })
+        // @ts-ignore
+        // window.BUILDER_HYDRATION_OVERLAY.CSR_HTML = document.querySelector("#_app")?.innerHTML
+        // @ts-ignore
+        const newCSRHtml = document.querySelector("#_app")?.innerHTML;
+        if (!ssrHtml || !newCSRHtml)
+            return;
+        const newSSR = beautify(ssrHtml, { format: "html" });
+        setSSRHtml(newSSR);
+        const newCSR = beautify(newCSRHtml, { format: "html" });
+        setCSRHtml(newCSR);
+        setShowModal(true);
+        // @ts-ignore
+        if (hydrationDebug.events.length > 0) {
+            console.log("Showing modal?");
+            setHasHydrationMismatch(true);
+        }
+    }, []);
+    const hideModal = () => {
+        setShowModal(false);
+    };
+    const renderModal = showModal && hasHydrationMismatch && typeof document !== "undefined";
+    const events = useSnapshot(hydrationDebug.events);
+    if (!renderModal) {
+        return null;
+    }
+    const renderOverlay = () => {
+        return (_jsx("div", { style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 999998,
+                background: "rgba(0,0,0,0.5)",
+                cursor: "pointer",
+                display: "flex",
+                flexDirection: "column",
+                fontFamily: "monospace",
+                direction: "ltr",
+            }, onClick: hideModal, children: _jsx("div", { style: {
+                    zIndex: 999999,
+                    margin: "4rem 6rem",
+                    backgroundColor: "white",
+                    borderRadius: "0.5rem",
+                    overflow: "auto",
+                    cursor: "auto",
+                    color: "#212529",
+                }, onClick: (e) => {
+                    e.stopPropagation();
+                }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [_jsxs("div", { style: {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                borderBottom: "1px solid black",
+                                alignItems: "center",
+                            }, children: [_jsx("div", { style: {
+                                        fontSize: "2rem",
+                                        fontWeight: "bold",
+                                        padding: "1rem",
+                                    }, children: "Hydration Mismatch Occurred" }), _jsx("button", { style: {
+                                        all: "unset",
+                                        cursor: "pointer",
+                                        padding: "0.5rem",
+                                        marginRight: "1rem",
+                                        backgroundColor: "#212529",
+                                        borderRadius: "0.25rem",
+                                        color: "white",
+                                    }, onClick: hideModal, children: "CLOSE" })] }), _jsx("div", { style: { position: "relative", width: "100%" }, children: _jsx(DiffViewer, { oldValue: SSRHtml, newValue: CSRHtml, leftTitle: "Server-Side Render", rightTitle: "Client-Side Render", compareMethod: DiffMethod.WORDS }) })] }) }) }));
+    };
+    return createPortal(renderOverlay(), document.body);
+}

package/dist/app/entry/hydration-script.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/app/entry/hydration-script.js

@@ -0,0 +1,18 @@
+import { hydrationDebug } from "../utils/hydration-debugger";
+//@ts-nocheck
+// window.addEventListener("error", (event) => {
+//   const msg = event.message.toLowerCase()
+//   const isHydrationMsg = msg.includes("hydration") || msg.includes("hydrating")
+//   if (isHydrationMsg) {
+//     hydrationDebug.add({
+//       error: event.error,
+//       info: null,
+//     })
+//   }
+// })
+const root = document.getElementById("_app");
+if (root) {
+    hydrationDebug.initialHTML = root.innerHTML;
+}
+// @ts-ignore
+window.hydrationDebug = hydrationDebug;

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

@@ -7,7 +7,7 @@ import { clientMetaTags } from "../lib/routing/context.js";
 import { APIProvider } from "../utils/APIProvider.js";
 import { MetaTags } from "./MetaTags.js";
 export function SSRClientRoot(props) {
-    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx(DynamicMetaTags, { tags: props.metaTags }), _jsx(Trackers, { position: "head" }), props.assets] }), _jsxs("body", { children: [_jsx(Trackers, { position: "body" }), _jsxs(APIProvider, { children: [_jsx(Suspense, { children: _jsx(BrowserRouter, {}) }), _jsx(DevUILoader, {})] }), _jsx(Trackers, { position: "footer" })] })] }));
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx(DynamicMetaTags, { tags: props.metaTags }), _jsx(Trackers, { position: "head" }), props.assets] }), _jsxs("body", { children: [_jsx(Trackers, { position: "body" }), _jsx(APIProvider, { children: _jsx(Suspense, { children: _jsx(BrowserRouter, {}) }) }), _jsx(DevUILoader, {}), _jsx(Trackers, { position: "footer" })] })] }));
 }
 function DynamicMetaTags(props) {
     const dynamicTags = useSnapshot(clientMetaTags).tags;

package/dist/app/lib/blocks/ContentBlocks.js

@@ -63,7 +63,7 @@ export const ContentBlocks = memo((props) => {
                 }
             }
             // Attempt to wrap the block
-            return (_jsxs(Fragment, { children: [spaceBefore, _jsx(BlockErrorBoundary, { block: block, blockContext: ctx, children: blockNode }), spaceAfter] }, index));
+            return (_jsxs(Fragment, { children: [spaceBefore, _jsx(BlockErrorBoundary, { block: block, blockContext: ctx, children: blockNode }), spaceAfter] }, block.slug + "_" + index));
         });
     }, [blocks, props.wrapBlock, props.spacer]);
     if (env.admin) {

package/dist/app/lib/devtools/components/GridIndicator.js

@@ -18,9 +18,11 @@ export function GridIndicator() {
     for (let i = 0; i < 12; i++) {
         cols.push(_jsx("div", { style: { height: "100%", backgroundColor: "rgba(255,0,0,0.1)" } }));
     }
-    useLayoutEffect(() => {
-        document.documentElement.classList.toggle("debug-grid", enabled);
-    }, [enabled]);
+    if (env.client) {
+        useLayoutEffect(() => {
+            document.documentElement.classList.toggle("debug-grid", enabled);
+        }, [enabled]);
+    }
     if (!enabled)
         return null;
     return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 999999999, pointerEvents: "none" }, children: _jsx("div", { className: "grid-auto debug-display", style: { height: "100%" }, children: cols }) }));

package/dist/app/lib/devtools/hooks/useTailwind.d.ts

@@ -883,20 +883,32 @@ export declare function useTailwindConfig(): {
         readonly corePlugins?: readonly (import("tailwindcss/types/generated/corePluginList.js").CorePluginList | undefined)[] | {
             readonly filter?: boolean | undefined;
             readonly fill?: boolean | undefined;
-            readonly translate?: boolean | undefined;
-            readonly content?: boolean | undefined;
-            readonly height?: boolean | undefined;
-            readonly width?: boolean | undefined;
+            readonly position?: boolean | undefined;
+            readonly zIndex?: boolean | undefined;
+            readonly space?: boolean | undefined;
             readonly cursor?: boolean | undefined;
             readonly display?: boolean | undefined;
+            readonly flex?: boolean | undefined;
+            readonly flexDirection?: boolean | undefined;
             readonly fontFamily?: boolean | undefined;
+            readonly margin?: boolean | undefined;
+            readonly backgroundColor?: boolean | undefined;
+            readonly borderRadius?: boolean | undefined;
+            readonly overflow?: boolean | undefined;
+            readonly justifyContent?: boolean | undefined;
+            readonly inset?: boolean | undefined;
+            readonly alignItems?: boolean | undefined;
+            readonly width?: boolean | undefined;
             readonly fontSize?: boolean | undefined;
-            readonly fontStyle?: boolean | undefined;
             readonly fontWeight?: boolean | undefined;
+            readonly padding?: boolean | undefined;
+            readonly translate?: boolean | undefined;
+            readonly content?: boolean | undefined;
+            readonly height?: boolean | undefined;
+            readonly fontStyle?: boolean | undefined;
             readonly letterSpacing?: boolean | undefined;
             readonly opacity?: boolean | undefined;
             readonly order?: boolean | undefined;
-            readonly overflow?: boolean | undefined;
             readonly pointerEvents?: boolean | undefined;
             readonly rotate?: boolean | undefined;
             readonly scale?: boolean | undefined;
@@ -906,22 +918,15 @@ export declare function useTailwindConfig(): {
             readonly transform?: boolean | undefined;
             readonly visibility?: boolean | undefined;
             readonly size?: boolean | undefined;
-            readonly backgroundColor?: boolean | undefined;
-            readonly inset?: boolean | undefined;
             readonly invert?: boolean | undefined;
             readonly outlineOffset?: boolean | undefined;
-            readonly borderRadius?: boolean | undefined;
-            readonly padding?: boolean | undefined;
-            readonly flex?: boolean | undefined;
             readonly blur?: boolean | undefined;
             readonly resize?: boolean | undefined;
-            readonly position?: boolean | undefined;
             readonly columns?: boolean | undefined;
             readonly preflight?: boolean | undefined;
             readonly container?: boolean | undefined;
             readonly accessibility?: boolean | undefined;
             readonly isolation?: boolean | undefined;
-            readonly zIndex?: boolean | undefined;
             readonly gridColumn?: boolean | undefined;
             readonly gridColumnStart?: boolean | undefined;
             readonly gridColumnEnd?: boolean | undefined;
@@ -930,7 +935,6 @@ export declare function useTailwindConfig(): {
             readonly gridRowEnd?: boolean | undefined;
             readonly float?: boolean | undefined;
             readonly clear?: boolean | undefined;
-            readonly margin?: boolean | undefined;
             readonly boxSizing?: boolean | undefined;
             readonly lineClamp?: boolean | undefined;
             readonly aspectRatio?: boolean | undefined;
@@ -967,16 +971,12 @@ export declare function useTailwindConfig(): {
             readonly gridAutoRows?: boolean | undefined;
             readonly gridTemplateColumns?: boolean | undefined;
             readonly gridTemplateRows?: boolean | undefined;
-            readonly flexDirection?: boolean | undefined;
             readonly flexWrap?: boolean | undefined;
             readonly placeContent?: boolean | undefined;
             readonly placeItems?: boolean | undefined;
             readonly alignContent?: boolean | undefined;
-            readonly alignItems?: boolean | undefined;
-            readonly justifyContent?: boolean | undefined;
             readonly justifyItems?: boolean | undefined;
             readonly gap?: boolean | undefined;
-            readonly space?: boolean | undefined;
             readonly divideWidth?: boolean | undefined;
             readonly divideStyle?: boolean | undefined;
             readonly divideColor?: boolean | undefined;
@@ -1928,20 +1928,32 @@ export declare function useTailwindConfig(): {
                 readonly corePlugins?: readonly (import("tailwindcss/types/generated/corePluginList.js").CorePluginList | undefined)[] | {
                     readonly filter?: boolean | undefined;
                     readonly fill?: boolean | undefined;
-                    readonly translate?: boolean | undefined;
-                    readonly content?: boolean | undefined;
-                    readonly height?: boolean | undefined;
-                    readonly width?: boolean | undefined;
+                    readonly position?: boolean | undefined;
+                    readonly zIndex?: boolean | undefined;
+                    readonly space?: boolean | undefined;
                     readonly cursor?: boolean | undefined;
                     readonly display?: boolean | undefined;
+                    readonly flex?: boolean | undefined;
+                    readonly flexDirection?: boolean | undefined;
                     readonly fontFamily?: boolean | undefined;
+                    readonly margin?: boolean | undefined;
+                    readonly backgroundColor?: boolean | undefined;
+                    readonly borderRadius?: boolean | undefined;
+                    readonly overflow?: boolean | undefined;
+                    readonly justifyContent?: boolean | undefined;
+                    readonly inset?: boolean | undefined;
+                    readonly alignItems?: boolean | undefined;
+                    readonly width?: boolean | undefined;
                     readonly fontSize?: boolean | undefined;
-                    readonly fontStyle?: boolean | undefined;
                     readonly fontWeight?: boolean | undefined;
+                    readonly padding?: boolean | undefined;
+                    readonly translate?: boolean | undefined;
+                    readonly content?: boolean | undefined;
+                    readonly height?: boolean | undefined;
+                    readonly fontStyle?: boolean | undefined;
                     readonly letterSpacing?: boolean | undefined;
                     readonly opacity?: boolean | undefined;
                     readonly order?: boolean | undefined;
-                    readonly overflow?: boolean | undefined;
                     readonly pointerEvents?: boolean | undefined;
                     readonly rotate?: boolean | undefined;
                     readonly scale?: boolean | undefined;
@@ -1951,22 +1963,15 @@ export declare function useTailwindConfig(): {
                     readonly transform?: boolean | undefined;
                     readonly visibility?: boolean | undefined;
                     readonly size?: boolean | undefined;
-                    readonly backgroundColor?: boolean | undefined;
-                    readonly inset?: boolean | undefined;
                     readonly invert?: boolean | undefined;
                     readonly outlineOffset?: boolean | undefined;
-                    readonly borderRadius?: boolean | undefined;
-                    readonly padding?: boolean | undefined;
-                    readonly flex?: boolean | undefined;
                     readonly blur?: boolean | undefined;
                     readonly resize?: boolean | undefined;
-                    readonly position?: boolean | undefined;
                     readonly columns?: boolean | undefined;
                     readonly preflight?: boolean | undefined;
                     readonly container?: boolean | undefined;
                     readonly accessibility?: boolean | undefined;
                     readonly isolation?: boolean | undefined;
-                    readonly zIndex?: boolean | undefined;
                     readonly gridColumn?: boolean | undefined;
                     readonly gridColumnStart?: boolean | undefined;
                     readonly gridColumnEnd?: boolean | undefined;
@@ -1975,7 +1980,6 @@ export declare function useTailwindConfig(): {
                     readonly gridRowEnd?: boolean | undefined;
                     readonly float?: boolean | undefined;
                     readonly clear?: boolean | undefined;
-                    readonly margin?: boolean | undefined;
                     readonly boxSizing?: boolean | undefined;
                     readonly lineClamp?: boolean | undefined;
                     readonly aspectRatio?: boolean | undefined;
@@ -2012,16 +2016,12 @@ export declare function useTailwindConfig(): {
                     readonly gridAutoRows?: boolean | undefined;
                     readonly gridTemplateColumns?: boolean | undefined;
                     readonly gridTemplateRows?: boolean | undefined;
-                    readonly flexDirection?: boolean | undefined;
                     readonly flexWrap?: boolean | undefined;
                     readonly placeContent?: boolean | undefined;
                     readonly placeItems?: boolean | undefined;
                     readonly alignContent?: boolean | undefined;
-                    readonly alignItems?: boolean | undefined;
-                    readonly justifyContent?: boolean | undefined;
                     readonly justifyItems?: boolean | undefined;
                     readonly gap?: boolean | undefined;
-                    readonly space?: boolean | undefined;
                     readonly divideWidth?: boolean | undefined;
                     readonly divideStyle?: boolean | undefined;
                     readonly divideColor?: boolean | undefined;
@@ -2948,20 +2948,32 @@ export declare function useTailwindConfig(): {
     readonly corePlugins?: readonly (import("tailwindcss/types/generated/corePluginList.js").CorePluginList | undefined)[] | {
         readonly filter?: boolean | undefined;
         readonly fill?: boolean | undefined;
-        readonly translate?: boolean | undefined;
-        readonly content?: boolean | undefined;
-        readonly height?: boolean | undefined;
-        readonly width?: boolean | undefined;
+        readonly position?: boolean | undefined;
+        readonly zIndex?: boolean | undefined;
+        readonly space?: boolean | undefined;
         readonly cursor?: boolean | undefined;
         readonly display?: boolean | undefined;
+        readonly flex?: boolean | undefined;
+        readonly flexDirection?: boolean | undefined;
         readonly fontFamily?: boolean | undefined;
+        readonly margin?: boolean | undefined;
+        readonly backgroundColor?: boolean | undefined;
+        readonly borderRadius?: boolean | undefined;
+        readonly overflow?: boolean | undefined;
+        readonly justifyContent?: boolean | undefined;
+        readonly inset?: boolean | undefined;
+        readonly alignItems?: boolean | undefined;
+        readonly width?: boolean | undefined;
         readonly fontSize?: boolean | undefined;
-        readonly fontStyle?: boolean | undefined;
         readonly fontWeight?: boolean | undefined;
+        readonly padding?: boolean | undefined;
+        readonly translate?: boolean | undefined;
+        readonly content?: boolean | undefined;
+        readonly height?: boolean | undefined;
+        readonly fontStyle?: boolean | undefined;
         readonly letterSpacing?: boolean | undefined;
         readonly opacity?: boolean | undefined;
         readonly order?: boolean | undefined;
-        readonly overflow?: boolean | undefined;
         readonly pointerEvents?: boolean | undefined;
         readonly rotate?: boolean | undefined;
         readonly scale?: boolean | undefined;
@@ -2971,22 +2983,15 @@ export declare function useTailwindConfig(): {
         readonly transform?: boolean | undefined;
         readonly visibility?: boolean | undefined;
         readonly size?: boolean | undefined;
-        readonly backgroundColor?: boolean | undefined;
-        readonly inset?: boolean | undefined;
         readonly invert?: boolean | undefined;
         readonly outlineOffset?: boolean | undefined;
-        readonly borderRadius?: boolean | undefined;
-        readonly padding?: boolean | undefined;
-        readonly flex?: boolean | undefined;
         readonly blur?: boolean | undefined;
         readonly resize?: boolean | undefined;
-        readonly position?: boolean | undefined;
         readonly columns?: boolean | undefined;
         readonly preflight?: boolean | undefined;
         readonly container?: boolean | undefined;
         readonly accessibility?: boolean | undefined;
         readonly isolation?: boolean | undefined;
-        readonly zIndex?: boolean | undefined;
         readonly gridColumn?: boolean | undefined;
         readonly gridColumnStart?: boolean | undefined;
         readonly gridColumnEnd?: boolean | undefined;
@@ -2995,7 +3000,6 @@ export declare function useTailwindConfig(): {
         readonly gridRowEnd?: boolean | undefined;
         readonly float?: boolean | undefined;
         readonly clear?: boolean | undefined;
-        readonly margin?: boolean | undefined;
         readonly boxSizing?: boolean | undefined;
         readonly lineClamp?: boolean | undefined;
         readonly aspectRatio?: boolean | undefined;
@@ -3032,16 +3036,12 @@ export declare function useTailwindConfig(): {
         readonly gridAutoRows?: boolean | undefined;
         readonly gridTemplateColumns?: boolean | undefined;
         readonly gridTemplateRows?: boolean | undefined;
-        readonly flexDirection?: boolean | undefined;
         readonly flexWrap?: boolean | undefined;
         readonly placeContent?: boolean | undefined;
         readonly placeItems?: boolean | undefined;
         readonly alignContent?: boolean | undefined;
-        readonly alignItems?: boolean | undefined;
-        readonly justifyContent?: boolean | undefined;
         readonly justifyItems?: boolean | undefined;
         readonly gap?: boolean | undefined;
-        readonly space?: boolean | undefined;
         readonly divideWidth?: boolean | undefined;
         readonly divideStyle?: boolean | undefined;
         readonly divideColor?: boolean | undefined;
@@ -3993,20 +3993,32 @@ export declare function useTailwindConfig(): {
             readonly corePlugins?: readonly (import("tailwindcss/types/generated/corePluginList.js").CorePluginList | undefined)[] | {
                 readonly filter?: boolean | undefined;
                 readonly fill?: boolean | undefined;
-                readonly translate?: boolean | undefined;
-                readonly content?: boolean | undefined;
-                readonly height?: boolean | undefined;
-                readonly width?: boolean | undefined;
+                readonly position?: boolean | undefined;
+                readonly zIndex?: boolean | undefined;
+                readonly space?: boolean | undefined;
                 readonly cursor?: boolean | undefined;
                 readonly display?: boolean | undefined;
+                readonly flex?: boolean | undefined;
+                readonly flexDirection?: boolean | undefined;
                 readonly fontFamily?: boolean | undefined;
+                readonly margin?: boolean | undefined;
+                readonly backgroundColor?: boolean | undefined;
+                readonly borderRadius?: boolean | undefined;
+                readonly overflow?: boolean | undefined;
+                readonly justifyContent?: boolean | undefined;
+                readonly inset?: boolean | undefined;
+                readonly alignItems?: boolean | undefined;
+                readonly width?: boolean | undefined;
                 readonly fontSize?: boolean | undefined;
-                readonly fontStyle?: boolean | undefined;
                 readonly fontWeight?: boolean | undefined;
+                readonly padding?: boolean | undefined;
+                readonly translate?: boolean | undefined;
+                readonly content?: boolean | undefined;
+                readonly height?: boolean | undefined;
+                readonly fontStyle?: boolean | undefined;
                 readonly letterSpacing?: boolean | undefined;
                 readonly opacity?: boolean | undefined;
                 readonly order?: boolean | undefined;
-                readonly overflow?: boolean | undefined;
                 readonly pointerEvents?: boolean | undefined;
                 readonly rotate?: boolean | undefined;
                 readonly scale?: boolean | undefined;
@@ -4016,22 +4028,15 @@ export declare function useTailwindConfig(): {
                 readonly transform?: boolean | undefined;
                 readonly visibility?: boolean | undefined;
                 readonly size?: boolean | undefined;
-                readonly backgroundColor?: boolean | undefined;
-                readonly inset?: boolean | undefined;
                 readonly invert?: boolean | undefined;
                 readonly outlineOffset?: boolean | undefined;
-                readonly borderRadius?: boolean | undefined;
-                readonly padding?: boolean | undefined;
-                readonly flex?: boolean | undefined;
                 readonly blur?: boolean | undefined;
                 readonly resize?: boolean | undefined;
-                readonly position?: boolean | undefined;
                 readonly columns?: boolean | undefined;
                 readonly preflight?: boolean | undefined;
                 readonly container?: boolean | undefined;
                 readonly accessibility?: boolean | undefined;
                 readonly isolation?: boolean | undefined;
-                readonly zIndex?: boolean | undefined;
                 readonly gridColumn?: boolean | undefined;
                 readonly gridColumnStart?: boolean | undefined;
                 readonly gridColumnEnd?: boolean | undefined;
@@ -4040,7 +4045,6 @@ export declare function useTailwindConfig(): {
                 readonly gridRowEnd?: boolean | undefined;
                 readonly float?: boolean | undefined;
                 readonly clear?: boolean | undefined;
-                readonly margin?: boolean | undefined;
                 readonly boxSizing?: boolean | undefined;
                 readonly lineClamp?: boolean | undefined;
                 readonly aspectRatio?: boolean | undefined;
@@ -4077,16 +4081,12 @@ export declare function useTailwindConfig(): {
                 readonly gridAutoRows?: boolean | undefined;
                 readonly gridTemplateColumns?: boolean | undefined;
                 readonly gridTemplateRows?: boolean | undefined;
-                readonly flexDirection?: boolean | undefined;
                 readonly flexWrap?: boolean | undefined;
                 readonly placeContent?: boolean | undefined;
                 readonly placeItems?: boolean | undefined;
                 readonly alignContent?: boolean | undefined;
-                readonly alignItems?: boolean | undefined;
-                readonly justifyContent?: boolean | undefined;
                 readonly justifyItems?: boolean | undefined;
                 readonly gap?: boolean | undefined;
-                readonly space?: boolean | undefined;
                 readonly divideWidth?: boolean | undefined;
                 readonly divideStyle?: boolean | undefined;
                 readonly divideColor?: boolean | undefined;

package/dist/app/server/render-ssr-page.d.ts

@@ -14,6 +14,7 @@ type RenderErrorPageArgs = {
     pathname: string;
     code: number;
     title: string;
+    newOrigin?: string;
 };
 export declare function renderErrorPage(args: RenderErrorPageArgs): Promise<Response>;
 export {};

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

@@ -26,7 +26,7 @@ export async function getSsrStream(args) {
                 console.error(err);
             },
             bootstrapModules: [clientManifest.inputs[clientManifest.handler].output.path],
-            bootstrapScriptContent: `window.manifest = ${JSON.stringify(await clientManifest.json())};\nwindow._PAGE_DATA = ${JSON.stringify(args.initialData)};\nwindow._TRACKERS = ${JSON.stringify(args.initialData.trackers)}`,
+            bootstrapScriptContent: `window.manifest = ${JSON.stringify(await clientManifest.json())};\nwindow._PAGE_DATA = ${JSON.stringify(args.initialData)};\nwindow._TRACKERS = ${JSON.stringify(args.initialData.trackers)};`,
         });
     });
     return new ReadableStream({
@@ -102,42 +102,6 @@ export async function renderErrorPage(args) {
     return renderPage({
         pathname: "/_error",
         statusCode: args.code,
+        newOrigin: args.newOrigin,
     });
-    // const serverContext = ServerContext.main
-    // let headers = new Headers()
-    // let responseInit: ResponseInit = {
-    //   headers,
-    // }
-    // try {
-    //   const { appData, trackers } = await serverContext.fetchAppData()
-    //   let data: RouteDataWithTrackers
-    //   data = {
-    //     view: "_error",
-    //     viewType: "react",
-    //     viewData: {},
-    //     appData,
-    //     trackers,
-    //   }
-    //   responseInit.status = 500
-    //   headers.set("Content-Type", "text/html; charset=utf-8")
-    //   const stream = await getSsrStream({
-    //     ...args,
-    //     initialData: data,
-    //   })
-    //   return new Response(stream, responseInit)
-    // } catch (err) {
-    //   console.error(err)
-    //   return new Response(
-    //     '<!DOCTYPE html><html><head><title>500 Internal Server Error</title></head><body><h1>500 Internal Server Error</h1><p>"' +
-    //       String(err) +
-    //       '"</p></body></html>',
-    //     {
-    //       status: 500,
-    //       statusText: "Internal Server Error",
-    //       headers: {
-    //         "Content-Type": "text/html; charset=utf-8",
-    //       },
-    //     },
-    //   )
-    // }
 }

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

@@ -94,6 +94,7 @@ export class ServerContext {
         const result = await swr({
             key: cacheKey,
             cache: pageCache,
+            forceFresh: this.dev,
             getFreshValue: async (ctx) => {
                 ctx.metadata.createdTime;
                 const fetchUrl = withQuery(withTrailingSlash(req.pathname), {
@@ -129,6 +130,7 @@ export class ServerContext {
                     resultData = {
                         redirect: location,
                         status: status,
+                        data: "",
                     };
                 }
                 if (resultData && typeof resultData === "object") {
@@ -167,6 +169,7 @@ export class ServerContext {
                 result.__generated = new Date().toISOString();
                 return result;
             },
+            forceFresh: this.dev,
         });
         return data;
     }
@@ -216,6 +219,7 @@ export class ServerContext {
             : await swr({
                 key,
                 cache: queryCache,
+                forceFresh: this.dev,
                 getFreshValue: async (ctx) => {
                     const result = await fetch();
                     ctx.metadata.ttl = result.cacheTime;

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/node/cli/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "2.0.0-beta.76";
+export declare const VERSION = "2.0.0-beta.78";

package/dist/node/cli/version.js

@@ -1 +1 @@
-export const VERSION = "2.0.0-beta.76";
+export const VERSION = "2.0.0-beta.78";

package/dist/node/compiler/bundler.admin.js

@@ -21,6 +21,7 @@ export class AdminBundler {
             outDir: relative(this.project.rootDir, "./dist/cms/"),
             serverless: false,
             target: "cms",
+            client: true,
         });
         console.verbose("Vite config:", baseConfig);
         await build(mergeConfig(baseConfig, defineConfig({

package/dist/node/compiler/bundler.frontend.js

@@ -21,6 +21,7 @@ export class FrontendBundler {
             outDir: relative(this.project.rootDir, "./dist/frontend/"),
             serverless: false,
             target: "frontend",
+            client: true,
         });
         console.verbose("Vite config:", baseConfig);
         await build(mergeConfig(baseConfig, defineConfig({

package/dist/node/compiler/get-vite-config.d.ts

@@ -8,6 +8,7 @@ export type Args = {
     outDir?: string;
     publicUrl: string;
     console: StatefulLog<any>;
+    client: boolean;
 };
 export declare function envPlugin(args: Args): PluginOption;
 export declare function reactPlugin(): PluginOption[];

package/dist/node/compiler/get-vite-config.js

@@ -8,7 +8,7 @@ import tsconfigPaths from "vite-tsconfig-paths";
 import { cliMode } from "../cli/cli-mode.js";
 export function envPlugin(args) {
     const envDefines = {
-        client: args.serverless ? "!import.meta.env.SSR" : "true",
+        client: args.client ? "true" : "false",
         serverless: args.serverless ? "true" : "false",
         dev: args.mode === "development" ? "true" : "false",
         admin: args.target === "cms" ? "true" : "false",
@@ -28,7 +28,9 @@ export function envPlugin(args) {
         return result;
     };
     return replace({
-        values: expandDefines(envDefines, ["process.env.", "process.", "env."]),
+        values: {
+            ...expandDefines(envDefines, ["process.env.", "process.", "env."]),
+        },
         preventAssignment: true,
     });
 }
@@ -90,8 +92,13 @@ export function ssrPlugin() {
             };
             config.ssr = {
                 ...config.ssr,
-                // @ts-ignore
-                noExternal: ["eddev", "vinxi", "react-use", ...(config?.optimizeDeps?.noExternal ?? [])],
+                noExternal: [
+                    "eddev",
+                    "vinxi",
+                    "react-use",
+                    // @ts-ignore
+                    ...(config?.optimizeDeps?.noExternal ?? []),
+                ],
                 optimizeDeps: {
                     exclude: ["eddev", "vinxi"],
                 },

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

@@ -1,8 +1,7 @@
 import { joinURL } from "ufo";
 import { createApp } from "vinxi";
-import tsconfigPaths from "vite-tsconfig-paths";
 import { StatefulLog } from "../utils/stateful-log.js";
-import { corePlugins, envPlugin } from "./get-vite-config.js";
+import { corePlugins } from "./get-vite-config.js";
 import { getVinxiFolder } from "./vinxi-codegen.js";
 export function createVinxiApp(args) {
     const log = args.log ?? new StatefulLog({ label: "Build" });
@@ -92,6 +91,11 @@ export function createVinxiApp(args) {
                     },
                 },
             },
+            vercel: {
+                config: {
+                    bypassToken: process.env.VERCEL_BYPASS_TOKEN,
+                },
+            },
         },
         routers: [
             ...args.config.serverless.themeAssets.map((folder) => {
@@ -106,41 +110,41 @@ export function createVinxiApp(args) {
                     base: joinURL(args.publicUrl, folderName),
                 };
             }),
-            {
-                name: "data-api",
-                type: "http",
-                base: "/_data/",
-                handler: `${folder}/handler.data-api.ts`,
-                target: "server",
-                plugins: () => [
-                    tsconfigPaths(),
-                    envPlugin({
-                        rootDir: args.rootDir,
-                        console: log,
-                        mode: args.mode,
-                        publicUrl: args.publicUrl,
-                        serverless: true,
-                        target: "frontend",
-                    }),
-                ],
-            },
-            {
-                name: "wp-proxy",
-                type: "http",
-                base: "/wp-",
-                handler: `${folder}/handler.wp-proxy.ts`,
-                target: "server",
-                plugins: () => [
-                    ...corePlugins({
-                        rootDir: args.rootDir,
-                        console: log,
-                        mode: args.mode,
-                        publicUrl: args.publicUrl,
-                        serverless: true,
-                        target: "frontend",
-                    }),
-                ],
-            },
+            // {
+            //   name: "data-api",
+            //   type: "http",
+            //   base: "/_data/",
+            //   handler: `${folder}/handler.data-api.ts`,
+            //   target: "server",
+            //   plugins: () => [
+            //     tsconfigPaths(),
+            //     envPlugin({
+            //       rootDir: args.rootDir,
+            //       console: log,
+            //       mode: args.mode,
+            //       publicUrl: args.publicUrl,
+            //       serverless: true,
+            //       target: "frontend",
+            //     }),
+            //   ],
+            // },
+            // {
+            //   name: "wp-proxy",
+            //   type: "http",
+            //   base: "/wp-",
+            //   handler: `${folder}/handler.wp-proxy.ts`,
+            //   target: "server",
+            //   plugins: () => [
+            //     ...corePlugins({
+            //       rootDir: args.rootDir,
+            //       console: log,
+            //       mode: args.mode,
+            //       publicUrl: args.publicUrl,
+            //       serverless: true,
+            //       target: "frontend",
+            //     }),
+            //   ],
+            // },
             {
                 name: "client",
                 type: "client",
@@ -154,6 +158,7 @@ export function createVinxiApp(args) {
                         publicUrl: args.publicUrl,
                         serverless: true,
                         target: "frontend",
+                        client: true,
                     }),
                 ],
                 base: "/_build",
@@ -171,6 +176,7 @@ export function createVinxiApp(args) {
                         publicUrl: args.publicUrl,
                         serverless: true,
                         target: "cms",
+                        client: true,
                     }),
                 ],
                 base: "/_admin",
@@ -206,6 +212,7 @@ export function createVinxiApp(args) {
                         publicUrl: args.publicUrl,
                         serverless: true,
                         target: "frontend",
+                        client: false,
                     }),
                 ],
             },

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

@@ -176,120 +176,168 @@ export function createVinxiCodegen(opts) {
             }
         },
     });
+    if (opts.serverless) {
+        // codegen.registerFile({
+        //   name: "handler.data-api.ts",
+        //   generate: code/* tsx */ `
+        //     /// <reference types="vinxi/types/server" />
+        //     import { createRouter, eventHandler, getRouterParam, getQuery, getWebRequest, getRequestHeaders, getRequestURL } from "vinxi/http"
+        //     import { serverContext } from "./context.js"
+        //     const router = createRouter()
+        //       .get(
+        //         "/route/",
+        //         eventHandler(async (event) => {
+        //           const id = "/"
+        //           const url = getRequestURL(event);
+        //           return await serverContext.fetchRouteData({
+        //             pathname: id,
+        //             newOrigin: url.origin,
+        //           })
+        //         }),
+        //       )
+        //       .get(
+        //         "/route/**:name",
+        //         eventHandler(async (event) => {
+        //           const id = "/" + getRouterParam(event, "name")
+        //           const url = getRequestURL(event);
+        //           return await serverContext.fetchRouteData({
+        //             pathname: id,
+        //             newOrigin: url.origin,
+        //           })
+        //         }),
+        //       )
+        //       .get(
+        //         "/query/**:name",
+        //         eventHandler(async (event) => {
+        //           const id = "/" + getRouterParam(event, "name")
+        //           const paramString = getQuery(event).params
+        //           const params = typeof paramString === "string" && paramString.length ? JSON.parse(paramString) : {}
+        //           return await serverContext.fetchNamedQuery({
+        //             name: id,
+        //             params: params,
+        //             headers: getRequestHeaders(event),
+        //           })
+        //         }),
+        //       )
+        //       .post(
+        //         "/mutation/**:name",
+        //         eventHandler(async (event) => {
+        //           const id = "/" + getRouterParam(event, "name")
+        //           const body = await getWebRequest(event).json()
+        //           return await serverContext.fetchMutation({
+        //             name: id,
+        //             body,
+        //             headers: getRequestHeaders(event),
+        //           })
+        //         }),
+        //       )
+        //     export default router.handler
+        //   `,
+        // })
+    }
     if (opts.serverless) {
         codegen.registerFile({
-            name: "handler.data-api.ts",
+            name: "handler.ssr-page.ts",
             generate: code /* tsx */ `
         /// <reference types="vinxi/types/server" />
-        import { createRouter, eventHandler, getRouterParam, getQuery, getWebRequest, getRequestHeaders, getRequestURL } from "vinxi/http"
+        import "../../views/index.css"
+        import "./manifest/blocks.js"
+        import "./manifest/styles.js"
+        import "./manifest/views.js"
+        import "./context.js"
+        import { proxyWpAdmin, renderPage, ServerContext } from "eddev/server"
+        import {
+          createRouter,
+          eventHandler,
+          getQuery,
+          getRequestHeaders,
+          getRequestURL,
+          getRouterParam,
+          getWebRequest,
+        } from "vinxi/http"
+        import { handleRPC } from "./rpc.js"
         import { serverContext } from "./context.js"
 
         const router = createRouter()
           .get(
-            "/route/",
+            "/_data/route/",
             eventHandler(async (event) => {
               const id = "/"
-              const url = getRequestURL(event);
+              const url = getRequestURL(event)
 
-              return await serverContext.fetchRouteData({
-                pathname: id,
-                newOrigin: url.origin,
-              })
+              return await serverContext.fetchRouteData({ pathname: id, newOrigin: url.origin })
             }),
           )
           .get(
-            "/route/**:name",
+            "/_data/route/**:name",
             eventHandler(async (event) => {
               const id = "/" + getRouterParam(event, "name")
-              const url = getRequestURL(event);
+              const url = getRequestURL(event)
 
-              return await serverContext.fetchRouteData({
-                pathname: id,
-                newOrigin: url.origin,
-              })
+              return await serverContext.fetchRouteData({ pathname: id, newOrigin: url.origin })
             }),
           )
           .get(
-            "/query/**:name",
+            "/_data/query/**:name",
             eventHandler(async (event) => {
               const id = "/" + getRouterParam(event, "name")
               const paramString = getQuery(event).params
 
               const params = typeof paramString === "string" && paramString.length ? JSON.parse(paramString) : {}
 
-              return await serverContext.fetchNamedQuery({
-                name: id,
-                params: params,
-                headers: getRequestHeaders(event),
-              })
+              return await serverContext.fetchNamedQuery({ name: id, params: params, headers: getRequestHeaders(event) })
             }),
           )
           .post(
-            "/mutation/**:name",
+            "/_data/mutation/**:name",
             eventHandler(async (event) => {
               const id = "/" + getRouterParam(event, "name")
               const body = await getWebRequest(event).json()
-              return await serverContext.fetchMutation({
-                name: id,
-                body,
-                headers: getRequestHeaders(event),
-              })
+              return await serverContext.fetchMutation({ name: id, body, headers: getRequestHeaders(event) })
             }),
           )
 
-        export default router.handler
-
-      `,
-        });
-    }
-    if (opts.serverless) {
-        codegen.registerFile({
-            name: "handler.ssr-page.ts",
-            generate: code /* tsx */ `
-        /// <reference types="vinxi/types/server" />
-        import "../../views/index.css"
-        import "./manifest/blocks.js"
-        import "./manifest/styles.js"
-        import "./manifest/views.js"
-        import "./context.js"
-        import { handleRPC } from "./rpc.js"
-        import { proxyWpAdmin, ServerContext, renderPage } from "eddev/server"
-        import { eventHandler, getRequestURL } from "vinxi/http"
-
         export default eventHandler({
           handler: async (event) => {
             const serverContext = ServerContext.main
             const url = getRequestURL(event)
 
+            // RPC
             const isRPC = serverContext.rpcBases.some((base) => url.pathname.startsWith(base))
             if (isRPC) {
               return handleRPC(event)
             }
 
-            if (url.pathname.includes(".") || url.pathname.startsWith("/graphql")) {
+            // Data API
+            if (url.pathname.startsWith("/_data/")) {
+              return router.handler(event)
+            }
+
+            // Proxy WordPress
+            if (url.pathname.includes(".") || url.pathname.startsWith("/graphql") || url.pathname.startsWith("/wp-")) {
               return proxyWpAdmin(event)
             }
 
+            // SSR
             return renderPage({ pathname: url.pathname, newOrigin: url.origin })
-          }
+          },
         })
     `,
         });
     }
     if (opts.serverless) {
-        codegen.registerFile({
-            name: "handler.wp-proxy.ts",
-            generate: code /* tsx */ `
-      /// <reference types="vinxi/types/server" />
-      import { proxyWpAdmin } from "eddev/server"
-      import { eventHandler } from "vinxi/http"
-      import  "./context.js"
-
-      export default eventHandler(async (event) => {
-        return proxyWpAdmin(event)
-      })
-    `,
-        });
+        // codegen.registerFile({
+        //   name: "handler.wp-proxy.ts",
+        //   generate: code/* tsx */ `
+        //   /// <reference types="vinxi/types/server" />
+        //   import { proxyWpAdmin } from "eddev/server"
+        //   import { eventHandler } from "vinxi/http"
+        //   import  "./context.js"
+        //   export default eventHandler(async (event) => {
+        //     return proxyWpAdmin(event)
+        //   })
+        // `,
+        // })
     }
     codegen.registerFile({
         name: "manifest/blocks.ts",

package/dist/node/types/block-type.d.ts

@@ -52,7 +52,7 @@ export declare const BlockMetaSchema: z.ZodObject<{
     dynamic: boolean;
     cache: boolean;
     allowMultiple: boolean;
-    frontendMode: "hidden" | "default" | "childrenOnly";
+    frontendMode: "default" | "hidden" | "childrenOnly";
     inserter: boolean;
     icon?: string | undefined;
     description?: string | undefined;
@@ -88,7 +88,7 @@ export declare const BlockMetaSchema: z.ZodObject<{
         postTypes: string[];
         fieldName: string;
     } | undefined;
-    frontendMode?: "hidden" | "default" | "childrenOnly" | undefined;
+    frontendMode?: "default" | "hidden" | "childrenOnly" | undefined;
     inserter?: boolean | undefined;
 }>;
 export type BlockMetadata = z.infer<typeof BlockMetaSchema>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "2.0.0-beta.76",
+  "version": "2.0.0-beta.78",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -76,19 +76,16 @@
   "license": "ISC",
   "dependencies": {
     "@babel/types": "^7.25.2",
-    "@clack/prompts": "^0.7.0",
     "@epic-web/cachified": "^5.2.0",
     "@graphql-codegen/core": "^4.0.0",
     "@graphql-codegen/typescript": "^4.0.1",
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-tools/load": "^8.0.0",
     "@graphql-tools/url-loader": "^8.0.0",
-    "@inquirer/prompts": "^5.0.6",
     "@nozbe/microfuzz": "^1.0.0",
     "@rollup/plugin-replace": "^5.0.5",
     "@tanstack/react-query": "^5.51.23",
     "@trpc/client": "^11.0.0-rc.608",
-    "@trpc/react-query": "^11.0.0-rc.608",
     "@trpc/server": "^11.0.0-rc.608",
     "@types/qs": "^6.9.15",
     "@vinxi/react": "^0.2.5",
@@ -104,15 +101,11 @@
     "hono": "^4.6.2",
     "ink": "^5.0.1",
     "ink-spinner": "^5.0.0",
-    "ink-text-input": "^6.0.0",
-    "listhen": "^1.6.0",
     "lru-cache": "10.4.1",
     "mkcert": "^3.2.0",
-    "mnemonist": "^0.39.8",
     "obj-console": "^1.0.2",
     "object-code": "^1.3.3",
     "qs": "^6.13.0",
-    "react-super-seo": "^1.1.9",
     "superjson": "^2.2.1",
     "ts-poet": "^6.6.0",
     "ufo": "^1.3.1",
@@ -126,8 +119,6 @@
     "zod-validation-error": "^2.1.0"
   },
   "devDependencies": {
-    "@types/express": "^4.17.21",
-    "@types/express-http-proxy": "^1.6.6",
     "@types/node": "^20.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",