eddev 2.0.0-beta.4 → 2.0.0-beta.40

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

@@ -0,0 +1,464 @@
+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");
+}
+export async function runVinxiCodegen(opts) {
+    const codegen = createVinxiCodegen(opts);
+    await codegen.run();
+    codegen.stop();
+}
+export function createVinxiCodegen(opts) {
+    const project = opts.project;
+    const folder = ".eddev/" + getVinxiFolder(opts);
+    const codegen = new FSCodegen(opts.project, {
+        outDir: folder,
+    });
+    if (opts.serverless) {
+        codegen.registerFile({
+            name: "context.ts",
+            generate: () => {
+                const args = {
+                    dev: true,
+                    origin: project.origin,
+                    replaceUrls: {
+                        from: project.origin,
+                        to: opts.endpoint ?? "",
+                        prefixes: [
+                            { prefix: "/wp-content/uploads", replace: project.config?.serverless.uploads === "proxy" },
+                            { prefix: "/wp-content/plugins", replace: project.config?.serverless.plugins === "proxy" },
+                        ],
+                    },
+                };
+                return code /* tsx */ `
+          import { ServerContext } from "eddev/server"
+          import { getManifest } from "vinxi/manifest"
+
+          ServerContext.setRuntime({
+            getManifest
+          })
+
+          export const serverContext = new ServerContext({${Object.entries(args)
+                    .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
+                    .join(",\n")}
+          })
+        `.toString();
+            },
+        });
+    }
+    if (opts.serverless) {
+        codegen.registerFile({
+            name: "react-shim.js",
+            generate: code /* tsx */ `
+        import React from "react"
+        import ReactDOM from "react-dom/client"
+        Object.assign(React, window.React)
+        Object.assign(ReactDOM, window.ReactDOM)
+      `,
+        });
+    }
+    if (opts.serverless) {
+        // codegen.registerFile({
+        //   name: "manifest/extra-routes.ts",
+        //   generate: code/* tsx */ `
+        //     import { createRouter, eventHandler, getRouterParam, getQuery, getWebRequest, getRequestHeaders } from "vinxi/http"
+        //     import { serverContext } from "./context.js"
+        //     export const routes = [
+        //       {
+        //         pattern: '/test1',
+        //         handler: () => import('../../../test.ts')
+        //       }
+        //     ]
+        //     export default eventHandler((event) => {
+        //       routes
+        //     })
+        //   `,
+        // })
+    }
+    codegen.registerFile({
+        name: "entry.admin.tsx",
+        generate: () => {
+            return code /* tsx */ `
+        ${opts.serverless ? `import "./react-shim.js"` : ""}
+        ${opts.serverless ? `import "vinxi/client"` : ""}
+        import "../../views/index.css"
+        import "./manifest/admin"
+        import "./manifest/blocks"
+        import "./manifest/styles"
+        import bootAdmin from "eddev/_internal/boot-admin.js"
+
+        bootAdmin()
+      `;
+        },
+    });
+    codegen.registerFile({
+        name: "entry.client.tsx",
+        generate: () => {
+            if (opts.serverless) {
+                /**
+                 * Client entry for SSR mode
+                 */
+                return code /* tsx */ `
+          /// <reference types="vinxi/types/client" />
+          /**
+           * SSR-mode frontend entry.
+           * Hydrates the main app, including the html/head/body elements.
+           * Also ensures that the assets used during SSR are loaded.
+           */
+          import "vinxi/client"
+          import "../../views/index.css"
+          import "./manifest/blocks"
+          import "./manifest/views"
+          
+          import * as React from "react"
+          import { Root, hydrateRoot } from "react-dom/client"
+          import { SSRClientRoot } from "eddev/_internal/ssr-root-client.js"
+          import { getManifest } from "vinxi/manifest"
+          import { createAssets } from "@vinxi/react"
+          import { devToolsStore } from 'eddev/devtools'
+
+          // Set up a dynamic entry which will load the configured tailwind manifest
+          devToolsStore.loadTailwindConfig = () => import('./manifest/tailwind-config.js')
+
+          // Create the asset renderer, which will ensure scripts/styles are mounted correctly
+          function getAssets() {
+            const Assets = createAssets(getManifest("client").handler, getManifest("client"))
+            return <React.Suspense><Assets /></React.Suspense>
+          }
+
+          window.$reactRoot =
+            window.$reactRoot ||
+            hydrateRoot(
+              document,
+              <SSRClientRoot assets={getAssets()} metaTags={window._PAGE_DATA.meta.head} />,
+            )
+
+          if (import.meta.hot) {
+            import.meta.hot.accept((mod) => {
+              if (mod) {
+                const Assets = createAssets(getManifest("client").handler, getManifest("client"))
+                const app = <SSRClientRoot assets={getAssets()} metaTags={window._PAGE_DATA.meta.head} />
+                window.$reactRoot?.render(app)
+              }
+            })
+          }
+
+          declare global {
+            interface Window {
+              $reactRoot?: Root
+              _PAGE_DATA: any
+            }
+          }
+
+        `;
+            }
+            else {
+                return code /* tsx */ `
+          /**
+           * SPA-mode frontend entry.
+           * Renders the main app into the empty <div id='root'> element, and expects window._PAGE_DATA to be set.
+           */
+          import "./manifest/blocks"
+          import "./manifest/views"
+          import "../../views/index.css"
+          import { devToolsStore } from 'eddev/devtools'
+          import { createRoot } from "react-dom/client"
+          import { SPARoot } from "eddev/_internal/spa-root.js"
+          import * as React from "react"
+
+          devToolsStore.loadTailwindConfig = () => import('./manifest/tailwind-config')
+
+          createRoot(document.getElementById("root")!).render(<SPARoot />)
+        `;
+            }
+        },
+    });
+    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 } from "vinxi/http"
+        import { serverContext } from "./context.js"
+
+        const router = createRouter()
+          .get(
+            "/route/",
+            eventHandler(async (event) => {
+              const id = "/"
+
+              return await serverContext.fetchRouteData({
+                pathname: id,
+                withAppData: false,
+              })
+            }),
+          )
+          .get(
+            "/route/**:name",
+            eventHandler(async (event) => {
+              const id = "/" + getRouterParam(event, "name")
+
+              return await serverContext.fetchRouteData({
+                pathname: id,
+                withAppData: false,
+              })
+            }),
+          )
+          .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.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 { proxyWpAdmin, renderPageToSSRStream } from "eddev/server"
+        import { eventHandler, getRequestURL, setResponseHeader, setResponseStatus } from "vinxi/http"
+        import { serverContext } from "./context.js"
+        import { RouteData } from "eddev/routing"
+
+        export default eventHandler({
+          handler: async (event) => {
+            const url = getRequestURL(event)
+
+            if (url.pathname.includes(".")) {
+              return proxyWpAdmin(event, serverContext)
+            }
+
+            try {
+              const [{appData, trackers}, response] = await Promise.all([
+                serverContext.fetchAppData(),
+                serverContext.fetchRouteData({
+                  pathname: url.pathname,
+                  withAppData: false,
+                  headers: {},
+                  query: {},
+                }),
+              ])
+
+              let data: RouteData
+              try {
+                data = await response.json()
+                data.appData = appData
+                data.trackers = trackers
+              } catch (err) {
+                data = {
+                  view: "_error",
+                  viewType: "react",
+                  viewData: {},
+                  appData: appData,
+                }
+                console.error(err)
+                setResponseStatus(event, 500)
+              }
+              setResponseHeader(event, "Content-Type", "text/html; charset=utf-8")
+              return renderPageToSSRStream(url.pathname, data, serverContext)
+            } catch (err) {
+              console.error(err)
+              setResponseStatus(event, 500)
+              setResponseHeader(event, "Content-Type", "text/html; charset=utf-8")
+              return '<!DOCTYPE html><html><head><title>500 Internal Server Error</title></head><body><h1>500 Internal Server Error</h1><p>"'+err.message+'"</p></body></html>'
+            }
+          },
+        })
+    `,
+        });
+    }
+    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 { serverContext } from "./context.js"
+
+      export default eventHandler(async (event) => {
+        return proxyWpAdmin(event, serverContext)
+      })
+    `,
+        });
+    }
+    codegen.registerFile({
+        name: "manifest/blocks.ts",
+        generate: async () => {
+            const blockManifest = await project.blocks.get();
+            return code /* ts */ `
+        import { blockManifestReader } from 'eddev/_internal'
+        import { dynamic } from 'eddev/dynamic'
+        import core from '../../../blocks/_core'
+
+        const manifest = {
+          ${Object.entries(blockManifest.blocks)
+                .filter(([name]) => !name.match(/^_[a-z]+$/i))
+                .map(([name, block]) => {
+                const importStatement = `dynamic(() => import(${JSON.stringify("../../../" + block.fileName)}))`;
+                return JSON.stringify(block.acfName) + ": " + importStatement;
+            })
+                .join(",\n")},
+          ...core
+        }
+
+        const info = {
+          ${Object.entries(blockManifest.blocks)
+                .filter(([name]) => !name.match(/^_[a-z]+$/i))
+                .map(([name, block]) => {
+                return (JSON.stringify(block.acfName) +
+                    ": " +
+                    JSON.stringify({
+                        slug: block.slug,
+                        tags: block.tags,
+                        flags: block.flags ?? {},
+                    }));
+            })
+                .join(",\n")}
+        }
+
+        blockManifestReader.set(manifest, info)
+
+        export default manifest
+
+        if (import.meta.hot) {
+          import.meta.hot.accept()
+        }
+      `;
+        },
+        subscribe: project.blocks.subscribe,
+    });
+    codegen.registerFile({
+        name: "manifest/admin.ts",
+        generate: async () => {
+            const fieldManifest = await project.fields.get();
+            const widgetManifest = await project.widgets.get();
+            return code /* ts */ `
+          import { adminManifestReader } from 'eddev/_internal'
+          import editorConfig from '../../../blocks/_editor'
+
+          const fields = {${Object.entries(fieldManifest.fields)
+                .map(([name, field]) => {
+                const importStatement = `() => import(${JSON.stringify("../../../" + field.fileName)}).then(m => m.default)`;
+                return JSON.stringify(field.slug) + ": " + importStatement;
+            })
+                .join(",\n")}}
+          const widgets = {${Object.entries(widgetManifest.widgets)
+                .map(([name, widget]) => {
+                const importStatement = `() => import(${JSON.stringify("../../../" + widget.fileName)}).then(m => m.default)`;
+                return JSON.stringify(widget.slug) + ": " + importStatement;
+            })
+                .join(",\n")}}
+
+          const manifest = {
+            fields,
+            widgets,
+            editorConfig
+          }
+
+          adminManifestReader.set(manifest)
+          
+          export default manifest
+
+          export { editorConfig }
+
+          if (import.meta.hot) {
+            import.meta.hot.accept()
+          }
+        `;
+        },
+        subscribe: (callback) => {
+            const unsub = [project.fields.subscribe(callback), project.widgets.subscribe(callback)];
+            return () => unsub.forEach((u) => u());
+        },
+    });
+    codegen.registerFile({
+        name: "manifest/views.ts",
+        generate: async () => {
+            const viewManifest = await project.views.get();
+            return code /* ts */ `
+        import { viewManifestReader } from 'eddev/_internal'
+        import { dynamic } from 'eddev/dynamic'
+        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
+        
+        export default manifest
+
+        if (import.meta.hot) {
+          import.meta.hot.accept()
+        }
+      `;
+        },
+        subscribe: project.views.subscribe,
+    });
+    codegen.registerFile({
+        name: "manifest/styles.ts",
+        generate: async () => {
+            return code /* ts */ `
+        export const getCssText = undefined
+        export const editorGlobalStyles = () => {}      
+      `;
+        },
+    });
+    codegen.registerFile({
+        name: "manifest/tailwind-config.ts",
+        generate: async () => {
+            return code /* ts */ `
+        import tw from "../../../tailwind.config.ts"
+        import resolveConfig from 'tailwindcss/resolveConfig'
+        import { devToolsStore } from 'eddev/devtools'
+
+        const value = resolveConfig(tw)
+        devToolsStore.tailwindConfig = value
+
+        if (import.meta.hot) {
+          import.meta.hot.accept()
+        }
+      `;
+        },
+    });
+    return codegen;
+}

