Merge pull request #4590 from storybooks/core/separate-manager-from-p…

…review

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',
+ },
+ },
  };
 }

examples/angular-cli/package.json

@@ -5,7 +5,7 @@
  "license": "MIT",
  "scripts": {
  "build": "ng build",
- "build-storybook": "npm run storybook:prebuild && build-storybook -s src",
+ "build-storybook": "npm run storybook:prebuild && build-storybook -s src/assets",
  "e2e": "ng e2e",
  "ng": "ng",
  "start": "ng serve",

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',
  });