eddev 2.0.0-beta.31 → 2.0.0-beta.34

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

@@ -1,5 +1,6 @@
 import { RouteMetaTag } from "../lib/routing";
 type Props = {
+    debugKey?: string;
     tags: RouteMetaTag[];
 };
 export declare function MetaTags(props: Props): import("react/jsx-runtime").JSX.Element;

package/dist/app/entry/MetaTags.js

@@ -1,17 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 export function MetaTags(props) {
-    return (_jsx(Fragment, { children: props.tags?.map((tag, i) => {
-            const Component = tag.tagName;
-            const props = { ...tag.attributes };
-            if (tag.inner) {
-                if (tag.tagName === "title") {
-                    props.children = tag.inner;
-                }
-                else {
-                    props.dangerouslySetInnerHTML = { __html: tag.inner };
-                }
+    return (_jsx(_Fragment, { children: props.tags?.map((tag, i) => {
+            const Tag = tag.tagName;
+            const tagProps = Array.isArray(tag.attributes) ? {} : { ...tag.attributes };
+            if (tag.tagName === "title") {
+                tagProps.children = tag.inner ?? "";
             }
-            return _jsx(Component, { ...props }, i);
+            else if (tag.tagName === "script" || !!tag.inner) {
+                tagProps.dangerouslySetInnerHTML = { __html: tag.inner ?? "" };
+            }
+            if (tagProps.async === "") {
+                tagProps.async = true;
+            }
+            return _jsx(Tag, { "data-test": props.debugKey + "_" + i, ...tagProps }, i);
         }) }));
 }

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

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useTailwindConfig } from "../hooks/useTailwind.js";
 import { usePersistState } from "../hooks/usePersistState.js";
+import { useTailwindConfig } from "../hooks/useTailwind.js";
 function parseBreakpointMin(breakpoint) {
     return parseInt(breakpoint);
 }

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

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../../../../../css/devtools.css";
 import { BreakpointIndicator } from "./BreakpointIndicator.js";
+import { GridIndicator } from "./GridIndicator";
 export default function DevUI() {
-    return (_jsx("div", { className: "eddev-ui", children: _jsx(BreakpointIndicator, {}) }));
+    return (_jsxs("div", { className: "eddev-ui", children: [_jsx(BreakpointIndicator, {}), _jsx(GridIndicator, {})] }));
 }

package/dist/app/lib/devtools/components/GridIndicator.d.ts

@@ -0,0 +1 @@
+export declare function GridIndicator(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { usePersistState } from "../hooks/usePersistState.js";
+export function GridIndicator() {
+    const [enabled, setEnabled] = usePersistState("gridOverlayEnabled", false);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "g" && e.ctrlKey) {
+                setEnabled((e) => !e);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, []);
+    const cols = [];
+    for (let i = 0; i < 12; i++) {
+        cols.push(_jsx("div", { style: { height: "100%", backgroundColor: "rgba(255,0,0,0.1)" } }));
+    }
+    if (!enabled)
+        return null;
+    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 999999999, pointerEvents: "none" }, children: _jsx("div", { className: "grid-auto", style: { height: "100%" }, children: cols }) }));
+}

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

@@ -1 +1 @@
-export declare function usePersistState<T>(id: string, initial: T): [T, (value: T) => void];
+export declare function usePersistState<T>(id: string, initial: T): [T, (value: T | ((current: T) => T)) => void];

package/dist/app/lib/devtools/hooks/usePersistState.js

@@ -24,8 +24,17 @@ export function usePersistState(id, initial) {
     return [
         value,
         (value) => {
-            set(id, value);
-            setValue(value);
+            if (typeof value === "function") {
+                return setValue((cur) => {
+                    const next = value(cur);
+                    set(id, next);
+                    return next;
+                });
+            }
+            else {
+                set(id, value);
+                setValue(value);
+            }
         },
     ];
 }

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

@@ -1,14 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { dynamic } from "../dynamic/dynamic.js";
+import { lazy, useEffect } from "react";
 import { usePersistState } from "./hooks/usePersistState.js";
 import { useIsSSR } from "../routing/hooks/useIsSSR.js";
-const DevUI = dynamic(() => import("./components/DevUI.js"));
+const DevUI = lazy(() => import("./components/DevUI.js"));
 export function DevUILoader() {
     const ssr = useIsSSR();
-    const [render, setRender] = usePersistState("enable_devui", typeof window !== "undefined" && (env.dev || window["ENABLE_DEV_UI"]));
+    const [render, setRender] = usePersistState("enable_devui", false);
     useEffect(() => {
-        if (document.location.search.includes("activate-dev-ui")) {
+        if (document.location.search.includes("activate-dev-ui") ||
+            window["ENABLE_DEV_UI"] ||
+            (env.client && env.dev)) {
             setRender(true);
         }
     }, []);

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

@@ -6,6 +6,11 @@ export type RouteMetaTag = {
     attributes: Record<string, string>;
     inner?: string;
 };
+export type TrackerTags = {
+    head?: RouteMetaTag[];
+    body?: RouteMetaTag[];
+    footer?: RouteMetaTag[];
+};
 export interface RouteData {
     view: string;
     editLink?: string;
@@ -19,6 +24,9 @@ export interface RouteData {
         footer: RouteMetaTag[];
     };
 }
+export interface RouteDataWithTrackers extends RouteData {
+    trackers?: TrackerTags;
+}
 export type RouteReturnState<T = {}> = {
     scrollTop: number;
     scrollLeft: number;

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

@@ -1,3 +1,5 @@
-import type { RouteData } from "../lib/routing/types.js";
+import type { RouteData, TrackerTags } from "../lib/routing/types.js";
 import { ServerContext } from "./server-context.js";
-export declare function renderPageToSSRStream(pathname: string, initialData: RouteData, serverContext: ServerContext): Promise<unknown>;
+export declare function renderPageToSSRStream(pathname: string, initialData: RouteData & {
+    trackers?: TrackerTags;
+}, serverContext: ServerContext): Promise<unknown>;

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

@@ -22,7 +22,7 @@ export async function renderPageToSSRStream(pathname, initialData, serverContext
                 console.error(err);
             },
             bootstrapModules: [clientManifest.inputs[clientManifest.handler].output.path],
-            bootstrapScriptContent: `window.manifest = ${JSON.stringify(await clientManifest.json())}; window._PAGE_DATA = ${JSON.stringify(initialData)}`,
+            bootstrapScriptContent: `window._PAGE_DATA = ${JSON.stringify(initialData)};`,
         });
     });
     return stream;

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