package/dist/node/graphql/graphql-codegen.d.ts

@@ -1,5 +1,5 @@
 import { Project } from "../project/project.js";
-export declare const graphqlLog: import("../utils/statefulLog.js").StatefulLog<GraphQLGenerator>;
+export declare const graphqlLog: import("../utils/stateful-log.js").StatefulLog<GraphQLGenerator>;
 export declare class GraphQLGenerator {
     project: Project;
     private needsRegenerate;

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";
@@ -10,9 +10,9 @@ import * as typescriptPlugin from "@graphql-codegen/typescript";
 import * as typescriptOperationsPlugin from "@graphql-codegen/typescript-operations";
 import chalk from "chalk";
 import { code } from "ts-poet";
-import { highlightCode } from "../utils/highlightCode.js";
-import { createConsole } from "../utils/statefulLog.js";
-import { watchFileTreeForChanges } from "../utils/watchFileTree.js";
+import { highlightCode } from "../utils/highlight-code.js";
+import { createConsole } from "../utils/stateful-log.js";
+import { watchFileTreeForChanges } from "../utils/watch-file-tree.js";
 import pluginFiles from "./plugins/gql-plugin-files.js";
 import pluginNoDuplicates from "./plugins/gql-plugin-no-duplicates.js";
 import pluginQueries from "./plugins/gql-plugin-queries.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",
@@ -227,6 +227,9 @@ export class GraphQLGenerator {
                 documents: getDocuments(["queries", "views", "blocks", "fragments"]),
                 hasDocuments: true,
                 banner: `import { ContentBlock } from "eddev/blocks"`,
+                footer: Object.keys(wp.scalarTypes)
+                    .map((name) => `export type ${name}Scalar = Scalars["${name}"]["output"]`)
+                    .join("\n"),
                 plugins: {
                     typescript: [typescriptPlugin, {}],
                     typescriptOperations: [typescriptOperationsPlugin, {}],
@@ -342,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
          */
@@ -353,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 || ""));
                         }
                     }
