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.9",
     "@storybook/core-events": "4.1.0-alpha.9",
+    "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"
   },
@@ -30,7 +27,6 @@
     "@emotion/core": "^0.13.1",
     "@emotion/provider": "^0.11.2",
     "@emotion/styled": "^0.10.6",
-    "@ndelangen/html-webpack-harddisk-plugin": "^0.2.0",
     "@storybook/addons": "4.1.0-alpha.9",
     "@storybook/channel-postmessage": "4.1.0-alpha.9",
     "@storybook/client-logger": "4.1.0-alpha.9",
@@ -53,10 +49,12 @@
     "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",
     "find-cache-dir": "^2.0.0",
+    "fs-extra": "^7.0.1",
     "global": "^4.3.2",
     "html-webpack-plugin": "^4.0.0-beta.2",
     "inquirer": "^6.2.0",
@@ -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

@@ -3,7 +3,7 @@ import https from 'https';
 import ip from 'ip';
 import favicon from 'serve-favicon';
 import path from 'path';
-import fs from 'fs';
+import fs from 'fs-extra';
 import chalk from 'chalk';
 import { logger, colors } from '@storybook/node-logger';
 import fetch from 'node-fetch';
@@ -21,12 +21,21 @@ 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.
 });
 
-function getServer(app, options) {
+const writeStats = async (name, stats) => {
+  await fs.writeFile(
+    path.join(cacheDir, `${name}-stats.json`),
+    JSON.stringify(stats.toJson(), null, 2),
+    'utf8'
+  );
+};
+
+async function getServer(app, options) {
   if (!options.https) {
     return app;
   }
@@ -42,37 +51,40 @@ function getServer(app, options) {
   }
 
   const sslOptions = {
-    ca: (options.sslCa || []).map(ca => fs.readFileSync(ca, 'utf-8')),
-    cert: fs.readFileSync(options.sslCert, 'utf-8'),
-    key: fs.readFileSync(options.sslKey, 'utf-8'),
+    ca: await Promise.all((options.sslCa || []).map(ca => fs.readFile(ca, 'utf-8'))),
+    cert: await fs.readFile(options.sslCert, 'utf-8'),
+    key: await fs.readFile(options.sslKey, 'utf-8'),
   };
 
   return https.createServer(sslOptions, app);
 }
 
-function applyStatic(app, options) {
+async function applyStatic(app, options) {
   const { staticDir } = options;
+
   let hasCustomFavicon = false;
 
-  if (staticDir) {
-    staticDir.forEach(dir => {
-      const staticPath = path.resolve(dir);
+  if (staticDir && staticDir.length) {
+    await Promise.all(
+      staticDir.map(async dir => {
+        const staticPath = path.resolve(dir);
 
-      if (!fs.existsSync(staticPath)) {
-        logger.error(`Error: no such directory to load static files: ${staticPath}`);
-        process.exit(-1);
-      }
+        if (await !fs.exists(staticPath)) {
+          logger.error(`Error: no such directory to load static files: ${staticPath}`);
+          process.exit(-1);
+        }
 
-      logger.info(`=> Loading static files from: ${staticPath} .`);
-      app.use(express.static(staticPath, { index: false }));
+        logger.info(`=> Loading static files from: ${staticPath} .`);
+        app.use(express.static(staticPath, { index: false }));
 
-      const faviconPath = path.resolve(staticPath, 'favicon.ico');
+        const faviconPath = path.resolve(staticPath, 'favicon.ico');
 
-      if (fs.existsSync(faviconPath)) {
-        hasCustomFavicon = true;
-        app.use(favicon(faviconPath));
-      }
-    });
+        if (await fs.exists(faviconPath)) {
+          hasCustomFavicon = true;
+          app.use(favicon(faviconPath));
+        }
+      })
+    );
   }
 
   if (!hasCustomFavicon) {
@@ -137,9 +149,9 @@ export async function buildDevStandalone(options) {
     }
 
     const app = express();
-    const server = getServer(app, options);
+    const server = await getServer(app, options);
 
-    applyStatic(app, options);
+    await applyStatic(app, options);
 
     const storybookMiddleware = await storybook(options);
 
@@ -148,7 +160,7 @@ export async function buildDevStandalone(options) {
     const serverListening = listenToServer(server, listenAddr);
 
     const [
-      { iframeStats, managerStats, managerTotalTime, iframeTotalTime },
+      { previewStats, managerStats, managerTotalTime, previewTotalTime },
       updateInfo,
     ] = await Promise.all([
       webpackValid,
@@ -214,7 +226,7 @@ export async function buildDevStandalone(options) {
           ${colors.green(`Storybook ${chalk.bold(options.packageJson.version)} started`)}
           ${chalk.gray(stripIndents`
           ${chalk.underline(prettyTime(managerTotalTime))} for manager and ${chalk.underline(
-            prettyTime(iframeTotalTime)
+            prettyTime(previewTotalTime)
           )} for preview`)}
 
           ${serveMessage.toString()}${updateMessage ? `\n\n${updateMessage}` : ''}
@@ -224,7 +236,11 @@ export async function buildDevStandalone(options) {
     );
 
     if (options.smokeTest) {
-      process.exit(iframeStats.toJson().warnings.length ? 1 : 0);
+      await writeStats('preview', previewStats);
+      await writeStats('manager', managerStats);
+      logger.info(`stats written to => ${chalk.cyan(path.join(cacheDir, '[name].json'))}`);
+
+      process.exit(previewStats.toJson().warnings.length ? 1 : 0);
       process.exit(managerStats.toJson().warnings.length ? 1 : 0);
     } else if (!options.ci) {
       opn(address).catch(() => {