Add onTaskStart, and a new typed field ctx.task

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/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;

node-src/types.ts

@@ -88,8 +88,8 @@ export interface Options {
   patchHeadRef: string;
   patchBaseRef: string;
 
-  /** A callback that is called at the completion of each task */
-  onTaskComplete?: (ctx: Context) => void;
+  /** A callback that is called at the start of each task */
+  experimental_onTaskStart?: (ctx: Context) => void;
 
   /** A callback that is called if a task fails */
   onTaskError?: (
@@ -98,12 +98,28 @@ export interface Options {
   ) => void;
 
   /** A callback that is called during tasks that have incremental progress */
-  onTaskProgress?: (
+  experimental_onTaskProgress?: (
     ctx: Context,
     status: { progress: number; total: number; unit: string }
   ) => void;
+
+  /** A callback that is called at the completion of each task */
+  experimental_onTaskComplete?: (ctx: Context) => void;
 }
 
+export type TaskName =
+  | 'auth'
+  | 'gitInfo'
+  | 'storybookInfo'
+  | 'initialize'
+  | 'build'
+  | 'upload'
+  | 'verify'
+  | 'snapshot'
+  | 'report'
+  | 'prepareWorkspace'
+  | 'restoreWorkspace';
+
 export interface Context {
   env: Env;
   log: Logger;
@@ -121,6 +137,7 @@ export interface Context {
   argv: string[];
   flags: Flags;
   options: Options;
+  task: TaskName;
   title: string;
   skip?: boolean;
   skipSnapshots?: boolean;

package.json

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