@navipartner/demo-video 0.7.3 → 0.7.4

package/bin/args.d.mts

@@ -22,6 +22,8 @@ export interface DemoArgs {
   draft: boolean;
 }
 export const COMMANDS: readonly string[];
+/** The package.json that makes demo.config.ts CommonJS, or null. */
+export function commonJsDemo(demoDir: string): string | null;
 export function parseArgs(argv: string[], cwd: string): DemoArgs;
 export interface StoryEntry {
   name: string;

package/bin/args.mjs

@@ -11,6 +11,28 @@ export const COMMANDS = [
   "brand-needs",
 ];
 const NEEDS_STORYBOARD = new Set(["check", "render", "record"]);
+// Commands whose Playwright run loads demo.config.ts.
+const LOADS_ADAPTER = new Set(["check", "render", "record", "brand-needs"]);
+
+/**
+ * The package.json that makes demo.config.ts CommonJS, or null. Playwright
+ * compiles a .ts file as CommonJS unless the nearest package.json says
+ * "type": "module", and the adapter's imports then fail to load. An app
+ * that isn't ESM gets demo/package.json from init, scoped to demo/ so its
+ * e2e suite loads as before.
+ */
+export const commonJsDemo = (demoDir) => {
+  for (let dir = demoDir; ; dir = path.dirname(dir)) {
+    const file = path.join(dir, "package.json");
+    if (fs.existsSync(file)) {
+      const type = JSON.parse(fs.readFileSync(file, "utf8")).type;
+      return type === "module" ? null : file;
+    }
+    if (path.dirname(dir) === dir) {
+      return null;
+    }
+  }
+};
 const USAGE = `Usage: demo-video <${COMMANDS.join("|")}> [--app <dir>] [--story <name|file.json>] [--brand <name>] [--brands <dir>] [--draft] [--json]
 Without --story, check, render and record use the app's primary story.
 --draft renders at 30 fps (about half the time) to iterate on a story.
@@ -111,6 +133,12 @@ export const parseArgs = (argv, cwd) => {
   if (!fs.existsSync(adapterPath)) {
     throw new Error(`No demo adapter: expected ${adapterPath}`);
   }
+  const commonJs = LOADS_ADAPTER.has(command) ? commonJsDemo(demoDir) : null;
+  if (commonJs) {
+    throw new Error(
+      `${path.relative(cwd, commonJs) || "package.json"} has no "type": "module", so Playwright would load demo/demo.config.ts as CommonJS and its imports would fail. Add ${path.relative(cwd, path.join(demoDir, "package.json"))} containing {"type": "module"} (init writes it).`,
+    );
+  }
   // Everything a run needs only while it runs (the generated Playwright
   // config and spec, the check report, the raw recording, Playwright's
   // results) goes here, inside demo/out/ (gitignored), and is deleted when

package/bin/init.mjs

@@ -432,6 +432,33 @@ export const initApp = (appDir, { dryRun = false } = {}) => {
         : "skeleton; webServer to fill in (TODO)",
     ]);
   }
+  // Playwright compiles demo.config.ts as CommonJS in an app that isn't
+  // ESM, and the adapter's imports then fail. "type": "module" for demo/
+  // only: setting it for the app would change how its e2e suite loads.
+  if (pkg.type !== "module") {
+    const demoPkg = path.join(demoDir, "package.json");
+    const existing = read(demoPkg);
+    if (existing === null) {
+      if (!dryRun) {
+        fs.mkdirSync(demoDir, { recursive: true });
+        fs.writeFileSync(
+          demoPkg,
+          `${JSON.stringify({ type: "module" }, null, 2)}\n`,
+        );
+      }
+      changes.push([
+        "added",
+        "demo/package.json",
+        '"type": "module" (the app is CommonJS)',
+      ]);
+    } else if (JSON.parse(existing).type === "module") {
+      changes.push(["ok", "demo/package.json", '"type": "module"']);
+    } else {
+      todo.push(
+        'Set "type": "module" in demo/package.json: Playwright loads demo.config.ts as CommonJS otherwise.',
+      );
+    }
+  }
   todo.push(
     "Ask Claude for a demo video of this app: it finishes demo.config.ts and writes the primary story, then runs demo-video check.",
   );

package/bin/runner.mjs

@@ -14,12 +14,6 @@ const importPath = (from, to) => {
 const HEADER =
   "// Generated by @navipartner/demo-video on every run; do not edit.\n";
 
-// In an app that isn't ESM, Playwright compiles demo.config.ts as CommonJS,
-// and its `export default` arrives wrapped: { __esModule, default }.
-const importAdapter = (from) => `import loaded from ${from};
-
-const adapter = loaded?.__esModule ? loaded.default : loaded;`;
-
 /** Writes playwright.config.mjs and demo.spec.mjs; returns the config path. */
 export const writeRunner = ({
   runnerDir,
@@ -34,7 +28,7 @@ export const writeRunner = ({
     configPath,
     `${HEADER}import { createDemoConfig } from "@navipartner/demo-video/runner";
 
-${importAdapter(adapter)}
+import adapter from ${adapter};
 
 export default createDemoConfig(adapter, ${dirs});
 `,
@@ -44,7 +38,7 @@ export default createDemoConfig(adapter, ${dirs});
     `${HEADER}import { registerDemoTests } from "@navipartner/demo-video/runner";
 import { test } from "@playwright/test";
 
-${importAdapter(adapter)}
+import adapter from ${adapter};
 
 registerDemoTests(test, adapter, ${JSON.stringify(demoDir)});
 `,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navipartner/demo-video",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Marketing demo videos of a React app, filmed by Playwright against the app's own e2e mocks.",
   "license": "UNLICENSED",
   "repository": {
@@ -9,20 +9,18 @@
   },
   "type": "module",
   "engines": {
-    "node": ">=22.12"
+    "node": ">=22"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "import": "./dist/index.js"
     },
     "./runner": {
       "types": "./dist/runner/index.d.ts",
-      "import": "./dist/runner/index.js",
-      "default": "./dist/runner/index.js"
+      "import": "./dist/runner/index.js"
     }
   },
   "bin": {

package/skills/np-demo-video/reference.md

@@ -12,6 +12,11 @@ Optional: `actions` (app steps such as a barcode scan), `idleTimeoutSeconds`,
 `{ what, optional: true }`. A brand without a need that isn't optional fails
 `check`.
 
+In an app that isn't ESM (no `"type": "module"` in its package.json),
+`demo/package.json` holds `{ "type": "module" }`, so `demo.config.ts` loads
+as ESM while the app's own files stay as they are. `init` writes it, and
+`check` says so if it's missing.
+
 ```ts
 import { defineDemo, overlayResponse } from "@navipartner/demo-video";