eddev 2.0.0-beta.2 → 2.0.0-beta.200

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

@@ -0,0 +1,731 @@
+import { code, imp } from "ts-poet";
+import { FSCodegen } from "../utils/fs-codegen.js";
+import { camelCase, pascalCase } from "change-case-all";
+import { ProjectEnvUtils } from "../project/env.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: async () => {
+                const args = {
+                    dev: opts.mode === "development",
+                    origin: project.origin,
+                    replaceUrls: {
+                        from: project.origin,
+                        to: opts.endpoint ?? "",
+                        prefixes: [
+                            { prefix: "/wp-content/uploads", replace: project.config?.serverless.uploads === "remote" },
+                            { prefix: "/wp-content/plugins", replace: project.config?.serverless.plugins === "remote" },
+                        ],
+                    },
+                    rpcBases: (await project.serverRoutes.get()).bases ?? [],
+                    config: project.config,
+                };
+                return code /* tsx */ `
+          import { ServerContext } from "eddev/server"
+          import { getManifest } from "vinxi/manifest"
+          import { apiConfig } from 'eddev/hooks'
+
+          ServerContext.setRuntime({
+            getManifest
+          })
+
+          export const serverContext = new ServerContext({${Object.entries(args)
+                    .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
+                    .join(",\n")}
+          })
+
+          apiConfig.apiKey = ${JSON.stringify(ProjectEnvUtils.getSafe("SITE_API_KEY") ?? "")}
+        `.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 "../../${project.cssEntryFile}"
+        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 "../../${project.cssEntryFile}"
+          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.getElementById('root')!,
+              <React.Suspense><SSRClientRoot assets={getAssets()} metaTags={window._PAGE_DATA?.meta?.head} /></React.Suspense>,
+              {
+                identifierPrefix: "ed",
+              }
+            )
+
+          if (import.meta.hot) {
+            import.meta.hot.accept((mod) => {
+              if (mod) {
+                const app = <React.Suspense><SSRClientRoot assets={getAssets()} metaTags={window._PAGE_DATA?.meta?.head} /></React.Suspense>
+                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 "../../${project.cssEntryFile}"
+          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(<React.Suspense><SPARoot /></React.Suspense>)
+        `;
+            }
+        },
+    });
+    if (opts.serverless) {
+        codegen.registerFile({
+            name: "handler.bypass.ts",
+            generate: code /* tsx */ `
+        /// <reference types="vinxi/types/server" />
+        import { createRouter, eventHandler, getCookie, setCookie } from "vinxi/http"
+
+        const BYPASS_TOKEN = process.env.VERCEL_BYPASS_TOKEN
+        const COOKIE_NAME = "__prerender_bypass"
+
+        const router = createRouter()
+          .get(
+            "/enable",
+            eventHandler(async (event) => {
+              if (!BYPASS_TOKEN) return false
+
+              setCookie(event, COOKIE_NAME, BYPASS_TOKEN, {
+                expires: new Date(Date.now() + 1000 * 60 * 60 * 24),
+              })
+
+              return true
+            }),
+          )
+          .get(
+            "/disable",
+            eventHandler(async (event) => {
+              setCookie(event, COOKIE_NAME, "")
+
+              return true
+            }),
+          )
+          .get(
+            "/check",
+            eventHandler(async (event) => {
+              const cookie = getCookie(event, COOKIE_NAME)
+
+              if (cookie === BYPASS_TOKEN) {
+                return true
+              }
+
+              return false
+            }),
+          )
+        export default router.handler
+      `,
+        });
+        // 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.ssr-page.ts",
+            generate: code /* tsx */ `
+        /// <reference types="vinxi/types/server" />
+        import "../../${project.cssEntryFile}"
+        import "./manifest/blocks.js"
+        import "./manifest/styles.js"
+        import "./manifest/views.js"
+        import "./context.js"
+        import { proxyWpAdmin, renderPage, renderPageForIndexing, 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"
+        import { getManifest } from "vinxi/manifest"
+        import { inspect } from "node:util"
+        import { withTrailingSlash } from 'ufo'
+
+        const router = createRouter()
+          .get(
+            "/_data/route/",
+            eventHandler(async (event) => {
+              const id = "/"
+              const url = getRequestURL(event)
+
+              return await serverContext.fetchRouteData({ pathname: id, newOrigin: url.origin })
+            }),
+          )
+          .get(
+            "/_data/route/**:name",
+            eventHandler(async (event) => {
+              const id = "/" + getRouterParam(event, "name")
+              const url = getRequestURL(event)
+
+              return await serverContext.fetchRouteData({ pathname: id, newOrigin: url.origin })
+            }),
+          )
+          .get(
+            "/_data/query/**:name",
+            eventHandler(async (event) => {
+              const id = "/" + getRouterParam(event, "name")
+              const paramString = getQuery(event).params
+
+              let params = {}
+              try {
+                params = typeof paramString === "string" && paramString.length ? JSON.parse(paramString) : {}
+              } catch (e) {
+                throw new Error("Invalid query parameters")
+              }
+
+              return await serverContext.fetchNamedQuery({ name: id, params: params, headers: getRequestHeaders(event) })
+            }),
+          )
+          .get(
+            "/_data/manifest/**:input",
+            eventHandler(async (event) => {
+              const manifest = getManifest("client")
+              const id = getRouterParam(event, "input")
+              const input = manifest.inputs[id === 'handler' ? manifest.handler : id]
+              const result = {
+                ...input,
+                id,
+                assets: await input.assets(),
+              }
+              const code = inspect(result, { depth: 10 })
+              return new Response(code, { headers: { "Content-Type": "text/plain" } })
+            }),
+          )
+          .post(
+            "/_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) })
+            }),
+          )
+          .post(
+            "/_data/submit-gf",
+            eventHandler(async (event) => {
+              const req = getWebRequest(event)
+              const headers = new Headers(req.headers)
+              headers.delete("content-length")
+              headers.delete("host")
+              headers.delete("connection")
+              headers.delete("pragma")
+              return await serverContext.fetchOrigin("/wp-json/ed/v1/gf/submit/", {
+                method: "POST",
+                headers: headers,
+                body: await req.blob(),
+              })
+            }),
+          )
+        
+        const aiRouter = createRouter()
+          .get(
+            "/_ai/page",
+            eventHandler(async (event) => {
+              const id = "/"
+              const url = getRequestURL(event)
+              const page = await renderPageForIndexing({ pathname: id, newOrigin: url.origin, hostname: url.hostname })
+              return new Response(page.contents, {
+                headers: {
+                  "Content-Type": "text/html; charset=utf-8",
+                  "Cache-Control": "no-store",
+                },
+              })
+            }),
+          )
+          .get(
+            "/_ai/page/**:name",
+            eventHandler(async (event) => {
+              const id = "/" + getRouterParam(event, "name")
+              const url = getRequestURL(event)
+
+              const page = await renderPageForIndexing({ pathname: id, newOrigin: url.origin, hostname: url.hostname })
+              return new Response(page.contents, {
+                headers: {
+                  "Content-Type": "text/html; charset=utf-8",
+                  "Cache-Control": "no-store",
+                },
+              })
+            }),
+          )
+
+        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)
+            }
+
+            // Data API
+            if (url.pathname.startsWith("/_data/")) {
+              return router.handler(event)
+            }
+
+            // LLM indexing route
+            if (url.pathname.startsWith("/_ai/")) {
+              return aiRouter.handler(event)
+            }
+
+            // Outdated build assets
+            if (url.pathname.match(/^\\/(_build|_admin)/)) {
+              return new Response("", { status: 404 })
+            }
+
+            // Proxy WordPress
+            if (url.pathname.includes(".") || url.pathname.startsWith("/graphql") || url.pathname.startsWith("/wp-")) {
+              return proxyWpAdmin(event)
+            }
+
+            // Enforce trailing slashes
+            if (!url.pathname.endsWith("/")) {
+              url.pathname = withTrailingSlash(url.pathname)
+              return Response.redirect(url, 301)
+            }
+
+            // SSR
+            return renderPage({ pathname: url.pathname, newOrigin: url.origin, hostname: url.hostname })
+          },
+        })
+    `,
+        });
+    }
+    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: "manifest/blocks.ts",
+        generate: async () => {
+            const blockManifest = await project.blocks.get();
+            let blockImports = [];
+            let blockEntries = [];
+            for (const [name, block] of Object.entries(blockManifest.blocks)) {
+                if (name.match(/^_[a-z]+$/i))
+                    continue;
+                const importSource = JSON.stringify("../../../" + block.fileName);
+                const jsName = pascalCase(name);
+                if (block.dynamic) {
+                    const importStatement = `dynamic(() => import(${importSource}), ${JSON.stringify(block.fileName)})`;
+                    blockEntries.push(JSON.stringify(block.acfName) + ": " + importStatement);
+                }
+                else {
+                    blockImports.push(`import ${jsName} from ${importSource}`);
+                    blockEntries.push(JSON.stringify(block.acfName) + ": " + jsName);
+                }
+            }
+            return code /* ts */ `
+        import { blockManifestReader } from 'eddev/_internal'
+        import { dynamic } from 'eddev/dynamic'
+        import core from '../../../blocks/_core'
+        ${blockImports.join("\n")}
+
+        const manifest = {
+          ${blockEntries.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)}), ${JSON.stringify(view.fileName)})`;
+                }
+                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()
+        }
+      `;
+        },
+    });
+    if (opts.serverless) {
+        codegen.registerFile({
+            name: "manifest/routes.ts",
+            generate: async () => {
+                const routeManifest = await project.serverRoutes.get();
+                return code /* ts */ `
+        import { instantiateRouter } from "eddev/server"
+          ${routeManifest.contextFileName
+                    ? code /*ts*/ `
+            import createContext from "../../../${routeManifest.contextFileName}"
+          `
+                    : code /*ts*/ `
+            const createContext = () => ({})
+          `}
+
+          const router = instantiateRouter({${Object.entries(routeManifest.routes).map(([name, route]) => {
+                    const src = "../../../" + route.fileName;
+                    const importStatement = imp(camelCase(name) + "=" + src);
+                    return code `${JSON.stringify(route.prefix)}: ${importStatement},\n`;
+                })}})
+
+          export { createContext, router }
+        `;
+            },
+            subscribe: project.serverRoutes.subscribe,
+        });
+        codegen.registerFile({
+            name: "rpc.ts",
+            generate: code /* tsx */ `
+        /// <reference types="vinxi/types/server" />
+        import "./context.js"
+        import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
+        import { parseURL, stringifyParsedURL } from "ufo"
+        import { EventHandlerRequest, getWebRequest, H3Event, setResponseHeaders } from "vinxi/http"
+        import { createContext, router } from "./manifest/routes.ts"
+        import { ServerContext } from "eddev/server"
+
+        export function handleRPC(event: H3Event<EventHandlerRequest>) {
+          const serverContext = ServerContext.main
+          
+          // Handle CORS
+          setResponseHeaders(event, serverContext.getCorsHeaders(event.headers.get("origin") ?? event.headers.get("referer") ?? ""))
+          if (event.method === "OPTIONS") {
+            event.node.res.statusCode = 204
+            event.node.res.statusMessage = "No Content."
+            return "OK"
+          }
+            
+          // Update URLs with dots, which tRPC prefers
+          const originalReq = getWebRequest(event)
+          const parsed = parseURL(originalReq.url)
+          parsed.pathname = "/" + parsed.pathname.replace(/(^\\/|\\/$)/g, "").replace(/\\//g, ".")
+          const req = new Request(stringifyParsedURL(parsed), originalReq)
+
+          // Handle any early results which are Responses
+          function processEarlyResult(value: any): Response | undefined {
+            if (value instanceof Response) {
+              return value
+            }
+          }
+
+          return new Promise(async (resolve) => {
+            let sent = false
+            const defaultResponse = await fetchRequestHandler({
+              endpoint: "/",
+              req: req,
+              router: router,
+              createContext: async (opts) => {
+                return {
+                  ...(await createContext(opts)),
+                  searchParams: opts.info.url?.searchParams,
+                  server: serverContext,
+                }
+              },
+              onError: (err) => console.error(err),
+              batching: { enabled: false },
+              // If a Response object is returned by a route, it will be sent as the response
+              responseMeta(opts) {
+                const value = opts?.data?.[0]?.["result"]?.["data"]
+                const response = processEarlyResult(value)
+                if (response) {
+                  sent = true
+                  resolve(response)
+                }
+                return {}
+              },
+            })
+            if (sent) return
+            resolve(defaultResponse)
+          })
+        }
+      `,
+        });
+    }
+    return codegen;
+}