Merge branch 'main' of github.com:chromaui/chromatic-cli into turbosn…

…ap-log-upgrades

CHANGELOG.md

@@ -1,3 +1,17 @@
+# 7.1.0 - 2023-09-07
+
+- [812](https://github.com/chromaui/chromatic-cli/pull/812) Allow running a build from a repo with only one commit when not in CI
+- [810](https://github.com/chromaui/chromatic-cli/pull/810) Add `onTaskStart`, and a new typed field `ctx.task`
+- [808](https://github.com/chromaui/chromatic-cli/pull/808) Add `onTaskError` option to report errors to node consumers
+- [813](https://github.com/chromaui/chromatic-cli/pull/813) Rename `onTaskError` to `experimental_onTaskError`
+
+# 7.0.0 - 2023-09-04
+
+- [789](https://github.com/chromaui/chromatic-cli/pull/789) Use `@antfu/ni` to support `pnpm` for Storybook build
+- [805](https://github.com/chromaui/chromatic-cli/pull/805) Add a `onTaskProgress` option and report progress on it
+
+This is a potentially breaking change due to the introduction of [@antfu/ni](https://github.com/antfu/ni) to handle running the `storybook build` command in the **Build Storybook** step.
+
 # 6.24.1 - 2023-08-25
 
 - [803](https://github.com/chromaui/chromatic-cli/pull/803) Support Mode Name as Suffix for Build Progress Indicator

node-src/git/getCommitAndBranch.test.ts

@@ -87,11 +87,19 @@ describe('getCommitAndBranch', () => {
     expect(info).toMatchObject({ branch: 'master' });
   });
 
-  it('throws when there is only one commit', async () => {
+  it('throws when there is only one commit, CI', async () => {
+    envCi.mockReturnValue({ isCi: true });
     hasPreviousCommit.mockResolvedValue(false);
     await expect(getCommitAndBranch({ log })).rejects.toThrow('Found only one commit');
   });
 
+  it('does NOT throw when there is only one commit, non-CI', async () => {
+    envCi.mockReturnValue({ isCi: false });
+    hasPreviousCommit.mockResolvedValue(false);
+    const info = await getCommitAndBranch({ log });
+    expect(info).toMatchObject({});
+  });
+
   describe('with branchName', () => {
     it('uses provided branchName as branch', async () => {
       const info = await getCommitAndBranch({ log }, { branchName: 'foobar' });

node-src/git/getCommitAndBranch.ts

@@ -50,14 +50,20 @@ export default async function getCommitAndBranch(
     CHROMATIC_PULL_REQUEST_SHA,
     CHROMATIC_SLUG,
   } = process.env;
+  const { isCi, service, prBranch, branch: ciBranch, commit: ciCommit, slug: ciSlug } = envCi();
 
   const isFromEnvVariable = CHROMATIC_SHA && CHROMATIC_BRANCH; // Our GitHub Action also sets these
   const isTravisPrBuild = TRAVIS_EVENT_TYPE === 'pull_request';
   const isGitHubAction = GITHUB_ACTIONS === 'true';
   const isGitHubPrBuild = GITHUB_EVENT_NAME === 'pull_request';
 
   if (!(await hasPreviousCommit())) {
-    throw new Error(gitOneCommit(isGitHubAction));
+    const message = gitOneCommit(isGitHubAction);
+    if (isCi) {
+      throw new Error(message);
+    } else {
+      log.warn(message);
+    }
   }
 
   if (isFromEnvVariable) {
@@ -117,7 +123,6 @@ export default async function getCommitAndBranch(
     slug = GITHUB_REPOSITORY;
   }
 
-  const { isCi, service, prBranch, branch: ciBranch, commit: ciCommit, slug: ciSlug } = envCi();
   const ciService = process.env.CHROMATIC_ACTION ? 'chromaui/action' : service;
   slug = slug || ciSlug;
 

node-src/index.ts

@@ -38,6 +38,8 @@ interface Output {
   inheritedCaptureCount: number;
 }
 
+export type { Flags, Options, TaskName, Context } from './types';
+
 export async function run({
   argv = [],
   flags,

node-src/lib/tasks.ts

@@ -1,22 +1,36 @@
 import chalk from 'chalk';
 import Listr from 'listr';
 import pluralize from 'pluralize';
-import { Context, Task } from '../types';
+import { Context, Task, TaskName } from '../types';
 
 type ValueFn = string | ((ctx: Context, task: Task) => string);
 
-export const createTask = ({ title, steps, ...config }): Listr.ListrTask<Context> => ({
+type TaskInput = Omit<Listr.ListrTask<Context>, 'task'> & {
+  name: TaskName;
+  steps: ((ctx: Context, task: Listr.ListrTaskWrapper<Context> | Task) => void | Promise<void>)[];
+};
+
+export const createTask = ({
+  name,
+  title,
+  steps,
+  ...config
+}: TaskInput): Listr.ListrTask<Context> => ({
   title,
   task: async (ctx: Context, task: Listr.ListrTaskWrapper<Context>) => {
+    ctx.task = name;
     ctx.title = title;
     ctx.startedAt = Number.isInteger(ctx.now) ? ctx.now : new Date().getTime();
+
+    ctx.options.experimental_onTaskStart?.({ ...ctx });
+
     // eslint-disable-next-line no-restricted-syntax
     for (const step of steps) {
       // eslint-disable-next-line no-await-in-loop
       await step(ctx, task);
     }
 
-    ctx.options.onTaskComplete?.({ ...ctx });
+    ctx.options.experimental_onTaskComplete?.({ ...ctx });
   },
   ...config,
 });

node-src/main.test.ts

@@ -339,6 +339,7 @@ const getContext = (
     },
     packagePath: '',
     statsPath: 'preview-stats.json',
+    options: {},
     ...parseArgs(argv),
   } as any;
 };
@@ -351,6 +352,26 @@ it('fails on missing project token', async () => {
   expect(ctx.testLogger.errors[0]).toMatch(/Missing project token/);
 });
 
+// Note this tests options errors, but not fatal task or runtime errors.
+it('passes options error to experimental_onTaskError', async () => {
+  const ctx = getContext([]);
+  ctx.options = {
+    experimental_onTaskError: jest.fn(),
+  } as any;
+
+  ctx.options.experimental_onTaskError = jest.fn();
+  ctx.env.CHROMATIC_PROJECT_TOKEN = '';
+  await runBuild(ctx);
+
+  await expect(ctx.options.experimental_onTaskError).toHaveBeenCalledWith(
+    expect.anything(), // Context
+    expect.objectContaining({
+      formattedError: expect.stringContaining('Missing project token'), // Long formatted error fatalError https://github.com/chromaui/chromatic-cli/blob/217e77671179748eb4ddb8becde78444db93d067/node-src/ui/messages/errors/fatalError.ts#L11
+      originalError: expect.any(Error),
+    })
+  );
+});
+
 it('runs in simple situations', async () => {
   const ctx = getContext(['--project-token=asdf1234']);
   await runBuild(ctx);

node-src/runBuild.ts

@@ -26,6 +26,10 @@ export async function runBuild(ctx: Context, extraOptions?: Partial<Options>) {
   } catch (e) {
     ctx.log.info('');
     ctx.log.error(fatalError(ctx, [e]));
+    ctx.options.experimental_onTaskError?.(ctx, {
+      formattedError: fatalError(ctx, [e]),
+      originalError: e,
+    });
     setExitCode(ctx, exitCodes.INVALID_OPTIONS, true);
     return;
   }
@@ -71,6 +75,10 @@ export async function runBuild(ctx: Context, extraOptions?: Partial<Options>) {
     }
   } catch (error) {
     const errors = [].concat(error); // GraphQLClient might throw an array of errors
+    ctx.options.experimental_onTaskError?.(ctx, {
+      formattedError: fatalError(ctx, errors),
+      originalError: error,
+    });
 
     if (errors.length && !ctx.userError) {
       ctx.log.info('');

node-src/tasks/auth.ts

@@ -32,6 +32,7 @@ export const setAuthorizationToken = async (ctx: Context) => {
 };
 
 export default createTask({
+  name: 'auth',
   title: initial.title,
   steps: [transitionTo(authenticating), setAuthorizationToken, transitionTo(authenticated, true)],
 });

node-src/tasks/build.ts

@@ -87,6 +87,7 @@ export const buildStorybook = async (ctx: Context) => {
 };
 
 export default createTask({
+  name: 'build',
   title: initial.title,
   skip: async (ctx) => {
     if (ctx.skip) return true;

node-src/tasks/gitInfo.ts

@@ -244,6 +244,7 @@ export const setGitInfo = async (ctx: Context, task: Task) => {
 };
 
 export default createTask({
+  name: 'gitInfo',
   title: initial.title,
   steps: [transitionTo(pending), setGitInfo],
 });

node-src/tasks/initialize.ts

@@ -94,6 +94,7 @@ export const announceBuild = async (ctx: Context) => {
 };
 
 export default createTask({
+  name: 'initialize',
   title: initial.title,
   skip: (ctx: Context) => ctx.skip,
   steps: [transitionTo(pending), setEnvironment, announceBuild, transitionTo(success, true)],

node-src/tasks/prepareWorkspace.ts

@@ -59,6 +59,7 @@ export const runPrepareWorkspace = async (ctx: Context, task: Task) => {
 };
 
 export default createTask({
+  name: 'prepareWorkspace',
   title: initial.title,
   steps: [transitionTo(pending), runPrepareWorkspace, transitionTo(success, true)],
 });

node-src/tasks/report.ts

@@ -131,6 +131,7 @@ export const generateReport = async (ctx: Context) => {
 };
 
 export default createTask({
+  name: 'report',
   title: initial.title,
   skip: (ctx: Context) => ctx.skip,
   steps: [transitionTo(pending), generateReport, transitionTo(success, true)],

node-src/tasks/restoreWorkspace.ts

@@ -11,6 +11,7 @@ export const runRestoreWorkspace = async () => {
 };
 
 export default createTask({
+  name: 'restoreWorkspace',
   title: initial.title,
   steps: [transitionTo(pending), runRestoreWorkspace, transitionTo(success, true)],
 });

node-src/tasks/snapshot.test.ts

@@ -107,7 +107,7 @@ describe('takeSnapshots', () => {
     expect(ctx.exitCode).toBe(3);
   });
 
-  it('calls onTaskProgress with progress', async () => {
+  it('calls experimental_onTaskProgress with progress', async () => {
     const client = { runQuery: jest.fn(), setAuthorization: jest.fn() };
     const build = {
       app: { repository: { provider: 'github' } },
@@ -122,7 +122,7 @@ describe('takeSnapshots', () => {
       env,
       git: { matchesBranch },
       log,
-      options: { onTaskProgress: jest.fn() },
+      options: { experimental_onTaskProgress: jest.fn() },
       build,
     } as any;
 
@@ -138,13 +138,13 @@ describe('takeSnapshots', () => {
 
     await takeSnapshots(ctx, {} as any);
 
-    expect(ctx.options.onTaskProgress).toHaveBeenCalledTimes(2);
-    expect(ctx.options.onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
+    expect(ctx.options.experimental_onTaskProgress).toHaveBeenCalledTimes(2);
+    expect(ctx.options.experimental_onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
       progress: 1,
       total: 5,
       unit: 'snapshots',
     });
-    expect(ctx.options.onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
+    expect(ctx.options.experimental_onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
       progress: 3,
       total: 5,
       unit: 'snapshots',

node-src/tasks/snapshot.ts

@@ -70,7 +70,7 @@ export const takeSnapshots = async (ctx: Context, task: Task) => {
   const updateProgress = throttle(
     ({ cursor, label }) => {
       task.output = pending(ctx, { cursor, label }).output;
-      ctx.options.onTaskProgress?.(
+      ctx.options.experimental_onTaskProgress?.(
         { ...ctx },
         { progress: cursor, total: actualTestCount, unit: 'snapshots' }
       );
@@ -145,6 +145,7 @@ export const takeSnapshots = async (ctx: Context, task: Task) => {
 };
 
 export default createTask({
+  name: 'snapshot',
   title: initial.title,
   skip: (ctx: Context) => {
     if (ctx.skip) return true;

node-src/tasks/storybookInfo.ts

@@ -8,6 +8,7 @@ export const setStorybookInfo = async (ctx: Context) => {
 };
 
 export default createTask({
+  name: 'storybookInfo',
   title: initial.title,
   skip: (ctx: Context) => ctx.skip,
   steps: [transitionTo(pending), setStorybookInfo, transitionTo(success, true)],

node-src/tasks/upload.test.ts

@@ -243,7 +243,7 @@ describe('uploadStorybook', () => {
     expect(ctx.isolatorUrl).toBe('https://asdqwe.chromatic.com/iframe.html');
   });
 
-  it('calls onTaskProgress with progress', async () => {
+  it('calls experimental_onTaskProgress with progress', async () => {
     const client = { runQuery: jest.fn() };
     client.runQuery.mockReturnValue({
       getUploadUrls: {
@@ -294,29 +294,29 @@ describe('uploadStorybook', () => {
       log,
       http,
       sourceDir: '/static/',
-      options: { onTaskProgress: jest.fn() },
+      options: { experimental_onTaskProgress: jest.fn() },
       fileInfo,
       announcedBuild: { id: '1' },
     } as any;
     await uploadStorybook(ctx, {} as any);
 
-    expect(ctx.options.onTaskProgress).toHaveBeenCalledTimes(4);
-    expect(ctx.options.onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
+    expect(ctx.options.experimental_onTaskProgress).toHaveBeenCalledTimes(4);
+    expect(ctx.options.experimental_onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
       progress: 21,
       total: 84,
       unit: 'bytes',
     });
-    expect(ctx.options.onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
+    expect(ctx.options.experimental_onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
       progress: 42,
       total: 84,
       unit: 'bytes',
     });
-    expect(ctx.options.onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
+    expect(ctx.options.experimental_onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
       progress: 63,
       total: 84,
       unit: 'bytes',
     });
-    expect(ctx.options.onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
+    expect(ctx.options.experimental_onTaskProgress).toHaveBeenCalledWith(expect.any(Object), {
       progress: 84,
       total: 84,
       unit: 'bytes',

node-src/tasks/upload.ts

@@ -288,7 +288,7 @@ export const uploadStorybook = async (ctx: Context, task: Task) => {
       const percentage = Math.round((progress / total) * 100);
       task.output = uploading({ percentage }).output;
 
-      ctx.options.onTaskProgress?.({ ...ctx }, { progress, total, unit: 'bytes' });
+      ctx.options.experimental_onTaskProgress?.({ ...ctx }, { progress, total, unit: 'bytes' });
     },
     // Avoid spamming the logs with progress updates in non-interactive mode
     ctx.options.interactive ? 100 : ctx.env.CHROMATIC_OUTPUT_INTERVAL
@@ -307,6 +307,7 @@ export const uploadStorybook = async (ctx: Context, task: Task) => {
 };
 
 export default createTask({
+  name: 'upload',
   title: initial.title,
   skip: (ctx: Context) => {
     if (ctx.skip) return true;

node-src/tasks/verify.ts

@@ -249,6 +249,7 @@ export const verifyBuild = async (ctx: Context, task: Task) => {
 };
 
 export default createTask({
+  name: 'verify',
   title: initial.title,
   skip: (ctx: Context) => {
     if (ctx.skip) return true;