Merge pull request #14016 from storybookjs/14007-refactor-progress-pl…

…ugin

Core: Refactor ProgressPlugin handling

lib/builder-webpack4/src/index.ts

@@ -1,10 +1,10 @@
-import webpackReal from 'webpack';
+import webpackReal, { ProgressPlugin } from 'webpack';
 // @ts-ignore
 import webpack4, { Stats, Configuration } from '@types/webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import { logger } from '@storybook/node-logger';
-import { Builder } from '@storybook/core-common';
+import { Builder, useProgressReporting } from '@storybook/core-common';
 
 let compilation: ReturnType<typeof webpackDevMiddleware>;
 let reject: (reason?: any) => void;
@@ -39,12 +39,7 @@ export const executor = {
   get: webpack,
 };
 
-export const start: WebpackBuilder['start'] = async ({
-  startTime,
-  options,
-  useProgressReporting,
-  router,
-}) => {
+export const start: WebpackBuilder['start'] = async ({ startTime, options, router }) => {
   const config = await getConfig(options);
   const compiler = executor.get(config);
   if (!compiler) {
@@ -61,7 +56,8 @@ export const start: WebpackBuilder['start'] = async ({
     };
   }
 
-  await useProgressReporting(compiler, options, startTime);
+  const { handler, modulesCount } = await useProgressReporting(router, startTime, options);
+  new ProgressPlugin({ handler, modulesCount }).apply(compiler);
 
   const middlewareOptions: Parameters<typeof webpackDevMiddleware>[1] = {
     publicPath: config.output?.publicPath as string,

lib/builder-webpack5/src/index.ts

@@ -1,8 +1,8 @@
-import webpack, { Stats, Configuration } from 'webpack';
+import webpack, { Stats, Configuration, ProgressPlugin } from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import { logger } from '@storybook/node-logger';
-import { Builder } from '@storybook/core-common';
+import { Builder, useProgressReporting } from '@storybook/core-common';
 
 let compilation: ReturnType<typeof webpackDevMiddleware>;
 let reject: (reason?: any) => void;
@@ -52,7 +52,8 @@ export const start: WebpackBuilder['start'] = async ({ startTime, options, route
     };
   }
 
-  // FIXME: await useProgressReporting(compiler, options, startTime);
+  const { handler, modulesCount } = await useProgressReporting(router, startTime, options);
+  new ProgressPlugin({ handler, modulesCount }).apply(compiler);
 
   const middlewareOptions: Parameters<typeof webpackDevMiddleware>[1] = {
     publicPath: config.output?.publicPath as string,

lib/cli/src/versions.json

@@ -1,61 +1,61 @@
 {
-  "@storybook/addon-a11y": "6.2.0-alpha.35",
-  "@storybook/addon-actions": "6.2.0-alpha.35",
-  "@storybook/addon-backgrounds": "6.2.0-alpha.35",
-  "@storybook/addon-controls": "6.2.0-alpha.35",
-  "@storybook/addon-cssresources": "6.2.0-alpha.35",
-  "@storybook/addon-design-assets": "6.2.0-alpha.35",
-  "@storybook/addon-docs": "6.2.0-alpha.35",
-  "@storybook/addon-essentials": "6.2.0-alpha.35",
-  "@storybook/addon-events": "6.2.0-alpha.35",
-  "@storybook/addon-google-analytics": "6.2.0-alpha.35",
-  "@storybook/addon-graphql": "6.2.0-alpha.35",
-  "@storybook/addon-jest": "6.2.0-alpha.35",
-  "@storybook/addon-knobs": "6.2.0-alpha.35",
-  "@storybook/addon-links": "6.2.0-alpha.35",
-  "@storybook/addon-queryparams": "6.2.0-alpha.35",
-  "@storybook/addon-storyshots": "6.2.0-alpha.35",
-  "@storybook/addon-storyshots-puppeteer": "6.2.0-alpha.35",
-  "@storybook/addon-storysource": "6.2.0-alpha.35",
-  "@storybook/addon-toolbars": "6.2.0-alpha.35",
-  "@storybook/addon-viewport": "6.2.0-alpha.35",
-  "@storybook/addons": "6.2.0-alpha.35",
-  "@storybook/angular": "6.2.0-alpha.35",
-  "@storybook/api": "6.2.0-alpha.35",
-  "@storybook/aurelia": "6.2.0-alpha.35",
-  "@storybook/builder-webpack4": "6.2.0-alpha.35",
-  "@storybook/builder-webpack5": "6.2.0-alpha.35",
-  "@storybook/channel-postmessage": "6.2.0-alpha.35",
-  "@storybook/channel-websocket": "6.2.0-alpha.35",
-  "@storybook/channels": "6.2.0-alpha.35",
-  "@storybook/cli": "6.2.0-alpha.35",
-  "@storybook/client-api": "6.2.0-alpha.35",
-  "@storybook/client-logger": "6.2.0-alpha.35",
-  "@storybook/codemod": "6.2.0-alpha.35",
-  "@storybook/components": "6.2.0-alpha.35",
-  "@storybook/core": "6.2.0-alpha.35",
-  "@storybook/core-client": "6.2.0-alpha.35",
-  "@storybook/core-common": "6.2.0-alpha.35",
-  "@storybook/core-events": "6.2.0-alpha.35",
-  "@storybook/core-server": "6.2.0-alpha.35",
-  "@storybook/ember": "6.2.0-alpha.35",
-  "@storybook/html": "6.2.0-alpha.35",
-  "@storybook/marionette": "6.2.0-alpha.35",
-  "@storybook/marko": "6.2.0-alpha.35",
-  "@storybook/mithril": "6.2.0-alpha.35",
-  "@storybook/node-logger": "6.2.0-alpha.35",
-  "@storybook/postinstall": "6.2.0-alpha.35",
-  "@storybook/preact": "6.2.0-alpha.35",
-  "@storybook/rax": "6.2.0-alpha.35",
-  "@storybook/react": "6.2.0-alpha.35",
-  "@storybook/riot": "6.2.0-alpha.35",
-  "@storybook/router": "6.2.0-alpha.35",
-  "@storybook/server": "6.2.0-alpha.35",
-  "@storybook/source-loader": "6.2.0-alpha.35",
-  "@storybook/svelte": "6.2.0-alpha.35",
-  "@storybook/theming": "6.2.0-alpha.35",
-  "@storybook/ui": "6.2.0-alpha.35",
-  "@storybook/vue": "6.2.0-alpha.35",
-  "@storybook/vue3": "6.2.0-alpha.35",
-  "@storybook/web-components": "6.2.0-alpha.35"
+  "@storybook/addon-a11y": "6.2.0-beta.0",
+  "@storybook/addon-actions": "6.2.0-beta.0",
+  "@storybook/addon-backgrounds": "6.2.0-beta.0",
+  "@storybook/addon-controls": "6.2.0-beta.0",
+  "@storybook/addon-cssresources": "6.2.0-beta.0",
+  "@storybook/addon-design-assets": "6.2.0-beta.0",
+  "@storybook/addon-docs": "6.2.0-beta.0",
+  "@storybook/addon-essentials": "6.2.0-beta.0",
+  "@storybook/addon-events": "6.2.0-beta.0",
+  "@storybook/addon-google-analytics": "6.2.0-beta.0",
+  "@storybook/addon-graphql": "6.2.0-beta.0",
+  "@storybook/addon-jest": "6.2.0-beta.0",
+  "@storybook/addon-knobs": "6.2.0-beta.0",
+  "@storybook/addon-links": "6.2.0-beta.0",
+  "@storybook/addon-queryparams": "6.2.0-beta.0",
+  "@storybook/addon-storyshots": "6.2.0-beta.0",
+  "@storybook/addon-storyshots-puppeteer": "6.2.0-beta.0",
+  "@storybook/addon-storysource": "6.2.0-beta.0",
+  "@storybook/addon-toolbars": "6.2.0-beta.0",
+  "@storybook/addon-viewport": "6.2.0-beta.0",
+  "@storybook/addons": "6.2.0-beta.0",
+  "@storybook/angular": "6.2.0-beta.0",
+  "@storybook/api": "6.2.0-beta.0",
+  "@storybook/aurelia": "6.2.0-beta.0",
+  "@storybook/builder-webpack4": "6.2.0-beta.0",
+  "@storybook/builder-webpack5": "6.2.0-beta.0",
+  "@storybook/channel-postmessage": "6.2.0-beta.0",
+  "@storybook/channel-websocket": "6.2.0-beta.0",
+  "@storybook/channels": "6.2.0-beta.0",
+  "@storybook/cli": "6.2.0-beta.0",
+  "@storybook/client-api": "6.2.0-beta.0",
+  "@storybook/client-logger": "6.2.0-beta.0",
+  "@storybook/codemod": "6.2.0-beta.0",
+  "@storybook/components": "6.2.0-beta.0",
+  "@storybook/core": "6.2.0-beta.0",
+  "@storybook/core-client": "6.2.0-beta.0",
+  "@storybook/core-common": "6.2.0-beta.0",
+  "@storybook/core-events": "6.2.0-beta.0",
+  "@storybook/core-server": "6.2.0-beta.0",
+  "@storybook/ember": "6.2.0-beta.0",
+  "@storybook/html": "6.2.0-beta.0",
+  "@storybook/marionette": "6.2.0-beta.0",
+  "@storybook/marko": "6.2.0-beta.0",
+  "@storybook/mithril": "6.2.0-beta.0",
+  "@storybook/node-logger": "6.2.0-beta.0",
+  "@storybook/postinstall": "6.2.0-beta.0",
+  "@storybook/preact": "6.2.0-beta.0",
+  "@storybook/rax": "6.2.0-beta.0",
+  "@storybook/react": "6.2.0-beta.0",
+  "@storybook/riot": "6.2.0-beta.0",
+  "@storybook/router": "6.2.0-beta.0",
+  "@storybook/server": "6.2.0-beta.0",
+  "@storybook/source-loader": "6.2.0-beta.0",
+  "@storybook/svelte": "6.2.0-beta.0",
+  "@storybook/theming": "6.2.0-beta.0",
+  "@storybook/ui": "6.2.0-beta.0",
+  "@storybook/vue": "6.2.0-beta.0",
+  "@storybook/vue3": "6.2.0-beta.0",
+  "@storybook/web-components": "6.2.0-beta.0"
 }

lib/core-common/package.json

@@ -60,6 +60,7 @@
     "@types/glob-base": "^0.3.0",
     "@types/micromatch": "^4.0.1",
     "@types/node": "^14.0.10",
+    "@types/pretty-hrtime": "^1.0.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-macros": "^3.0.1",
     "babel-plugin-polyfill-corejs3": "^0.1.0",
@@ -76,6 +77,7 @@
     "lazy-universal-dotenv": "^3.0.1",
     "micromatch": "^4.0.2",
     "pkg-dir": "^5.0.0",
+    "pretty-hrtime": "^1.0.3",
     "resolve-from": "^5.0.0",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2",

lib/core-common/src/types.ts

@@ -167,18 +167,13 @@ export interface Builder<Config, Stats> {
   start: (args: {
     options: Options;
     startTime: ReturnType<typeof process.hrtime>;
-    useProgressReporting: any;
     router: Router;
   }) => Promise<void | {
     stats: Stats;
     totalTime: ReturnType<typeof process.hrtime>;
     bail: (e?: Error) => Promise<void>;
   }>;
-  build: (arg: {
-    options: Options;
-    startTime: ReturnType<typeof process.hrtime>;
-    useProgressReporting: any;
-  }) => Promise<void>;
+  build: (arg: { options: Options; startTime: ReturnType<typeof process.hrtime> }) => Promise<void>;
   bail: (e?: Error) => Promise<void>;
   corePresets?: string[];
   overridePresets?: string[];

lib/core-common/src/utils/progress-reporting.ts

@@ -1,13 +1,11 @@
 import { Router } from 'express';
-import { Compiler, ProgressPlugin } from 'webpack';
+import { printDuration } from './print-duration';
 
 export const useProgressReporting = async (
-  compiler: Compiler,
-  options: any,
   router: Router,
-  printDuration: any,
-  startTime: [number, number]
-) => {
+  startTime: [number, number],
+  options: any
+): Promise<{ handler: any; modulesCount: number }> => {
   let value = 0;
   let totalModules: number;
   let reportProgress: (progress?: {
@@ -64,5 +62,5 @@ export const useProgressReporting = async (
   };
 
   const modulesCount = (await options.cache?.get('modulesCount').catch(() => {})) || 1000;
-  new ProgressPlugin({ handler, modulesCount }).apply(compiler);
+  return { handler, modulesCount };
 };

lib/core-server/package.json

@@ -51,6 +51,7 @@
     "@storybook/ui": "6.2.0-beta.0",
     "@types/node": "^14.0.10",
     "@types/node-fetch": "^2.5.7",
+    "@types/pretty-hrtime": "^1.0.0",
     "@types/webpack": "^4.41.26",
     "airbnb-js-shims": "^2.2.1",
     "babel-loader": "^8.2.2",

lib/core-server/src/build-static.ts

@@ -17,7 +17,6 @@ import * as managerBuilder from './manager/builder';
 
 import { getProdCli } from './cli';
 import { getPrebuiltDir } from './utils/prebuilt-manager';
-import { useProgressReporting } from './utils/progress-reporting';
 import { cache } from './utils/cache';
 import { copyAllStaticFiles } from './utils/copy-all-static-files';
 import { getPreviewBuilder } from './utils/get-preview-builder';
@@ -73,7 +72,6 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
     : managerBuilder.build({
         startTime,
         options: fullOptions,
-        useProgressReporting,
       });
 
   if (options.ignorePreview) {
@@ -85,7 +83,6 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
     : previewBuilder.build({
         startTime,
         options: fullOptions,
-        useProgressReporting,
       });
 
   await Promise.all([manager, preview]);

lib/core-server/src/dev-server.ts

@@ -9,7 +9,6 @@ import { useStatics } from './utils/server-statics';
 
 import * as managerBuilder from './manager/builder';
 
-import { useProgressReporting } from './utils/progress-reporting';
 import { openInBrowser } from './utils/open-in-browser';
 import { getPreviewBuilder } from './utils/get-preview-builder';
 
@@ -59,14 +58,12 @@ export async function storybookDevServer(options: Options) {
     : previewBuilder.start({
         startTime,
         options,
-        useProgressReporting,
         router,
       });
 
   const manager = managerBuilder.start({
     startTime,
     options,
-    useProgressReporting,
     router,
   });
 

lib/core-server/src/manager/builder.ts

@@ -1,7 +1,7 @@
-import webpack, { Stats, Configuration } from 'webpack';
+import webpack, { Stats, Configuration, ProgressPlugin } from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import { logger } from '@storybook/node-logger';
-import { Builder } from '@storybook/core-common';
+import { Builder, useProgressReporting } from '@storybook/core-common';
 import { pathExists } from 'fs-extra';
 import express from 'express';
 import { getManagerWebpackConfig } from './manager-config';
@@ -19,12 +19,7 @@ export const executor = {
   get: webpack,
 };
 
-export const start: WebpackBuilder['start'] = async ({
-  startTime,
-  options,
-  useProgressReporting,
-  router,
-}) => {
+export const start: WebpackBuilder['start'] = async ({ startTime, options, router }) => {
   const prebuiltDir = await getPrebuiltDir(options);
   const config = await getConfig(options);
 
@@ -55,7 +50,8 @@ export const start: WebpackBuilder['start'] = async ({
     return;
   }
 
-  await useProgressReporting(compiler, options, startTime);
+  const { handler, modulesCount } = await useProgressReporting(router, startTime, options);
+  new ProgressPlugin({ handler, modulesCount }).apply(compiler);
 
   const middlewareOptions: Parameters<typeof webpackDevMiddleware>[1] = {
     publicPath: config.output?.publicPath as string,