eddev 2.0.0-beta.17 → 2.0.0-beta.170

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

@@ -1,5 +1,7 @@
-import { code } from "ts-poet";
+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");
 }
@@ -17,28 +19,36 @@ export function createVinxiCodegen(opts) {
     if (opts.serverless) {
         codegen.registerFile({
             name: "context.ts",
-            generate: () => {
+            generate: async () => {
                 const args = {
-                    dev: true,
+                    dev: opts.mode === "development",
                     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" },
+                            { 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")},
-            getManifest
+                    .join(",\n")}
           })
+
+          apiConfig.apiKey = ${JSON.stringify(ProjectEnvUtils.getSafe("SITE_API_KEY") ?? "")}
         `.toString();
             },
         });
@@ -54,13 +64,31 @@ export function createVinxiCodegen(opts) {
       `,
         });
     }
+    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 "../../${project.cssEntryFile}"
         import "./manifest/admin"
         import "./manifest/blocks"
         import "./manifest/styles"
@@ -85,7 +113,7 @@ export function createVinxiCodegen(opts) {
            * Also ensures that the assets used during SSR are loaded.
            */
           import "vinxi/client"
-          import "../../views/index.css"
+          import "../../${project.cssEntryFile}"
           import "./manifest/blocks"
           import "./manifest/views"
           
@@ -97,7 +125,7 @@ export function createVinxiCodegen(opts) {
           import { devToolsStore } from 'eddev/devtools'
 
           // Set up a dynamic entry which will load the configured tailwind manifest
-          devToolsStore.loadTailwindConfig = () => import('./manifest/tailwind-config')
+          devToolsStore.loadTailwindConfig = () => import('./manifest/tailwind-config.js')
 
           // Create the asset renderer, which will ensure scripts/styles are mounted correctly
           function getAssets() {
@@ -108,15 +136,17 @@ export function createVinxiCodegen(opts) {
           window.$reactRoot =
             window.$reactRoot ||
             hydrateRoot(
-              document,
-              <SSRClientRoot assets={getAssets()} />,
+              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 Assets = createAssets(getManifest("client").handler, getManifest("client"))
-                const app = <SSRClientRoot assets={getAssets()} />
+                const app = <React.Suspense><SSRClientRoot assets={getAssets()} metaTags={window._PAGE_DATA?.meta?.head} /></React.Suspense>
                 window.$reactRoot?.render(app)
               }
             })
@@ -125,6 +155,7 @@ export function createVinxiCodegen(opts) {
           declare global {
             interface Window {
               $reactRoot?: Root
+              _PAGE_DATA: any
             }
           }
 
@@ -138,7 +169,7 @@ export function createVinxiCodegen(opts) {
            */
           import "./manifest/blocks"
           import "./manifest/views"
-          import "../../views/index.css"
+          import "../../${project.cssEntryFile}"
           import { devToolsStore } from 'eddev/devtools'
           import { createRoot } from "react-dom/client"
           import { SPARoot } from "eddev/_internal/spa-root.js"
@@ -146,148 +177,287 @@ export function createVinxiCodegen(opts) {
 
           devToolsStore.loadTailwindConfig = () => import('./manifest/tailwind-config')
 
-          createRoot(document.getElementById("root")!).render(<SPARoot />)
+          createRoot(document.getElementById("root")!).render(<React.Suspense><SPARoot /></React.Suspense>)
         `;
             }
         },
     });
     if (opts.serverless) {
         codegen.registerFile({
-            name: "handler.data-api.ts",
+            name: "handler.bypass.ts",
             generate: code /* tsx */ `
         /// <reference types="vinxi/types/server" />
-        import { createRouter, eventHandler, getRouterParam, getQuery, getWebRequest, getRequestHeaders } from "vinxi/http"
-        import { serverContext } from "./context"
+        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(
-            "/route/",
+            "/enable",
             eventHandler(async (event) => {
-              const id = "/"
+              if (!BYPASS_TOKEN) return false
 
-              return await serverContext.fetchRouteData({
-                pathname: id,
-                withAppData: 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, 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(
-            "/route/**:name",
+            "/_data/route/**:name",
             eventHandler(async (event) => {
               const id = "/" + getRouterParam(event, "name")
+              const url = getRequestURL(event)
 
-              return await serverContext.fetchRouteData({
-                pathname: id,
-                withAppData: false,
-              })
+              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) })
+            }),
+          )
+          .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(
-            "/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: {},
+              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(),
               })
             }),
           )
 
-        export default router.handler
+        export default eventHandler({
+          handler: async (event) => {
+            const serverContext = ServerContext.main
+            const url = getRequestURL(event)
 
-      `,
-        });
-    }
-    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"
-      import "./manifest/styles"
-      import "./manifest/views"
-
-      import { renderPageToSSRStream, proxyWpAdmin } from "eddev/server"
-      import { eventHandler, setResponseHeader, setResponseStatus, getRequestURL } from "vinxi/http"
-      import { serverContext } from "./context"
-
-      export default eventHandler({
-        handler: async (event) => {
-          const url = getRequestURL(event)
-
-          if (url.pathname.includes('.')) {
-            return proxyWpAdmin(event, serverContext)
-          }
+            // RPC
+            const isRPC = serverContext.rpcBases.some((base) => url.pathname.startsWith(base))
+            if (isRPC) {
+              return handleRPC(event)
+            }
 
-          const response = await serverContext.fetchRouteData({
-            pathname: url.pathname,
-            withAppData: true,
-            headers: {},
-            query: {},
-          })
-          if (response.ok) {
-            setResponseStatus(event, response.status)
-            setResponseHeader(event, "Content-Type", "text/html; charset=utf-8")
-            return renderPageToSSRStream(url.pathname, await response.json(), serverContext)
-          } else {
-            return response
-          }
-        },
-      })
+            // 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)
+            }
+
+            // 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 { serverContext } from "./context"
-
-      export default eventHandler(async (event) => {
-        return proxyWpAdmin(event, serverContext)
-      })
-    `,
-        });
+        // 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 = {
-          ${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")},
+          ${blockEntries.join(",\n")},
           ...core
         }
 
@@ -368,12 +538,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)}), ${JSON.stringify(view.fileName)})`;
+                }
+                return code `${JSON.stringify(view.slug)}: ${importStatement},\n`;
+            })}}
 
         viewManifestReader.value = manifest
         
@@ -399,7 +574,7 @@ export function createVinxiCodegen(opts) {
         name: "manifest/tailwind-config.ts",
         generate: async () => {
             return code /* ts */ `
-        import tw from "../../../tailwind.config"
+        import tw from "../../../tailwind.config.ts"
         import resolveConfig from 'tailwindcss/resolveConfig'
         import { devToolsStore } from 'eddev/devtools'
 
@@ -412,5 +587,93 @@ export function createVinxiCodegen(opts) {
       `;
         },
     });
+    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,
+              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;
 }