Core separate manager from preview

.circleci/config.yml

@@ -120,52 +120,52 @@ jobs:
  name: Run react kitchen-sink (smoke test)
  command: |
  cd examples/cra-kitchen-sink
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  - run:
  name: Run vue kitchen-sink (smoke test)
  command: |
  cd examples/vue-kitchen-sink
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  - run:
  name: Run svelte kitchen-sink (smoke test)
  command: |
  cd examples/svelte-kitchen-sink
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  - run:
  name: Run angular-cli (smoke test)
  command: |
  cd examples/angular-cli
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  - run:
  name: Run ember-cli (smoke test)
  command: |
  cd examples/ember-cli
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  - run:
  name: Run polymer-cli (smoke test)
  command: |
  cd examples/polymer-cli
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  - run:
  name: Run marko-cli (smoke test)
  command: |
  cd examples/marko-cli
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  - run:
  name: Run official-storybook (smoke test)
  command: |
  cd examples/official-storybook
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  - run:
  name: Run mithril kitchen-sink (smoke test)
  command: |
  cd examples/mithril-kitchen-sink
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  - run:
  name: Run riot kitchen-sink (smoke test)
  command: |
  cd examples/riot-kitchen-sink
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  native-smoke-tests:
  <<: *defaults
  steps:
@@ -179,7 +179,7 @@ jobs:
  name: Run React-Native-App example
  command: |
  cd examples-native/crna-kitchen-sink
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  docs:
  <<: *defaults
  steps:

.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt

@@ -30,7 +30,7 @@ object OpenSourceProjects_Storybook_NativeSmokeTests : BuildType({
  yarn
  yarn bootstrap --reactnativeapp
  cd examples-native/crna-kitchen-sink
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  """.trimIndent()
  dockerImage = "node:%docker.node.version%"
  }

.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt

@@ -30,7 +30,7 @@ object OpenSourceProjects_Storybook_SmokeTests : BuildType({
  set -e -x
 
  cd examples/$exampleDir
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  """.trimIndent()
  dockerImage = "node:%docker.node.version%"
  }
@@ -44,7 +44,7 @@ object OpenSourceProjects_Storybook_SmokeTests : BuildType({
  set -e -x
 
  cd examples/official-storybook
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  """.trimIndent()
  dockerImage = "node:%docker.node.version%"
  }

addons/ondevice-knobs/package.json

@@ -32,7 +32,7 @@
  "react-native-switch": "^1.5.0"
  },
  "peerDependencies": {
- "@storybook/addon-knobs": "4.0.0-alpha.24",
+ "@storybook/addon-knobs": "4.0.0-rc.6",
  "react": "*",
  "react-native": "*"
  }

addons/storyshots/storyshots-core/package.json

@@ -37,7 +37,7 @@
  "devDependencies": {
  "@storybook/addon-actions": "4.0.0-rc.6",
  "@storybook/addon-links": "4.0.0-rc.6",
- "@storybook/addons": "4.0.0-alpha.24",
+ "@storybook/addons": "4.0.0-rc.6",
  "@storybook/react": "4.0.0-rc.6",
  "enzyme-to-json": "^3.3.4",
  "react": "^16.6.0"

addons/storyshots/storyshots-puppeteer/package.json

@@ -30,6 +30,6 @@
  "puppeteer": "^1.9.0"
  },
  "peerDependencies": {
- "@storybook/addon-storyshots": "4.0.0-alpha.16"
+ "@storybook/addon-storyshots": "4.0.0-rc.6"
  }
 }

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

@@ -103,12 +103,13 @@ 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), []),
+ // iframe: []
+ // .concat(baseConfig.entry.iframe)
+ // .concat(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';
 

lib/cli/test/fixtures/react_babel_config_js/package.json

@@ -15,6 +15,6 @@
  "@babel/plugin-proposal-optional-chaining": "7.0.0",
  "@babel/core": "7.1.0",
  "babel-loader": "8.0.2",
- "@storybook/react": "^4.0.0-alpha.17"
+ "@storybook/react": "^4.0.0-rc.6"
  }
 }

lib/cli/test/fixtures/react_babel_custom_preset/package.json

@@ -15,6 +15,6 @@
  "@babel/plugin-proposal-optional-chaining": "7.0.0",
  "@babel/core": "7.1.0",
  "babel-loader": "8.0.2",
- "@storybook/react": "^4.0.0-alpha.17"
+ "@storybook/react": "^4.0.0-rc.6"
  }
 }

lib/cli/test/fixtures/react_babel_pkg_json/package.json

@@ -15,7 +15,7 @@
  "@babel/plugin-proposal-optional-chaining": "7.0.0",
  "@babel/core": "7.1.0",
  "babel-loader": "8.0.2",
- "@storybook/react": "^4.0.0-alpha.17"
+ "@storybook/react": "^4.0.0-rc.6"
  },
  "babel": {
  "plugins": ["@babel/plugin-proposal-optional-chaining"]

lib/cli/test/fixtures/react_babelrc/package.json

@@ -15,6 +15,6 @@
  "@babel/plugin-proposal-optional-chaining": "7.0.0",
  "@babel/core": "7.1.0",
  "babel-loader": "8.0.2",
- "@storybook/react": "^4.0.0-alpha.17"
+ "@storybook/react": "^4.0.0-rc.6"
  }
 }

lib/cli/test/fixtures/react_babelrc_js/package.json

@@ -15,6 +15,6 @@
  "@babel/plugin-proposal-optional-chaining": "7.0.0",
  "@babel/core": "7.1.0",
  "babel-loader": "8.0.2",
- "@storybook/react": "^4.0.0-alpha.17"
+ "@storybook/react": "^4.0.0-rc.6"
  }
 }

lib/cli/test/run_tests.sh

@@ -50,6 +50,6 @@ do
  # check that storybook starts without errors
  cd $dir
  echo "Running smoke test in $dir"
- yarn storybook --smoke-test
+ yarn storybook --smoke-test --quiet
  cd ..
 done

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.0.0-rc.6",
  "@storybook/channel-postmessage": "4.0.0-rc.6",
  "@storybook/client-logger": "4.0.0-rc.6",
@@ -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) {
@@ -41,7 +68,8 @@ export async function buildStaticStandalone(options) {
  }
 
  // compile all resources with webpack and write them to the disk.
- logger.info('Building storybook ...');
+ logger.info('building preview..');
+ const previewStartTime = process.hrtime();
  const webpackCb = (err, stats) => {
  if (err || stats.hasErrors()) {
  logger.error('Failed to build the storybook');
@@ -51,7 +79,8 @@ export async function buildStaticStandalone(options) {
  stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
  process.exitCode = 1;
  }
- logger.info('Building storybook completed.');
+ const previewTotalTime = process.hrtime(previewStartTime);
+ logger.trace({ message: 'preview built', time: previewTotalTime });
  };
 
  const compiler = webpack(config);
@@ -69,6 +98,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,
+ },
+ ],
+ ],
+ };
+};