Performance optimizations on separate manager preview split, improved cold start, restart & rebuild

.babelrc.js

@@ -1,9 +1,14 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+  presets: [
+    ['@babel/preset-env', { shippedProposals: true }],
+    '@babel/preset-react',
+    '@babel/preset-flow',
+  ],
   plugins: [
     'babel-plugin-emotion',
     'babel-plugin-macros',
     '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-object-rest-spread',
     '@babel/plugin-proposal-export-default-from',
     [
       '@babel/plugin-transform-runtime',
@@ -20,7 +25,7 @@ module.exports = {
   overrides: [
     {
       test: './examples/vue-kitchen-sink',
-      presets: ['@babel/preset-env', 'babel-preset-vue'],
+      presets: [['@babel/preset-env', { shippedProposals: true }], 'babel-preset-vue'],
     },
     {
       test: [

.eslintignore

@@ -1,4 +1,5 @@
 dist
+lib/**/dll
 build
 coverage
 node_modules

.eslintrc.js

@@ -123,6 +123,12 @@ module.exports = {
     ],
   },
   overrides: [
+    {
+      files: ['**/__tests__/**', '**/*.test.js/**', '**/*.spec.js/**'],
+      rules: {
+        'import/no-extraneous-dependencies': ignore,
+      },
+    },
     {
       files: ['**/react-native*/**', '**/REACT_NATIVE*/**', '**/crna*/**'],
       rules: {

.gitignore

@@ -23,3 +23,4 @@ integration/__image_snapshots__/__diff_output__
 .jest-test-results.json
 /examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/
 lib/*.jar
+lib/**/dll

.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt

@@ -17,6 +17,7 @@ object OpenSourceProjects_Storybook_Bootstrap : BuildType({
         addons/storyshots/*/dist/** => dist.zip/addons/storyshots
         app/*/dist/** => dist.zip/app
         lib/*/dist/** => dist.zip/lib
+        lib/core/dll/** => dist.zip/lib/core/dll
     """.trimIndent()
 
     vcs {

.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Examples.kt

@@ -12,10 +12,10 @@ object OpenSourceProjects_Storybook_Examples : BuildType({
     name = "Examples"
 
     artifactRules = """
-${StorybookApp.values().map { it.artifactPath }.joinToString("\n")}
-examples/official-storybook/storybook-static => official.zip
-examples/official-storybook/image-snapshots/__image_snapshots__ => image-snapshots
-""".trimIndent()
+        ${StorybookApp.values().map { it.artifactPath }.joinToString("\n")}
+        examples/official-storybook/storybook-static => official.zip
+        examples/official-storybook/image-snapshots/__image_snapshots__ => image-snapshots
+    """.trimIndent()
 
     vcs {
         root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster)

.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt

@@ -82,7 +82,9 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged:
                 }
 
                 artifacts {
-                    artifactRules = "dist.zip!**"
+                    artifactRules = """
+                        dist.zip!**
+                    """.trimIndent()
                 }
             }
         }

addons/backgrounds/package.json

@@ -30,6 +30,7 @@
     "@emotion/styled": "^0.10.6",
     "@storybook/addons": "4.1.0-alpha.8",
     "@storybook/core-events": "4.1.0-alpha.8",
+    "eventemitter3": "^3.1.0",
     "global": "^4.3.2",
     "prop-types": "^15.6.2",
     "util-deprecate": "^1.0.2"

addons/backgrounds/src/__tests__/BackgroundPanel.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import EventEmitter from 'events';
+import EventEmitter from 'eventemitter3';
 
 import BackgroundPanel from '../BackgroundPanel';
 import Events from '../constants';

addons/options/README.md

@@ -137,7 +137,7 @@ To install type definitions: `npm install -D @types/storybook__addon-options`
 
 Make sure you also have the type definitions installed for the following libs:
 
- - node
- - react
+- node
+- react
 
 You can install them using `npm install -D @types/node @types/react`, assuming you are using Typescript >2.0.

lib/core/package.json

@@ -6,9 +6,6 @@
     "storybook"
   ],
   "homepage": "https://github.com/storybooks/storybook/tree/master/lib/core",
-  "publishConfig": {
-    "access": "public"
-  },
   "bugs": {
     "url": "https://github.com/storybooks/storybook/issues"
   },
@@ -53,6 +50,7 @@
     "detect-port": "^1.2.3",
     "dotenv-webpack": "^1.5.7",
     "ejs": "^2.6.1",
+    "eventemitter3": "^3.1.0",
     "express": "^4.16.3",
     "file-loader": "^2.0.0",
     "file-system-cache": "^1.0.5",
@@ -94,5 +92,8 @@
     "babel-loader": "^7.0.0 || ^8.0.0",
     "react": ">=16.3.0",
     "react-dom": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

lib/core/src/client/preview/story_store.js

@@ -1,5 +1,5 @@
 /* eslint no-underscore-dangle: 0 */
-import { EventEmitter } from 'events';
+import EventEmitter from 'eventemitter3';
 import Events from '@storybook/core-events';
 
 let count = 0;

lib/core/src/server/build-dev.js

@@ -21,8 +21,9 @@ import { getDevCli } from './cli';
 
 const defaultFavIcon = require.resolve('./public/favicon.ico');
 
+const cacheDir = findCacheDir({ name: 'storybook' });
 const cache = Cache({
-  basePath: findCacheDir({ name: 'storybook' }),
+  basePath: cacheDir,
   ns: 'storybook', // Optional. A grouping namespace for items.
 });
 
@@ -52,6 +53,7 @@ function getServer(app, options) {
 
 function applyStatic(app, options) {
   const { staticDir } = options;
+
   let hasCustomFavicon = false;
 
   if (staticDir) {
@@ -224,6 +226,18 @@ export async function buildDevStandalone(options) {
     );
 
     if (options.smokeTest) {
+      fs.writeFileSync(
+        path.join(cacheDir, 'preview-stats.json'),
+        JSON.stringify(iframeStats.toJson(), null, 2),
+        'utf8'
+      );
+      fs.writeFileSync(
+        path.join(cacheDir, 'manager-stats.json'),
+        JSON.stringify(managerStats.toJson(), null, 2),
+        'utf8'
+      );
+      logger.info(`stats written to => ${chalk.cyan(path.join(cacheDir, '[name].json'))}`);
+
       process.exit(iframeStats.toJson().warnings.length ? 1 : 0);
       process.exit(managerStats.toJson().warnings.length ? 1 : 0);
     } else if (!options.ci) {

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

@@ -11,54 +11,22 @@ import loadManagerConfig from './manager/manager-config';
 
 const defaultFavIcon = require.resolve('./public/favicon.ico');
 
-export async function buildStaticStandalone(options) {
-  const { staticDir, watch, configDir, packageJson } = options;
+export function buildStaticStandalone(options) {
+  const { staticDir, configDir, packageJson } = options;
 
   const configType = 'PRODUCTION';
   const outputDir = path.join(process.cwd(), options.outputDir);
 
+  const dllPath = path.join(__dirname, '../../dll/storybook_ui_dll.js');
+
   // create output directory if not exists
   shelljs.mkdir('-p', outputDir);
-  // clear the static dir
-  shelljs.rm('-rf', path.join(outputDir, 'static'));
-  shelljs.cp(defaultFavIcon, outputDir);
-
-  logger.info('building manager..');
-  const managerStartTime = process.hrtime();
-
-  const managerConfig = await loadManagerConfig({
-    configType,
-    outputDir,
-    configDir,
-    corePresets: [require.resolve('./manager/manager-preset.js')],
-  });
-
-  await new Promise((res, rej) => {
-    webpack(managerConfig).run((err, stats) => {
-      const managerTotalTime = process.hrtime(managerStartTime);
-      logger.trace({ message: 'manager built', time: managerTotalTime });
-
-      if (stats.hasErrors()) {
-        rej(stats);
-      } else {
-        res(stats);
-      }
-    });
-  });
+  shelljs.mkdir('-p', path.join(outputDir, 'sb_dll'));
 
-  // Build the webpack configuration using the `baseConfig`
-  // custom `.babelrc` file and `webpack.config.js` files
-  // NOTE changes to env should be done before calling `getBaseConfig`
-  const config = await loadConfig({
-    configType,
-    outputDir,
-    packageJson,
-    corePresets: [require.resolve('./preview/preview-preset.js')],
-    overridePresets: [require.resolve('./preview/custom-webpack-preset.js')],
-    ...options,
-  });
+  logger.info('clean outputDir..');
+  shelljs.rm('-rf', path.join(outputDir, 'static'));
 
-  // config.output.path = path.resolve(outputDir);
+  shelljs.cp(defaultFavIcon, outputDir);
 
   // copy all static files
   if (staticDir) {
@@ -72,42 +40,102 @@ export async function buildStaticStandalone(options) {
     });
   }
 
-  // compile all resources with webpack and write them to the disk.
-  return new Promise((resolve, reject) => {
-    const previewStartTime = process.hrtime();
-
-    const webpackCb = (err, stats) => {
-      if (err || stats.hasErrors()) {
-        logger.error('Failed to build the storybook');
-        // eslint-disable-next-line no-unused-expressions
-        err && logger.error(err.message);
-        // eslint-disable-next-line no-unused-expressions
-        stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
-        process.exitCode = 1;
-        return reject(err);
+  logger.info('copy dll..');
+  shelljs.cp(dllPath, path.join(outputDir, 'sb_dll'));
+
+  let startTime;
+
+  return new Promise(res => {
+    logger.info('building manager..');
+    startTime = process.hrtime();
+
+    res();
+  })
+    .then(() =>
+      loadManagerConfig({
+        configType,
+        outputDir,
+        configDir,
+        corePresets: [require.resolve('./manager/manager-preset.js')],
+      })
+    )
+    .then(
+      managerConfig =>
+        new Promise((resolve, reject) => {
+          webpack(managerConfig).run((err, stats) => {
+            if (err || !stats || stats.hasErrors()) {
+              logger.error('Failed to build the manager');
+              // eslint-disable-next-line no-unused-expressions
+              err && logger.error(err.message);
+              // eslint-disable-next-line no-unused-expressions
+              stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
+              process.exitCode = 1;
+
+              reject(stats);
+              return;
+            }
+
+            resolve(stats);
+          });
+        })
+    )
+    .then(stats => {
+      logger.trace({ message: 'manager built', time: process.hrtime(startTime) });
+      stats.toJson().warnings.forEach(e => logger.warn(e));
+    })
+    .then(() => {
+      startTime = process.hrtime();
+      logger.info('building preview..');
+
+      return loadConfig({
+        configType,
+        outputDir,
+        packageJson,
+        corePresets: [require.resolve('./preview/preview-preset.js')],
+        overridePresets: [require.resolve('./preview/custom-webpack-preset.js')],
+        ...options,
+      });
+    })
+    .then(
+      config =>
+        new Promise((resolve, reject) => {
+          webpack(config).run((err, stats) => {
+            if (err || !stats || stats.hasErrors()) {
+              logger.error('Failed to build the preview');
+              // eslint-disable-next-line no-unused-expressions
+              err && logger.error(err.message);
+              // eslint-disable-next-line no-unused-expressions
+              stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
+              process.exitCode = 1;
+              reject(err);
+              return;
+            }
+
+            resolve(stats);
+          });
+        })
+    )
+    .then(stats => {
+      logger.trace({ message: 'preview built', time: process.hrtime(startTime) });
+      stats.toJson().warnings.forEach(e => logger.warn(e));
+      logger.info(`output directory: ${outputDir}`);
+    })
+    .catch(p => {
+      if (p && p.toJson) {
+        const stats = p.toJson();
+
+        stats.errors.forEach(e => logger.error(e));
+        stats.warnings.forEach(e => logger.error(e));
+      } else {
+        logger.error(p);
       }
-
-      const previewTotalTime = process.hrtime(previewStartTime);
-      logger.trace({ message: 'preview built', time: previewTotalTime });
-
-      return resolve(stats);
-    };
-
-    logger.info('building preview..');
-    const compiler = webpack(config);
-
-    if (watch) {
-      compiler.watch({}, webpackCb);
-    } else {
-      compiler.run(webpackCb);
-    }
-  });
+    });
 }
 
-export async function buildStatic({ packageJson, ...loadOptions }) {
+export function buildStatic({ packageJson, ...loadOptions }) {
   const cliOptions = getProdCli(packageJson);
 
-  await buildStaticStandalone({
+  return buildStaticStandalone({
     ...cliOptions,
     ...loadOptions,
     packageJson,