fix(nodebox): support env vars on commands (#755)

sandpack-client/src/clients/node/client.utils.test.ts

@@ -0,0 +1,61 @@
+import { findStartScriptPackageJson } from "./client.utils";
+
+describe(findStartScriptPackageJson, () => {
+  it("should parse a regular command", () => {
+    expect(
+      findStartScriptPackageJson(JSON.stringify({ scripts: { start: "node" } }))
+    ).toEqual(["node", [], { env: undefined }]);
+  });
+
+  it("should parse a regular command with arguments", () => {
+    expect(
+      findStartScriptPackageJson(
+        JSON.stringify({ scripts: { start: "node dev --foo" } })
+      )
+    ).toEqual(["node", ["dev", "--foo"], { env: undefined }]);
+  });
+
+  it("should get dev script first", () => {
+    expect(
+      findStartScriptPackageJson(
+        JSON.stringify({
+          scripts: { start: "node start --foo", dev: "node dev --foo" },
+        })
+      )
+    ).toEqual(["node", ["dev", "--foo"], { env: undefined }]);
+  });
+
+  it("should parse env vars", () => {
+    expect(
+      findStartScriptPackageJson(
+        JSON.stringify({
+          scripts: { start: "NODE=1 ANOTHER=2 node start --foo" },
+        })
+      )
+    ).toEqual([
+      "node",
+      ["start", "--foo"],
+      { env: { NODE: "1", ANOTHER: "2" } },
+    ]);
+  });
+
+  it("should parse a single env var", () => {
+    expect(
+      findStartScriptPackageJson(
+        JSON.stringify({
+          scripts: { start: "NODE=1 node start --foo" },
+        })
+      )
+    ).toEqual(["node", ["start", "--foo"], { env: { NODE: "1" } }]);
+  });
+
+  it("should parse a single env var and a single commmand", () => {
+    expect(
+      findStartScriptPackageJson(
+        JSON.stringify({
+          scripts: { start: "NODE=1 node" },
+        })
+      )
+    ).toEqual(["node", [], { env: { NODE: "1" } }]);
+  });
+});

sandpack-client/src/clients/node/client.utils.ts

@@ -1,3 +1,4 @@
+import type { ShellCommandOptions } from "@codesandbox/nodebox/build/modules/shell";
 import { invariant } from "outvariant";
 
 import type { SandpackBundlerFiles } from "../..";
@@ -38,7 +39,7 @@ export const fromBundlerFilesToFS = (
  */
 export const findStartScriptPackageJson = (
   packageJson: string
-): [string, string[]] => {
+): [string, string[], ShellCommandOptions] => {
   let scripts: Record<string, string> = {};
   const possibleKeys = ["dev", "start"];
 
@@ -58,9 +59,24 @@ export const findStartScriptPackageJson = (
   for (let index = 0; index < possibleKeys.length; index++) {
     if (possibleKeys[index] in scripts) {
       const script = possibleKeys[index];
-      const [command, ...args] = scripts[script].split(" ");
 
-      return [command, args];
+      const candidate = scripts[script];
+
+      const env = candidate
+        .match(/(\w+=\w+;)*\w+=\w+/g)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ?.reduce<any>((acc, curr) => {
+          const [key, value] = curr.split("=");
+          acc[key] = value;
+          return acc;
+        }, {});
+
+      const [command, ...args] = candidate
+        .replace(/(\w+=\w+;)*\w+=\w+/g, "")
+        .trim()
+        .split(" ");
+
+      return [command, args, { env }];
     }
   }
 

sandpack-client/src/clients/node/index.ts

@@ -6,6 +6,7 @@ import type {
   ShellProcess,
   FSWatchEvent,
 } from "@codesandbox/nodebox";
+import type { ShellCommandOptions } from "@codesandbox/nodebox/build/modules/shell";
 
 import type {
   ClientOptions,
@@ -37,7 +38,7 @@ export class SandpackNode extends SandpackClient {
   private emulatorIframe!: HTMLIFrameElement;
   private emulator!: Nodebox;
   private emulatorShellProcess: ShellProcess | undefined;
-  private emulatorCommand: [string, string[]] | undefined;
+  private emulatorCommand: [string, string[], ShellCommandOptions] | undefined;
   private iframePreviewUrl: string | undefined;
   private _modulesCache = new Map();
 
@@ -136,9 +137,10 @@ export class SandpackNode extends SandpackClient {
           type: "shell/progress",
           data: {
             ...data,
-            command: this.emulatorCommand
-              ?.map((e) => (Array.isArray(e) ? e.join(" ") : e))
-              .join(" "),
+            command: [
+              this.emulatorCommand?.[0],
+              this.emulatorCommand?.[1].join(" "),
+            ].join(" "),
           },
         });
 

sandpack-react/src/templates/node/nexjs.ts

@@ -36,16 +36,13 @@ const nextConfig = {
 module.exports = nextConfig
 `,
     },
-    ".env.development": {
-      code: "NEXT_TELEMETRY_DISABLED=1",
-    },
     "/package.json": {
       code: JSON.stringify({
         name: "my-app",
         version: "0.1.0",
         private: true,
         scripts: {
-          dev: "next dev",
+          dev: "NEXT_TELEMETRY_DISABLED=1 next dev",
           build: "next build",
           start: "next start",
           lint: "next lint",