eddev 2.0.0-beta.23 → 2.0.0-beta.231

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

@@ -1,5 +1,8 @@
-import { code } from "ts-poet";
+import { camelCase, pascalCase } from "change-case-all";
+import { code, imp } from "ts-poet";
+import { ProjectEnvUtils } from "../project/env.js";
 import { FSCodegen } from "../utils/fs-codegen.js";
+import { getCacheConfig } from "./cache-config.js";
 export function getVinxiFolder(opts) {
     return (opts.mode === "development" ? "dev" : "prod") + (opts.serverless ? "" : "-spa");
 }
@@ -17,28 +20,37 @@ 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,
+                    cacheConfig: getCacheConfig(project.origin, 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 +66,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 +115,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"
           
@@ -96,6 +126,16 @@ export function createVinxiCodegen(opts) {
           import { createAssets } from "@vinxi/react"
           import { devToolsStore } from 'eddev/devtools'
 
+          ${process.env.VERCEL_SKEW_PROTECTION_ENABLED &&
+                    code /* tsx*/ `
+              // Skew protection
+              const updateSkewCookie = () => {
+                document.cookie = "__vdpl=${process.env.VERCEL_DEPLOYMENT_ID}; expires=" + new Date(Date.now() + 24 * 60 * 60 * 1000).toUTCString() + "; path=/"
+              }
+              window.onfocus = updateSkewCookie
+              updateSkewCookie()
+          `}
+
           // Set up a dynamic entry which will load the configured tailwind manifest
           devToolsStore.loadTailwindConfig = () => import('./manifest/tailwind-config.js')
 
@@ -108,15 +148,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 +167,7 @@ export function createVinxiCodegen(opts) {
           declare global {
             interface Window {
               $reactRoot?: Root
+              _PAGE_DATA: any
             }
           }
 
@@ -138,7 +181,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,149 +189,293 @@ 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 { 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
+      `,
+        });
+    }
+    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,
+          getCookie,
+          setCookie
+        } 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'
+        import { viewManifestReader, blockManifestReader } from 'eddev/_internal'
 
         const router = createRouter()
           .get(
-            "/route/",
+            "/_data/route/",
             eventHandler(async (event) => {
               const id = "/"
+              const url = getRequestURL(event)
 
-              return await serverContext.fetchRouteData({
-                pathname: id,
-                withAppData: false,
-              })
+              return await serverContext.fetchRouteData({ pathname: id, newOrigin: url.origin, bypass: serverContext.shouldBypass(event) })
             }),
           )
           .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, bypass: serverContext.shouldBypass(event) })
             }),
           )
           .get(
-            "/query/**:name",
+            "/_data/query/**:name",
             eventHandler(async (event) => {
               const id = "/" + getRouterParam(event, "name")
+              const url = getRequestURL(event)
               const paramString = getQuery(event).params
 
-              const params = typeof paramString === "string" && paramString.length ? JSON.parse(paramString) : {}
+              const req = getWebRequest(event)
 
-              return await serverContext.fetchNamedQuery({
-                name: id,
-                params: params,
-                headers: getRequestHeaders(event),
-              })
+              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, newOrigin: url.origin, params: params, headers: getRequestHeaders(event), bypass: serverContext.shouldBypass(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(),
+              })
+            }),
+          )
+        
+        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 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.js"
-      import "./manifest/styles.js"
-      import "./manifest/views.js"
-
-      import { renderPageToSSRStream, proxyWpAdmin } from "eddev/server"
-      import { eventHandler, setResponseHeader, setResponseStatus, getRequestURL } from "vinxi/http"
-      import { serverContext } from "./context.js"
-      import { getManifest } from "vinxi/manifest"
-
-      export default eventHandler({
-        handler: async (event) => {
-          const url = getRequestURL(event)
-
-          if (url.pathname.includes('.')) {
-            return proxyWpAdmin(event, serverContext)
-          }
+            await Promise.allSettled([viewManifestReader.preloadAll(), blockManifestReader.preloadAll()])
 
-          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
-          }
-        },
-      })
+            // 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)
+            }
+
+            ${process.env.VERCEL_SKEW_PROTECTION_ENABLED &&
+                code /* tsx*/ `
+                // Skew protection
+                setCookie(event, "__vdpl", ${JSON.stringify(process.env.VERCEL_DEPLOYMENT_ID ?? "")}, {
+                  httpOnly: false,
+                  path: "/",
+                })
+              `}
+
+            // SSR
+            return renderPage({ pathname: url.pathname, newOrigin: url.origin, hostname: url.hostname, bypass: serverContext.shouldBypass(event) })
+          },
+        })
     `,
         });
     }
     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: "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
         }
 
@@ -369,14 +556,19 @@ 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")}}
-
-        viewManifestReader.value = manifest
+        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.set(manifest)
         
         export default manifest
 
@@ -413,5 +605,99 @@ 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: 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;
 }