Core separate manager from preview

.babelrc.js

@@ -0,0 +1,46 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+  plugins: [
+    'babel-plugin-emotion',
+    'babel-plugin-macros',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-export-default-from',
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        regenerator: true,
+      },
+    ],
+  ],
+  env: {
+    test: {
+      plugins: ['babel-plugin-require-context-hook'],
+    },
+  },
+  overrides: [
+    {
+      test: './examples/vue-kitchen-sink',
+      presets: ['@babel/preset-env', 'babel-preset-vue'],
+    },
+    {
+      test: [
+        './lib/core/src/server',
+        './lib/node-logger',
+        './lib/codemod',
+        './addons/storyshots',
+        './addons/storysource/src/loader',
+        './app/**/src/server/**',
+      ],
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: '8.11',
+            },
+          },
+        ],
+      ],
+    },
+  ],
+};

app/angular/src/server/angular-cli_config.js

@@ -103,12 +103,10 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
   const rulesExcludingStyles = filterOutStylingRules(baseConfig);
 
   // cliStyleConfig.entry adds global style files to the webpack context
-  const entry = {
+  const entry = [
     ...baseConfig.entry,
-    iframe: []
-      .concat(baseConfig.entry.iframe)
-      .concat(Object.values(cliStyleConfig.entry).reduce((acc, item) => acc.concat(item), [])),
-  };
+    ...Object.values(cliStyleConfig.entry).reduce((acc, item) => acc.concat(item), []),
+  ];
 
   const module = {
     ...baseConfig.module,

app/angular/src/server/framework-preset-angular.js

@@ -38,13 +38,13 @@ export function webpack(config, { configDir }) {
     },
     resolve: {
       ...config.resolve,
-      extensions: [...config.resolve.extensions, '.ts', '.tsx'],
+      extensions: ['.ts', '.tsx', ...config.resolve.extensions],
     },
     plugins: [
       ...config.plugins,
       // See https://github.com/angular/angular/issues/11580#issuecomment-401127742
       new ContextReplacementPlugin(
-        /@angular(\\|\/)core(\\|\/)fesm5/,
+        /@angular(\\|\/)core(\\|\/)(fesm5|bundles)/,
         path.resolve(__dirname, '..')
       ),
       createForkTsCheckerInstance(tsLoaderOptions),

app/react-native/src/server/config/webpack.config.prod.js

@@ -3,7 +3,7 @@ import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
-import { getManagerHeadHtml } from '@storybook/core/dist/server/utils';
+import { getManagerHeadHtml } from '@storybook/core/dist/server/utils/template';
 import { version } from '../../../package.json';
 import { includePaths, excludePaths, loadEnv } from './utils';
 

app/riot/src/server/framework-preset-riot.js

@@ -15,5 +15,12 @@ export function webpack(config) {
         },
       ],
     },
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        'riot-compiler': 'riot-compiler/dist/es6.compiler',
+      },
+    },
   };
 }

lib/core/package.json

@@ -30,6 +30,7 @@
     "@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.1",
     "@storybook/channel-postmessage": "4.1.0-alpha.1",
     "@storybook/client-logger": "4.1.0-alpha.1",
@@ -43,6 +44,7 @@
     "boxen": "^2.0.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "^2.4.1",
+    "child-process-promise": "^2.2.1",
     "cli-table3": "0.5.1",
     "commander": "^2.19.0",
     "common-tags": "^1.8.0",
@@ -75,6 +77,7 @@
     "semver": "^5.6.0",
     "serve-favicon": "^2.5.0",
     "shelljs": "^0.8.2",
+    "spawn-promise": "^0.1.8",
     "style-loader": "^0.23.1",
     "svg-url-loader": "^2.3.2",
     "url-loader": "^1.1.2",

lib/core/server.js

@@ -1,5 +1,5 @@
-const defaultWebpackConfig = require('./dist/server/config/webpack.config.default.js');
-const serverUtils = require('./dist/server/utils');
+const defaultWebpackConfig = require('./dist/server/preview/base-webpack.config');
+const serverUtils = require('./dist/server/utils/template');
 const buildStatic = require('./dist/server/build-static');
 const buildDev = require('./dist/server/build-dev');
 

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

@@ -14,7 +14,7 @@ import semver from 'semver';
 import { stripIndents } from 'common-tags';
 import Table from 'cli-table3';
 
-import storybook, { webpackValid } from './middleware';
+import storybook, { webpackValid } from './dev-server';
 import { getDevCli } from './cli';
 
 const defaultFavIcon = require.resolve('./public/favicon.ico');

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

@@ -1,32 +1,59 @@
-import webpack from 'webpack';
-import path from 'path';
 import fs from 'fs';
+import path from 'path';
+import webpack from 'webpack';
 import shelljs from 'shelljs';
