Improve Storybook scripts and load time (#44511)

* Improve Storybook Scripts and load time

* Remove extra module rule

x-pack/legacy/plugins/canvas/.storybook/webpack.dll.config.js

@@ -38,16 +38,25 @@ module.exports = {
     '@storybook/theming',
     'angular-mocks',
     'angular',
+    'brace',
     'chroma-js',
+    'highlight.js',
     'html-entities',
     'jquery',
     'lodash.clone',
     'lodash',
     'markdown-it',
     'mocha',
+    'monaco-editor',
     'prop-types',
+    'react-ace',
+    'react-beautiful-dnd',
     'react-dom',
+    'react-focus-lock',
     'react-markdown',
+    'react-monaco-editor',
+    'react-resize-detector',
+    'react-virtualized',
     'react',
     'recompose',
     'redux-actions',

x-pack/legacy/plugins/canvas/scripts/clean_storybook_dll.js

@@ -1,10 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-const del = require('del');
-const { DLL_OUTPUT } = require('../.storybook/constants');
-
-del.sync([DLL_OUTPUT], { force: true });

x-pack/legacy/plugins/canvas/scripts/storybook.js

@@ -5,40 +5,118 @@
  */
 
 const path = require('path');
-const devUtils = require('@kbn/dev-utils');
+const fs = require('fs');
+const del = require('del');
+const { run } = require('@kbn/dev-utils');
 const storybook = require('@storybook/react/standalone');
 const execa = require('execa');
-
-const log = new devUtils.ToolingLog({
-  level: 'info',
-  writeTo: process.stdout,
-});
+const { DLL_OUTPUT } = require('./../.storybook/constants');
 
 const options = {
   stdio: ['ignore', 'inherit', 'inherit'],
   buffer: false,
 };
 
-execa.sync('node', ['storybook_dll.js'], {
-  cwd: __dirname,
-  ...options,
-});
-
-// Ensure SASS has been built completely before starting Storybook
-execa.sync(process.execPath, ['scripts/build_sass'], {
-  cwd: path.resolve(__dirname, '../../../../..'),
-  ...options,
-});
-
-// Now watch the SASS sheets for changes
-execa(process.execPath, ['scripts/build_sass', '--watch'], {
-  cwd: path.resolve(__dirname, '../../../../..'),
-  ...options,
-});
-
-log.info('storybook: Starting Storybook');
-storybook({
-  mode: 'dev',
-  port: 9001,
+const storybookOptions = {
   configDir: path.resolve(__dirname, './../.storybook'),
-});
+  mode: 'dev',
+};
+
+run(
+  ({ log, flags }) => {
+    const { dll, clean, stats, site } = flags;
+
+    // Delete the existing DLL if we're cleaning or building.
+    if (clean || dll) {
+      del.sync([DLL_OUTPUT], { force: true });
+
+      if (clean) {
+        return;
+      }
+    }
+
+    // Ensure SASS dependencies have been built before doing anything.
+    execa.sync(process.execPath, ['scripts/build_sass'], {
+      cwd: path.resolve(__dirname, '../../../../..'),
+      ...options,
+    });
+
+    // Build the DLL if necessary.
+    if (fs.existsSync(DLL_OUTPUT)) {
+      log.info('storybook: DLL exists from previous build; skipping');
+    } else {
+      log.info('storybook: Building DLL');
+      execa.sync(
+        'yarn',
+        [
+          'webpack',
+          '--config',
+          'x-pack/legacy/plugins/canvas/.storybook/webpack.dll.config.js',
+          '--progress',
+          '--hide-modules',
+          '--display-entrypoints',
+          'false',
+        ],
+        {
+          cwd: path.resolve(__dirname, '../../../../..'),
+          stdio: ['ignore', 'inherit', 'inherit'],
+          buffer: false,
+        }
+      );
+      log.success('storybook: DLL built');
+    }
+
+    // If we're only building the DLL, we're done.
+    if (dll) {
+      return;
+    }
+
+    // Build statistics and exit
+    if (stats) {
+      log.success('storybook: Generating Storybook statistics');
+      storybook({
+        ...storybookOptions,
+        smokeTest: true,
+      });
+      return;
+    }
+
+    // Build site and exit
+    if (site) {
+      log.success('storybook: Generating Storybook site');
+      storybook({
+        ...storybookOptions,
+        mode: 'static',
+        outputDir: path.resolve(__dirname, './../storybook'),
+      });
+      return;
+    }
+
+    log.info('storybook: Starting Storybook');
+
+    // Watch the SASS sheets for changes
+    execa(process.execPath, ['scripts/build_sass', '--watch'], {
+      cwd: path.resolve(__dirname, '../../../../..'),
+      ...options,
+    });
+
+    storybook({
+      ...storybookOptions,
+      port: 9001,
+    });
+  },
+  {
+    description: `
+      Storybook runner for Canvas.
+    `,
+    flags: {
+      boolean: ['dll', 'clean', 'stats', 'site'],
+      help: `
+        --clean            Forces a clean of the Storybook DLL and exits.
+        --dll              Cleans and builds the Storybook dependency DLL and exits.
+        --stats            Produces a Webpack stats file.
+        --site             Produces a site deployment of this Storybook.
+      `,
+    },
+  }
+);

x-pack/legacy/plugins/canvas/scripts/storybook_dll.js

@@ -1,40 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-const fs = require('fs');
-const path = require('path');
-const execa = require('execa');
-const devUtils = require('@kbn/dev-utils');
-const { DLL_OUTPUT } = require('./../.storybook/constants');
-
-const log = new devUtils.ToolingLog({
-  level: 'info',
-  writeTo: process.stdout,
-});
-
-if (fs.existsSync(DLL_OUTPUT)) {
-  log.info('storybook: DLL exists from previous build');
-} else {
-  log.info('storybook: DLL missing; building');
-  execa.sync(
-    'yarn',
-    [
-      'webpack',
-      '--config',
-      'x-pack/legacy/plugins/canvas/.storybook/webpack.dll.config.js',
-      '--progress',
-      '--hide-modules',
-      '--display-entrypoints',
-      'false',
-    ],
-    {
-      cwd: path.resolve(__dirname, '../../../../..'),
-      stdio: ['ignore', 'inherit', 'inherit'],
-      buffer: false,
-    }
-  );
-  log.success('storybook: DLL built');
-}

x-pack/legacy/plugins/canvas/scripts/storybook_static.js

@@ -1,31 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-const path = require('path');
-const execa = require('execa');
-const storybook = require('@storybook/react/standalone');
-
-const options = {
-  stdio: ['ignore', 'inherit', 'inherit'],
-  buffer: false,
-};
-
-execa.sync('node', ['storybook_dll.js'], {
-  cwd: __dirname,
-  ...options,
-});
-
-// Ensure SASS has been built completely before starting Storybook
-execa.sync(process.execPath, ['scripts/build_sass'], {
-  cwd: path.resolve(__dirname, '../../../..'),
-  ...options,
-});
-
-storybook({
-  mode: 'static',
-  configDir: path.resolve(__dirname, './../.storybook'),
-  outputDir: path.resolve(__dirname, './../storybook'),
-});

x-pack/package.json

@@ -6,7 +6,7 @@
   "license": "Elastic-License",
   "scripts": {
     "kbn": "node ../scripts/kbn",
-    "kbn:bootstrap": "node legacy/plugins/canvas/scripts/clean_storybook_dll",
+    "kbn:bootstrap": "node legacy/plugins/canvas/scripts/storybook --clean",
     "start": "gulp dev",
     "build": "gulp build",
     "testonly": "gulp testonly",