feat: inject process.env.NODE_ENV for third party libs (#2481)

src/dev/esbuild.ts

@@ -60,6 +60,12 @@ export async function bundleJs(
     write: false,
     metafile: true,
 
+    define: {
+      "process.env.NODE_ENV": JSON.stringify(
+        options.dev ? "development" : "production",
+      ),
+    },
+
     plugins: [
       preactDebugger(PREACT_ENV),
       buildIdPlugin(options.buildId),

tests/fixtures_islands/NodeProcess.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from "preact/hooks";
+import { useSignal } from "@preact/signals";
+import { IS_BROWSER } from "@fresh/core/runtime";
+
+export function NodeProcess() {
+  const active = useSignal(false);
+
+  useEffect(() => {
+    active.value = true;
+  }, []);
+
+  // @ts-ignore bundling
+  const value = IS_BROWSER ? process.env.NODE_ENV : "no";
+
+  return (
+    <div class={active.value ? "ready" : ""}>
+      value: {value}
+    </div>
+  );
+}

tests/islands_test.tsx

@@ -9,6 +9,7 @@ import { NullIsland } from "./fixtures_islands/NullIsland.tsx";
 import { Multiple1, Multiple2 } from "./fixtures_islands/Multiple.tsx";
 import { JsxIsland } from "./fixtures_islands/JsxIsland.tsx";
 import { JsxChildrenIsland } from "./fixtures_islands/JsxChildrenIsland.tsx";
+import { NodeProcess } from "./fixtures_islands/NodeProcess.tsx";
 import { signal } from "@preact/signals";
 import {
   allIslandApp,
@@ -546,6 +547,34 @@ Deno.test({
   },
 });
 
+Deno.test({
+  name: "islands - stub Node 'process.env'",
+  fn: async () => {
+    const nodeProcess = getIsland("NodeProcess.tsx");
+
+    const app = testApp()
+      .use(staticFiles())
+      .island(nodeProcess, "NodeProcess", NodeProcess)
+      .get("/", (ctx) =>
+        ctx.render(
+          <Doc>
+            <NodeProcess />
+          </Doc>,
+        ));
+
+    await withBrowserApp(app, async (page, address) => {
+      await page.goto(`${address}/`, { waitUntil: "load" });
+      await page.locator(".ready").wait();
+
+      // Page would error here
+      const text = await page
+        .locator<HTMLDivElement>(".ready")
+        .evaluate((el) => el.textContent!);
+      expect(text).toEqual("value: production");
+    });
+  },
+});
+
 Deno.test({
   name: "fsRoutes - load islands from group folder",
   fn: async () => {

tests/test_utils.tsx

@@ -24,6 +24,7 @@ import { PassThrough } from "./fixtures_islands/PassThrough.tsx";
 import { SelfCounter } from "./fixtures_islands/SelfCounter.tsx";
 import { Multiple1, Multiple2 } from "./fixtures_islands/Multiple.tsx";
 import { Foo } from "./fixture_island_groups/routes/foo/(_islands)/Foo.tsx";
+import { NodeProcess } from "./fixtures_islands/NodeProcess.tsx";
 
 export function getIsland(pathname: string) {
   return path.join(
@@ -87,7 +88,7 @@ export async function withBrowserApp(
 
     const browser = await launch({
       args: ["--no-sandbox"],
-      // headless: false,
+      headless: !Deno.args.includes("--headful"),
     });
 
     const page = await browser.newPage();
@@ -376,6 +377,7 @@ export const allIslandApp = new App()
   .island(getIsland("PartialInIsland.tsx"), "PartialInIsland", PartialInIsland)
   .island(getIsland("PassThrough.tsx"), "PassThrough", PassThrough)
   .island(getIsland("SelfCounter.tsx"), "SelfCounter", SelfCounter)
+  .island(getIsland("NodeProcess.tsx"), "NodeProcess", NodeProcess)
   .island(
     getIsland("../fixture_island_groups/routes/foo/(_islands)/Foo.tsx"),
     "Foo",