@@ -1,6 +1,7 @@
 import { RequestHeaders } from "vinxi/http";
 import { UrlReplacerConf } from "./utils/replace-host.js";
 import { Manifest } from "vinxi/dist/types/types/manifest";
+import { TrackerTags } from "../lib/routing/types.js";
 export type ServerContextArgs = {
     dev: boolean;
     origin: string;
@@ -9,6 +10,13 @@ export type ServerContextArgs = {
 export type ServerContextRuntime = {
     getManifest: (name: string) => Manifest;
 };
+/**
+ * Data returned from WordPress origin /_appdata route
+ */
+type ServerAppData = {
+    appData: any;
+    trackers: TrackerTags;
+};
 export declare class ServerContext {
     dev: boolean;
     origin: string;
@@ -26,9 +34,7 @@ export declare class ServerContext {
         headers?: RequestHeaders;
         withAppData?: boolean;
     }): Promise<Response>;
-    fetchAppData(req?: {
-        headers?: RequestHeaders;
-    }): Promise<any>;
+    fetchAppData(): Promise<ServerAppData>;
     extractRequestHeaders(req?: RequestHeaders): Partial<Record<import("vinxi/http").HTTPHeaderName, string | undefined>>;
     fetchNamedQuery(req: {
         name: string;
@@ -41,3 +47,4 @@ export declare class ServerContext {
         headers: RequestHeaders;
     }): Promise<Response>;
 }
+export {};

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

@@ -76,27 +76,32 @@ export class ServerContext {
             _ssr: "1",
             _debug: this.dev ? "1" : undefined,
         });
-        return this.fetchOrigin(fetchUrl, {
+        // console.log("Fetching route data", req.pathname)
+        const result = this.fetchOrigin(fetchUrl, {
             cache: "no-cache",
             replaceUrls: true,
             headers: {
                 "Content-Type": "application/json",
                 Accept: "application/json",
-                ...this.extractRequestHeaders(req.headers),
             },
         });
+        // console.log("Finished fetching route data")
+        return result;
     }
-    async fetchAppData(req) {
+    async fetchAppData() {
+        // console.log("Fetching app data")
         const response = await this.fetchOrigin("/_appdata", {
             cache: "no-cache",
             replaceUrls: true,
             headers: {
                 "Content-Type": "application/json",
                 Accept: "application/json",
-                ...(req?.headers ? this.extractRequestHeaders(req.headers) : {}),
             },
         });
-        return response.json();
+        // console.log("Decoding app data")
+        const result = await response.json();
+        // console.log("Done with app done")
+        return result;
     }
     extractRequestHeaders(req) {
         const headers = {};

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

@@ -1 +1 @@
-export declare const VERSION = "2.0.0-beta.31";
+export declare const VERSION = "2.0.0-beta.34";

package/dist/node/cli/version.js

@@ -1 +1 @@
-export const VERSION = "2.0.0-beta.31";
+export const VERSION = "2.0.0-beta.34";

package/dist/node/compiler/dev-server.js

@@ -25,12 +25,14 @@ export class DevServer {
     }
     async start() {
         console.setWorking(true);
+        // console.log("Setting up vinxi codegen")
         const codegen = createVinxiCodegen({
             mode: "development",
             project: this.project,
             serverless: true,
         });
         await codegen.runAndWatch();
+        // console.log("Has run once")
         const app = createVinxiApp({
             mode: "development",
             origin: this.origin,
@@ -45,7 +47,9 @@ export class DevServer {
             process.env.NITRO_PRESET ??
             process.env.NITRO_TARGET ??
             (process.versions.bun !== undefined ? "bun" : "node-server");
+        // console.log("Ensuring self signed cert")
         const keys = await ensureSelfSignedCert(this.hostname, this.project.rootDir);
+        // console.log("Done")
         const httpsConfig = {
             cert: keys.certFile,
             key: keys.keyFile,
@@ -61,6 +65,7 @@ export class DevServer {
                 devApp = args.devApp;
             },
         });
+        // console.log("Creating dev server")
         await createDevServer(app, {
             force: false,
             devtools: false,
@@ -71,11 +76,13 @@ export class DevServer {
             preset: preset,
             https: httpsConfig,
         });
+        // console.log("Rnning listen hook")
         // @ts-ignore
         await app.hooks.callHook("app:dev:server:listener:creating", {
             app,
             devApp,
         });
+        // console.log("Creating another listener")
         const listener = await devApp.listen(this.port, {
             hostname: this.hostname,
             port: this.port,
@@ -88,6 +95,7 @@ export class DevServer {
             devApp,
             listener,
         });
+        // console.log("Listening")
         console.setWorking(false);
         console.setState({
             serverlessUrl: this.hostOrigin,

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

@@ -1,4 +1,4 @@
-import { code } from "ts-poet";
+import { code, imp } from "ts-poet";
 import { FSCodegen } from "../utils/fs-codegen.js";
 export function getVinxiFolder(opts) {
     return (opts.mode === "development" ? "dev" : "prod") + (opts.serverless ? "" : "-spa");
@@ -261,11 +261,11 @@ export function createVinxiCodegen(opts) {
             }
 
             try {
-              const [appData, response] = await Promise.all([
+              const [{appData, trackers}, response] = await Promise.all([
                 serverContext.fetchAppData(),
                 serverContext.fetchRouteData({
                   pathname: url.pathname,
-                  withAppData: true,
+                  withAppData: false,
                   headers: {},
                   query: {},
                 }),
@@ -275,6 +275,7 @@ export function createVinxiCodegen(opts) {
               try {
                 data = await response.json()
                 data.appData = appData
+                data.trackers = trackers
               } catch (err) {
                 data = {
                   view: "_error",
@@ -410,12 +411,17 @@ export function createVinxiCodegen(opts) {
             return code /* ts */ `
         import { viewManifestReader } from 'eddev/_internal'
         import { dynamic } from 'eddev/dynamic'
-        const manifest = {${Object.entries(viewManifest.views)
-                .map(([name, view]) => {
-                const importStatement = `dynamic(() => import(${JSON.stringify("../../../" + view.fileName)}))`;
-                return JSON.stringify(view.slug) + ": " + importStatement;
-            })
-                .join(",\n")}}
+        const manifest = {${Object.entries(viewManifest.views).map(([name, view]) => {
+                const src = "../../../" + view.fileName;
+                let importStatement;
+                if (name.startsWith("_")) {
+                    importStatement = imp(name + "=" + src);
+                }
+                else {
+                    importStatement = code `dynamic(() => import(${JSON.stringify(src)}))`;
+                }
+                return code `${JSON.stringify(view.slug)}: ${importStatement},\n`;
+            })}}
 
         viewManifestReader.value = manifest
         

package/dist/node/graphql/graphql-codegen.js

@@ -1,5 +1,5 @@
 import { codegen } from "@graphql-codegen/core";
-import { Kind } from "graphql";
+import { Kind, visit } from "graphql";
 import { NoUnusedFragmentsRule, specifiedRules, validate } from "graphql/validation/index.js";
 import { join, relative, resolve } from "path";
 import { ProjectEnvUtils } from "../project/env.js";
@@ -62,6 +62,11 @@ export class GraphQLGenerator {
         this.project = project;
         this.schemaLoader = new GraphQLSchemaLoader(ProjectEnvUtils.get("DEBUG_GRAPHQL_URL"));
         this.fileLoader = createGraphQLFileLoader(this.project, [
+            {
+                baseFolder: "queries/fragments",
+                pattern: "**/*.graphql",
+                key: "fragments",
+            },
             {
                 baseFolder: "blocks",
                 pattern: "**/*.graphql",
@@ -72,11 +77,6 @@ export class GraphQLGenerator {
                 pattern: "**/*.graphql",
                 key: "views",
             },
-            {
-                baseFolder: "queries/fragments",
-                pattern: "**/*.graphql",
-                key: "fragments",
-            },
             {
                 baseFolder: "queries",
                 pattern: "**/*.graphql",
@@ -345,6 +345,44 @@ export class GraphQLGenerator {
          * Use all rules, except for No Unused Fragments — since we prepend those fragments to every test
          */
         const validationRules = specifiedRules.filter((rule) => rule !== NoUnusedFragmentsRule);
+        /**
+         * Get all the base fragment definitions
+         */
+        const baseFragments = new Map();
+        Object.values(graphQLFiles.fragments)
+            .map((file) => file?.ast?.definitions ?? [])
+            .filter((def) => def.length > 0)
+            .flat()
+            .filter((n) => n.kind === Kind.FRAGMENT_DEFINITION)
+            .forEach((node) => baseFragments.set(node.name.value, node));
+        function findFragments(defs, map = new Map()) {
+            for (let def of defs) {
+                if (def.kind === Kind.FRAGMENT_DEFINITION) {
+                    map.set(def.name.value, def);
+                }
+            }
+            for (let def of defs) {
+                visit(def, {
+                    FragmentSpread: {
+                        enter: (node) => {
+                            const match = baseFragments.get(node.name.value);
+                            if (match && !map.has(node.name.value)) {
+                                map.set(node.name.value, match);
+                                findFragments([match], map);
+                            }
+                        },
+                    },
+                });
+            }
+            return {
+                fragments: [...map.values()],
+                definitions: defs.filter((n) => n.kind !== Kind.FRAGMENT_DEFINITION),
+            };
+        }
+        /**
+         * Only report the same error once (mostly for preventing repeats of the same fragment errors)
+         */
+        const errorsShown = new Map();
         /**
          * Validate everything
          */
@@ -356,19 +394,25 @@ export class GraphQLGenerator {
                 }
                 else {
                     // Find all fragments
-                    const fragments = Object.values(graphQLFiles.fragments)
-                        .map((file) => file.ast.definitions)
-                        .filter((def) => def.length > 0)
-                        .filter((def) => def !== file.ast.definitions)
-                        .flat();
+                    const { fragments, definitions } = findFragments(file?.ast?.definitions ?? []);
                     const validationAST = {
                         kind: Kind.DOCUMENT,
-                        definitions: [...fragments, ...file.ast.definitions],
+                        definitions: [...fragments, ...definitions],
                         loc: file.ast.loc,
                     };
                     const errors = validate(schema, validationAST, validationRules);
                     if (errors.length > 0) {
                         for (let error of errors) {
+                            if (error.nodes && error.nodes[0]) {
+                                const node = error.nodes[0];
+                                if (errorsShown.has(node) && errorsShown.get(node)?.includes(error.message)) {
+                                    continue;
+                                }
+                                else {
+                                    errorsShown.set(node, [...(errorsShown.get(node) ?? []), error.message]);
+                                }
+                            }
+                            // console.log(error.nodes?.map((n) => n.kind))
                             report.push(new GraphQLValidationError(error.message, path, error.locations?.[0].line || 1, error.locations?.[0].column || 1, error.source?.body || ""));
                         }
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "2.0.0-beta.31",
+  "version": "2.0.0-beta.34",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -102,6 +102,7 @@
     "obj-console": "^1.0.2",
     "object-code": "^1.3.3",
     "qs": "^6.13.0",
+    "react-super-seo": "^1.1.9",
     "ts-poet": "^6.6.0",
     "ufo": "^1.3.1",
     "undent": "^0.1.0",