feat: Added --node-compat to Pages Dev & Functions (#1000)

`pages dev <dir>` & `wrangler pages functions build` will have a `--node-compat` flag powered by @esbuild-plugins/node-globals-polyfill (which in itself is powered by rollup-plugin-node-polyfills). The only difference in `pages` will be it does not check the `wrangler.toml` so the `node_compat = true` will not enable it for `wrangler pages` functionality. resolves #890
cloudflare · May 24, 2022 · 5a8e8d5 · 5a8e8d5
1 parent a0e0f5f
commit 5a8e8d5
Show file tree

Hide file tree

Showing 13 changed files with 302 additions and 10 deletions.
diff --git a/.changeset/two-ears-act.md b/.changeset/two-ears-act.md
@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+`pages dev <dir>` & `wrangler pages functions build` will have a `--node-compat` flag powered by @esbuild-plugins/node-globals-polyfill (which in itself is powered by rollup-plugin-node-polyfills). The only difference in `pages` will be it does not check the `wrangler.toml` so the `node_compat = true`will not enable it for `wrangler pages` functionality.
+
+resolves #890
diff --git a/examples/node-app-pages/.gitignore b/examples/node-app-pages/.gitignore
@@ -0,0 +1 @@
+cdn-cgi/
diff --git a/examples/node-app-pages/functions/stripe.ts b/examples/node-app-pages/functions/stripe.ts
@@ -0,0 +1,12 @@
+import * as path from "path";
+import Stripe from "stripe";
+
+export const onRequest = () => {
+  // make sure path actually works
+  return new Response(
+    JSON.stringify({
+      PATH: path.join("path/to", "some-file"),
+      STRIPE_OBJECT: Stripe.toString(),
+    })
+  );
+};
diff --git a/examples/node-app-pages/package.json b/examples/node-app-pages/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "node-app-pages",
+  "version": "0.0.0",
+  "private": true,
+  "main": "dist/worker.js",
+  "engines": {
+    "node": ">=14"
+  },
+  "scripts": {
+    "dev": "npx wrangler pages dev public --port 12345 --node-compat",
+    "test": "npx jest --forceExit"
+  },
+  "dependencies": {
+    "stripe": "^9.1.0"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^3.10.0",
+    "@types/node": "^17.0.33",
+    "undici": "^4.15.1"
+  },
+  "sideEffects": false,
+  "jest": {
+    "testRegex": ".*.(test|spec)\\.[jt]sx?$",
+    "transformIgnorePatterns": [
+      "node_modules/(?!find-up|locate-path|p-locate|p-limit|yocto-queue|path-exists|execa|strip-final-newline|npm-run-path|path-key|onetime|mimic-fn|human-signals|is-stream)"
+    ],
+    "transform": {
+      "^.+\\.c?(t|j)sx?$": [
+        "esbuild-jest",
+        {
+          "sourcemap": true
+        }
+      ]
+    }
+  }
+}
diff --git a/examples/node-app-pages/public/index.html b/examples/node-app-pages/public/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>Hello, world!</h1>
+  </body>
+</html>
diff --git a/examples/node-app-pages/tests/index.test.ts b/examples/node-app-pages/tests/index.test.ts
@@ -0,0 +1,56 @@
+import { spawn } from "child_process";
+import path from "path";
+import { fetch } from "undici";
+import type { ChildProcess } from "child_process";
+import type { Response } from "undici";
+
+const isWindows = process.platform === "win32";
+
+const waitUntilReady = async (url: string): Promise<Response> => {
+  let response: Response | undefined = undefined;
+
+  while (response === undefined) {
+    await new Promise((resolvePromise) => setTimeout(resolvePromise, 500));
+
+    try {
+      response = await fetch(url);
+    } catch {}
+  }
+
+  return response as Response;
+};
+
+describe("Pages Dev", () => {
+  let wranglerProcess: ChildProcess;
+
+  beforeEach(() => {
+    wranglerProcess = spawn("npm", ["run", "dev"], {
+      shell: isWindows,
+      cwd: path.resolve(__dirname, "../"),
+      env: { BROWSER: "none", ...process.env },
+    });
+  });
+
+  afterEach(async () => {
+    await new Promise((resolve, reject) => {
+      wranglerProcess.once("exit", (code) => {
+        if (!code) {
+          resolve(code);
+        } else {
+          reject(code);
+        }
+      });
+      isWindows
+        ? wranglerProcess.kill("SIGTERM")
+        : wranglerProcess.kill("SIGKILL");
+    });
+  });
+
+  it("should work with `--node-compat` when running code requiring polyfills", async () => {
+    const response = await waitUntilReady("http://localhost:12345/stripe");
+
+    await expect(response.text()).resolves.toContain(
+      `"PATH":"path/to/some-file","STRIPE_OBJECT"`
+    );
+  });
+});
diff --git a/examples/node-app-pages/tsconfig.json b/examples/node-app-pages/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "include": ["functions"],
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "lib": ["ES2020"],
+    "types": ["@cloudflare/workers-types"],
+    "moduleResolution": "node"
+  }
+}
diff --git a/examples/pages-functions-app/tests/index.test.ts b/examples/pages-functions-app/tests/index.test.ts
@@ -23,7 +23,7 @@ const isWindows = process.platform === "win32";
 describe("Pages Functions", () => {
   let wranglerProcess: ChildProcess;
 
-  beforeAll(async () => {
+  beforeEach(() => {
     wranglerProcess = spawn("npm", ["run", "dev"], {
       shell: isWindows,
       cwd: path.resolve(__dirname, "../"),
@@ -37,7 +37,7 @@ describe("Pages Functions", () => {
     });
   });
 
-  afterAll(async () => {
+  afterEach(async () => {
     await new Promise((resolve, reject) => {
       wranglerProcess.once("exit", (code) => {
         if (!code) {
@@ -46,7 +46,7 @@ describe("Pages Functions", () => {
           reject(code);
         }
       });
-      wranglerProcess.kill();
+      wranglerProcess.kill("SIGTERM");
     });
   });
 

diff --git a/examples/remix-pages-app/tests/index.test.ts b/examples/remix-pages-app/tests/index.test.ts
@@ -50,7 +50,7 @@ describe("Remix", () => {
           reject(code);
         }
       });
-      wranglerProcess.kill();
+      wranglerProcess.kill("SIGTERM");
     });
   });
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/wrangler/pages/functions/buildPlugin.ts b/packages/wrangler/pages/functions/buildPlugin.ts
@@ -1,5 +1,7 @@
 import { access, lstat } from "node:fs/promises";
 import { dirname, relative, resolve } from "node:path";
+import NodeGlobalsPolyfills from "@esbuild-plugins/node-globals-polyfill";
+import NodeModulesPolyfills from "@esbuild-plugins/node-modules-polyfill";
 import { build } from "esbuild";
 
 type Options = {
@@ -8,6 +10,7 @@ type Options = {
   minify?: boolean;
   sourcemap?: boolean;
   watch?: boolean;
+  nodeCompat?: boolean;
   onEnd?: () => void;
 };
 
@@ -17,6 +20,7 @@ export function buildPlugin({
   minify = false,
   sourcemap = false,
   watch = false,
+  nodeCompat,
   onEnd = () => {},
 }: Options) {
   return build({
@@ -30,6 +34,7 @@ export function buildPlugin({
     sourcemap,
     watch,
     allowOverwrite: true,
+    define: { ...(nodeCompat ? { global: "globalThis" } : {}) },
     plugins: [
       {
         name: "wrangler notifier and monitor",
@@ -87,6 +92,14 @@ export function buildPlugin({
           }
         },
       },
+      ...(nodeCompat
+        ? [
+            NodeGlobalsPolyfills({
+              buffer: true,
+            }),
+            NodeModulesPolyfills(),
+          ]
+        : []),
     ],
   });
 }