@@ -400,7 +447,7 @@ export class GraphQLGenerator {
             errors.push(String(err));
         }
         if (args.banner) {
-            output = args.banner + "\n\n" + output;
+            output = args.banner + "\n\n" + output + "\n" + (args.footer ?? "");
         }
         if (errors.length === 0) {
             const didWrite = await fs.writeIfUnchanged(config.filename, output);

package/dist/node/graphql/graphql-schema-loader.js

@@ -1,8 +1,6 @@
 import { loadSchema } from "@graphql-tools/load";
 import { UrlLoader } from "@graphql-tools/url-loader";
 import { introspectionFromSchema } from "graphql";
-import { Agent } from "https";
-import fetch from "node-fetch";
 import { graphqlLog as console } from "./graphql-codegen.js";
 import chalk from "chalk";
 import { hash } from "object-code";
@@ -23,22 +21,21 @@ export class GraphQLSchemaLoader {
         console.info(`${this.lastHash ? "Reloading" : "Loading"} GraphQL schema from ${chalk.yellowBright(this.url)}`);
         const rawSchema = await loadSchema(this.url, {
             loaders: [new UrlLoader()],
-            fetch: (url, opts) => {
-                const httpsAgent = new Agent({
-                    rejectUnauthorized: false,
-                });
-                return fetch(url, {
-                    ...opts,
-                    agent: function (_parsedURL) {
-                        if (_parsedURL.protocol == "http:") {
-                            return undefined;
-                        }
-                        else {
-                            return httpsAgent;
-                        }
-                    },
-                });
-            },
+            // fetch: (url: string, opts: any) => {
+            //   const httpsAgent = new Agent({
+            //     rejectUnauthorized: false,
+            //   })
+            //   return fetch(url, {
+            //     ...opts,
+            //     agent: function (_parsedURL) {
+            //       if (_parsedURL.protocol == "http:") {
+            //         return undefined
+            //       } else {
+            //         return httpsAgent
+            //       }
+            //     },
+            //   })
+            // },
         }).catch((e) => {
             return e;
         });

package/dist/node/project/config.js

@@ -4,7 +4,7 @@ import { z } from "zod";
 import { zodToJsonSchema } from "zod-to-json-schema";
 import { cliMode } from "../cli/cli-mode.js";
 import { fs } from "../utils/fs.js";
-import { isDeploying } from "../utils/isDeploying.js";
+import { isDeploying } from "../utils/is-deploying.js";
 import { projectLog as console } from "./project.js";
 export const EDConfigSchema = z.object({
     $schema: z.string().optional(),

package/dist/node/project/env.d.ts

@@ -35,5 +35,5 @@ export declare const ProjectEnvUtils: {
         valid: false;
     };
     getSafe<T extends ProjectEnvKey>(key: T): Required<ProjectEnvMap[T]> | undefined;
-    get<T extends ProjectEnvKey>(key: T, cons?: import("../utils/statefulLog.js").StatefulLog<import("./project.js").Project>): z.infer<(typeof fields)[T]>;
+    get<T extends ProjectEnvKey>(key: T, cons?: import("../utils/stateful-log.js").StatefulLog<import("./project.js").Project>): z.infer<(typeof fields)[T]>;
 };

package/dist/node/project/env.js

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { cliMode } from "../cli/cli-mode.js";
 import { projectLog as console } from "./project.js";
-import { formatZodError } from "../utils/formatZodError.js";
+import { formatZodError } from "../utils/format-zod-error.js";
 const portNumber = z
     .string()
     .default("0")