@commercebuild/extension 0.0.22 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercebuild/extension",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "types": "./types/index.d.ts",
   "exports": {
     ".": {

package/scripts/test-build.mjs

@@ -11,7 +11,7 @@
  * the canonical side of that parity contract.
  */
 import assert from "node:assert/strict";
-import { execFileSync } from "node:child_process";
+import { execFileSync, spawn } from "node:child_process";
 import {
   cpSync,
   existsSync,
@@ -26,11 +26,23 @@ import { tmpdir } from "node:os";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
-const pkgRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const pkgRoot = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  "..",
+);
 const viteBin = path.join(pkgRoot, "node_modules", ".bin", "vite");
 const viteConfig = path.join(pkgRoot, "config", "vite.config.mjs");
+const cliBin = path.join(pkgRoot, "scripts", "cli.js");
 
-const fixture = mkdtempSync(path.join(tmpdir(), "cb-ext-build-"));
+// The fixture lives in a folder whose name is hostile to every path
+// consumer we have: a shell (space, parentheses, `$`, `&`), a glob
+// matcher (`(`, `[`), and anything ASCII-only. `extension open` numbers
+// duplicate downloads "<name>(2)" and users pick their own folder names, so
+// build, dev and type-check must work here or they do not work.
+const HOSTILE_DIR = "My App (2) [beta] $x & y 中文";
+const scratch = mkdtempSync(path.join(tmpdir(), "cb-ext-build-"));
+const fixture = path.join(scratch, HOSTILE_DIR);
+mkdirSync(fixture);
 
 function write(rel, content) {
   const target = path.join(fixture, rel);
@@ -83,7 +95,10 @@ function scaffold() {
     "src/admin/index.ts",
     'import "./styles/index.css";\nexport * as adminPages from "./pages";\n',
   );
-  write("src/admin/pages/index.ts", 'export * as Dashboard from "./dashboard";\n');
+  write(
+    "src/admin/pages/index.ts",
+    'export * as Dashboard from "./dashboard";\n',
+  );
   write(
     "src/admin/pages/dashboard.tsx",
     'import React from "react";\nimport { getFirestore } from "firebase/firestore";\nimport { shared } from "../../shared/util";\nexport default function Dashboard() {\n  const [n] = React.useState(0);\n  return <div className="p-3">{String(!!getFirestore)}{shared()}{n}</div>;\n}\n',
@@ -142,7 +157,11 @@ try {
   assert.match(style, /\.p-2\b/, "style.css has shared utilities");
   assert.doesNotMatch(style, /\.p-3\b/, "style.css has NO admin utilities");
   const adminCss = dist("admin.css");
-  assert.doesNotMatch(adminCss, /\.p-1\b/, "admin.css has NO storefront utilities");
+  assert.doesNotMatch(
+    adminCss,
+    /\.p-1\b/,
+    "admin.css has NO storefront utilities",
+  );
   assert.match(adminCss, /\.p-2\b/, "admin.css has shared utilities");
   assert.match(adminCss, /\.p-3\b/, "admin.css has admin utilities");
 
@@ -165,19 +184,19 @@ try {
       "src/admin/pages/bad.ts",
       'export { x } from "../../cms/bad-target";\n',
       "src/admin/pages/index.ts",
-      './bad',
+      "./bad",
     ],
     [
       "src/pages/bad.ts",
       'export { helper } from "../admin/helper";\n',
       "src/pages/index.ts",
-      './bad',
+      "./bad",
     ],
     [
       "src/shared/bad.ts",
       'export { helper } from "../admin/helper";\n',
       "src/pages/index.ts",
-      '../shared/bad',
+      "../shared/bad",
     ],
   ];
   write("src/cms/bad-target.ts", "export const x = 1;\n");
@@ -217,7 +236,105 @@ try {
     /src\/admin\/index\.ts/,
   );
 
+  // --- The CLI entry in the hostile folder: no shell, exit codes kept. ---
+  rmSync(path.join(fixture, "dist"), { recursive: true, force: true });
+  execFileSync(process.execPath, [cliBin, "build"], {
+    cwd: fixture,
+    stdio: "pipe",
+  });
+  assert.ok(
+    existsSync(path.join(fixture, "dist", "index.js")),
+    "cli.js build works in a folder with spaces, parentheses and unicode",
+  );
+  assert.throws(
+    () =>
+      execFileSync(process.execPath, [cliBin], { cwd: fixture, stdio: "pipe" }),
+    (err) => err.status === 1,
+    "cli.js without a command exits 1",
+  );
+
+  // --- Dev server: one source change = one rebuild, and the build's own
+  // output never counts as a change (the loop a "(2)" folder used to cause).
+  await devServerRebuildsOnce();
+
   console.log("extension dual-build integration test: OK");
 } finally {
-  rmSync(fixture, { recursive: true, force: true });
+  rmSync(scratch, { recursive: true, force: true });
+}
+
+/**
+ * Starts the dev server in the fixture, edits one source file, and asserts
+ * exactly one rebuild follows — then writes into dist/ directly and asserts
+ * that triggers nothing. Kills the server either way.
+ */
+async function devServerRebuildsOnce() {
+  const port = 25000 + Math.floor(Math.random() * 500);
+  let output = "";
+  const server = spawn(viteBin, ["--config", viteConfig], {
+    cwd: fixture,
+    env: {
+      ...process.env,
+      COMMERCEBUILD_STORE_URL: "https://store.example/",
+      PORT: String(port),
+      BROWSER: "none", // vite's `server.open` honours this: no browser tab
+    },
+    stdio: ["ignore", "pipe", "pipe"],
+  });
+  server.stdout.on("data", (chunk) => (output += chunk));
+  server.stderr.on("data", (chunk) => (output += chunk));
+  const count = (needle) => output.split(needle).length - 1;
+  const waitFor = async (predicate, ms, what) => {
+    const deadline = Date.now() + ms;
+    while (Date.now() < deadline) {
+      if (predicate()) return;
+      await new Promise((r) => setTimeout(r, 200));
+    }
+    assert.fail(`${what} (dev server output so far:\n${output})`);
+  };
+  const settle = (ms) => new Promise((r) => setTimeout(r, ms));
+  try {
+    await waitFor(
+      () => output.includes("WebSocket mounted"),
+      30_000,
+      "dev server did not start",
+    );
+    await settle(1_000); // let the watcher finish its initial scan
+    write(
+      "src/pages/shop.tsx",
+      readFileSync(path.join(fixture, "src/pages/shop.tsx"), "utf8") +
+        "// touched\n",
+    );
+    await waitFor(
+      () => count("Build finished") >= 1,
+      30_000,
+      "source change did not trigger a rebuild",
+    );
+    await settle(4_000); // a self-triggered loop would show up here
+    assert.equal(
+      count("File changed"),
+      1,
+      `one change → one rebuild:\n${output}`,
+    );
+    assert.doesNotMatch(
+      output,
+      /File changed: [^\n]*[\\/]dist[\\/]/,
+      "dist/ never counts as a change",
+    );
+
+    writeFileSync(path.join(fixture, "dist", "style.css"), "/* poked */\n", {
+      flag: "a",
+    });
+    await settle(3_000);
+    assert.equal(
+      count("File changed"),
+      1,
+      "writing into dist/ triggers nothing",
+    );
+    assert.doesNotMatch(output, /Build failed/);
+  } finally {
+    server.kill("SIGTERM");
+    await new Promise(
+      (r) => server.once("exit", r).unref?.() ?? setTimeout(r, 2000),
+    );
+  }
 }

package/scripts/vite-plugin-hmr-notifier.mjs

@@ -18,38 +18,74 @@ export default function ViteHMRNotifierPlugin() {
         }
       });
       console.debug("[hmr-notifier] WebSocket mounted at /hmr-notifier");
-      let building = false;
-      let pendingChanges = false;
 
-      server.watcher.on("change", async (file) => {
+      // Rebuild only for the project's own files. The watcher also reports
+      // the build's OWN output: vite ignores outDir through a glob built
+      // from the absolute path, and that glob stops matching when the
+      // folder name contains glob characters ("my-app(2)" — `open` numbers
+      // duplicate downloads that way), so every build then triggered the
+      // next one. Compare paths as plain prefixes instead; no globs.
+      const root = path.resolve(server.config.root);
+      const outDir = path.resolve(root, server.config.build.outDir);
+      // vite's dependency cache (.vite/deps_temp_*) is ignored by vite the
+      // same glob way and leaks through for the same folder names.
+      const cacheDir = path.resolve(root, server.config.cacheDir);
+      const inside = (dir, file) =>
+        file === dir || file.startsWith(dir + path.sep);
+      const isSourceChange = (file) => {
+        const abs = path.resolve(file);
+        if (!inside(root, abs)) return false;
+        if (inside(outDir, abs) || inside(cacheDir, abs)) return false;
+        const segments = abs.slice(root.length).split(path.sep);
+        return !segments.some(
+          (segment) =>
+            segment === "node_modules" ||
+            segment.startsWith(".") || // .git, .vite, .env, editor swap files
+            segment.endsWith(".log"),
+        );
+      };
+
+      // Single-flight with coalescing: changes that arrive during a build
+      // queue exactly ONE follow-up build (not one per file, and not a
+      // synthetic "change" event that would log and could re-trigger).
+      let building = false;
+      let pending = false;
+      const notify = () => {
+        wss.clients.forEach((client) => {
+          if (client.readyState === 1) {
+            client.send(JSON.stringify({ type: "reload-remote-component" }));
+          }
+        });
+      };
+      const rebuild = async (file) => {
         if (building) {
-          pendingChanges = true;
+          pending = true;
           return;
         }
         building = true;
         console.debug(`[hmr-notifier] File changed: ${file}, Rebuilding...`);
         try {
-          await build({
-            configFile: path.resolve(__dirname, "../config/vite.config.mjs"),
-            logLevel: "silent",
-          });
+          do {
+            pending = false;
+            await build({
+              configFile: path.resolve(__dirname, "../config/vite.config.mjs"),
+              logLevel: "silent",
+            });
+          } while (pending);
           console.debug(`[hmr-notifier] Build finished, notifying clients...`);
-          wss.clients.forEach((client) => {
-            if (client.readyState === 1) {
-              client.send(JSON.stringify({ type: "reload-remote-component" }));
-            }
-          });
+          notify();
         } catch (err) {
           console.error(`[hmr-notifier] Build failed:`, err);
         } finally {
           building = false;
-          if (pendingChanges) {
-            pendingChanges = false;
-            // Emit change event to re-trigger build after current build completes
-            server.watcher.emit("change", file);
-          }
         }
-      });
+      };
+
+      for (const event of ["change", "add", "unlink"]) {
+        server.watcher.on(event, (file) => {
+          if (isSourceChange(file)) void rebuild(file);
+        });
+      }
     },
   };
 }