+import childProcess from 'child-process-promise';
+
 import { logger } from '@storybook/node-logger';
+
 import { getProdCli } from './cli';
 import loadConfig from './config';
+import { loadEnv } from './config/utils';
 
 const defaultFavIcon = require.resolve('./public/favicon.ico');
 
 export async function buildStaticStandalone(options) {
-  const { outputDir, staticDir, watch } = options;
+  const { outputDir, staticDir, watch, configDir, packageJson } = options;
+  const environment = loadEnv();
 
   // create output directory if not exists
   shelljs.mkdir('-p', path.resolve(outputDir));
   // clear the static dir
   shelljs.rm('-rf', path.resolve(outputDir, 'static'));
   shelljs.cp(defaultFavIcon, outputDir);
 
+  logger.info('building manager..');
+  const managerStartTime = process.hrtime();
+  await childProcess
+    .exec(
+      `node ${path.join(__dirname, 'manager/webpack.js')} dir=${configDir} out=${path.resolve(
+        outputDir
+      )}`,
+      {
+        env: {
+          NODE_ENV: 'production',
+          ...environment,
+        },
+      }
+    )
+    .then(() => {
+      const managerTotalTime = process.hrtime(managerStartTime);
+      logger.trace({ message: 'manager built', time: managerTotalTime });
+    });
+
   // 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: 'PRODUCTION',
-    corePresets: [require.resolve('./core-preset-prod.js')],
+    outputDir,
+    packageJson,
+    corePresets: [require.resolve('./preview/preview-preset.js')],
+    overridePresets: [require.resolve('./preview/custom-webpack-preset.js')],
     ...options,
   });
 
-  config.output.path = path.resolve(outputDir);
+  // config.output.path = path.resolve(outputDir);
 
   // copy all static files
   if (staticDir) {
@@ -42,6 +69,8 @@ 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');
@@ -52,11 +81,14 @@ export async function buildStaticStandalone(options) {
         process.exitCode = 1;
         return reject(err);
       }
-      logger.info('Building storybook completed.');
+
+      const previewTotalTime = process.hrtime(previewStartTime);
+      logger.trace({ message: 'preview built', time: previewTotalTime });
+
       return resolve(stats);
     };
 
-    logger.info('Building storybook ...');
+    logger.info('building preview..');
     const compiler = webpack(config);
 
     if (watch) {
@@ -73,6 +105,7 @@ export async function buildStatic({ packageJson, ...loadOptions }) {
   await buildStaticStandalone({
     ...cliOptions,
     ...loadOptions,
+    packageJson,
     configDir: cliOptions.configDir || './.storybook',
     outputDir: cliOptions.outputDir || './storybook-static',
   });

lib/core/src/server/common/babel-cache-preset.js

@@ -0,0 +1,11 @@
+import findCacheDir from 'find-cache-dir';
+
+const extend = babelConfig => ({
+  // This is a feature of `babel-loader` for webpack (not Babel itself).
+  // It enables a cache directory for faster-rebuilds
+  // `find-cache-dir` will create the cache directory under the node_modules directory.
+  cacheDirectory: findCacheDir({ name: 'storybook' }),
+  ...babelConfig,
+});
+
+export { extend as babel, extend as managerBabel };

lib/core/src/server/common/babel.js

@@ -0,0 +1,32 @@
+function createProdPresets() {
+  return [
+    [
+      require.resolve('babel-preset-minify'),
+      {
+        builtIns: false,
+        mangle: false,
+      },
+    ],
+  ];
+}
+
+export default ({ configType }) => {
+  const isProd = configType === 'PRODUCTION';
+  const prodPresets = isProd ? createProdPresets() : [];
+
+  return {
+    presets: [require.resolve('@babel/preset-env'), ...prodPresets],
+    plugins: [
+      require.resolve('babel-plugin-macros'),
+      require.resolve('@babel/plugin-transform-regenerator'),
+      require.resolve('@babel/plugin-proposal-class-properties'),
+      [
+        require.resolve('@babel/plugin-transform-runtime'),
+        {
+          helpers: true,
+          regenerator: true,
+        },
+      ],
+    ],
+  };
+};

lib/core/src/server/common/custom-presets.js

@@ -0,0 +1,17 @@
+import path from 'path';
+import { logger } from '@storybook/node-logger';
+import serverRequire from '../utils/server-require';
+
+export default function loadCustomPresets({ configDir }) {
+  const presets = serverRequire(path.resolve(configDir, 'presets'));
+
+  if (presets) {
+    logger.warn(
+      '"Custom presets" is an experimental and undocumented feature that will be changed or deprecated soon. Use it on your own risk.'
+    );
+
+    return presets;
+  }
+
+  return [];
+}