feat: Merge pull request #63 from seamapi/feat-edge-functions

Author: codetheweb

.github/workflows/npm-test.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           node-version: 18
       - name: Run NPM Install
-        run: npm install
+        run: yarn install
       - name: Typecheck
         run: npx tsc
       - name: Run NPM Test

README.md

@@ -66,6 +66,15 @@ We then construct a main export file that knows how to parse `next.config.js`
 and route to the correct files, which we've statically analyzed and are included
 in the generated `dist/index.js` file.
 
+## Caveats
+
+Vercel's Edge Runtime is supported only when running in a Node.js environment. In other words, a bundled nsm project cannot be run in the Edge Runtime.
+
+nsm's implementation of the Edge Runtime does not support:
+
+- [`@vercel/og`](https://www.npmjs.com/package/@vercel/og)
+- `import {userAgent} from "next/server"`
+
 ## FAQ
 
 ### Why can't Next.js bundle into an npm module?

ava.config.js

@@ -3,4 +3,5 @@ module.exports = {
   extensions: ["ts"],
   timeout: "2m",
   require: ["esbuild-runner/register"],
+  ignoredByWatcher: ["**/.next/**", "**/.nsm/**"],
 }

nsm/index.ts

@@ -12,6 +12,10 @@ import nextConfig from "./next.config"
 import { removePathTrailingSlash } from "./nextjs-middleware/normalize-trailing-slash"
 import { getRouteRegex } from "./route-matcher/route-regex"
 import type { NextApiHandler } from "./types/nextjs"
+import * as esbuild from "esbuild"
+import axios from "axios"
+import * as edge from "edge-runtime"
+import { environmentPlugin as esbuildEnvironmentPlugin } from "esbuild-plugin-environment"
 
 const debug = Debug("nsm")
 
@@ -84,25 +88,99 @@ export const runServer = async ({
     )
     debug(`resolved request to "${resolveResult.parsedAs.pathname}"`)
 
-    const { serverFunc, match } =
+    const { pathOrFunction, match, fsPath } =
       routeMatcher(resolveResult.parsedAs.pathname) || {}
 
-    if (typeof serverFunc === "string") {
+    if (
+      typeof pathOrFunction === "string" &&
+      pathOrFunction.endsWith(".html")
+    ) {
       res.statusCode = 200
-      res.end(await fs.readFile(serverFunc))
+      res.end(await fs.readFile(pathOrFunction))
       return
     }
-    if (!serverFunc) {
+    if (!pathOrFunction) {
       res.statusCode = 404
       res.end("404") // TODO use routes 404
       return
     }
 
+    const apiHandler =
+      typeof pathOrFunction === "string"
+        ? require(pathOrFunction)
+        : pathOrFunction
+
+    if (apiHandler.config?.runtime === "edge") {
+      const page = resolveResult.asPath
+
+      // todo: cache result?
+      const result = await esbuild.build({
+        stdin: {
+          contents: `
+            import {NextRequest} from "next/dist/server/web/spec-extension/request"
+            import {NextFetchEvent} from "next/dist/server/web/spec-extension/fetch-event"
+
+            import handler from "${pathOrFunction}"
+
+            if (typeof handler !== 'function') {
+              throw new Error('The Edge Function "pages${page}" must export a \`default\` function');
+            }
+
+            addEventListener("fetch", async event => {
+              const request = new NextRequest(event.request)
+              const nextEvent = new NextFetchEvent({request, page: "${page}"})
+              return event.respondWith(await handler(request, nextEvent))
+            })
+          `,
+          resolveDir: __dirname,
+          loader: "ts",
+        },
+        bundle: true,
+        format: "esm",
+        banner: {
+          js: "const process = {env: {}};const require = () => ({})",
+        },
+        write: false,
+        external: [
+          "next/dist/compiled/@vercel/og/*",
+          "next/dist/server/web/spec-extension/user-agent*",
+        ],
+        plugins: [esbuildEnvironmentPlugin(Object.keys(process.env))],
+      })
+
+      const runtime = new edge.EdgeRuntime({
+        initialCode: result.outputFiles[0].text,
+      })
+      const edgeServer = await edge.runServer({ runtime })
+      const port = new URL(edgeServer.url).port
+
+      const response = await axios.request({
+        baseURL: `http://localhost:${port}`,
+        url: req.url,
+        method: req.method,
+        headers: req.headers,
+        data: req,
+        validateStatus: () => true,
+        responseType: "arraybuffer",
+      })
+
+      for (const header of response.headers) {
+        res.setHeader(header[0], header[1])
+      }
+
+      res.statusCode = response.status
+      res.end(Buffer.from(response.data))
+
+      await edgeServer.close()
+
+      return
+    }
+
     const wrappedServerFunc = (wrappers as any)(
-      ...[...middlewares, serverFunc?.default || serverFunc],
+      ...[...middlewares, apiHandler?.default || apiHandler],
     )
 
-    wrappedServerFunc.config = serverFunc.config || {}
+    wrappedServerFunc.config = apiHandler.config || {}
 
     await apiResolver(
       req,

nsm/route-matcher/index.ts

@@ -5,13 +5,13 @@ import { getRouteMatcherFunc } from "./get-route-matcher-func"
 export default (routeMapping: any) => {
   // convert each route to a regex
   const routes: any[] = []
-  for (const [fsPath, serverFunc] of Object.entries(routeMapping)) {
+  for (const [fsPath, pathOrFunction] of Object.entries(routeMapping)) {
     const routeRegex = getRouteRegex(fsPath)
     routes.push({
       fsPath,
       routeRegex,
       matcherFunc: getRouteMatcherFunc(routeRegex),
-      serverFunc,
+      pathOrFunction,
       // TODO use whatever priority func nextjs uses
       priority: -Object.keys(routeRegex.groups).length,
     })
@@ -22,10 +22,10 @@ export default (routeMapping: any) => {
   // TODO sort routes to fix precedence
 
   return (incomingPath: string) => {
-    for (const { serverFunc, matcherFunc, fsPath } of routes) {
+    for (const { pathOrFunction, matcherFunc, fsPath } of routes) {
       const match = matcherFunc(incomingPath)
       if (match) {
-        return { serverFunc, match, fsPath }
+        return { pathOrFunction, match, fsPath }
       }
     }
     return null

nsm/scripts/generate-routes.js

@@ -110,9 +110,18 @@ async function generateRouteFile({
       const fpNoExt = fp.split(".").slice(0, -1).join(".")
       const fpExt = fpNoExt.split(".").slice(-1)[0]
 
-      return fp.startsWith("pages/api")
-        ? `"${route}": require("${pagesDirRelativePath}/${fpNoExt}")`
-        : `"${route}": serveStatic("${fpExt}", require("./generated_static/server/${fp}.ts").default)`
+      if (fp.startsWith("pages/api")) {
+        const absolutePath = path.join(
+          __dirname,
+          "../",
+          pagesDirRelativePath,
+          fpNoExt,
+        )
+
+        return `"${route}": "${absolutePath}"`
+      } else {
+        return `"${route}": serveStatic("${fpExt}", require("./generated_static/server/${fp}.ts").default)`
+      }
     })
 
     .join(",")}${staticRoutesFiles}

package.json

@@ -54,15 +54,14 @@
     "content-type": "^1.0.5",
     "cookie": "^0.5.0",
     "debug": "^4.3.4",
-    "esbuild": "^0.17.16",
     "esbuild-runner": "^2.2.1",
     "escape-string-regexp": "^4.0.0",
     "execa": "^5.0.0",
     "get-port": "^5.0.0",
     "glob": "^10.0.0",
     "mime-types": "^2.1.35",
     "mkdirp": "^3.0.0",
-    "next": "^12.0.7",
+    "next": "^13.5.4",
     "nextjs-middleware-wrappers": "^1.3.0",
     "path-to-regexp": "^6.2.0",
     "prettier": "^3.0.3",
@@ -72,6 +71,9 @@
     "typescript": "^4.5.4"
   },
   "dependencies": {
+    "edge-runtime": "2.5.4",
+    "esbuild": "0.19.5",
+    "esbuild-plugin-environment": "0.2.4",
     "find-up": "^5.0.0",
     "load-tsconfig": "^0.2.5",
     "recursive-copy": "^2.0.13",

tests/assets/nextjs-sample-project/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@types/react": "^18.2.9",
-    "next": "^13.4.4",
+    "next": "^13.5.4",
     "path-to-regexp": "^6.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

tests/assets/nextjs-sample-project/pages/api/edge.ts

@@ -0,0 +1,35 @@
+import { NextFetchEvent, NextRequest, NextResponse } from "next/server"
+
+export const config = {
+  runtime: "edge",
+}
+
+export default async function handler(
+  request: NextRequest,
+  event: NextFetchEvent,
+) {
+  let areNodeBuiltinsAvailable = true
+  try {
+    // Need to assign this to a variable instead of `import("node:fs")` so an error isn't thrown during the normal build
+    const moduleToAttemptToImport = "node:fs"
+    await import(moduleToAttemptToImport)
+  } catch {
+    areNodeBuiltinsAvailable = false
+  }
+
+  return NextResponse.json(
+    {
+      isFetchAvailable: typeof fetch === "function",
+      areNodeBuiltinsAvailable,
+      requestUrl: request.url,
+      sourcePageFromEvent: event.sourcePage,
+      fooBarEnvVar: process.env.FOO_BAR,
+    },
+    {
+      headers: {
+        "x-custom-header": "foo",
+      },
+      status: 201,
+    },
+  )
+}

tests/assets/nextjs-sample-project/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,