From ee2c86e9f67afa0d28087b4ade45c7669454dd6a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 12 Oct 2018 18:21:40 +0200 Subject: [PATCH 01/25] WIP --- lib/core/package.json | 1 + lib/core/server.js | 2 +- lib/core/src/server/build-dev.js | 2 - ...lt.js => webpack.config.iframe.default.js} | 0 ...ig.dev.js => webpack.config.iframe.dev.js} | 41 ++++--- ....prod.js => webpack.config.iframe.prod.js} | 0 .../server/config/webpack.config.manager.js | 104 ++++++++++++++++++ lib/core/src/server/core-preset-dev.js | 2 +- lib/core/src/server/core-preset-manager.js | 37 +++++++ lib/core/src/server/core-preset-prod.js | 2 +- .../src/server/core-preset-webpack-custom.js | 2 +- lib/core/src/server/middleware.js | 85 ++++++++++---- yarn.lock | 75 +++++++++++-- 13 files changed, 295 insertions(+), 58 deletions(-) rename lib/core/src/server/config/{webpack.config.default.js => webpack.config.iframe.default.js} (100%) rename lib/core/src/server/config/{webpack.config.dev.js => webpack.config.iframe.dev.js} (77%) rename lib/core/src/server/config/{webpack.config.prod.js => webpack.config.iframe.prod.js} (100%) create mode 100644 lib/core/src/server/config/webpack.config.manager.js create mode 100644 lib/core/src/server/core-preset-manager.js diff --git a/lib/core/package.json b/lib/core/package.json index 23d1f5036dcb..ba5e64b01eb0 100644 --- a/lib/core/package.json +++ b/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-alpha.24", "@storybook/channel-postmessage": "4.0.0-alpha.24", "@storybook/client-logger": "4.0.0-alpha.24", diff --git a/lib/core/server.js b/lib/core/server.js index fa6e79114ae5..f58b38a7b912 100644 --- a/lib/core/server.js +++ b/lib/core/server.js @@ -1,4 +1,4 @@ -const defaultWebpackConfig = require('./dist/server/config/webpack.config.default'); +const defaultWebpackConfig = require('./dist/server/config/webpack.config.iframe.default'); const serverUtils = require('./dist/server/utils'); const buildStatic = require('./dist/server/build-static'); const buildDev = require('./dist/server/build-dev'); diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js index 20ea4b8784f1..6fe8d1ea96dd 100644 --- a/lib/core/src/server/build-dev.js +++ b/lib/core/src/server/build-dev.js @@ -120,8 +120,6 @@ function listenToServer(server, listenAddr) { } export async function buildDevStandalone(options) { - console.log({ options }); - try { const { port, host } = options; diff --git a/lib/core/src/server/config/webpack.config.default.js b/lib/core/src/server/config/webpack.config.iframe.default.js similarity index 100% rename from lib/core/src/server/config/webpack.config.default.js rename to lib/core/src/server/config/webpack.config.iframe.default.js diff --git a/lib/core/src/server/config/webpack.config.dev.js b/lib/core/src/server/config/webpack.config.iframe.dev.js similarity index 77% rename from lib/core/src/server/config/webpack.config.dev.js rename to lib/core/src/server/config/webpack.config.iframe.dev.js index d70f33fd8e55..7bd329ba7c77 100644 --- a/lib/core/src/server/config/webpack.config.dev.js +++ b/lib/core/src/server/config/webpack.config.iframe.dev.js @@ -29,12 +29,13 @@ export default ({ configDir, quiet, babelOptions, entries }) => { }; return { + name: 'iframe', mode: 'development', devtool: 'cheap-module-source-map', - entry: entries, + entry: { iframe: entries.iframe }, output: { - path: path.join(__dirname, 'dist'), - filename: 'static/[name].bundle.js', + path: path.join(__dirname, '..', 'public'), + filename: '[name].bundle.js', // Here we set the publicPath to ''. // This allows us to deploy storybook into subpaths like GitHub pages. // This works with css and image loaders too. @@ -43,29 +44,25 @@ export default ({ configDir, quiet, babelOptions, entries }) => { publicPath: '', }, plugins: [ - ...Object.keys(entries).map( - e => - new HtmlWebpackPlugin({ - filename: `${e === 'manager' ? 'index' : e}.html`, - excludeChunks: Object.keys(entries).filter(i => i !== e), - chunksSortMode: 'none', - alwaysWriteToDisk: true, - inject: false, - templateParameters: (compilation, files, options) => ({ - compilation, - files, - options, - version, - ...entriesMeta[e], - }), - template: require.resolve(`../templates/index.ejs`), - }) - ), + new HtmlWebpackPlugin({ + filename: `iframe.html`, + chunksSortMode: 'none', + alwaysWriteToDisk: true, + inject: false, + templateParameters: (compilation, files, options) => ({ + compilation, + files, + options, + version, + ...entriesMeta.iframe, + }), + template: require.resolve(`../templates/index.ejs`), + }), new webpack.DefinePlugin(loadEnv()), new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), new WatchMissingNodeModulesPlugin(nodeModulesPaths), - quiet ? null : new webpack.ProgressPlugin(), + // quiet ? null : new webpack.ProgressPlugin(), new webpack.DefinePlugin(getEnvironment().webpack), new Dotenv({ silent: true }), ].filter(Boolean), diff --git a/lib/core/src/server/config/webpack.config.prod.js b/lib/core/src/server/config/webpack.config.iframe.prod.js similarity index 100% rename from lib/core/src/server/config/webpack.config.prod.js rename to lib/core/src/server/config/webpack.config.iframe.prod.js diff --git a/lib/core/src/server/config/webpack.config.manager.js b/lib/core/src/server/config/webpack.config.manager.js new file mode 100644 index 000000000000..58b13d9f972c --- /dev/null +++ b/lib/core/src/server/config/webpack.config.manager.js @@ -0,0 +1,104 @@ +import path from 'path'; +import webpack from 'webpack'; +import { getEnvironment } from 'universal-dotenv'; +import Dotenv from 'dotenv-webpack'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import HtmlWebpackHarddiskPlugin from '@ndelangen/html-webpack-harddisk-plugin'; + +import { version } from '../../../package.json'; +import { includePaths, excludePaths, loadEnv, nodePaths, getBabelRuntimePath } from './utils'; +import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils'; + +export default ({ configDir, babelOptions, entries }) => { + const entriesMeta = { + iframe: { + headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), + bodyHtmlSnippet: getPreviewBodyHtml(), + }, + manager: { + headHtmlSnippet: getManagerHeadHtml(configDir, process.env), + }, + }; + + return { + name: 'manager', + mode: 'production', + bail: true, + devtool: 'none', + entry: { manager: entries.manager }, + output: { + path: path.join(__dirname, '..', 'public'), + filename: '[name].[chunkhash].bundle.js', + // Here we set the publicPath to ''. + // This allows us to deploy storybook into subpaths like GitHub pages. + // This works with css and image loaders too. + // This is working for storybook since, we don't use pushState urls and + // relative URLs works always. + publicPath: '', + }, + plugins: [ + new HtmlWebpackPlugin({ + filename: `index.html`, + chunksSortMode: 'none', + alwaysWriteToDisk: true, + inject: false, + templateParameters: (compilation, files, options) => ({ + compilation, + files, + options, + version, + ...entriesMeta.manager, + }), + template: require.resolve(`../templates/index.ejs`), + }), + new HtmlWebpackHarddiskPlugin(), + new webpack.DefinePlugin(loadEnv({ production: true })), + new webpack.DefinePlugin(getEnvironment().webpack), + new Dotenv({ silent: true }), + ], + module: { + rules: [ + { + test: /\.jsx?$/, + use: [ + { + loader: 'babel-loader', + options: babelOptions, + }, + ], + include: includePaths, + exclude: excludePaths, + }, + { + test: /\.md$/, + use: [ + { + loader: require.resolve('raw-loader'), + }, + ], + }, + ], + }, + resolve: { + // Since we ship with json-loader always, it's better to move extensions to here + // from the default config. + extensions: ['.js', '.jsx', '.json'], + // Add support to NODE_PATH. With this we could avoid relative path imports. + // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253 + modules: ['node_modules'].concat(nodePaths), + alias: { + '@babel/runtime': getBabelRuntimePath(), + }, + }, + optimization: { + // Automatically split vendor and commons for preview bundle + // https://twitter.com/wSokra/status/969633336732905474 + // splitChunks: { + // chunks: chunk => chunk.name !== 'manager', + // }, + // Keep the runtime chunk seperated to enable long term caching + // https://twitter.com/wSokra/status/969679223278505985 + runtimeChunk: true, + }, + }; +}; diff --git a/lib/core/src/server/core-preset-dev.js b/lib/core/src/server/core-preset-dev.js index 4e4e123272a0..3a4345159670 100644 --- a/lib/core/src/server/core-preset-dev.js +++ b/lib/core/src/server/core-preset-dev.js @@ -1,7 +1,7 @@ import loadCustomBabelConfig from './loadCustomBabelConfig'; import loadCustomAddons from './loadCustomAddonsFile'; import loadCustomConfig from './loadCustomConfigFile'; -import createDevConfig from './config/webpack.config.dev'; +import createDevConfig from './config/webpack.config.iframe.dev'; import defaultBabelConfig from './config/babel.dev'; import { createManagerEntry, createPreviewEntry } from './config/entries'; diff --git a/lib/core/src/server/core-preset-manager.js b/lib/core/src/server/core-preset-manager.js new file mode 100644 index 000000000000..76eb886719c2 --- /dev/null +++ b/lib/core/src/server/core-preset-manager.js @@ -0,0 +1,37 @@ +import loadCustomBabelConfig from './loadCustomBabelConfig'; +import loadCustomAddons from './loadCustomAddonsFile'; +import loadCustomConfig from './loadCustomConfigFile'; +import createDevConfig from './config/webpack.config.manager'; +import defaultBabelConfig from './config/babel.dev'; +import { createManagerEntry, createPreviewEntry } from './config/entries'; + +export function webpack(_, options) { + return createDevConfig(options); +} + +export function babel(_, options) { + const { configDir, presets } = options; + + return loadCustomBabelConfig(configDir, () => + presets.apply('babelDefault', defaultBabelConfig, options) + ); +} + +export function manager(_, options) { + return createManagerEntry(options); +} + +export function preview(_, options) { + return [ + ...createPreviewEntry(options), + `${require.resolve('webpack-hot-middleware/client')}?reload=true`, + ]; +} + +export function addons(_, options) { + return loadCustomAddons(options); +} + +export function config(_, options) { + return loadCustomConfig(options); +} diff --git a/lib/core/src/server/core-preset-prod.js b/lib/core/src/server/core-preset-prod.js index f549613b987d..3619d23cc1f1 100644 --- a/lib/core/src/server/core-preset-prod.js +++ b/lib/core/src/server/core-preset-prod.js @@ -1,7 +1,7 @@ import loadCustomBabelConfig from './loadCustomBabelConfig'; import loadCustomAddons from './loadCustomAddonsFile'; import loadCustomConfig from './loadCustomConfigFile'; -import createProdConfig from './config/webpack.config.prod'; +import createProdConfig from './config/webpack.config.iframe.prod'; import defaultBabelConfig from './config/babel.prod'; import { createManagerEntry, createPreviewEntry } from './config/entries'; diff --git a/lib/core/src/server/core-preset-webpack-custom.js b/lib/core/src/server/core-preset-webpack-custom.js index 5c14ec084cf3..8f3a6d5ec3d2 100644 --- a/lib/core/src/server/core-preset-webpack-custom.js +++ b/lib/core/src/server/core-preset-webpack-custom.js @@ -1,7 +1,7 @@ import { logger } from '@storybook/node-logger'; import loadCustomWebpackConfig from './loadCustomWebpackConfig'; import mergeConfigs from './mergeConfigs'; -import { createDefaultWebpackConfig } from './config/webpack.config.default'; +import { createDefaultWebpackConfig } from './config/webpack.config.iframe.default'; function informAboutCustomConfig(defaultConfigName) { if (!defaultConfigName) { diff --git a/lib/core/src/server/middleware.js b/lib/core/src/server/middleware.js index 9d035953b330..0c880f9afaad 100644 --- a/lib/core/src/server/middleware.js +++ b/lib/core/src/server/middleware.js @@ -19,52 +19,95 @@ export default function(options) { // Build the webpack configuration using the `getBaseConfig` // custom `.babelrc` file and `webpack.config.js` files - const config = loadConfig({ + const iframeConfig = loadConfig({ configType: 'DEVELOPMENT', corePresets: [require.resolve('./core-preset-dev.js')], ...options, }); + const managerConfig = loadConfig({ + configType: 'PRODUCTION', + corePresets: [require.resolve('./core-preset-manager.js')], + ...options, + }); + const middlewareFn = getMiddleware(configDir); // remove the leading '/' - let { publicPath } = config.output; + let { publicPath } = iframeConfig.output; if (publicPath[0] === '/') { publicPath = publicPath.slice(1); } - const compiler = webpack(config); + const managerCompiler = webpack(managerConfig); + const iframeCompiler = webpack(iframeConfig); const devMiddlewareOptions = { noInfo: true, - publicPath: config.output.publicPath, - watchOptions: config.watchOptions || {}, - ...config.devServer, + publicPath: iframeConfig.output.publicPath, + watchOptions: iframeConfig.watchOptions || {}, + ...iframeConfig.devServer, }; const router = new Router(); - const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, devMiddlewareOptions); + const webpackDevMiddlewareInstance = webpackDevMiddleware(iframeCompiler, devMiddlewareOptions); router.use(webpackDevMiddlewareInstance); - router.use(webpackHotMiddleware(compiler)); + router.use(webpackHotMiddleware(iframeCompiler)); // custom middleware middlewareFn(router); - webpackDevMiddlewareInstance.waitUntilValid(stats => { - router.get('/', (req, res) => { - res.set('Content-Type', 'text/html'); - res.sendFile(path.join(`${__dirname}/public/index.html`)); + const iframePromise = new Promise((res, rej) => { + webpackDevMiddlewareInstance.waitUntilValid(stats => { + if (stats.hasErrors()) { + // console.log('\n\niframe errors\n\n'); + console.log(stats.hasErrors()); + // console.log('\n\niframe errors\n\n'); + rej(stats); + } else { + // console.log('\n\niframe valid\n\n'); + res(stats); + } }); + }); - router.get('/iframe.html', (req, res) => { - res.set('Content-Type', 'text/html'); - res.sendFile(path.join(`${__dirname}/public/iframe.html`)); + const managerPromise = new Promise((res, rej) => { + managerCompiler.run((err, stats) => { + if (err || stats.hasErrors()) { + // console.log('\n\nmanager errors\n\n'); + console.log(err, stats.hasErrors()); + // console.log('\n\nmanager errors\n\n'); + rej(stats); + } else { + // console.log('\n\nmanager valid\n\n'); + res(stats); + } }); - - if (stats.toJson().errors.length) { - webpackReject(stats); - } else { - webpackResolve(stats); - } }); + Promise.all([managerPromise, iframePromise]) + .then(([managerStats, iframeStats]) => { + // console.log('\n\nPromise all\n\n'); + + // console.log({ __dirname, publicPath, iframeConfig, managerConfig }); + + router.get('/', (request, response) => { + response.set('Content-Type', 'text/html'); + response.sendFile(path.join(`${__dirname}/public/index.html`)); + }); + router.get(/(.+\.js)$/, (request, response) => { + response.set('Content-Type', 'text/javascript '); + response.sendFile(path.join(`${__dirname}/public/${request.params[0]}`)); + }); + router.get('/iframe.html', (request, response) => { + response.set('Content-Type', 'text/html'); + response.sendFile(path.join(`${__dirname}/public/iframe.html`)); + }); + + webpackResolve(iframeStats); + }) + .catch(e => { + console.log('catch', e); + return webpackReject(e); + }); + return router; } diff --git a/yarn.lock b/yarn.lock index 879addef13df..9442d4e40375 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1980,6 +1980,13 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@ndelangen/html-webpack-harddisk-plugin@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@ndelangen/html-webpack-harddisk-plugin/-/html-webpack-harddisk-plugin-0.2.0.tgz#d2eb570597c83c1aa93d1f2fcb3d874a5855de07" + integrity sha512-55Mo2b5WtIT0l653y6ocu7C6QzznbasEnlixGzA26WK8Fj81wuEY3xf5N5bNAvDVfrwTLIPTXdEUGgPdrPLszw== + dependencies: + mkdirp "^0.5.1" + "@ngrx/store@^6.1.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-6.1.0.tgz#5b027647a797bf027912568214b10375dd75af38" @@ -18438,7 +18445,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.2: +prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2: version "15.6.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ== @@ -19065,17 +19072,63 @@ react-modal@^3.6.1: react-lifecycles-compat "^3.0.0" warning "^3.0.0" -react-native-compat@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/react-native-compat/-/react-native-compat-1.0.0.tgz#491dbd8a0105ac061b8d0d926463ce6a3dff33bc" - integrity sha1-SR29igEFrAYbjQ2SZGPOaj3/M7w= +react-native-animatable@^1.2.4: + version "1.3.0" + resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.0.tgz#b5c3940fc758cfd9b2fe54613a457c4b6962b46e" + integrity sha512-GGYEYvderfzPZcPnw7xov4nlRmi9d6oqcIzx0fGkUUsMshOQEtq5IEzFp3np0uTB9n8/gZIZcdbUPggVlVydMg== dependencies: prop-types "^15.5.10" -react-native-iphone-x-helper@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.0.tgz#9f8a376eb00bc712115abff4420318a0063fa796" - integrity sha512-xIeTo4s77wwKgBZLVRIZC9tM9/PkXS46Ul76NXmvmixEb3ZwqGdQesR3zRiLMOoIdfOURB6N9bba9po7+x9Bag== +react-native-color-picker@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/react-native-color-picker/-/react-native-color-picker-0.4.0.tgz#801a413a20b833ea8aa9b10418c3761dd4d88fb6" + integrity sha1-gBpBOiC4M+qKqbEEGMN2HdTYj7Y= + dependencies: + prop-types "^15.5.10" + tinycolor2 "^1.4.1" + +react-native-modal-datetime-picker@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-5.1.0.tgz#6e183531170881c2ff5b0742d132060f828e2b77" + integrity sha512-r1ODJ0ZXrGwFF2FWB0VlERqvwyalo9zxioLhVSwoBrkT8pSAj6QW5b3EaefjN6xbp4o6k5Lni/qOR4Pjke3jiQ== + dependencies: + prop-types "^15.6.1" + react-native-modal "^5.4.0" + +react-native-modal-selector@^0.0.27: + version "0.0.27" + resolved "https://registry.yarnpkg.com/react-native-modal-selector/-/react-native-modal-selector-0.0.27.tgz#27f51168596f7ac6ed5edfbaa3e43c0ddfee6415" + integrity sha512-+fRU70AHTMnrXKGeSJ1N/qkdIrIGqJy/3i3/pA7OgMN1UGYWC1TSQDaLcevcqbr3vM1+GqRWISkbpd5SJHMsNw== + dependencies: + prop-types "^15.5.10" + +react-native-modal@^5.4.0: + version "5.4.0" + resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-5.4.0.tgz#95f70b5d68e08824951cd11038b9db2d6fdb9962" + integrity sha512-Bvq4FQPMAFijqjqNX6TxLgKOwdbruM6GvFwF9rb+mowbaFZVoYbHTKLaAbdPlrblgaZKWyOuuxBUoDx41+Xktg== + dependencies: + prop-types "^15.6.1" + react-native-animatable "^1.2.4" + +react-native-simple-markdown@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/react-native-simple-markdown/-/react-native-simple-markdown-1.1.0.tgz#4d462f8ced26393c5230467420c61a50cc6a8095" + integrity sha1-TUYvjO0mOTxSMEZ0IMYaUMxqgJU= + dependencies: + lodash "^4.15.0" + simple-markdown "git://github.com/CharlesMangwa/simple-markdown.git" + +react-native-swipe-gestures@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.2.tgz#914e1a72a94bc55b322b4622a01103ab879296dd" + integrity sha1-kU4acqlLxVsyK0YioBEDq4eSlt0= + +react-native-switch@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/react-native-switch/-/react-native-switch-1.5.0.tgz#a5c8e72f87def649d1c9de027c5ae27e2037ea40" + integrity sha1-pcjnL4fe9knRyd4CfFrifiA36kA= + dependencies: + prop-types "^15.6.0" react-native@^0.52.2: version "0.52.3" @@ -21131,6 +21184,10 @@ simple-html-tokenizer@^0.5.1: resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.5.5.tgz#110e63f2fe095e1f21f2f07e8c259a5ab6d6bebb" integrity sha1-EQ5j8v4JXh8h8vB+jCWaWrbWvrs= +"simple-markdown@git://github.com/CharlesMangwa/simple-markdown.git": + version "0.1.1" + resolved "git://github.com/CharlesMangwa/simple-markdown.git#33d963c760b8196bee01b1a5ba9974bc7f669af1" + simple-plist@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/simple-plist/-/simple-plist-0.2.1.tgz#71766db352326928cf3a807242ba762322636723" From a6ce84290177ada0e1b36d3d5c9c75c33a730a46 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 13 Oct 2018 00:05:07 +0200 Subject: [PATCH 02/25] WIP --- .../server/config/webpack.config.manager.js | 28 +++++++++++-------- lib/core/src/server/middleware.js | 10 +++---- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/lib/core/src/server/config/webpack.config.manager.js b/lib/core/src/server/config/webpack.config.manager.js index 58b13d9f972c..f25562ef0216 100644 --- a/lib/core/src/server/config/webpack.config.manager.js +++ b/lib/core/src/server/config/webpack.config.manager.js @@ -9,7 +9,7 @@ import { version } from '../../../package.json'; import { includePaths, excludePaths, loadEnv, nodePaths, getBabelRuntimePath } from './utils'; import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils'; -export default ({ configDir, babelOptions, entries }) => { +export default ({ configDir, babelOptions, entries, configType }) => { const entriesMeta = { iframe: { headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), @@ -26,16 +26,22 @@ export default ({ configDir, babelOptions, entries }) => { bail: true, devtool: 'none', entry: { manager: entries.manager }, - output: { - path: path.join(__dirname, '..', 'public'), - filename: '[name].[chunkhash].bundle.js', - // Here we set the publicPath to ''. - // This allows us to deploy storybook into subpaths like GitHub pages. - // This works with css and image loaders too. - // This is working for storybook since, we don't use pushState urls and - // relative URLs works always. - publicPath: '', - }, + output: + configType === 'DEVELOPMENT' + ? { + path: path.join(__dirname, '..', 'public'), + filename: '[name].[chunkhash].bundle.js', + // Here we set the publicPath to ''. + // This allows us to deploy storybook into subpaths like GitHub pages. + // This works with css and image loaders too. + // This is working for storybook since, we don't use pushState urls and + // relative URLs works always. + publicPath: '', + } + : { + filename: 'static/[name].[chunkhash].bundle.js', + publicPath: '', + }, plugins: [ new HtmlWebpackPlugin({ filename: `index.html`, diff --git a/lib/core/src/server/middleware.js b/lib/core/src/server/middleware.js index 0c880f9afaad..464555683552 100644 --- a/lib/core/src/server/middleware.js +++ b/lib/core/src/server/middleware.js @@ -25,7 +25,7 @@ export default function(options) { ...options, }); const managerConfig = loadConfig({ - configType: 'PRODUCTION', + configType: 'DEVELOPMENT', corePresets: [require.resolve('./core-preset-manager.js')], ...options, }); @@ -97,10 +97,10 @@ export default function(options) { response.set('Content-Type', 'text/javascript '); response.sendFile(path.join(`${__dirname}/public/${request.params[0]}`)); }); - router.get('/iframe.html', (request, response) => { - response.set('Content-Type', 'text/html'); - response.sendFile(path.join(`${__dirname}/public/iframe.html`)); - }); + // router.get('/iframe.html', (request, response) => { + // response.set('Content-Type', 'text/html'); + // response.sendFile(path.join(`${__dirname}/public/iframe.html`)); + // }); webpackResolve(iframeStats); }) From 3861fed608b36756acd17edf5eca4c4ece6bdecf Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 13 Oct 2018 00:05:41 +0200 Subject: [PATCH 03/25] Not sure we actually need this, but in the case of a timeout on the fetch, this would be nice. --- lib/core/src/server/build-dev.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js index 6fe8d1ea96dd..fe023fff5706 100644 --- a/lib/core/src/server/build-dev.js +++ b/lib/core/src/server/build-dev.js @@ -86,7 +86,12 @@ const updateCheck = async () => { // if last check was more then 24h ago if (time - 86400000 > fromCache.time) { - const fromFetch = await fetch('https://storybooks.netlify.com/versions.json'); + const fromFetch = await Promise.race([ + fetch('https://storybooks.netlify.com/versions.json'), + new Promise((res, rej) => { + global.setTimeout(rej, 1000); + }), + ]); const data = await fromFetch.json(); result = { success: true, data, time }; await cache.set('lastUpdateCheck', result); From d09ff401fcbaf727f67a1667d25792364d8e69be Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 24 Oct 2018 18:26:45 +0200 Subject: [PATCH 04/25] FIX versions --- addons/ondevice-knobs/package.json | 2 +- addons/storyshots/storyshots-core/package.json | 2 +- addons/storyshots/storyshots-puppeteer/package.json | 2 +- lib/cli/test/fixtures/react_babel_config_js/package.json | 2 +- lib/cli/test/fixtures/react_babel_custom_preset/package.json | 2 +- lib/cli/test/fixtures/react_babel_pkg_json/package.json | 2 +- lib/cli/test/fixtures/react_babelrc/package.json | 2 +- lib/cli/test/fixtures/react_babelrc_js/package.json | 2 +- package.json | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json index ece81be08abb..e619d0f62401 100644 --- a/addons/ondevice-knobs/package.json +++ b/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.3", "react": "*", "react-native": "*" } diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 1fe90e64e8cf..6b5f066c05f8 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -37,7 +37,7 @@ "devDependencies": { "@storybook/addon-actions": "4.0.0-rc.3", "@storybook/addon-links": "4.0.0-rc.3", - "@storybook/addons": "4.0.0-alpha.24", + "@storybook/addons": "4.0.0-rc.3", "@storybook/react": "4.0.0-rc.3", "enzyme-to-json": "^3.3.4", "react": "^16.5.2" diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index 67f6168782dd..2ee09da5c959 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/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.3" } } diff --git a/lib/cli/test/fixtures/react_babel_config_js/package.json b/lib/cli/test/fixtures/react_babel_config_js/package.json index 884c8a803bcb..cb7a8cbc58f4 100644 --- a/lib/cli/test/fixtures/react_babel_config_js/package.json +++ b/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.3" } } diff --git a/lib/cli/test/fixtures/react_babel_custom_preset/package.json b/lib/cli/test/fixtures/react_babel_custom_preset/package.json index 7192b87c7bf1..fc28e7299755 100644 --- a/lib/cli/test/fixtures/react_babel_custom_preset/package.json +++ b/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.3" } } diff --git a/lib/cli/test/fixtures/react_babel_pkg_json/package.json b/lib/cli/test/fixtures/react_babel_pkg_json/package.json index bd9257e86aa4..a3a5deda2ffd 100644 --- a/lib/cli/test/fixtures/react_babel_pkg_json/package.json +++ b/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.3" }, "babel": { "plugins": ["@babel/plugin-proposal-optional-chaining"] diff --git a/lib/cli/test/fixtures/react_babelrc/package.json b/lib/cli/test/fixtures/react_babelrc/package.json index 8710ac9843cc..037dc6071a6d 100644 --- a/lib/cli/test/fixtures/react_babelrc/package.json +++ b/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.3" } } diff --git a/lib/cli/test/fixtures/react_babelrc_js/package.json b/lib/cli/test/fixtures/react_babelrc_js/package.json index 8e5ed9796aea..cb799c47adc1 100644 --- a/lib/cli/test/fixtures/react_babelrc_js/package.json +++ b/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.3" } } diff --git a/package.json b/package.json index 6042623675bf..2107ca8cbfa6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "4.0.0-alpha.16", + "version": "4.0.0-rc.3", "private": true, "repository": { "type": "git", From 0120686b177d2e19a323064380e71076808e9e68 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 24 Oct 2018 18:27:39 +0200 Subject: [PATCH 05/25] EXTRACT build of manager into it's own process --- lib/core/package.json | 2 + lib/core/src/server/build-dev.js | 1 + lib/core/src/server/config.js | 25 +++++- .../config/webpack.config.iframe.dev.js | 4 +- .../server/config/webpack.config.manager.js | 24 ++---- lib/core/src/server/core-preset-manager.js | 14 +-- lib/core/src/server/core-preset-prod.js | 4 +- lib/core/src/server/manager/webpack.js | 47 ++++++++++ lib/core/src/server/middleware.js | 85 +++++++++---------- lib/core/src/server/presets.js | 1 + lib/node-logger/package.json | 4 +- lib/node-logger/src/index.js | 13 +++ yarn.lock | 12 +++ 13 files changed, 162 insertions(+), 74 deletions(-) create mode 100644 lib/core/src/server/manager/webpack.js diff --git a/lib/core/package.json b/lib/core/package.json index 7afc81fa29de..f13ec12e1206 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -44,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", @@ -76,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", diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js index 25f3d2abf3b0..7858d340d833 100644 --- a/lib/core/src/server/build-dev.js +++ b/lib/core/src/server/build-dev.js @@ -89,6 +89,7 @@ const updateCheck = async version => { fetch(`https://storybook.js.org/versions.json?current=${version}`), // if fetch is too slow, we won't wait for it new Promise((res, rej) => global.setTimeout(rej, 1500)), + ]); const data = await fromFetch.json(); result = { success: true, data, time }; diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index 83ac5604ad19..4de9eba39be5 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -38,17 +38,38 @@ async function getWebpackConfig(options, presets) { } export default async options => { - const { corePresets = [], frameworkPresets = [], ...restOptions } = options; + const { corePresets = [], frameworkPresets = [], overridePresets = [], ...restOptions } = options; const presetsConfig = [ ...corePresets, require.resolve('./core-preset-babel-cache.js'), ...frameworkPresets, ...customPreset(options), - require.resolve('./core-preset-webpack-custom.js'), + ...overridePresets, ]; const presets = loadPresets(presetsConfig); return getWebpackConfig({ ...restOptions, presets }, wrapCorePresets(presets)); }; + +async function getManagerWebpackConfig(options, presets) { + const babelOptions = undefined; + const entries = await presets.manager([], options); + + return presets.webpack({}, { ...options, babelOptions, entries }); +} + +export const managerOptions = async options => { + const { corePresets = [], overridePresets = [], ...restOptions } = options; + + const presetsConfig = [ + ...corePresets, + require.resolve('./core-preset-babel-cache.js'), + ...overridePresets, + ]; + + const presets = loadPresets(presetsConfig); + + return getManagerWebpackConfig({ ...restOptions, presets }, wrapCorePresets(presets)); +}; diff --git a/lib/core/src/server/config/webpack.config.iframe.dev.js b/lib/core/src/server/config/webpack.config.iframe.dev.js index 72b692b8fc99..b9709d539a21 100644 --- a/lib/core/src/server/config/webpack.config.iframe.dev.js +++ b/lib/core/src/server/config/webpack.config.iframe.dev.js @@ -16,7 +16,7 @@ import { import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils'; import { version } from '../../../package.json'; -export default ({ configDir, quiet, babelOptions, entries }) => { +export default ({ configDir, babelOptions, entries }) => { const environment = loadEnv(); const entriesMeta = { iframe: { @@ -62,7 +62,7 @@ export default ({ configDir, quiet, babelOptions, entries }) => { new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), new WatchMissingNodeModulesPlugin(nodeModulesPaths), - quiet ? null : new webpack.ProgressPlugin(), + // quiet ? null : new webpack.ProgressPlugin(), new Dotenv({ silent: true }), ].filter(Boolean), module: { diff --git a/lib/core/src/server/config/webpack.config.manager.js b/lib/core/src/server/config/webpack.config.manager.js index f25562ef0216..de2945f21875 100644 --- a/lib/core/src/server/config/webpack.config.manager.js +++ b/lib/core/src/server/config/webpack.config.manager.js @@ -1,31 +1,23 @@ import path from 'path'; import webpack from 'webpack'; -import { getEnvironment } from 'universal-dotenv'; import Dotenv from 'dotenv-webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import HtmlWebpackHarddiskPlugin from '@ndelangen/html-webpack-harddisk-plugin'; +import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import { version } from '../../../package.json'; +import { getManagerHeadHtml } from '../utils'; import { includePaths, excludePaths, loadEnv, nodePaths, getBabelRuntimePath } from './utils'; -import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils'; export default ({ configDir, babelOptions, entries, configType }) => { - const entriesMeta = { - iframe: { - headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), - bodyHtmlSnippet: getPreviewBodyHtml(), - }, - manager: { - headHtmlSnippet: getManagerHeadHtml(configDir, process.env), - }, - }; + const environment = loadEnv(); return { name: 'manager', mode: 'production', bail: true, devtool: 'none', - entry: { manager: entries.manager }, + entry: entries, output: configType === 'DEVELOPMENT' ? { @@ -53,13 +45,13 @@ export default ({ configDir, babelOptions, entries, configType }) => { files, options, version, - ...entriesMeta.manager, + headHtmlSnippet: getManagerHeadHtml(configDir, process.env), }), template: require.resolve(`../templates/index.ejs`), }), new HtmlWebpackHarddiskPlugin(), - new webpack.DefinePlugin(loadEnv({ production: true })), - new webpack.DefinePlugin(getEnvironment().webpack), + new webpack.DefinePlugin(environment), + new CaseSensitivePathsPlugin(), new Dotenv({ silent: true }), ], module: { @@ -102,7 +94,7 @@ export default ({ configDir, babelOptions, entries, configType }) => { // splitChunks: { // chunks: chunk => chunk.name !== 'manager', // }, - // Keep the runtime chunk seperated to enable long term caching + // Keep the runtime chunk separated to enable long term caching // https://twitter.com/wSokra/status/969679223278505985 runtimeChunk: true, }, diff --git a/lib/core/src/server/core-preset-manager.js b/lib/core/src/server/core-preset-manager.js index 76eb886719c2..35bf88664f70 100644 --- a/lib/core/src/server/core-preset-manager.js +++ b/lib/core/src/server/core-preset-manager.js @@ -5,11 +5,11 @@ import createDevConfig from './config/webpack.config.manager'; import defaultBabelConfig from './config/babel.dev'; import { createManagerEntry, createPreviewEntry } from './config/entries'; -export function webpack(_, options) { +export async function webpack(_, options) { return createDevConfig(options); } -export function babel(_, options) { +export async function babel(_, options) { const { configDir, presets } = options; return loadCustomBabelConfig(configDir, () => @@ -17,21 +17,21 @@ export function babel(_, options) { ); } -export function manager(_, options) { +export async function manager(_, options) { return createManagerEntry(options); } -export function preview(_, options) { +export async function preview(_, options) { return [ - ...createPreviewEntry(options), + ...(await createPreviewEntry(options)), `${require.resolve('webpack-hot-middleware/client')}?reload=true`, ]; } -export function addons(_, options) { +export async function addons(_, options) { return loadCustomAddons(options); } -export function config(_, options) { +export async function config(_, options) { return loadCustomConfig(options); } diff --git a/lib/core/src/server/core-preset-prod.js b/lib/core/src/server/core-preset-prod.js index 6e34c49f3530..f6295b3c26cf 100644 --- a/lib/core/src/server/core-preset-prod.js +++ b/lib/core/src/server/core-preset-prod.js @@ -18,11 +18,11 @@ export async function babel(_, options) { } export async function manager(_, options) { - return createManagerEntry(options); + return await createManagerEntry(options); } export async function preview(_, options) { - return createPreviewEntry(options); + return await createPreviewEntry(options); } export async function addons(_, options) { diff --git a/lib/core/src/server/manager/webpack.js b/lib/core/src/server/manager/webpack.js new file mode 100644 index 000000000000..a0f02ee5e379 --- /dev/null +++ b/lib/core/src/server/manager/webpack.js @@ -0,0 +1,47 @@ +import console from 'console'; + +import webpack from 'webpack'; +import { managerOptions as loadConfig } from '../config'; + +const { Console } = console; + +const configDir = process.argv.reduce( + (acc, i) => (i.includes('dir=') ? i.replace('dir=', '') : acc), + './.storybook' +); +const configType = process.argv.reduce( + (acc, i) => (i.includes('type=') ? i.replace('type=', '') : acc), + 'DEVELOPMENT' +); + +const bad = new Console(process.stderr); +const good = new Console(process.stdout); + +loadConfig({ + configType, + configDir, + corePresets: [require.resolve('../core-preset-manager.js')], +}) + .then(config => webpack(config)) + .then( + compiler => + new Promise((res, rej) => { + try { + compiler.run((err, stats) => { + if (err || stats.hasErrors()) { + bad.log(JSON.stringify({ err, data: stats.toJson() }, null, 2)); + rej(err); + } else { + res(`success! ${process.env.NODE_ENV}`); + } + }); + } catch (e) { + rej(e); + } + }) + ) + .then(data => good.log(data)) + .catch(err => { + bad.log(err); + process.exit(1); + }); diff --git a/lib/core/src/server/middleware.js b/lib/core/src/server/middleware.js index 411d467e96a4..f205edae0054 100644 --- a/lib/core/src/server/middleware.js +++ b/lib/core/src/server/middleware.js @@ -1,11 +1,19 @@ import path from 'path'; import { Router } from 'express'; import webpack from 'webpack'; +import childProcess from 'child-process-promise'; +import { logger } from '@storybook/node-logger'; + import webpackDevMiddleware from 'webpack-dev-middleware'; import webpackHotMiddleware from 'webpack-hot-middleware'; + import { getMiddleware } from './utils'; import loadConfig from './config'; +import { loadEnv } from './config/utils'; + +const environment = loadEnv(); + let webpackResolve = () => {}; let webpackReject = () => {}; @@ -16,19 +24,16 @@ export const webpackValid = new Promise((resolve, reject) => { export default async function(options) { const { configDir } = options; + const configType = 'DEVELOPMENT'; - // Build the webpack configuration using the `getBaseConfig` - // custom `.babelrc` file and `webpack.config.js` files - const iframeConfig = await loadConfig({ - configType: 'DEVELOPMENT', - corePresets: [require.resolve('./core-preset-dev.js')], - ...options, - }); - const managerConfig = loadConfig({ - configType: 'DEVELOPMENT', - corePresets: [require.resolve('./core-preset-manager.js')], - ...options, - }); + const [iframeConfig] = await Promise.all([ + loadConfig({ + configType, + corePresets: [require.resolve('./core-preset-dev.js')], + overridePresets: [require.resolve('./core-preset-webpack-custom.js')], + ...options, + }), + ]); const middlewareFn = getMiddleware(configDir); @@ -38,7 +43,25 @@ export default async function(options) { publicPath = publicPath.slice(1); } - const managerCompiler = webpack(managerConfig); + const managerStartTime = process.hrtime(); + const managerPromise = childProcess + .exec( + `node ${path.join(__dirname, 'manager/webpack.js')} dir=${configDir} type=${configType}`, + { + env: { + NODE_ENV: 'production', + ...environment, + }, + } + ) + .then(a => { + const managerTotalTime = process.hrtime(managerStartTime); + logger.trace({ message: 'manager built', time: managerTotalTime }); + + return a; + }); + + const iframeStartTime = process.hrtime(); const iframeCompiler = webpack(iframeConfig); const devMiddlewareOptions = { noInfo: true, @@ -57,38 +80,19 @@ export default async function(options) { const iframePromise = new Promise((res, rej) => { webpackDevMiddlewareInstance.waitUntilValid(stats => { - if (stats.hasErrors()) { - // console.log('\n\niframe errors\n\n'); - console.log(stats.hasErrors()); - // console.log('\n\niframe errors\n\n'); - rej(stats); - } else { - // console.log('\n\niframe valid\n\n'); - res(stats); - } - }); - }); + const iframeTotalTime = process.hrtime(iframeStartTime); + logger.trace({ message: 'iframe built', time: iframeTotalTime }); - const managerPromise = new Promise((res, rej) => { - managerCompiler.run((err, stats) => { - if (err || stats.hasErrors()) { - // console.log('\n\nmanager errors\n\n'); - console.log(err, stats.hasErrors()); - // console.log('\n\nmanager errors\n\n'); + if (stats.hasErrors()) { rej(stats); } else { - // console.log('\n\nmanager valid\n\n'); res(stats); } }); }); Promise.all([managerPromise, iframePromise]) - .then(([managerStats, iframeStats]) => { - // console.log('\n\nPromise all\n\n'); - - // console.log({ __dirname, publicPath, iframeConfig, managerConfig }); - + .then(([, iframeStats]) => { router.get('/', (request, response) => { response.set('Content-Type', 'text/html'); response.sendFile(path.join(`${__dirname}/public/index.html`)); @@ -97,17 +101,10 @@ export default async function(options) { response.set('Content-Type', 'text/javascript '); response.sendFile(path.join(`${__dirname}/public/${request.params[0]}`)); }); - // router.get('/iframe.html', (request, response) => { - // response.set('Content-Type', 'text/html'); - // response.sendFile(path.join(`${__dirname}/public/iframe.html`)); - // }); webpackResolve(iframeStats); }) - .catch(e => { - console.log('catch', e); - return webpackReject(e); - }); + .catch(e => webpackReject(e)); return router; } diff --git a/lib/core/src/server/presets.js b/lib/core/src/server/presets.js index 9e8489fb6b75..6a686e13a95a 100644 --- a/lib/core/src/server/presets.js +++ b/lib/core/src/server/presets.js @@ -27,6 +27,7 @@ function loadPreset(preset) { }; } catch (e) { logger.warn(` Failed to load preset: ${JSON.stringify(preset)}`); + logger.error(e); return false; } } diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json index 931b9b091b0e..ab0805ddea35 100644 --- a/lib/node-logger/package.json +++ b/lib/node-logger/package.json @@ -24,6 +24,8 @@ }, "dependencies": { "@babel/runtime": "^7.1.2", - "npmlog": "^4.1.2" + "chalk": "^2.4.1", + "npmlog": "^4.1.2", + "pretty-hrtime": "^1.0.3" } } diff --git a/lib/node-logger/src/index.js b/lib/node-logger/src/index.js index b1b5784eedcc..bd166aebf037 100644 --- a/lib/node-logger/src/index.js +++ b/lib/node-logger/src/index.js @@ -1,7 +1,20 @@ import npmLog from 'npmlog'; +import prettyTime from 'pretty-hrtime'; +import chalk from 'chalk'; + +export const colors = { + pink: chalk.hex('F1618C'), + purple: chalk.hex('B57EE5'), + orange: chalk.hex('F3AD38'), + green: chalk.hex('A2E05E'), + blue: chalk.hex('6DABF5'), + red: chalk.hex('F16161'), + gray: chalk.gray, +}; export const logger = { info: message => npmLog.info('', message), warn: message => npmLog.warn('', message), error: message => npmLog.error('', message), + trace: ({ message, time }) => npmLog.info(`${message} (${colors.purple(prettyTime(time))})`), }; diff --git a/yarn.lock b/yarn.lock index ea7e5bd6419c..3aac62d93bde 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17391,6 +17391,11 @@ pretty-format@^4.2.1: resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-4.3.1.tgz#530be5c42b3c05b36414a7a2a4337aa80acd0e8d" integrity sha1-UwvlxCs8BbNkFKeipDN6qArNDo0= +pretty-hrtime@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" + integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= + pretty-ms@^3.1.0: version "3.2.0" resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-3.2.0.tgz#87a8feaf27fc18414d75441467d411d6e6098a25" @@ -20467,6 +20472,13 @@ spawn-command@^0.0.2-1: resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0" integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A= +spawn-promise@^0.1.8: + version "0.1.8" + resolved "https://registry.yarnpkg.com/spawn-promise/-/spawn-promise-0.1.8.tgz#a5bea98814c48f52cbe02720e7fe2d6fc3b5119a" + integrity sha512-pTkEOFxvYLq9SaI1d8bwepj0yD9Yyz65+4e979YZLv/L3oYPxZpDTabcm6e+KIZniGK9mQ+LGrwB5s1v2z67nQ== + dependencies: + co "^4.6.0" + spawn-sync@^1.0.11, spawn-sync@^1.0.15: version "1.0.15" resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476" From 750831cbc3b0ef59beed6016e49cd5ae9b7b5467 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 Oct 2018 00:19:51 +0200 Subject: [PATCH 06/25] FIX broken build-static - now also has manager in child_process --- lib/core/src/server/build-static.js | 40 +++++++++-- lib/core/src/server/config.js | 9 +-- .../config/webpack.config.iframe.dev.js | 28 +++----- .../config/webpack.config.iframe.prod.js | 72 +++++++++---------- .../server/config/webpack.config.manager.js | 26 ++----- .../src/server/core-preset-babel-cache.js | 2 +- lib/core/src/server/core-preset-dev.js | 7 +- lib/core/src/server/core-preset-prod.js | 5 +- lib/core/src/server/manager/webpack.js | 8 +-- lib/core/src/server/middleware.js | 42 +++++------ lib/core/src/server/presets.js | 4 +- 11 files changed, 122 insertions(+), 121 deletions(-) diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index b073e992ad8d..42cfdbf88622 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -1,15 +1,20 @@ -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 } = options; + const environment = loadEnv(); // create output directory if not exists shelljs.mkdir('-p', path.resolve(outputDir)); @@ -17,16 +22,37 @@ export async function buildStaticStandalone(options) { 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', + outputDir, corePresets: [require.resolve('./core-preset-prod.js')], + overridePresets: [require.resolve('./core-preset-webpack-custom.js')], ...options, }); - config.output.path = path.resolve(outputDir); + // config.output.path = path.resolve(outputDir); // copy all static files if (staticDir) { @@ -41,7 +67,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 +78,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); diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index 4de9eba39be5..f06ae51aa1ed 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -26,13 +26,10 @@ function customPreset({ configDir }) { return []; } -async function getWebpackConfig(options, presets) { +async function getPreviewWebpackConfig(options, presets) { const babelOptions = await presets.babel({}, options); - const entries = { - iframe: await presets.preview([], options), - manager: await presets.manager([], options), - }; + const entries = await presets.preview([], options); return presets.webpack({}, { ...options, babelOptions, entries }); } @@ -50,7 +47,7 @@ export default async options => { const presets = loadPresets(presetsConfig); - return getWebpackConfig({ ...restOptions, presets }, wrapCorePresets(presets)); + return getPreviewWebpackConfig({ ...restOptions, presets }, wrapCorePresets(presets)); }; async function getManagerWebpackConfig(options, presets) { diff --git a/lib/core/src/server/config/webpack.config.iframe.dev.js b/lib/core/src/server/config/webpack.config.iframe.dev.js index b9709d539a21..872776629475 100644 --- a/lib/core/src/server/config/webpack.config.iframe.dev.js +++ b/lib/core/src/server/config/webpack.config.iframe.dev.js @@ -13,34 +13,20 @@ import { nodePaths, getBabelRuntimePath, } from './utils'; -import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils'; +import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils'; import { version } from '../../../package.json'; -export default ({ configDir, babelOptions, entries }) => { +export default ({ configDir, babelOptions, entries, quiet }) => { const environment = loadEnv(); - const entriesMeta = { - iframe: { - headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), - bodyHtmlSnippet: getPreviewBodyHtml(), - }, - manager: { - headHtmlSnippet: getManagerHeadHtml(configDir, process.env), - }, - }; return { name: 'iframe', mode: 'development', devtool: 'cheap-module-source-map', - entry: { iframe: entries.iframe }, + entry: entries, output: { path: path.join(__dirname, '..', 'public'), filename: '[name].bundle.js', - // Here we set the publicPath to ''. - // This allows us to deploy storybook into subpaths like GitHub pages. - // This works with css and image loaders too. - // This is working for storybook since, we don't use pushState urls and - // relative URLs works always. publicPath: '', }, plugins: [ @@ -54,7 +40,8 @@ export default ({ configDir, babelOptions, entries }) => { files, options, version, - ...entriesMeta.iframe, + headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), + bodyHtmlSnippet: getPreviewBodyHtml(), }), template: require.resolve(`../templates/index.ejs`), }), @@ -62,7 +49,7 @@ export default ({ configDir, babelOptions, entries }) => { new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), new WatchMissingNodeModulesPlugin(nodeModulesPaths), - // quiet ? null : new webpack.ProgressPlugin(), + quiet ? null : new webpack.ProgressPlugin(), new Dotenv({ silent: true }), ].filter(Boolean), module: { @@ -91,10 +78,11 @@ export default ({ configDir, babelOptions, entries }) => { resolve: { // Since we ship with json-loader always, it's better to move extensions to here // from the default config. - extensions: ['.js', '.jsx', '.json', '.mjs'], + extensions: ['.mjs', '.js', '.jsx', '.json'], // Add support to NODE_PATH. With this we could avoid relative path imports. // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253 modules: ['node_modules'].concat(nodePaths), + mainFields: ['browser', 'main', 'module'], alias: { '@babel/runtime': getBabelRuntimePath(), }, diff --git a/lib/core/src/server/config/webpack.config.iframe.prod.js b/lib/core/src/server/config/webpack.config.iframe.prod.js index ea0f98f76edc..6ae05558254b 100644 --- a/lib/core/src/server/config/webpack.config.iframe.prod.js +++ b/lib/core/src/server/config/webpack.config.iframe.prod.js @@ -1,22 +1,21 @@ +import path from 'path'; import webpack from 'webpack'; import Dotenv from 'dotenv-webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; +import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import { version } from '../../../package.json'; import { includePaths, excludePaths, loadEnv, nodePaths, getBabelRuntimePath } from './utils'; -import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils'; +import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils'; -export default ({ configDir, babelOptions, entries }) => { +export default ({ + configDir, + babelOptions, + entries, + outputDir = path.join('.', 'public'), + quiet, +}) => { const environment = loadEnv({ production: true }); - const entriesMeta = { - iframe: { - headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), - bodyHtmlSnippet: getPreviewBodyHtml(), - }, - manager: { - headHtmlSnippet: getManagerHeadHtml(configDir, process.env), - }, - }; return { mode: 'production', @@ -24,36 +23,32 @@ export default ({ configDir, babelOptions, entries }) => { devtool: '#cheap-module-source-map', entry: entries, output: { - filename: 'static/[name].[chunkhash].bundle.js', - // Here we set the publicPath to ''. - // This allows us to deploy storybook into subpaths like GitHub pages. - // This works with css and image loaders too. - // This is working for storybook since, we don't use pushState urls and - // relative URLs works always. + path: path.join(process.cwd(), outputDir), + filename: '[name].[hash].bundle.js', publicPath: '', }, plugins: [ - ...Object.keys(entries).map( - e => - new HtmlWebpackPlugin({ - filename: `${e === 'manager' ? 'index' : e}.html`, - excludeChunks: Object.keys(entries).filter(i => i !== e), - chunksSortMode: 'none', - alwaysWriteToDisk: true, - inject: false, - templateParameters: (compilation, files, options) => ({ - compilation, - files, - options, - version, - ...entriesMeta[e], - }), - template: require.resolve(`../templates/index.ejs`), - }) - ), + new HtmlWebpackPlugin({ + filename: `iframe.html`, + chunksSortMode: 'none', + alwaysWriteToDisk: true, + inject: false, + templateParameters: (compilation, files, options) => ({ + compilation, + files, + options, + version, + headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), + bodyHtmlSnippet: getPreviewBodyHtml(), + }), + template: require.resolve(`../templates/index.ejs`), + }), new webpack.DefinePlugin(environment), + new webpack.HotModuleReplacementPlugin(), + new CaseSensitivePathsPlugin(), + quiet ? null : new webpack.ProgressPlugin(), new Dotenv({ silent: true }), - ], + ].filter(Boolean), module: { rules: [ { @@ -80,10 +75,11 @@ export default ({ configDir, babelOptions, entries }) => { resolve: { // Since we ship with json-loader always, it's better to move extensions to here // from the default config. - extensions: ['.js', '.jsx', '.json', '.mjs'], + extensions: ['.mjs', '.js', '.jsx', '.json'], // Add support to NODE_PATH. With this we could avoid relative path imports. // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253 modules: ['node_modules'].concat(nodePaths), + mainFields: ['browser', 'main', 'module'], alias: { '@babel/runtime': getBabelRuntimePath(), }, @@ -94,7 +90,7 @@ export default ({ configDir, babelOptions, entries }) => { splitChunks: { chunks: chunk => chunk.name !== 'manager', }, - // Keep the runtime chunk seperated to enable long term caching + // Keep the runtime chunk separated to enable long term caching // https://twitter.com/wSokra/status/969679223278505985 runtimeChunk: true, }, diff --git a/lib/core/src/server/config/webpack.config.manager.js b/lib/core/src/server/config/webpack.config.manager.js index de2945f21875..db05380416a7 100644 --- a/lib/core/src/server/config/webpack.config.manager.js +++ b/lib/core/src/server/config/webpack.config.manager.js @@ -1,4 +1,3 @@ -import path from 'path'; import webpack from 'webpack'; import Dotenv from 'dotenv-webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; @@ -9,7 +8,7 @@ import { version } from '../../../package.json'; import { getManagerHeadHtml } from '../utils'; import { includePaths, excludePaths, loadEnv, nodePaths, getBabelRuntimePath } from './utils'; -export default ({ configDir, babelOptions, entries, configType }) => { +export default ({ configDir, babelOptions, entries, outputDir }) => { const environment = loadEnv(); return { @@ -18,22 +17,11 @@ export default ({ configDir, babelOptions, entries, configType }) => { bail: true, devtool: 'none', entry: entries, - output: - configType === 'DEVELOPMENT' - ? { - path: path.join(__dirname, '..', 'public'), - filename: '[name].[chunkhash].bundle.js', - // Here we set the publicPath to ''. - // This allows us to deploy storybook into subpaths like GitHub pages. - // This works with css and image loaders too. - // This is working for storybook since, we don't use pushState urls and - // relative URLs works always. - publicPath: '', - } - : { - filename: 'static/[name].[chunkhash].bundle.js', - publicPath: '', - }, + output: { + path: outputDir, + filename: '[name].[chunkhash].bundle.js', + publicPath: '', + }, plugins: [ new HtmlWebpackPlugin({ filename: `index.html`, @@ -80,7 +68,7 @@ export default ({ configDir, babelOptions, entries, configType }) => { resolve: { // Since we ship with json-loader always, it's better to move extensions to here // from the default config. - extensions: ['.js', '.jsx', '.json'], + extensions: ['.mjs', '.js', '.jsx', '.json'], // Add support to NODE_PATH. With this we could avoid relative path imports. // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253 modules: ['node_modules'].concat(nodePaths), diff --git a/lib/core/src/server/core-preset-babel-cache.js b/lib/core/src/server/core-preset-babel-cache.js index 4abb4082c8d4..9704dd30f6f5 100644 --- a/lib/core/src/server/core-preset-babel-cache.js +++ b/lib/core/src/server/core-preset-babel-cache.js @@ -5,7 +5,7 @@ export function babel(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: 'react-storybook' }), + cacheDirectory: findCacheDir({ name: 'storybook' }), ...babelConfig, }; } diff --git a/lib/core/src/server/core-preset-dev.js b/lib/core/src/server/core-preset-dev.js index 43d827f3a2bd..a1c1feabdc47 100644 --- a/lib/core/src/server/core-preset-dev.js +++ b/lib/core/src/server/core-preset-dev.js @@ -22,9 +22,10 @@ export async function manager(_, options) { } export async function preview(_, options) { - const entry = await createPreviewEntry(options); - - return [...entry, `${require.resolve('webpack-hot-middleware/client')}?reload=true`]; + return [ + ...(await createPreviewEntry(options)), + `${require.resolve('webpack-hot-middleware/client')}?reload=true`, + ]; } export async function addons(_, options) { diff --git a/lib/core/src/server/core-preset-prod.js b/lib/core/src/server/core-preset-prod.js index f6295b3c26cf..e76e5384f0e3 100644 --- a/lib/core/src/server/core-preset-prod.js +++ b/lib/core/src/server/core-preset-prod.js @@ -18,11 +18,12 @@ export async function babel(_, options) { } export async function manager(_, options) { - return await createManagerEntry(options); + console.log(_, options); + return createManagerEntry(options); } export async function preview(_, options) { - return await createPreviewEntry(options); + return createPreviewEntry(options); } export async function addons(_, options) { diff --git a/lib/core/src/server/manager/webpack.js b/lib/core/src/server/manager/webpack.js index a0f02ee5e379..29f7b85bc714 100644 --- a/lib/core/src/server/manager/webpack.js +++ b/lib/core/src/server/manager/webpack.js @@ -9,16 +9,16 @@ const configDir = process.argv.reduce( (acc, i) => (i.includes('dir=') ? i.replace('dir=', '') : acc), './.storybook' ); -const configType = process.argv.reduce( - (acc, i) => (i.includes('type=') ? i.replace('type=', '') : acc), - 'DEVELOPMENT' +const outputDir = process.argv.reduce( + (acc, i) => (i.includes('out=') ? i.replace('out=', '') : acc), + undefined ); const bad = new Console(process.stderr); const good = new Console(process.stdout); loadConfig({ - configType, + outputDir, configDir, corePresets: [require.resolve('../core-preset-manager.js')], }) diff --git a/lib/core/src/server/middleware.js b/lib/core/src/server/middleware.js index f205edae0054..7c68cefb6efe 100644 --- a/lib/core/src/server/middleware.js +++ b/lib/core/src/server/middleware.js @@ -12,8 +12,6 @@ import loadConfig from './config'; import { loadEnv } from './config/utils'; -const environment = loadEnv(); - let webpackResolve = () => {}; let webpackReject = () => {}; @@ -23,30 +21,16 @@ export const webpackValid = new Promise((resolve, reject) => { }); export default async function(options) { - const { configDir } = options; + const environment = loadEnv(); + const { configDir, outputDir } = options; const configType = 'DEVELOPMENT'; - const [iframeConfig] = await Promise.all([ - loadConfig({ - configType, - corePresets: [require.resolve('./core-preset-dev.js')], - overridePresets: [require.resolve('./core-preset-webpack-custom.js')], - ...options, - }), - ]); - - const middlewareFn = getMiddleware(configDir); - - // remove the leading '/' - let { publicPath } = iframeConfig.output; - if (publicPath[0] === '/') { - publicPath = publicPath.slice(1); - } - const managerStartTime = process.hrtime(); const managerPromise = childProcess .exec( - `node ${path.join(__dirname, 'manager/webpack.js')} dir=${configDir} type=${configType}`, + `node ${path.join(__dirname, 'manager/webpack.js')} dir=${configDir} out=${path.resolve( + outputDir || path.join(__dirname, '..', 'public') + )}`, { env: { NODE_ENV: 'production', @@ -61,6 +45,22 @@ export default async function(options) { return a; }); + const iframeConfig = await loadConfig({ + configType, + outputDir, + corePresets: [require.resolve('./core-preset-dev.js')], + overridePresets: [require.resolve('./core-preset-webpack-custom.js')], + ...options, + }); + + const middlewareFn = getMiddleware(configDir); + + // remove the leading '/' + let { publicPath } = iframeConfig.output; + if (publicPath[0] === '/') { + publicPath = publicPath.slice(1); + } + const iframeStartTime = process.hrtime(); const iframeCompiler = webpack(iframeConfig); const devMiddlewareOptions = { diff --git a/lib/core/src/server/presets.js b/lib/core/src/server/presets.js index 6a686e13a95a..ae8c7e6cf26d 100644 --- a/lib/core/src/server/presets.js +++ b/lib/core/src/server/presets.js @@ -39,7 +39,9 @@ function loadPresets(presets) { logger.info('=> Loading presets'); - return presets.map(loadPreset).filter(preset => preset); + const result = presets.map(loadPreset).filter(preset => preset); + + return result; } function applyPresets(presets, config, args = {}, extension) { From e2f6220b7a44344f49798a68e9e3303f5696a6c4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 Oct 2018 14:10:25 +0200 Subject: [PATCH 07/25] REFACTOR --- .../src/server/config/webpack.config.prod.js | 2 +- lib/core/server.js | 4 +- lib/core/src/server/build-dev.js | 3 +- lib/core/src/server/build-static.js | 5 ++- .../server/{config => common}/babel.dev.js | 0 .../server/{config => common}/babel.prod.js | 0 .../server/common/core-preset-babel-cache.js | 11 +++++ .../server/{config => common}/polyfills.js | 0 lib/core/src/server/config.js | 30 +++++-------- lib/core/src/server/config/entries.js | 29 ------------- lib/core/src/server/config/utils.js | 2 +- .../src/server/core-preset-babel-cache.js | 11 ----- lib/core/src/server/core-preset-dev.js | 37 ---------------- lib/core/src/server/core-preset-manager.js | 37 ---------------- lib/core/src/server/core-preset-prod.js | 35 ---------------- .../server/{middleware.js => dev-server.js} | 6 +-- .../src/server/manager/core-preset-manager.js | 40 ++++++++++++++++++ .../webpack.config.manager.js | 10 ++++- lib/core/src/server/manager/webpack.js | 2 +- .../src/server/preview/core-preset-preview.js | 42 +++++++++++++++++++ .../core-preset-webpack-custom.js | 6 +-- lib/core/src/server/preview/entries.js | 14 +++++++ .../src/server/{config => preview}/globals.js | 0 .../webpack.config.iframe.default.js | 0 .../webpack.config.iframe.dev.js | 9 ++-- .../webpack.config.iframe.prod.js | 14 +++++-- .../src/server/{ => utils}/interpret-files.js | 0 .../{ => utils}/interpret-files.test.js | 0 .../load-custom-addons-file.js} | 1 + .../load-custom-babel-config.js} | 3 +- .../load-custom-config-file.js} | 0 .../load-custom-webpack-config.js} | 2 +- .../merge-webpack-config.js} | 0 .../merge-webpack-config.test.js} | 2 +- lib/core/src/server/utils/middleware.js | 14 +++++++ .../server-require.js} | 0 .../server/{utils.js => utils/template.js} | 24 ++++------- .../{utils.test.js => utils/template.test.js} | 6 +-- 38 files changed, 185 insertions(+), 216 deletions(-) rename lib/core/src/server/{config => common}/babel.dev.js (100%) rename lib/core/src/server/{config => common}/babel.prod.js (100%) create mode 100644 lib/core/src/server/common/core-preset-babel-cache.js rename lib/core/src/server/{config => common}/polyfills.js (100%) delete mode 100644 lib/core/src/server/config/entries.js delete mode 100644 lib/core/src/server/core-preset-babel-cache.js delete mode 100644 lib/core/src/server/core-preset-dev.js delete mode 100644 lib/core/src/server/core-preset-manager.js delete mode 100644 lib/core/src/server/core-preset-prod.js rename lib/core/src/server/{middleware.js => dev-server.js} (93%) create mode 100644 lib/core/src/server/manager/core-preset-manager.js rename lib/core/src/server/{config => manager}/webpack.config.manager.js (93%) create mode 100644 lib/core/src/server/preview/core-preset-preview.js rename lib/core/src/server/{ => preview}/core-preset-webpack-custom.js (88%) create mode 100644 lib/core/src/server/preview/entries.js rename lib/core/src/server/{config => preview}/globals.js (100%) rename lib/core/src/server/{config => preview}/webpack.config.iframe.default.js (100%) rename lib/core/src/server/{config => preview}/webpack.config.iframe.dev.js (94%) rename lib/core/src/server/{config => preview}/webpack.config.iframe.prod.js (94%) rename lib/core/src/server/{ => utils}/interpret-files.js (100%) rename lib/core/src/server/{ => utils}/interpret-files.test.js (100%) rename lib/core/src/server/{loadCustomAddonsFile.js => utils/load-custom-addons-file.js} (99%) rename lib/core/src/server/{loadCustomBabelConfig.js => utils/load-custom-babel-config.js} (99%) rename lib/core/src/server/{loadCustomConfigFile.js => utils/load-custom-config-file.js} (100%) rename lib/core/src/server/{loadCustomWebpackConfig.js => utils/load-custom-webpack-config.js} (81%) rename lib/core/src/server/{mergeConfigs.js => utils/merge-webpack-config.js} (100%) rename lib/core/src/server/{mergeConfigs.test.js => utils/merge-webpack-config.test.js} (96%) create mode 100644 lib/core/src/server/utils/middleware.js rename lib/core/src/server/{serverRequire.js => utils/server-require.js} (100%) rename lib/core/src/server/{utils.js => utils/template.js} (54%) rename lib/core/src/server/{utils.test.js => utils/template.test.js} (82%) diff --git a/app/react-native/src/server/config/webpack.config.prod.js b/app/react-native/src/server/config/webpack.config.prod.js index 09720b78ff2b..77da36c090b2 100644 --- a/app/react-native/src/server/config/webpack.config.prod.js +++ b/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'; diff --git a/lib/core/server.js b/lib/core/server.js index f58b38a7b912..203ef5a01333 100644 --- a/lib/core/server.js +++ b/lib/core/server.js @@ -1,5 +1,5 @@ -const defaultWebpackConfig = require('./dist/server/config/webpack.config.iframe.default'); -const serverUtils = require('./dist/server/utils'); +const defaultWebpackConfig = require('./dist/server/preview/webpack.config.iframe.default'); +const serverUtils = require('./dist/server/utils/template'); const buildStatic = require('./dist/server/build-static'); const buildDev = require('./dist/server/build-dev'); diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js index 7858d340d833..daddfc5bed2a 100644 --- a/lib/core/src/server/build-dev.js +++ b/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'); @@ -89,7 +89,6 @@ const updateCheck = async version => { fetch(`https://storybook.js.org/versions.json?current=${version}`), // if fetch is too slow, we won't wait for it new Promise((res, rej) => global.setTimeout(rej, 1500)), - ]); const data = await fromFetch.json(); result = { success: true, data, time }; diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 42cfdbf88622..4b854a2cb457 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -47,8 +47,8 @@ export async function buildStaticStandalone(options) { const config = await loadConfig({ configType: 'PRODUCTION', outputDir, - corePresets: [require.resolve('./core-preset-prod.js')], - overridePresets: [require.resolve('./core-preset-webpack-custom.js')], + corePresets: [require.resolve('./preview/core-preset-preview.js')], + overridePresets: [require.resolve('./preview/core-preset-webpack-custom.js')], ...options, }); @@ -97,6 +97,7 @@ export async function buildStatic({ packageJson, ...loadOptions }) { await buildStaticStandalone({ ...cliOptions, ...loadOptions, + packageJson, configDir: cliOptions.configDir || './.storybook', outputDir: cliOptions.outputDir || './storybook-static', }); diff --git a/lib/core/src/server/config/babel.dev.js b/lib/core/src/server/common/babel.dev.js similarity index 100% rename from lib/core/src/server/config/babel.dev.js rename to lib/core/src/server/common/babel.dev.js diff --git a/lib/core/src/server/config/babel.prod.js b/lib/core/src/server/common/babel.prod.js similarity index 100% rename from lib/core/src/server/config/babel.prod.js rename to lib/core/src/server/common/babel.prod.js diff --git a/lib/core/src/server/common/core-preset-babel-cache.js b/lib/core/src/server/common/core-preset-babel-cache.js new file mode 100644 index 000000000000..a5b798468132 --- /dev/null +++ b/lib/core/src/server/common/core-preset-babel-cache.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 }; diff --git a/lib/core/src/server/config/polyfills.js b/lib/core/src/server/common/polyfills.js similarity index 100% rename from lib/core/src/server/config/polyfills.js rename to lib/core/src/server/common/polyfills.js diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index f06ae51aa1ed..9df64d44344d 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -1,16 +1,7 @@ import path from 'path'; import { logger } from '@storybook/node-logger'; import loadPresets from './presets'; -import serverRequire from './serverRequire'; - -function wrapCorePresets(presets) { - return { - babel: async (config, args) => presets.apply('babel', config, args), - webpack: async (config, args) => presets.apply('webpack', config, args), - preview: async (config, args) => presets.apply('preview', config, args), - manager: async (config, args) => presets.apply('manager', config, args), - }; -} +import serverRequire from './utils/server-require'; function customPreset({ configDir }) { const presets = serverRequire(path.resolve(configDir, 'presets')); @@ -27,11 +18,10 @@ function customPreset({ configDir }) { } async function getPreviewWebpackConfig(options, presets) { - const babelOptions = await presets.babel({}, options); - - const entries = await presets.preview([], options); + const babelOptions = await presets.apply('babel', {}, options); + const entries = await presets.apply('entries', [], options); - return presets.webpack({}, { ...options, babelOptions, entries }); + return presets.apply('webpack', {}, { ...options, babelOptions, entries }); } export default async options => { @@ -39,7 +29,7 @@ export default async options => { const presetsConfig = [ ...corePresets, - require.resolve('./core-preset-babel-cache.js'), + require.resolve('./common/core-preset-babel-cache.js'), ...frameworkPresets, ...customPreset(options), ...overridePresets, @@ -47,14 +37,14 @@ export default async options => { const presets = loadPresets(presetsConfig); - return getPreviewWebpackConfig({ ...restOptions, presets }, wrapCorePresets(presets)); + return getPreviewWebpackConfig({ ...restOptions, presets }, presets); }; async function getManagerWebpackConfig(options, presets) { const babelOptions = undefined; - const entries = await presets.manager([], options); + const entries = await presets.apply('managerEntries', [], options); - return presets.webpack({}, { ...options, babelOptions, entries }); + return presets.apply('managerWebpack', {}, { ...options, babelOptions, entries }); } export const managerOptions = async options => { @@ -62,11 +52,11 @@ export const managerOptions = async options => { const presetsConfig = [ ...corePresets, - require.resolve('./core-preset-babel-cache.js'), + require.resolve('./common/core-preset-babel-cache.js'), ...overridePresets, ]; const presets = loadPresets(presetsConfig); - return getManagerWebpackConfig({ ...restOptions, presets }, wrapCorePresets(presets)); + return getManagerWebpackConfig({ ...restOptions, presets }, presets); }; diff --git a/lib/core/src/server/config/entries.js b/lib/core/src/server/config/entries.js deleted file mode 100644 index 262e0eb39b3b..000000000000 --- a/lib/core/src/server/config/entries.js +++ /dev/null @@ -1,29 +0,0 @@ -export async function createPreviewEntry(options) { - const { configDir, presets } = options; - const preview = [require.resolve('./polyfills'), require.resolve('./globals')]; - - const configs = await presets.apply('config', [], options); - - if (!configs || !configs.length) { - throw new Error(`=> Create a storybook config file in "${configDir}/config.{ext}".`); - } - - preview.push(...configs); - - return preview; -} - -export async function createManagerEntry(options) { - const { presets } = options; - const manager = [require.resolve('./polyfills')]; - - const addons = await presets.apply('addons', [], options); - - if (addons && addons.length) { - manager.push(...addons); - } - - manager.push(require.resolve('../../client/manager')); - - return manager; -} diff --git a/lib/core/src/server/config/utils.js b/lib/core/src/server/config/utils.js index c04c7b322562..84164cf582d6 100644 --- a/lib/core/src/server/config/utils.js +++ b/lib/core/src/server/config/utils.js @@ -18,7 +18,7 @@ export function loadEnv(options = {}) { const env = { NODE_ENV: JSON.stringify(process.env.NODE_ENV || defaultNodeEnv), // This is to support CRA's public folder feature. - // In production we set this to dot(.) to allow the browser to access these assests + // In production we set this to dot(.) to allow the browser to access these assets // even when deployed inside a subpath. (like in GitHub pages) // In development this is just empty as we always serves from the root. PUBLIC_URL: JSON.stringify(options.production ? '.' : ''), diff --git a/lib/core/src/server/core-preset-babel-cache.js b/lib/core/src/server/core-preset-babel-cache.js deleted file mode 100644 index 9704dd30f6f5..000000000000 --- a/lib/core/src/server/core-preset-babel-cache.js +++ /dev/null @@ -1,11 +0,0 @@ -import findCacheDir from 'find-cache-dir'; - -export function babel(babelConfig) { - return { - // 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, - }; -} diff --git a/lib/core/src/server/core-preset-dev.js b/lib/core/src/server/core-preset-dev.js deleted file mode 100644 index a1c1feabdc47..000000000000 --- a/lib/core/src/server/core-preset-dev.js +++ /dev/null @@ -1,37 +0,0 @@ -import loadCustomBabelConfig from './loadCustomBabelConfig'; -import loadCustomAddons from './loadCustomAddonsFile'; -import loadCustomConfig from './loadCustomConfigFile'; -import createDevConfig from './config/webpack.config.iframe.dev'; -import defaultBabelConfig from './config/babel.dev'; -import { createManagerEntry, createPreviewEntry } from './config/entries'; - -export async function webpack(_, options) { - return createDevConfig(options); -} - -export async function babel(_, options) { - const { configDir, presets } = options; - - return loadCustomBabelConfig(configDir, () => - presets.apply('babelDefault', defaultBabelConfig, options) - ); -} - -export async function manager(_, options) { - return createManagerEntry(options); -} - -export async function preview(_, options) { - return [ - ...(await createPreviewEntry(options)), - `${require.resolve('webpack-hot-middleware/client')}?reload=true`, - ]; -} - -export async function addons(_, options) { - return loadCustomAddons(options); -} - -export async function config(_, options) { - return loadCustomConfig(options); -} diff --git a/lib/core/src/server/core-preset-manager.js b/lib/core/src/server/core-preset-manager.js deleted file mode 100644 index 35bf88664f70..000000000000 --- a/lib/core/src/server/core-preset-manager.js +++ /dev/null @@ -1,37 +0,0 @@ -import loadCustomBabelConfig from './loadCustomBabelConfig'; -import loadCustomAddons from './loadCustomAddonsFile'; -import loadCustomConfig from './loadCustomConfigFile'; -import createDevConfig from './config/webpack.config.manager'; -import defaultBabelConfig from './config/babel.dev'; -import { createManagerEntry, createPreviewEntry } from './config/entries'; - -export async function webpack(_, options) { - return createDevConfig(options); -} - -export async function babel(_, options) { - const { configDir, presets } = options; - - return loadCustomBabelConfig(configDir, () => - presets.apply('babelDefault', defaultBabelConfig, options) - ); -} - -export async function manager(_, options) { - return createManagerEntry(options); -} - -export async function preview(_, options) { - return [ - ...(await createPreviewEntry(options)), - `${require.resolve('webpack-hot-middleware/client')}?reload=true`, - ]; -} - -export async function addons(_, options) { - return loadCustomAddons(options); -} - -export async function config(_, options) { - return loadCustomConfig(options); -} diff --git a/lib/core/src/server/core-preset-prod.js b/lib/core/src/server/core-preset-prod.js deleted file mode 100644 index e76e5384f0e3..000000000000 --- a/lib/core/src/server/core-preset-prod.js +++ /dev/null @@ -1,35 +0,0 @@ -import loadCustomBabelConfig from './loadCustomBabelConfig'; -import loadCustomAddons from './loadCustomAddonsFile'; -import loadCustomConfig from './loadCustomConfigFile'; -import createProdConfig from './config/webpack.config.iframe.prod'; -import defaultBabelConfig from './config/babel.prod'; -import { createManagerEntry, createPreviewEntry } from './config/entries'; - -export async function webpack(_, options) { - return createProdConfig(options); -} - -export async function babel(_, options) { - const { configDir, presets } = options; - - return loadCustomBabelConfig(configDir, () => - presets.apply('babelDefault', defaultBabelConfig, options) - ); -} - -export async function manager(_, options) { - console.log(_, options); - return createManagerEntry(options); -} - -export async function preview(_, options) { - return createPreviewEntry(options); -} - -export async function addons(_, options) { - return loadCustomAddons(options); -} - -export async function config(_, options) { - return loadCustomConfig(options); -} diff --git a/lib/core/src/server/middleware.js b/lib/core/src/server/dev-server.js similarity index 93% rename from lib/core/src/server/middleware.js rename to lib/core/src/server/dev-server.js index 7c68cefb6efe..6863e61d2792 100644 --- a/lib/core/src/server/middleware.js +++ b/lib/core/src/server/dev-server.js @@ -7,7 +7,7 @@ import { logger } from '@storybook/node-logger'; import webpackDevMiddleware from 'webpack-dev-middleware'; import webpackHotMiddleware from 'webpack-hot-middleware'; -import { getMiddleware } from './utils'; +import { getMiddleware } from './utils/middleware'; import loadConfig from './config'; import { loadEnv } from './config/utils'; @@ -48,8 +48,8 @@ export default async function(options) { const iframeConfig = await loadConfig({ configType, outputDir, - corePresets: [require.resolve('./core-preset-dev.js')], - overridePresets: [require.resolve('./core-preset-webpack-custom.js')], + corePresets: [require.resolve('./preview/core-preset-preview.js')], + overridePresets: [require.resolve('./preview/core-preset-webpack-custom.js')], ...options, }); diff --git a/lib/core/src/server/manager/core-preset-manager.js b/lib/core/src/server/manager/core-preset-manager.js new file mode 100644 index 000000000000..66e9a4264326 --- /dev/null +++ b/lib/core/src/server/manager/core-preset-manager.js @@ -0,0 +1,40 @@ +import loadCustomBabelConfig from '../utils/load-custom-babel-config'; +import loadCustomAddons from '../utils/load-custom-addons-file'; +import loadCustomConfig from '../utils/load-custom-config-file'; +import createDevConfig from './webpack.config.manager'; +import defaultBabelConfig from '../common/babel.dev'; + +export async function managerWebpack(_, options) { + return createDevConfig(options); +} + +export async function managerBabel(_, options) { + const { configDir, presets } = options; + + return loadCustomBabelConfig(configDir, () => + presets.apply('babelDefault', defaultBabelConfig, options) + ); +} + +export async function managerEntries(_, options) { + const { presets } = options; + const entries = [require.resolve('../common/polyfills')]; + + const installedAddons = await presets.apply('addons', [], options); + + if (installedAddons && installedAddons.length) { + entries.push(...installedAddons); + } + + entries.push(require.resolve('../../client/manager')); + + return entries; +} + +export async function addons(_, options) { + return loadCustomAddons(options); +} + +export async function config(_, options) { + return loadCustomConfig(options); +} diff --git a/lib/core/src/server/config/webpack.config.manager.js b/lib/core/src/server/manager/webpack.config.manager.js similarity index 93% rename from lib/core/src/server/config/webpack.config.manager.js rename to lib/core/src/server/manager/webpack.config.manager.js index db05380416a7..8eadfda116d8 100644 --- a/lib/core/src/server/config/webpack.config.manager.js +++ b/lib/core/src/server/manager/webpack.config.manager.js @@ -5,8 +5,14 @@ import HtmlWebpackHarddiskPlugin from '@ndelangen/html-webpack-harddisk-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import { version } from '../../../package.json'; -import { getManagerHeadHtml } from '../utils'; -import { includePaths, excludePaths, loadEnv, nodePaths, getBabelRuntimePath } from './utils'; +import { getManagerHeadHtml } from '../utils/template'; +import { + includePaths, + excludePaths, + loadEnv, + nodePaths, + getBabelRuntimePath, +} from '../config/utils'; export default ({ configDir, babelOptions, entries, outputDir }) => { const environment = loadEnv(); diff --git a/lib/core/src/server/manager/webpack.js b/lib/core/src/server/manager/webpack.js index 29f7b85bc714..5044a9afbdb6 100644 --- a/lib/core/src/server/manager/webpack.js +++ b/lib/core/src/server/manager/webpack.js @@ -20,7 +20,7 @@ const good = new Console(process.stdout); loadConfig({ outputDir, configDir, - corePresets: [require.resolve('../core-preset-manager.js')], + corePresets: [require.resolve('./core-preset-manager.js')], }) .then(config => webpack(config)) .then( diff --git a/lib/core/src/server/preview/core-preset-preview.js b/lib/core/src/server/preview/core-preset-preview.js new file mode 100644 index 000000000000..77ccd9bd5428 --- /dev/null +++ b/lib/core/src/server/preview/core-preset-preview.js @@ -0,0 +1,42 @@ +import loadCustomBabelConfig from '../utils/load-custom-babel-config'; +import loadCustomConfig from '../utils/load-custom-config-file'; +import devBabelConfig from '../common/babel.dev'; +import prodBabelConfig from '../common/babel.prod'; + +import devWebpackConfig from './webpack.config.iframe.dev'; +import prodWebpackConfig from './webpack.config.iframe.prod'; +import { createPreviewEntry } from './entries'; + +export async function webpack(_, options) { + return options.configType === 'PRODUCTION' + ? prodWebpackConfig(options) + : devWebpackConfig(options); +} + +export async function babel(_, options) { + const { configDir, presets } = options; + + return loadCustomBabelConfig(configDir, () => + presets.apply( + 'babelDefault', + options.configType === 'PRODUCTION' ? prodBabelConfig : devBabelConfig, + options + ) + ); +} + +export async function entries(_, options) { + let result = []; + + result = result.concat(await createPreviewEntry(options)); + + if (options.configType === 'DEVELOPMENT') { + result = result.concat(`${require.resolve('webpack-hot-middleware/client')}?reload=true`); + } + + return result; +} + +export async function config(_, options) { + return loadCustomConfig(options); +} diff --git a/lib/core/src/server/core-preset-webpack-custom.js b/lib/core/src/server/preview/core-preset-webpack-custom.js similarity index 88% rename from lib/core/src/server/core-preset-webpack-custom.js rename to lib/core/src/server/preview/core-preset-webpack-custom.js index 5488bfa1f7d5..45d79a2018e5 100644 --- a/lib/core/src/server/core-preset-webpack-custom.js +++ b/lib/core/src/server/preview/core-preset-webpack-custom.js @@ -1,7 +1,7 @@ import { logger } from '@storybook/node-logger'; -import loadCustomWebpackConfig from './loadCustomWebpackConfig'; -import mergeConfigs from './mergeConfigs'; -import { createDefaultWebpackConfig } from './config/webpack.config.iframe.default'; +import loadCustomWebpackConfig from '../utils/load-custom-webpack-config'; +import mergeConfigs from '../utils/merge-webpack-config'; +import { createDefaultWebpackConfig } from './webpack.config.iframe.default'; function informAboutCustomConfig(defaultConfigName) { if (!defaultConfigName) { diff --git a/lib/core/src/server/preview/entries.js b/lib/core/src/server/preview/entries.js new file mode 100644 index 000000000000..124bd5b0a014 --- /dev/null +++ b/lib/core/src/server/preview/entries.js @@ -0,0 +1,14 @@ +export async function createPreviewEntry(options) { + const { configDir, presets } = options; + const entries = [require.resolve('../common/polyfills'), require.resolve('./globals')]; + + const configs = await presets.apply('config', [], options); + + if (!configs || !configs.length) { + throw new Error(`=> Create a storybook config file in "${configDir}/config.{ext}".`); + } + + entries.push(...configs); + + return entries; +} diff --git a/lib/core/src/server/config/globals.js b/lib/core/src/server/preview/globals.js similarity index 100% rename from lib/core/src/server/config/globals.js rename to lib/core/src/server/preview/globals.js diff --git a/lib/core/src/server/config/webpack.config.iframe.default.js b/lib/core/src/server/preview/webpack.config.iframe.default.js similarity index 100% rename from lib/core/src/server/config/webpack.config.iframe.default.js rename to lib/core/src/server/preview/webpack.config.iframe.default.js diff --git a/lib/core/src/server/config/webpack.config.iframe.dev.js b/lib/core/src/server/preview/webpack.config.iframe.dev.js similarity index 94% rename from lib/core/src/server/config/webpack.config.iframe.dev.js rename to lib/core/src/server/preview/webpack.config.iframe.dev.js index 872776629475..7f6dcf913315 100644 --- a/lib/core/src/server/config/webpack.config.iframe.dev.js +++ b/lib/core/src/server/preview/webpack.config.iframe.dev.js @@ -12,11 +12,10 @@ import { loadEnv, nodePaths, getBabelRuntimePath, -} from './utils'; -import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils'; -import { version } from '../../../package.json'; +} from '../config/utils'; +import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template'; -export default ({ configDir, babelOptions, entries, quiet }) => { +export default ({ configDir, babelOptions, entries, quiet, packageJson }) => { const environment = loadEnv(); return { @@ -39,7 +38,7 @@ export default ({ configDir, babelOptions, entries, quiet }) => { compilation, files, options, - version, + version: packageJson.version, headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), bodyHtmlSnippet: getPreviewBodyHtml(), }), diff --git a/lib/core/src/server/config/webpack.config.iframe.prod.js b/lib/core/src/server/preview/webpack.config.iframe.prod.js similarity index 94% rename from lib/core/src/server/config/webpack.config.iframe.prod.js rename to lib/core/src/server/preview/webpack.config.iframe.prod.js index 6ae05558254b..4abe5ccad2ab 100644 --- a/lib/core/src/server/config/webpack.config.iframe.prod.js +++ b/lib/core/src/server/preview/webpack.config.iframe.prod.js @@ -4,9 +4,14 @@ import Dotenv from 'dotenv-webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; -import { version } from '../../../package.json'; -import { includePaths, excludePaths, loadEnv, nodePaths, getBabelRuntimePath } from './utils'; -import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils'; +import { + includePaths, + excludePaths, + loadEnv, + nodePaths, + getBabelRuntimePath, +} from '../config/utils'; +import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template'; export default ({ configDir, @@ -14,6 +19,7 @@ export default ({ entries, outputDir = path.join('.', 'public'), quiet, + packageJson, }) => { const environment = loadEnv({ production: true }); @@ -37,7 +43,7 @@ export default ({ compilation, files, options, - version, + version: packageJson.version, headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), bodyHtmlSnippet: getPreviewBodyHtml(), }), diff --git a/lib/core/src/server/interpret-files.js b/lib/core/src/server/utils/interpret-files.js similarity index 100% rename from lib/core/src/server/interpret-files.js rename to lib/core/src/server/utils/interpret-files.js diff --git a/lib/core/src/server/interpret-files.test.js b/lib/core/src/server/utils/interpret-files.test.js similarity index 100% rename from lib/core/src/server/interpret-files.test.js rename to lib/core/src/server/utils/interpret-files.test.js diff --git a/lib/core/src/server/loadCustomAddonsFile.js b/lib/core/src/server/utils/load-custom-addons-file.js similarity index 99% rename from lib/core/src/server/loadCustomAddonsFile.js rename to lib/core/src/server/utils/load-custom-addons-file.js index 90211dd5a954..b17f37c9c5ba 100644 --- a/lib/core/src/server/loadCustomAddonsFile.js +++ b/lib/core/src/server/utils/load-custom-addons-file.js @@ -1,5 +1,6 @@ import path from 'path'; import { logger } from '@storybook/node-logger'; + import { getInterpretedFile } from './interpret-files'; function loadCustomAddons({ configDir }) { diff --git a/lib/core/src/server/loadCustomBabelConfig.js b/lib/core/src/server/utils/load-custom-babel-config.js similarity index 99% rename from lib/core/src/server/loadCustomBabelConfig.js rename to lib/core/src/server/utils/load-custom-babel-config.js index 417ebcd5591f..6ba6a94ce333 100644 --- a/lib/core/src/server/loadCustomBabelConfig.js +++ b/lib/core/src/server/utils/load-custom-babel-config.js @@ -1,8 +1,9 @@ import fs from 'fs'; import path from 'path'; import JSON5 from 'json5'; -import { sync as resolveSync } from 'resolve'; import { satisfies } from 'semver'; +import { sync as resolveSync } from 'resolve'; + import { logger } from '@storybook/node-logger'; function removeReactHmre(presets) { diff --git a/lib/core/src/server/loadCustomConfigFile.js b/lib/core/src/server/utils/load-custom-config-file.js similarity index 100% rename from lib/core/src/server/loadCustomConfigFile.js rename to lib/core/src/server/utils/load-custom-config-file.js diff --git a/lib/core/src/server/loadCustomWebpackConfig.js b/lib/core/src/server/utils/load-custom-webpack-config.js similarity index 81% rename from lib/core/src/server/loadCustomWebpackConfig.js rename to lib/core/src/server/utils/load-custom-webpack-config.js index 20c2ab8856ed..73dcc0aa9476 100644 --- a/lib/core/src/server/loadCustomWebpackConfig.js +++ b/lib/core/src/server/utils/load-custom-webpack-config.js @@ -1,5 +1,5 @@ import path from 'path'; -import serverRequire from './serverRequire'; +import serverRequire from './server-require'; const webpackConfigs = ['webpack.config', 'webpackfile']; diff --git a/lib/core/src/server/mergeConfigs.js b/lib/core/src/server/utils/merge-webpack-config.js similarity index 100% rename from lib/core/src/server/mergeConfigs.js rename to lib/core/src/server/utils/merge-webpack-config.js diff --git a/lib/core/src/server/mergeConfigs.test.js b/lib/core/src/server/utils/merge-webpack-config.test.js similarity index 96% rename from lib/core/src/server/mergeConfigs.test.js rename to lib/core/src/server/utils/merge-webpack-config.test.js index da2962bcb8e6..4a5c78aaf952 100644 --- a/lib/core/src/server/mergeConfigs.test.js +++ b/lib/core/src/server/utils/merge-webpack-config.test.js @@ -1,4 +1,4 @@ -import mergeConfigs from './mergeConfigs'; +import mergeConfigs from './merge-webpack-config'; const config = { devtool: 'source-maps', diff --git a/lib/core/src/server/utils/middleware.js b/lib/core/src/server/utils/middleware.js new file mode 100644 index 000000000000..74928bc7a5c8 --- /dev/null +++ b/lib/core/src/server/utils/middleware.js @@ -0,0 +1,14 @@ +import path from 'path'; +import fs from 'fs'; + +export function getMiddleware(configDir) { + const middlewarePath = path.resolve(configDir, 'middleware.js'); + if (fs.existsSync(middlewarePath)) { + let middlewareModule = require(middlewarePath); // eslint-disable-line + if (middlewareModule.__esModule) { // eslint-disable-line + middlewareModule = middlewareModule.default; + } + return middlewareModule; + } + return () => {}; +} diff --git a/lib/core/src/server/serverRequire.js b/lib/core/src/server/utils/server-require.js similarity index 100% rename from lib/core/src/server/serverRequire.js rename to lib/core/src/server/utils/server-require.js diff --git a/lib/core/src/server/utils.js b/lib/core/src/server/utils/template.js similarity index 54% rename from lib/core/src/server/utils.js rename to lib/core/src/server/utils/template.js index 6bb4cc0c5667..8201c73b4019 100644 --- a/lib/core/src/server/utils.js +++ b/lib/core/src/server/utils/template.js @@ -1,27 +1,18 @@ import path from 'path'; import fs from 'fs'; -export function getMiddleware(configDir) { - const middlewarePath = path.resolve(configDir, 'middleware.js'); - if (fs.existsSync(middlewarePath)) { - let middlewareModule = require(middlewarePath); // eslint-disable-line - if (middlewareModule.__esModule) { // eslint-disable-line - middlewareModule = middlewareModule.default; - } - return middlewareModule; - } - return () => {}; -} - const interpolate = (string, data = {}) => Object.entries(data).reduce((acc, [k, v]) => acc.replace(`%${k}%`, v), string); export function getPreviewBodyHtml() { - return fs.readFileSync(path.resolve(__dirname, 'templates/base-preview-body.html'), 'utf8'); + return fs.readFileSync(path.resolve(__dirname, '../templates/base-preview-body.html'), 'utf8'); } export function getPreviewHeadHtml(configDirPath, interpolations) { - const base = fs.readFileSync(path.resolve(__dirname, 'templates/base-preview-head.html'), 'utf8'); + const base = fs.readFileSync( + path.resolve(__dirname, '../templates/base-preview-head.html'), + 'utf8' + ); const headHtmlPath = path.resolve(configDirPath, 'preview-head.html'); let result = base; @@ -34,7 +25,10 @@ export function getPreviewHeadHtml(configDirPath, interpolations) { } export function getManagerHeadHtml(configDirPath, interpolations) { - const base = fs.readFileSync(path.resolve(__dirname, 'templates/base-manager-head.html'), 'utf8'); + const base = fs.readFileSync( + path.resolve(__dirname, '../templates/base-manager-head.html'), + 'utf8' + ); const scriptPath = path.resolve(configDirPath, 'manager-head.html'); let result = base; diff --git a/lib/core/src/server/utils.test.js b/lib/core/src/server/utils/template.test.js similarity index 82% rename from lib/core/src/server/utils.test.js rename to lib/core/src/server/utils/template.test.js index e5e6ad6445c2..debc72a0fbe3 100644 --- a/lib/core/src/server/utils.test.js +++ b/lib/core/src/server/utils/template.test.js @@ -1,5 +1,5 @@ import mock from 'mock-fs'; -import { getPreviewHeadHtml } from './utils'; +import { getPreviewHeadHtml } from './template'; const HEAD_HTML_CONTENTS = ''; const BASE_HTML_CONTENTS = ''; @@ -8,7 +8,7 @@ describe('server.getPreviewHeadHtml', () => { describe('when .storybook/preview-head.html does not exist', () => { beforeEach(() => { mock({ - [`${__dirname}/templates/base-preview-head.html`]: BASE_HTML_CONTENTS, + [`${__dirname}/../templates/base-preview-head.html`]: BASE_HTML_CONTENTS, config: {}, }); }); @@ -26,7 +26,7 @@ describe('server.getPreviewHeadHtml', () => { describe('when .storybook/preview-head.html exists', () => { beforeEach(() => { mock({ - [`${__dirname}/templates/base-preview-head.html`]: BASE_HTML_CONTENTS, + [`${__dirname}/../templates/base-preview-head.html`]: BASE_HTML_CONTENTS, config: { 'preview-head.html': HEAD_HTML_CONTENTS, }, From def95df8f7fda56e93de78b1fdb0d00ce399b03a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 Oct 2018 16:55:50 +0200 Subject: [PATCH 08/25] FIX angular && REFACTOR --- app/angular/src/server/angular-cli_config.js | 11 +++++----- .../preview/core-preset-webpack-custom.js | 22 ++++++------------- 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js index 3043dff9c179..b18519832f46 100644 --- a/app/angular/src/server/angular-cli_config.js +++ b/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, diff --git a/lib/core/src/server/preview/core-preset-webpack-custom.js b/lib/core/src/server/preview/core-preset-webpack-custom.js index 45d79a2018e5..c04bd36eb444 100644 --- a/lib/core/src/server/preview/core-preset-webpack-custom.js +++ b/lib/core/src/server/preview/core-preset-webpack-custom.js @@ -3,38 +3,30 @@ import loadCustomWebpackConfig from '../utils/load-custom-webpack-config'; import mergeConfigs from '../utils/merge-webpack-config'; import { createDefaultWebpackConfig } from './webpack.config.iframe.default'; -function informAboutCustomConfig(defaultConfigName) { +function logConfigName(defaultConfigName) { if (!defaultConfigName) { logger.info('=> Using default webpack setup.'); - return; + } else { + logger.info(`=> Using default webpack setup based on "${defaultConfigName}".`); } - - logger.info(`=> Using default webpack setup based on "${defaultConfigName}".`); -} - -function wrapPresets(presets) { - return { - webpackFinal: async (config, args) => presets.apply('webpackFinal', config, args), - }; } async function createFinalDefaultConfig(presets, config, options) { const defaultConfig = createDefaultWebpackConfig(config); - return presets.webpackFinal(defaultConfig, options); + return presets.apply('webpackFinal', defaultConfig, options); } export async function webpack(config, options) { - const { configDir, configType, defaultConfigName } = options; - const presets = wrapPresets(options.presets); + const { configDir, configType, defaultConfigName, presets } = options; - const finalConfig = await presets.webpackFinal(config, options); + const finalConfig = await presets.apply('webpackFinal', config, options); // Check whether user has a custom webpack config file and // return the (extended) base configuration if it's not available. const customConfig = loadCustomWebpackConfig(configDir); if (customConfig === null) { - informAboutCustomConfig(defaultConfigName); + logConfigName(defaultConfigName); return createFinalDefaultConfig(presets, config, options); } From 6fcf4f461bf8cd8b7578d7db3498d3f042f25953 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 Oct 2018 17:37:44 +0200 Subject: [PATCH 09/25] ADD --quiet to not overflow the CI logs --- .circleci/config.yml | 22 +++++++++---------- ...urceProjects_Storybook_NativeSmokeTests.kt | 2 +- ...OpenSourceProjects_Storybook_SmokeTests.kt | 4 ++-- lib/cli/test/run_tests.sh | 2 +- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 95af3d26fe80..8cc1ca4a166f 100644 --- a/.circleci/config.yml +++ b/.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: diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt index d1e3319c8d98..6c1719f737e3 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt +++ b/.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%" } diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt index bf5f2ebf4399..377397880bc5 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt +++ b/.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%" } diff --git a/lib/cli/test/run_tests.sh b/lib/cli/test/run_tests.sh index 85a34400d10b..6781ab81c7c3 100755 --- a/lib/cli/test/run_tests.sh +++ b/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 From f16b2b6f8560dc9252e91bcefc74f5392833780f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 Oct 2018 17:47:36 +0200 Subject: [PATCH 10/25] FIX snapshots --- .../__snapshots__/merge-webpack-config.test.js.snap} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename lib/core/src/server/{__snapshots__/mergeConfigs.test.js.snap => utils/__snapshots__/merge-webpack-config.test.js.snap} (100%) diff --git a/lib/core/src/server/__snapshots__/mergeConfigs.test.js.snap b/lib/core/src/server/utils/__snapshots__/merge-webpack-config.test.js.snap similarity index 100% rename from lib/core/src/server/__snapshots__/mergeConfigs.test.js.snap rename to lib/core/src/server/utils/__snapshots__/merge-webpack-config.test.js.snap From 5a64f33c7c67f8058c323abf418aca5afa83bbff Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 Oct 2018 18:23:47 +0200 Subject: [PATCH 11/25] WIP --- ...t-babel-cache.js => babel-cache-preset.js} | 0 lib/core/src/server/common/babel.dev.js | 15 --- lib/core/src/server/common/babel.js | 28 ++++++ lib/core/src/server/common/babel.prod.js | 15 --- .../src/server/manager/core-preset-manager.js | 4 +- .../src/server/preview/core-preset-preview.js | 30 ++---- .../preview/webpack.config.iframe.dev.js | 93 ------------------- ...frame.prod.js => webpack.config.iframe.js} | 24 ++--- 8 files changed, 51 insertions(+), 158 deletions(-) rename lib/core/src/server/common/{core-preset-babel-cache.js => babel-cache-preset.js} (100%) delete mode 100644 lib/core/src/server/common/babel.dev.js create mode 100644 lib/core/src/server/common/babel.js delete mode 100644 lib/core/src/server/common/babel.prod.js delete mode 100644 lib/core/src/server/preview/webpack.config.iframe.dev.js rename lib/core/src/server/preview/{webpack.config.iframe.prod.js => webpack.config.iframe.js} (76%) diff --git a/lib/core/src/server/common/core-preset-babel-cache.js b/lib/core/src/server/common/babel-cache-preset.js similarity index 100% rename from lib/core/src/server/common/core-preset-babel-cache.js rename to lib/core/src/server/common/babel-cache-preset.js diff --git a/lib/core/src/server/common/babel.dev.js b/lib/core/src/server/common/babel.dev.js deleted file mode 100644 index 0b6e5dbd19f6..000000000000 --- a/lib/core/src/server/common/babel.dev.js +++ /dev/null @@ -1,15 +0,0 @@ -export default { - presets: [[require.resolve('@babel/preset-env')]], - 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, - }, - ], - ], -}; diff --git a/lib/core/src/server/common/babel.js b/lib/core/src/server/common/babel.js new file mode 100644 index 000000000000..72799541ae7d --- /dev/null +++ b/lib/core/src/server/common/babel.js @@ -0,0 +1,28 @@ +export default ({ configType }) => { + const isProd = configType === 'PRODUCTION'; + + return { + presets: [[require.resolve('@babel/preset-env')]], + 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, + }, + ], + isProd + ? [ + require.resolve('babel-preset-minify'), + { + builtIns: false, + mangle: false, + }, + ] + : null, + ].filter(Boolean), + }; +}; diff --git a/lib/core/src/server/common/babel.prod.js b/lib/core/src/server/common/babel.prod.js deleted file mode 100644 index 8bc12a641e12..000000000000 --- a/lib/core/src/server/common/babel.prod.js +++ /dev/null @@ -1,15 +0,0 @@ -import baseConfig from './babel.dev'; - -export default { - ...baseConfig, - presets: [ - ...baseConfig.presets, - [ - require.resolve('babel-preset-minify'), - { - builtIns: false, - mangle: false, - }, - ], - ], -}; diff --git a/lib/core/src/server/manager/core-preset-manager.js b/lib/core/src/server/manager/core-preset-manager.js index 66e9a4264326..939ef1d79864 100644 --- a/lib/core/src/server/manager/core-preset-manager.js +++ b/lib/core/src/server/manager/core-preset-manager.js @@ -2,7 +2,7 @@ import loadCustomBabelConfig from '../utils/load-custom-babel-config'; import loadCustomAddons from '../utils/load-custom-addons-file'; import loadCustomConfig from '../utils/load-custom-config-file'; import createDevConfig from './webpack.config.manager'; -import defaultBabelConfig from '../common/babel.dev'; +import babelConfig from '../common/babel'; export async function managerWebpack(_, options) { return createDevConfig(options); @@ -12,7 +12,7 @@ export async function managerBabel(_, options) { const { configDir, presets } = options; return loadCustomBabelConfig(configDir, () => - presets.apply('babelDefault', defaultBabelConfig, options) + presets.apply('babelDefault', babelConfig(options), options) ); } diff --git a/lib/core/src/server/preview/core-preset-preview.js b/lib/core/src/server/preview/core-preset-preview.js index 77ccd9bd5428..8c367427cad8 100644 --- a/lib/core/src/server/preview/core-preset-preview.js +++ b/lib/core/src/server/preview/core-preset-preview.js @@ -1,31 +1,21 @@ import loadCustomBabelConfig from '../utils/load-custom-babel-config'; import loadCustomConfig from '../utils/load-custom-config-file'; -import devBabelConfig from '../common/babel.dev'; -import prodBabelConfig from '../common/babel.prod'; +import babelConfig from '../common/babel'; -import devWebpackConfig from './webpack.config.iframe.dev'; -import prodWebpackConfig from './webpack.config.iframe.prod'; +import webpackConfig from './webpack.config.iframe'; import { createPreviewEntry } from './entries'; -export async function webpack(_, options) { - return options.configType === 'PRODUCTION' - ? prodWebpackConfig(options) - : devWebpackConfig(options); -} +export const webpack = async (_, options) => webpackConfig(options); -export async function babel(_, options) { +export const babel = async (_, options) => { const { configDir, presets } = options; return loadCustomBabelConfig(configDir, () => - presets.apply( - 'babelDefault', - options.configType === 'PRODUCTION' ? prodBabelConfig : devBabelConfig, - options - ) + presets.apply('babelDefault', babelConfig(options), options) ); -} +}; -export async function entries(_, options) { +export const entries = async (_, options) => { let result = []; result = result.concat(await createPreviewEntry(options)); @@ -35,8 +25,6 @@ export async function entries(_, options) { } return result; -} +}; -export async function config(_, options) { - return loadCustomConfig(options); -} +export const config = async (_, options) => loadCustomConfig(options); diff --git a/lib/core/src/server/preview/webpack.config.iframe.dev.js b/lib/core/src/server/preview/webpack.config.iframe.dev.js deleted file mode 100644 index 7f6dcf913315..000000000000 --- a/lib/core/src/server/preview/webpack.config.iframe.dev.js +++ /dev/null @@ -1,93 +0,0 @@ -import path from 'path'; -import webpack from 'webpack'; -import Dotenv from 'dotenv-webpack'; -import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin'; -import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; -import HtmlWebpackPlugin from 'html-webpack-plugin'; - -import { - includePaths, - excludePaths, - nodeModulesPaths, - loadEnv, - nodePaths, - getBabelRuntimePath, -} from '../config/utils'; -import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template'; - -export default ({ configDir, babelOptions, entries, quiet, packageJson }) => { - const environment = loadEnv(); - - return { - name: 'iframe', - mode: 'development', - devtool: 'cheap-module-source-map', - entry: entries, - output: { - path: path.join(__dirname, '..', 'public'), - filename: '[name].bundle.js', - publicPath: '', - }, - plugins: [ - new HtmlWebpackPlugin({ - filename: `iframe.html`, - chunksSortMode: 'none', - alwaysWriteToDisk: true, - inject: false, - templateParameters: (compilation, files, options) => ({ - compilation, - files, - options, - version: packageJson.version, - headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), - bodyHtmlSnippet: getPreviewBodyHtml(), - }), - template: require.resolve(`../templates/index.ejs`), - }), - new webpack.DefinePlugin(environment), - new webpack.HotModuleReplacementPlugin(), - new CaseSensitivePathsPlugin(), - new WatchMissingNodeModulesPlugin(nodeModulesPaths), - quiet ? null : new webpack.ProgressPlugin(), - new Dotenv({ silent: true }), - ].filter(Boolean), - module: { - rules: [ - { - test: /\.(mjs|jsx?)$/, - use: [ - { - loader: 'babel-loader', - options: babelOptions, - }, - ], - include: includePaths, - exclude: excludePaths, - }, - { - test: /\.md$/, - use: [ - { - loader: require.resolve('raw-loader'), - }, - ], - }, - ], - }, - resolve: { - // Since we ship with json-loader always, it's better to move extensions to here - // from the default config. - extensions: ['.mjs', '.js', '.jsx', '.json'], - // Add support to NODE_PATH. With this we could avoid relative path imports. - // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253 - modules: ['node_modules'].concat(nodePaths), - mainFields: ['browser', 'main', 'module'], - alias: { - '@babel/runtime': getBabelRuntimePath(), - }, - }, - performance: { - hints: false, - }, - }; -}; diff --git a/lib/core/src/server/preview/webpack.config.iframe.prod.js b/lib/core/src/server/preview/webpack.config.iframe.js similarity index 76% rename from lib/core/src/server/preview/webpack.config.iframe.prod.js rename to lib/core/src/server/preview/webpack.config.iframe.js index 4abe5ccad2ab..1a1b69dc5ec0 100644 --- a/lib/core/src/server/preview/webpack.config.iframe.prod.js +++ b/lib/core/src/server/preview/webpack.config.iframe.js @@ -3,10 +3,12 @@ import webpack from 'webpack'; import Dotenv from 'dotenv-webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; +import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin'; import { includePaths, excludePaths, + nodeModulesPaths, loadEnv, nodePaths, getBabelRuntimePath, @@ -20,12 +22,14 @@ export default ({ outputDir = path.join('.', 'public'), quiet, packageJson, + configType, }) => { const environment = loadEnv({ production: true }); + const isProd = configType === 'PRODUCTION'; return { - mode: 'production', - bail: true, + mode: isProd ? 'production' : 'development', + bail: isProd, devtool: '#cheap-module-source-map', entry: entries, output: { @@ -50,7 +54,8 @@ export default ({ template: require.resolve(`../templates/index.ejs`), }), new webpack.DefinePlugin(environment), - new webpack.HotModuleReplacementPlugin(), + isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths), + isProd ? null : new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), quiet ? null : new webpack.ProgressPlugin(), new Dotenv({ silent: true }), @@ -79,11 +84,7 @@ export default ({ ], }, resolve: { - // Since we ship with json-loader always, it's better to move extensions to here - // from the default config. extensions: ['.mjs', '.js', '.jsx', '.json'], - // Add support to NODE_PATH. With this we could avoid relative path imports. - // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253 modules: ['node_modules'].concat(nodePaths), mainFields: ['browser', 'main', 'module'], alias: { @@ -91,14 +92,13 @@ export default ({ }, }, optimization: { - // Automatically split vendor and commons for preview bundle - // https://twitter.com/wSokra/status/969633336732905474 splitChunks: { - chunks: chunk => chunk.name !== 'manager', + chunks: 'all', }, - // Keep the runtime chunk separated to enable long term caching - // https://twitter.com/wSokra/status/969679223278505985 runtimeChunk: true, }, + performance: { + hints: isProd, + }, }; }; From 0477097ed8ea1d418a1b98ea0b66704a9b351d63 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 Oct 2018 19:35:55 +0200 Subject: [PATCH 12/25] FIX outputDir --- lib/core/src/server/dev-server.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 6863e61d2792..4b2d0953ba36 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -22,22 +22,18 @@ export const webpackValid = new Promise((resolve, reject) => { export default async function(options) { const environment = loadEnv(); - const { configDir, outputDir } = options; + const { configDir } = options; + const outputDir = path.resolve(options.outputDir || path.join(__dirname, '..', 'public')); const configType = 'DEVELOPMENT'; const managerStartTime = process.hrtime(); const managerPromise = childProcess - .exec( - `node ${path.join(__dirname, 'manager/webpack.js')} dir=${configDir} out=${path.resolve( - outputDir || path.join(__dirname, '..', 'public') - )}`, - { - env: { - NODE_ENV: 'production', - ...environment, - }, - } - ) + .exec(`node ${path.join(__dirname, 'manager/webpack.js')} dir=${configDir} out=${outputDir}`, { + env: { + NODE_ENV: 'production', + ...environment, + }, + }) .then(a => { const managerTotalTime = process.hrtime(managerStartTime); logger.trace({ message: 'manager built', time: managerTotalTime }); @@ -95,11 +91,11 @@ export default async function(options) { .then(([, iframeStats]) => { router.get('/', (request, response) => { response.set('Content-Type', 'text/html'); - response.sendFile(path.join(`${__dirname}/public/index.html`)); + response.sendFile(path.join(`${outputDir}/index.html`)); }); router.get(/(.+\.js)$/, (request, response) => { response.set('Content-Type', 'text/javascript '); - response.sendFile(path.join(`${__dirname}/public/${request.params[0]}`)); + response.sendFile(path.join(`${outputDir}/${request.params[0]}`)); }); webpackResolve(iframeStats); From baed1050fbfa43edaf356044a42e1f555bc7f6c9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 Oct 2018 23:02:05 +0200 Subject: [PATCH 13/25] REFACTOR --- lib/core/server.js | 2 +- lib/core/src/server/build-static.js | 3 +- lib/core/src/server/config.js | 4 +-- lib/core/src/server/config/utils.js | 25 ++++++++-------- lib/core/src/server/dev-server.js | 8 ++--- ...re-preset-manager.js => manager-preset.js} | 2 +- ...g.manager.js => manager-webpack.config.js} | 29 +++++-------------- lib/core/src/server/manager/webpack.js | 2 +- ...rame.default.js => base-webpack.config.js} | 4 +-- ...ack-custom.js => custom-webpack-preset.js} | 2 +- ...fig.iframe.js => iframe-webpack.config.js} | 9 +++--- ...re-preset-preview.js => preview-preset.js} | 2 +- 12 files changed, 39 insertions(+), 53 deletions(-) rename lib/core/src/server/manager/{core-preset-manager.js => manager-preset.js} (95%) rename lib/core/src/server/manager/{webpack.config.manager.js => manager-webpack.config.js} (66%) rename lib/core/src/server/preview/{webpack.config.iframe.default.js => base-webpack.config.js} (93%) rename lib/core/src/server/preview/{core-preset-webpack-custom.js => custom-webpack-preset.js} (95%) rename lib/core/src/server/preview/{webpack.config.iframe.js => iframe-webpack.config.js} (91%) rename lib/core/src/server/preview/{core-preset-preview.js => preview-preset.js} (94%) diff --git a/lib/core/server.js b/lib/core/server.js index 203ef5a01333..95d61363f855 100644 --- a/lib/core/server.js +++ b/lib/core/server.js @@ -1,4 +1,4 @@ -const defaultWebpackConfig = require('./dist/server/preview/webpack.config.iframe.default'); +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'); diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 4b854a2cb457..9f53b529f670 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -13,7 +13,7 @@ import { loadEnv } from './config/utils'; const defaultFavIcon = require.resolve('./public/favicon.ico'); export async function buildStaticStandalone(options) { - const { outputDir, staticDir, watch, configDir } = options; + const { outputDir, staticDir, watch, configDir, packageJson } = options; const environment = loadEnv(); // create output directory if not exists @@ -47,6 +47,7 @@ export async function buildStaticStandalone(options) { const config = await loadConfig({ configType: 'PRODUCTION', outputDir, + packageJson, corePresets: [require.resolve('./preview/core-preset-preview.js')], overridePresets: [require.resolve('./preview/core-preset-webpack-custom.js')], ...options, diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index 9df64d44344d..fa1ca3c991bd 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -29,7 +29,7 @@ export default async options => { const presetsConfig = [ ...corePresets, - require.resolve('./common/core-preset-babel-cache.js'), + require.resolve('./common/babel-cache-preset.js'), ...frameworkPresets, ...customPreset(options), ...overridePresets, @@ -52,7 +52,7 @@ export const managerOptions = async options => { const presetsConfig = [ ...corePresets, - require.resolve('./common/core-preset-babel-cache.js'), + require.resolve('./common/babel-cache-preset.js'), ...overridePresets, ]; diff --git a/lib/core/src/server/config/utils.js b/lib/core/src/server/config/utils.js index 84164cf582d6..8e4dc4c50bb5 100644 --- a/lib/core/src/server/config/utils.js +++ b/lib/core/src/server/config/utils.js @@ -2,38 +2,37 @@ import path from 'path'; import { getEnvironment } from 'lazy-universal-dotenv'; export const includePaths = [path.resolve('./')]; - -export const excludePaths = [path.resolve('node_modules')]; - export const nodeModulesPaths = path.resolve('./node_modules'); - -export const nodePaths = (process.env.NODE_PATH || '') - .split(process.platform === 'win32' ? ';' : ':') - .filter(Boolean) - .map(p => path.resolve('./', p)); +export const excludePaths = [nodeModulesPaths]; // Load environment variables starts with STORYBOOK_ to the client side. export function loadEnv(options = {}) { const defaultNodeEnv = options.production ? 'production' : 'development'; const env = { - NODE_ENV: JSON.stringify(process.env.NODE_ENV || defaultNodeEnv), + NODE_ENV: process.env.NODE_ENV || defaultNodeEnv, // This is to support CRA's public folder feature. // In production we set this to dot(.) to allow the browser to access these assets // even when deployed inside a subpath. (like in GitHub pages) // In development this is just empty as we always serves from the root. - PUBLIC_URL: JSON.stringify(options.production ? '.' : ''), + PUBLIC_URL: options.production ? '.' : '', }; Object.keys(process.env) .filter(name => /^STORYBOOK_/.test(name)) .forEach(name => { - env[name] = JSON.stringify(process.env[name]); + env[name] = process.env[name]; }); - const { stringified } = getEnvironment({ nodeEnv: JSON.parse(env.NODE_ENV) }); + const base = Object.entries(env).reduce( + (acc, [k, v]) => Object.assign(acc, { [k]: JSON.stringify(v) }), + {} + ); + + const { stringified, raw } = getEnvironment({ nodeEnv: env.NODE_ENV }); return { - 'process.env': Object.assign({}, env, stringified), + stringified: Object.assign({}, base, stringified), + raw: Object.assign({}, env, raw), }; } diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 4b2d0953ba36..e9bb86b5d64a 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -22,7 +22,7 @@ export const webpackValid = new Promise((resolve, reject) => { export default async function(options) { const environment = loadEnv(); - const { configDir } = options; + const configDir = path.resolve(options.configDir); const outputDir = path.resolve(options.outputDir || path.join(__dirname, '..', 'public')); const configType = 'DEVELOPMENT'; @@ -30,8 +30,8 @@ export default async function(options) { const managerPromise = childProcess .exec(`node ${path.join(__dirname, 'manager/webpack.js')} dir=${configDir} out=${outputDir}`, { env: { - NODE_ENV: 'production', ...environment, + NODE_ENV: 'production', }, }) .then(a => { @@ -44,8 +44,8 @@ export default async function(options) { const iframeConfig = await loadConfig({ configType, outputDir, - corePresets: [require.resolve('./preview/core-preset-preview.js')], - overridePresets: [require.resolve('./preview/core-preset-webpack-custom.js')], + corePresets: [require.resolve('./preview/preview-preset.js')], + overridePresets: [require.resolve('./preview/custom-webpack-preset.js')], ...options, }); diff --git a/lib/core/src/server/manager/core-preset-manager.js b/lib/core/src/server/manager/manager-preset.js similarity index 95% rename from lib/core/src/server/manager/core-preset-manager.js rename to lib/core/src/server/manager/manager-preset.js index 939ef1d79864..08b3c5260a15 100644 --- a/lib/core/src/server/manager/core-preset-manager.js +++ b/lib/core/src/server/manager/manager-preset.js @@ -1,7 +1,7 @@ import loadCustomBabelConfig from '../utils/load-custom-babel-config'; import loadCustomAddons from '../utils/load-custom-addons-file'; import loadCustomConfig from '../utils/load-custom-config-file'; -import createDevConfig from './webpack.config.manager'; +import createDevConfig from './manager-webpack.config'; import babelConfig from '../common/babel'; export async function managerWebpack(_, options) { diff --git a/lib/core/src/server/manager/webpack.config.manager.js b/lib/core/src/server/manager/manager-webpack.config.js similarity index 66% rename from lib/core/src/server/manager/webpack.config.manager.js rename to lib/core/src/server/manager/manager-webpack.config.js index 8eadfda116d8..95bdf0cf6c4d 100644 --- a/lib/core/src/server/manager/webpack.config.manager.js +++ b/lib/core/src/server/manager/manager-webpack.config.js @@ -6,16 +6,10 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import { version } from '../../../package.json'; import { getManagerHeadHtml } from '../utils/template'; -import { - includePaths, - excludePaths, - loadEnv, - nodePaths, - getBabelRuntimePath, -} from '../config/utils'; +import { excludePaths, loadEnv, getBabelRuntimePath } from '../config/utils'; export default ({ configDir, babelOptions, entries, outputDir }) => { - const environment = loadEnv(); + const { raw, stringified } = loadEnv(); return { name: 'manager', @@ -44,7 +38,7 @@ export default ({ configDir, babelOptions, entries, outputDir }) => { template: require.resolve(`../templates/index.ejs`), }), new HtmlWebpackHarddiskPlugin(), - new webpack.DefinePlugin(environment), + new webpack.DefinePlugin({ 'process.env': stringified }), new CaseSensitivePathsPlugin(), new Dotenv({ silent: true }), ], @@ -58,7 +52,6 @@ export default ({ configDir, babelOptions, entries, outputDir }) => { options: babelOptions, }, ], - include: includePaths, exclude: excludePaths, }, { @@ -72,24 +65,16 @@ export default ({ configDir, babelOptions, entries, outputDir }) => { ], }, resolve: { - // Since we ship with json-loader always, it's better to move extensions to here - // from the default config. extensions: ['.mjs', '.js', '.jsx', '.json'], - // Add support to NODE_PATH. With this we could avoid relative path imports. - // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253 - modules: ['node_modules'].concat(nodePaths), + modules: ['node_modules'].concat(raw.NODE_PATH ? raw.NODE_PATH : []), alias: { '@babel/runtime': getBabelRuntimePath(), }, }, optimization: { - // Automatically split vendor and commons for preview bundle - // https://twitter.com/wSokra/status/969633336732905474 - // splitChunks: { - // chunks: chunk => chunk.name !== 'manager', - // }, - // Keep the runtime chunk separated to enable long term caching - // https://twitter.com/wSokra/status/969679223278505985 + splitChunks: { + chunks: 'all', + }, runtimeChunk: true, }, }; diff --git a/lib/core/src/server/manager/webpack.js b/lib/core/src/server/manager/webpack.js index 5044a9afbdb6..507d7abec531 100644 --- a/lib/core/src/server/manager/webpack.js +++ b/lib/core/src/server/manager/webpack.js @@ -20,7 +20,7 @@ const good = new Console(process.stdout); loadConfig({ outputDir, configDir, - corePresets: [require.resolve('./core-preset-manager.js')], + corePresets: [require.resolve('./manager-preset.js')], }) .then(config => webpack(config)) .then( diff --git a/lib/core/src/server/preview/webpack.config.iframe.default.js b/lib/core/src/server/preview/base-webpack.config.js similarity index 93% rename from lib/core/src/server/preview/webpack.config.iframe.default.js rename to lib/core/src/server/preview/base-webpack.config.js index 4e1362300e72..ffaca936ab78 100644 --- a/lib/core/src/server/preview/webpack.config.iframe.default.js +++ b/lib/core/src/server/preview/base-webpack.config.js @@ -20,10 +20,10 @@ export function createDefaultWebpackConfig(storybookBaseConfig) { { loader: require.resolve('postcss-loader'), options: { - ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options + ident: 'postcss', postcss: {}, plugins: () => [ - require('postcss-flexbugs-fixes'), // eslint-disable-line + require('postcss-flexbugs-fixes'), // eslint-disable-line global-require autoprefixer({ flexbox: 'no-2009', }), diff --git a/lib/core/src/server/preview/core-preset-webpack-custom.js b/lib/core/src/server/preview/custom-webpack-preset.js similarity index 95% rename from lib/core/src/server/preview/core-preset-webpack-custom.js rename to lib/core/src/server/preview/custom-webpack-preset.js index c04bd36eb444..467d268902e7 100644 --- a/lib/core/src/server/preview/core-preset-webpack-custom.js +++ b/lib/core/src/server/preview/custom-webpack-preset.js @@ -1,7 +1,7 @@ import { logger } from '@storybook/node-logger'; import loadCustomWebpackConfig from '../utils/load-custom-webpack-config'; import mergeConfigs from '../utils/merge-webpack-config'; -import { createDefaultWebpackConfig } from './webpack.config.iframe.default'; +import { createDefaultWebpackConfig } from './base-webpack.config'; function logConfigName(defaultConfigName) { if (!defaultConfigName) { diff --git a/lib/core/src/server/preview/webpack.config.iframe.js b/lib/core/src/server/preview/iframe-webpack.config.js similarity index 91% rename from lib/core/src/server/preview/webpack.config.iframe.js rename to lib/core/src/server/preview/iframe-webpack.config.js index 1a1b69dc5ec0..7f9c0e802acb 100644 --- a/lib/core/src/server/preview/webpack.config.iframe.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -10,7 +10,6 @@ import { excludePaths, nodeModulesPaths, loadEnv, - nodePaths, getBabelRuntimePath, } from '../config/utils'; import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template'; @@ -24,9 +23,11 @@ export default ({ packageJson, configType, }) => { - const environment = loadEnv({ production: true }); + const { raw, stringified } = loadEnv({ production: true }); const isProd = configType === 'PRODUCTION'; + console.log({ raw }); + return { mode: isProd ? 'production' : 'development', bail: isProd, @@ -53,7 +54,7 @@ export default ({ }), template: require.resolve(`../templates/index.ejs`), }), - new webpack.DefinePlugin(environment), + new webpack.DefinePlugin({ 'process.env': stringified }), isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths), isProd ? null : new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), @@ -85,7 +86,7 @@ export default ({ }, resolve: { extensions: ['.mjs', '.js', '.jsx', '.json'], - modules: ['node_modules'].concat(nodePaths), + modules: ['node_modules'].concat(raw.NODE_PATH ? raw.NODE_PATH : []), mainFields: ['browser', 'main', 'module'], alias: { '@babel/runtime': getBabelRuntimePath(), diff --git a/lib/core/src/server/preview/core-preset-preview.js b/lib/core/src/server/preview/preview-preset.js similarity index 94% rename from lib/core/src/server/preview/core-preset-preview.js rename to lib/core/src/server/preview/preview-preset.js index 8c367427cad8..d2c56e182579 100644 --- a/lib/core/src/server/preview/core-preset-preview.js +++ b/lib/core/src/server/preview/preview-preset.js @@ -2,7 +2,7 @@ import loadCustomBabelConfig from '../utils/load-custom-babel-config'; import loadCustomConfig from '../utils/load-custom-config-file'; import babelConfig from '../common/babel'; -import webpackConfig from './webpack.config.iframe'; +import webpackConfig from './iframe-webpack.config'; import { createPreviewEntry } from './entries'; export const webpack = async (_, options) => webpackConfig(options); From 27f096d54a0198ca0b61248d14cfe5afdc147506 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 27 Oct 2018 17:34:21 +0200 Subject: [PATCH 14/25] FIX attempt --- addons/ondevice-knobs/package.json | 2 +- addons/storyshots/storyshots-puppeteer/package.json | 2 +- app/angular/src/server/framework-preset-angular.js | 2 +- lib/cli/test/fixtures/react_babel_config_js/package.json | 2 +- lib/cli/test/fixtures/react_babel_custom_preset/package.json | 2 +- lib/cli/test/fixtures/react_babel_pkg_json/package.json | 2 +- lib/cli/test/fixtures/react_babelrc/package.json | 2 +- lib/cli/test/fixtures/react_babelrc_js/package.json | 2 +- lib/core/src/server/presets.js | 2 +- lib/core/src/server/preview/iframe-webpack.config.js | 2 -- package.json | 5 +++-- 11 files changed, 12 insertions(+), 13 deletions(-) diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json index d318facb533f..dea1a801cc01 100644 --- a/addons/ondevice-knobs/package.json +++ b/addons/ondevice-knobs/package.json @@ -32,7 +32,7 @@ "react-native-switch": "^1.5.0" }, "peerDependencies": { - "@storybook/addon-knobs": "4.0.0-rc.3", + "@storybook/addon-knobs": "4.0.0-rc.6", "react": "*", "react-native": "*" } diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index 738ecdb6d49e..fd3eeaa8fe8a 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/addons/storyshots/storyshots-puppeteer/package.json @@ -30,6 +30,6 @@ "puppeteer": "^1.9.0" }, "peerDependencies": { - "@storybook/addon-storyshots": "4.0.0-rc.3" + "@storybook/addon-storyshots": "4.0.0-rc.6" } } diff --git a/app/angular/src/server/framework-preset-angular.js b/app/angular/src/server/framework-preset-angular.js index 882e212caecb..25610953b3b8 100644 --- a/app/angular/src/server/framework-preset-angular.js +++ b/app/angular/src/server/framework-preset-angular.js @@ -38,7 +38,7 @@ export function webpack(config, { configDir }) { }, resolve: { ...config.resolve, - extensions: [...config.resolve.extensions, '.ts', '.tsx'], + extensions: ['.ts', '.tsx', ...config.resolve.extensions], }, plugins: [ ...config.plugins, diff --git a/lib/cli/test/fixtures/react_babel_config_js/package.json b/lib/cli/test/fixtures/react_babel_config_js/package.json index cb7a8cbc58f4..973bf49ec4d2 100644 --- a/lib/cli/test/fixtures/react_babel_config_js/package.json +++ b/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-rc.3" + "@storybook/react": "^4.0.0-rc.6" } } diff --git a/lib/cli/test/fixtures/react_babel_custom_preset/package.json b/lib/cli/test/fixtures/react_babel_custom_preset/package.json index fc28e7299755..2b73143eda28 100644 --- a/lib/cli/test/fixtures/react_babel_custom_preset/package.json +++ b/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-rc.3" + "@storybook/react": "^4.0.0-rc.6" } } diff --git a/lib/cli/test/fixtures/react_babel_pkg_json/package.json b/lib/cli/test/fixtures/react_babel_pkg_json/package.json index a3a5deda2ffd..06de8f33f688 100644 --- a/lib/cli/test/fixtures/react_babel_pkg_json/package.json +++ b/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-rc.3" + "@storybook/react": "^4.0.0-rc.6" }, "babel": { "plugins": ["@babel/plugin-proposal-optional-chaining"] diff --git a/lib/cli/test/fixtures/react_babelrc/package.json b/lib/cli/test/fixtures/react_babelrc/package.json index 037dc6071a6d..509cf733839b 100644 --- a/lib/cli/test/fixtures/react_babelrc/package.json +++ b/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-rc.3" + "@storybook/react": "^4.0.0-rc.6" } } diff --git a/lib/cli/test/fixtures/react_babelrc_js/package.json b/lib/cli/test/fixtures/react_babelrc_js/package.json index cb799c47adc1..1a620f977b66 100644 --- a/lib/cli/test/fixtures/react_babelrc_js/package.json +++ b/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-rc.3" + "@storybook/react": "^4.0.0-rc.6" } } diff --git a/lib/core/src/server/presets.js b/lib/core/src/server/presets.js index ae8c7e6cf26d..68666de79734 100644 --- a/lib/core/src/server/presets.js +++ b/lib/core/src/server/presets.js @@ -2,7 +2,7 @@ import { logger } from '@storybook/node-logger'; function interopRequireDefault(filePath) { // eslint-disable-next-line global-require,import/no-dynamic-require - const result = require(filePath); + const result = require(`${filePath}`); const isES6DefaultExported = typeof result === 'object' && result !== null && typeof result.default !== 'undefined'; diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js index 7f9c0e802acb..6a30f6432fb6 100644 --- a/lib/core/src/server/preview/iframe-webpack.config.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -26,8 +26,6 @@ export default ({ const { raw, stringified } = loadEnv({ production: true }); const isProd = configType === 'PRODUCTION'; - console.log({ raw }); - return { mode: isProd ? 'production' : 'development', bail: isProd, diff --git a/package.json b/package.json index 848dfd7862de..fbe548471c9f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "4.0.0-rc.3", + "version": "4.0.0-rc.6", "private": true, "repository": { "type": "git", @@ -42,7 +42,8 @@ "repo-dirty-check": "node ./scripts/repo-dirty-check", "start": "yarn --cwd examples/official-storybook storybook", "test": "node ./scripts/test.js", - "test-latest-cra": "npm --prefix lib/cli run test-latest-cra" + "test-latest-cra": "npm --prefix lib/cli run test-latest-cra", + "test:cli": "npm --prefix lib/cli run test" }, "devDependencies": { "@angular/common": "^7.0.1", From 3a0f9c94b96512b6e84b527d5de42da1aa212854 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sun, 28 Oct 2018 12:18:20 +0200 Subject: [PATCH 15/25] Fix paths to the renamed presets --- lib/core/src/server/build-static.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 9f53b529f670..ece8cc21ae14 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -48,8 +48,8 @@ export async function buildStaticStandalone(options) { configType: 'PRODUCTION', outputDir, packageJson, - corePresets: [require.resolve('./preview/core-preset-preview.js')], - overridePresets: [require.resolve('./preview/core-preset-webpack-custom.js')], + corePresets: [require.resolve('./preview/preview-preset.js')], + overridePresets: [require.resolve('./preview/custom-webpack-preset.js')], ...options, }); From 76a866019ce890d226831ad83ee8ba0f5c95d759 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sun, 28 Oct 2018 12:20:22 +0200 Subject: [PATCH 16/25] Remove unneeded extensions from the manager-preset.js --- lib/core/src/server/manager/manager-preset.js | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/lib/core/src/server/manager/manager-preset.js b/lib/core/src/server/manager/manager-preset.js index 08b3c5260a15..91956f8b1531 100644 --- a/lib/core/src/server/manager/manager-preset.js +++ b/lib/core/src/server/manager/manager-preset.js @@ -1,21 +1,10 @@ -import loadCustomBabelConfig from '../utils/load-custom-babel-config'; import loadCustomAddons from '../utils/load-custom-addons-file'; -import loadCustomConfig from '../utils/load-custom-config-file'; import createDevConfig from './manager-webpack.config'; -import babelConfig from '../common/babel'; export async function managerWebpack(_, options) { return createDevConfig(options); } -export async function managerBabel(_, options) { - const { configDir, presets } = options; - - return loadCustomBabelConfig(configDir, () => - presets.apply('babelDefault', babelConfig(options), options) - ); -} - export async function managerEntries(_, options) { const { presets } = options; const entries = [require.resolve('../common/polyfills')]; @@ -34,7 +23,3 @@ export async function managerEntries(_, options) { export async function addons(_, options) { return loadCustomAddons(options); } - -export async function config(_, options) { - return loadCustomConfig(options); -} From 78dd7063edd1377e269e557d2d766dc0c27c6c66 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sun, 28 Oct 2018 12:50:15 +0200 Subject: [PATCH 17/25] Extract manager-config out to the manager dir + use custom-presets in manager-config because we should allow addons extension --- lib/core/src/server/common/custom-presets.js | 17 ++++++++ lib/core/src/server/config.js | 41 +------------------ lib/core/src/server/manager/manager-config.js | 23 +++++++++++ .../server/manager/manager-webpack.config.js | 3 +- lib/core/src/server/manager/webpack.js | 6 +-- 5 files changed, 46 insertions(+), 44 deletions(-) create mode 100644 lib/core/src/server/common/custom-presets.js create mode 100644 lib/core/src/server/manager/manager-config.js diff --git a/lib/core/src/server/common/custom-presets.js b/lib/core/src/server/common/custom-presets.js new file mode 100644 index 000000000000..aeabe5b9cb5a --- /dev/null +++ b/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 []; +} diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index fa1ca3c991bd..2c67e1fffcf4 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -1,21 +1,5 @@ -import path from 'path'; -import { logger } from '@storybook/node-logger'; import loadPresets from './presets'; -import serverRequire from './utils/server-require'; - -function customPreset({ 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 []; -} +import loadCustomPresets from './common/custom-presets'; async function getPreviewWebpackConfig(options, presets) { const babelOptions = await presets.apply('babel', {}, options); @@ -31,7 +15,7 @@ export default async options => { ...corePresets, require.resolve('./common/babel-cache-preset.js'), ...frameworkPresets, - ...customPreset(options), + ...loadCustomPresets(options), ...overridePresets, ]; @@ -39,24 +23,3 @@ export default async options => { return getPreviewWebpackConfig({ ...restOptions, presets }, presets); }; - -async function getManagerWebpackConfig(options, presets) { - const babelOptions = undefined; - const entries = await presets.apply('managerEntries', [], options); - - return presets.apply('managerWebpack', {}, { ...options, babelOptions, entries }); -} - -export const managerOptions = async options => { - const { corePresets = [], overridePresets = [], ...restOptions } = options; - - const presetsConfig = [ - ...corePresets, - require.resolve('./common/babel-cache-preset.js'), - ...overridePresets, - ]; - - const presets = loadPresets(presetsConfig); - - return getManagerWebpackConfig({ ...restOptions, presets }, presets); -}; diff --git a/lib/core/src/server/manager/manager-config.js b/lib/core/src/server/manager/manager-config.js new file mode 100644 index 000000000000..50e4b6510d7b --- /dev/null +++ b/lib/core/src/server/manager/manager-config.js @@ -0,0 +1,23 @@ +import loadPresets from '../presets'; +import loadCustomPresets from '../common/custom-presets'; + +async function getManagerWebpackConfig(options, presets) { + const entries = await presets.apply('managerEntries', [], options); + + return presets.apply('managerWebpack', {}, { ...options, entries }); +} + +export default async options => { + const { corePresets = [], overridePresets = [], ...restOptions } = options; + + const presetsConfig = [ + ...corePresets, + require.resolve('../common/babel-cache-preset.js'), + ...loadCustomPresets(options), + ...overridePresets, + ]; + + const presets = loadPresets(presetsConfig); + + return getManagerWebpackConfig({ ...restOptions, presets }, presets); +}; diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js index 95bdf0cf6c4d..41fb780f2014 100644 --- a/lib/core/src/server/manager/manager-webpack.config.js +++ b/lib/core/src/server/manager/manager-webpack.config.js @@ -8,7 +8,7 @@ import { version } from '../../../package.json'; import { getManagerHeadHtml } from '../utils/template'; import { excludePaths, loadEnv, getBabelRuntimePath } from '../config/utils'; -export default ({ configDir, babelOptions, entries, outputDir }) => { +export default ({ configDir, entries, outputDir }) => { const { raw, stringified } = loadEnv(); return { @@ -49,7 +49,6 @@ export default ({ configDir, babelOptions, entries, outputDir }) => { use: [ { loader: 'babel-loader', - options: babelOptions, }, ], exclude: excludePaths, diff --git a/lib/core/src/server/manager/webpack.js b/lib/core/src/server/manager/webpack.js index 507d7abec531..2fcd1fea4d3b 100644 --- a/lib/core/src/server/manager/webpack.js +++ b/lib/core/src/server/manager/webpack.js @@ -1,7 +1,7 @@ import console from 'console'; - import webpack from 'webpack'; -import { managerOptions as loadConfig } from '../config'; + +import loadManagerConfig from './manager-config'; const { Console } = console; @@ -17,7 +17,7 @@ const outputDir = process.argv.reduce( const bad = new Console(process.stderr); const good = new Console(process.stdout); -loadConfig({ +loadManagerConfig({ outputDir, configDir, corePresets: [require.resolve('./manager-preset.js')], From d20e8c68eafad28f30ef01f85b8b939f9c57d1a5 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sun, 28 Oct 2018 14:18:40 +0200 Subject: [PATCH 18/25] Fox performance.hints issue --- lib/core/src/server/dev-server.js | 2 ++ lib/core/src/server/preview/iframe-webpack.config.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index e9bb86b5d64a..a06b2a0db59a 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -27,6 +27,8 @@ export default async function(options) { const configType = 'DEVELOPMENT'; const managerStartTime = process.hrtime(); + + // TODO: can we pass here the JSON.stringify(option) const managerPromise = childProcess .exec(`node ${path.join(__dirname, 'manager/webpack.js')} dir=${configDir} out=${outputDir}`, { env: { diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js index 6a30f6432fb6..0dd6bcc60b79 100644 --- a/lib/core/src/server/preview/iframe-webpack.config.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -97,7 +97,7 @@ export default ({ runtimeChunk: true, }, performance: { - hints: isProd, + hints: isProd ? 'warning' : false, }, }; }; From a0a2bdfc70147afe41615fb3862d0200def9ab86 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sun, 28 Oct 2018 14:49:16 +0200 Subject: [PATCH 19/25] babel-preset-minify is a preset, not a plugin =) --- lib/core/src/server/common/babel.js | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/lib/core/src/server/common/babel.js b/lib/core/src/server/common/babel.js index 72799541ae7d..c0ed09f6e925 100644 --- a/lib/core/src/server/common/babel.js +++ b/lib/core/src/server/common/babel.js @@ -1,8 +1,21 @@ +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')]], + presets: [require.resolve('@babel/preset-env'), ...prodPresets], plugins: [ require.resolve('babel-plugin-macros'), require.resolve('@babel/plugin-transform-regenerator'), @@ -14,15 +27,6 @@ export default ({ configType }) => { regenerator: true, }, ], - isProd - ? [ - require.resolve('babel-preset-minify'), - { - builtIns: false, - mangle: false, - }, - ] - : null, - ].filter(Boolean), + ], }; }; From c962d9065a22bd26097089553d2a9016a8ae6b8c Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sun, 28 Oct 2018 15:10:13 +0200 Subject: [PATCH 20/25] Fix warning in angular. --- app/angular/src/server/framework-preset-angular.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/angular/src/server/framework-preset-angular.js b/app/angular/src/server/framework-preset-angular.js index 25610953b3b8..714d9fb5a20f 100644 --- a/app/angular/src/server/framework-preset-angular.js +++ b/app/angular/src/server/framework-preset-angular.js @@ -44,7 +44,7 @@ export function webpack(config, { configDir }) { ...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), From d53e59774d94efcdba3995f64da0aa62e3671f99 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sun, 28 Oct 2018 16:45:49 +0200 Subject: [PATCH 21/25] Temp fix for RIOT --- app/riot/src/server/framework-preset-riot.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/riot/src/server/framework-preset-riot.js b/app/riot/src/server/framework-preset-riot.js index d7a5786502da..820e02e015d2 100644 --- a/app/riot/src/server/framework-preset-riot.js +++ b/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', + }, + }, }; } From 0e01e76a7184b41b48b367ffddd50851db3764cd Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sat, 3 Nov 2018 14:04:08 +0200 Subject: [PATCH 22/25] Remove the unneeded comment --- app/angular/src/server/angular-cli_config.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js index b18519832f46..d7397ff00bb8 100644 --- a/app/angular/src/server/angular-cli_config.js +++ b/app/angular/src/server/angular-cli_config.js @@ -106,9 +106,6 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions const entry = [ ...baseConfig.entry, ...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 = { From 17674057d22a1c93ad452c3d7da8374d2bb6fb52 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Tue, 6 Nov 2018 18:03:30 +0200 Subject: [PATCH 23/25] Remove "quiet" from RN smoke tests - quiet is not supported there --- .circleci/config.yml | 2 +- .../buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 8cc1ca4a166f..76cc6666676d 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -179,7 +179,7 @@ jobs: name: Run React-Native-App example command: | cd examples-native/crna-kitchen-sink - yarn storybook --smoke-test --quiet + yarn storybook --smoke-test docs: <<: *defaults steps: diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt index 6c1719f737e3..d1e3319c8d98 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt +++ b/.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 --quiet + yarn storybook --smoke-test """.trimIndent() dockerImage = "node:%docker.node.version%" } From 31e46a31806ea37881362b89d390505b36dba261 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Nov 2018 09:46:31 +0100 Subject: [PATCH 24/25] FIX the babel6 test --- .babelrc | 53 ------------------- .babelrc.js | 46 ++++++++++++++++ .../server/manager/manager-webpack.config.js | 6 ++- 3 files changed, 50 insertions(+), 55 deletions(-) delete mode 100644 .babelrc create mode 100644 .babelrc.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 9731c81d6927..000000000000 --- a/.babelrc +++ /dev/null @@ -1,53 +0,0 @@ -{ - "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" - } - } - ] - ] - } - ] -} diff --git a/.babelrc.js b/.babelrc.js new file mode 100644 index 000000000000..8db0608b032f --- /dev/null +++ b/.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', + }, + }, + ], + ], + }, + ], +}; diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js index 41fb780f2014..a46844361b84 100644 --- a/lib/core/src/server/manager/manager-webpack.config.js +++ b/lib/core/src/server/manager/manager-webpack.config.js @@ -6,11 +6,13 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import { version } from '../../../package.json'; import { getManagerHeadHtml } from '../utils/template'; -import { excludePaths, loadEnv, getBabelRuntimePath } from '../config/utils'; +import { loadEnv, getBabelRuntimePath } from '../config/utils'; export default ({ configDir, entries, outputDir }) => { const { raw, stringified } = loadEnv(); + const exclude = /node_modules/; + return { name: 'manager', mode: 'production', @@ -51,7 +53,7 @@ export default ({ configDir, entries, outputDir }) => { loader: 'babel-loader', }, ], - exclude: excludePaths, + exclude, }, { test: /\.md$/, From e93d9f3d59a1be09ea7b0380eb644d439b1dd5f0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 10 Nov 2018 11:48:08 +0100 Subject: [PATCH 25/25] FIX chromatic by removing some index.html files and correcting the location of static files --- examples/angular-cli/package.json | 2 +- .../angular-cli/src/{ => assets}/favicon.ico | Bin examples/cra-kitchen-sink/public/index.html | 31 ------------------ .../svelte-kitchen-sink/public/index.html | 31 ------------------ examples/vue-kitchen-sink/public/index.html | 31 ------------------ 5 files changed, 1 insertion(+), 94 deletions(-) rename examples/angular-cli/src/{ => assets}/favicon.ico (100%) delete mode 100644 examples/cra-kitchen-sink/public/index.html delete mode 100644 examples/svelte-kitchen-sink/public/index.html delete mode 100644 examples/vue-kitchen-sink/public/index.html diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 7f3726104224..eedbd8cc1159 100644 --- a/examples/angular-cli/package.json +++ b/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", diff --git a/examples/angular-cli/src/favicon.ico b/examples/angular-cli/src/assets/favicon.ico similarity index 100% rename from examples/angular-cli/src/favicon.ico rename to examples/angular-cli/src/assets/favicon.ico diff --git a/examples/cra-kitchen-sink/public/index.html b/examples/cra-kitchen-sink/public/index.html deleted file mode 100644 index aab5e3b00ce4..000000000000 --- a/examples/cra-kitchen-sink/public/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - React App - - -
- - - diff --git a/examples/svelte-kitchen-sink/public/index.html b/examples/svelte-kitchen-sink/public/index.html deleted file mode 100644 index 605ba2f12207..000000000000 --- a/examples/svelte-kitchen-sink/public/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - Svelte App - - -
- - - diff --git a/examples/vue-kitchen-sink/public/index.html b/examples/vue-kitchen-sink/public/index.html deleted file mode 100644 index aab5e3b00ce4..000000000000 --- a/examples/vue-kitchen-sink/public/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - React App - - -
- - -