Merge branch 'main' into tom/cap-2327-track-hasrouter-and-haspagecomp…

…onents-on-build-events

CHANGELOG.md

@@ -1,3 +1,29 @@
+# v11.16.5 (Mon Nov 04 2024)
+
+#### 🐛 Bug Fix
+
+- Account for `rsbuild` stats JSON output and multiple locations [#1110](https://github.com/chromaui/chromatic-cli/pull/1110) ([@codykaup](https://github.com/codykaup))
+
+#### Authors: 1
+
+- Cody Kaup ([@codykaup](https://github.com/codykaup))
+
+---
+
+# v11.16.4 (Mon Nov 04 2024)
+
+#### 🐛 Bug Fix
+
+- Ensure parent directory exists before writing log/diagnostics file [#1117](https://github.com/chromaui/chromatic-cli/pull/1117) ([@codykaup](https://github.com/codykaup))
+- Fix `--diagnostics-file` parsing [#1116](https://github.com/chromaui/chromatic-cli/pull/1116) ([@codykaup](https://github.com/codykaup))
+- Add steps for how to run builds against local CLI [#1113](https://github.com/chromaui/chromatic-cli/pull/1113) ([@codykaup](https://github.com/codykaup))
+
+#### Authors: 1
+
+- Cody Kaup ([@codykaup](https://github.com/codykaup))
+
+---
+
 # v11.16.3 (Wed Oct 30 2024)
 
 #### ⚠️ Pushed to `main`

node-src/index.test.ts

@@ -284,6 +284,7 @@ vi.mock('fs', async (importOriginal) => {
   const originalModule = (await importOriginal()) as any;
   return {
     pathExists: async () => true,
+    mkdirSync: vi.fn(),
     readFileSync: originalModule.readFileSync,
     writeFileSync: vi.fn(),
     createReadStream: vi.fn(() => mockStatsFile),

node-src/lib/getDependentStoryFiles.test.ts

@@ -179,7 +179,10 @@ describe('getDependentStoryFiles', () => {
         id: String.raw`./src lazy recursive ^\.\/.*$`,
         reasons: [
           {
-            moduleName: './node_modules/.cache/storybook/default/dev-server/storybook-stories.js',
+            resolvedModule:
+              './node_modules/.cache/storybook/default/dev-server/storybook-stories.js',
+            moduleName:
+              './node_modules/.cache/storybook/default/dev-server/storybook-stories.js + 2 modules',
           },
         ],
       },

node-src/lib/getDependentStoryFiles.ts

@@ -56,6 +56,7 @@ const getPackageName = (modulePath: string) => {
  */
 export function normalizePath(posixPath: string, rootPath: string, baseDirectory = '') {
   if (!posixPath || posixPath.startsWith('/virtual:')) return posixPath;
+
   return path.posix.isAbsolute(posixPath)
     ? path.posix.relative(rootPath, posixPath)
     : path.posix.join(baseDirectory, posixPath);
@@ -140,6 +141,7 @@ export async function getDependentStoryFiles(
       `/virtual:/@storybook/builder-vite/vite-app.js`,
       // rspack builder
       `./node_modules/.cache/storybook/default/dev-server/storybook-stories.js`,
+      `./node_modules/.cache/storybook/storybook-rsbuild-builder/storybook-config-entry.js`,
     ].map((file) => normalize(file))
   );
 
@@ -172,7 +174,12 @@ export async function getDependentStoryFiles(
       }
 
       const normalizedReasons = module_.reasons
-        ?.map((reason) => normalize(reason.moduleName))
+        ?.map((reason) =>
+          normalize(
+            reason.resolvedModule || // rspack sets a resolvedModule that holds the module name
+              reason.moduleName // vite, webpack, and default
+          )
+        )
         .filter((reasonName) => reasonName && reasonName !== normalizedName);
       if (normalizedReasons) {
         reasonsById.set(module_.id, normalizedReasons);

node-src/lib/getOptions.test.ts

@@ -209,4 +209,10 @@ describe('getOptions', () => {
       uploadMetadata: true,
     });
   });
+
+  it('allows you to specify a diagnostics file name', async () => {
+    expect(getOptions(getContext(['--diagnostics-file', 'output.json']))).toMatchObject({
+      diagnosticsFile: 'output.json',
+    });
+  });
 });

node-src/lib/getOptions.ts

@@ -141,11 +141,9 @@ export default function getOptions(ctx: InitialContext): Options {
     forceRebuild: trueIfSet(flags.forceRebuild),
     debug: flags.debug,
     diagnosticsFile:
-      defaultIfSet(flags.diagnosticsFile, DEFAULT_DIAGNOSTICS_FILE) ||
+      defaultUnlessSetOrFalse(flags.diagnosticsFile, DEFAULT_DIAGNOSTICS_FILE) ||
       // for backwards compatibility
-      flags.diagnostics
-        ? DEFAULT_DIAGNOSTICS_FILE
-        : undefined,
+      (flags.diagnostics ? DEFAULT_DIAGNOSTICS_FILE : undefined),
     junitReport: defaultIfSet(flags.junitReport, DEFAULT_REPORT_FILE),
     zip: flags.zip,
     skipUpdateCheck: flags.skipUpdateCheck,

node-src/lib/log.ts

@@ -1,6 +1,7 @@
 import chalk from 'chalk';
 import debug from 'debug';
-import { createWriteStream, rm } from 'fs';
+import { createWriteStream, mkdirSync, rm } from 'fs';
+import path from 'path';
 import stripAnsi from 'strip-ansi';
 import { format } from 'util';
 
@@ -96,13 +97,16 @@ const fileLogger = {
     this.append = () => {};
     this.queue = [];
   },
-  initialize(path: string, onError: LogFunction) {
-    rm(path, { force: true }, (err) => {
+  initialize(filepath: string, onError: LogFunction) {
+    rm(filepath, { force: true }, (err) => {
       if (err) {
         this.disable();
         onError(err);
       } else {
-        const stream = createWriteStream(path, { flags: 'a' });
+        // Ensure the parent directory exists before we create the stream
+        mkdirSync(path.dirname(filepath), { recursive: true });
+
+        const stream = createWriteStream(filepath, { flags: 'a' });
         this.append = (...messages: string[]) => {
           stream?.write(
             messages

node-src/lib/writeChromaticDiagnostics.test.ts

@@ -1,6 +1,13 @@
-import { describe, expect, it } from 'vitest';
+import { mkdirSync } from 'fs';
+import jsonfile from 'jsonfile';
+import path from 'path';
+import { describe, expect, it, vi } from 'vitest';
 
-import { getDiagnostics } from './writeChromaticDiagnostics';
+import { createLogger } from './log';
+import { getDiagnostics, writeChromaticDiagnostics } from './writeChromaticDiagnostics';
+
+vi.mock('jsonfile');
+vi.mock('fs');
 
 describe('getDiagnostics', () => {
   it('returns context object', () => {
@@ -26,3 +33,22 @@ describe('getDiagnostics', () => {
     });
   });
 });
+
+describe('writeChromaticDiagnostics', () => {
+  it('should create the parent directory if it does not exist', async () => {
+    const ctx = {
+      log: createLogger({}),
+      options: { diagnosticsFile: '/tmp/doesnotexist/diagnostics.json' },
+    };
+    await writeChromaticDiagnostics(ctx as any);
+
+    expect(mkdirSync).toHaveBeenCalledWith(path.dirname(ctx.options.diagnosticsFile), {
+      recursive: true,
+    });
+    expect(jsonfile.writeFile).toHaveBeenCalledWith(
+      ctx.options.diagnosticsFile,
+      expect.any(Object),
+      expect.any(Object)
+    );
+  });
+});

node-src/lib/writeChromaticDiagnostics.ts

@@ -1,4 +1,6 @@
+import { mkdirSync } from 'fs';
 import jsonfile from 'jsonfile';
+import path from 'path';
 
 import { Context } from '..';
 import wroteReport from '../ui/messages/info/wroteReport';
@@ -17,6 +19,9 @@ export async function writeChromaticDiagnostics(ctx: Context) {
   }
 
   try {
+    // Ensure the parent directory exists before writing file
+    mkdirSync(path.dirname(ctx.options.diagnosticsFile), { recursive: true });
+
     await writeFile(ctx.options.diagnosticsFile, getDiagnostics(ctx), { spaces: 2 });
     ctx.log.info(wroteReport(ctx.options.diagnosticsFile, 'Chromatic diagnostics'));
   } catch (error) {

node-src/types.ts

@@ -359,6 +359,7 @@ export interface Task {
 }
 
 export interface Reason {
+  resolvedModule?: string; // rspack sets a resolvedModule field that holds the module name
   moduleName: string;
 }
 export interface Module {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chromatic",
-  "version": "11.16.3",
+  "version": "11.16.5",
   "description": "Automate visual testing across browsers. Gather UI feedback. Versioned documentation.",
   "keywords": [
     "storybook-addon",