From 83a18008f29ed05b87dcc04f2c4b48ab58fc24ee Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 19 Nov 2018 17:21:53 +0100 Subject: [PATCH 01/25] CHANGE webpack configs, dev & static build for performance Changelog formatting Bump @storybook/addon-actions from 4.0.0 to 4.0.8 in /docs Bumps [@storybook/addon-actions](https://github.com/storybooks/storybook) from 4.0.0 to 4.0.8. - [Release notes](https://github.com/storybooks/storybook/releases) - [Changelog](https://github.com/storybooks/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybooks/storybook/compare/v4.0.0...v4.0.8) Signed-off-by: dependabot[bot] update `npm install` to match current requirements Add TypeScript support for react-scripts 4.1.0-alpha.5 changelog v4.1.0-alpha.5 4.1.0-alpha.6 changelog v4.1.0-alpha.6 Reduce jest image size 4.1.0-alpha.7 changelog v4.1.0-alpha.7 ADD webpack stats generation for debugging Revert "Update LICENSE" This reverts commit 69fc0517074634dd792f4b10d968a6c3a8244842. Don't change rootElement when received node is the same Merge pull request #4830 from aliceyoung9/patch-1 little documentation fix FIX linting --- .babelrc.js | 9 ++- .eslintignore | 1 + .eslintrc.js | 6 ++ .gitignore | 1 + addons/backgrounds/package.json | 1 + .../src/__tests__/BackgroundPanel.js | 2 +- lib/core/package.json | 1 + lib/core/src/client/preview/story_store.js | 2 +- lib/core/src/server/build-dev.js | 25 ++++++- lib/core/src/server/build-static.js | 15 ++++- lib/core/src/server/dev-server.js | 52 +++++++------- lib/core/src/server/manager/manager-preset.js | 3 +- .../server/manager/manager-webpack.config.js | 49 ++++++-------- .../server/preview/iframe-webpack.config.js | 1 + lib/core/src/server/templates/index.ejs | 4 ++ lib/ui/dll/config.js | 67 +++++++++++++++++++ lib/ui/dll/script.js | 62 +++++++++++++++++ lib/ui/package.json | 11 +-- lib/ui/src/modules/api/configs/init_api.js | 2 +- .../ui/components/menu_item.stories.js | 4 +- .../ui/components/search_box.stories.js | 4 +- .../ui/components/shortcuts_help.stories.js | 4 +- .../components/stories_panel/index.stories.js | 4 +- .../stories_tree/index.stories.js | 2 +- .../stories_panel/text_filter.stories.js | 4 +- package.json | 1 + scripts/compile-js.js | 2 +- yarn.lock | 5 ++ 28 files changed, 262 insertions(+), 82 deletions(-) create mode 100644 lib/ui/dll/config.js create mode 100644 lib/ui/dll/script.js diff --git a/.babelrc.js b/.babelrc.js index 8db0608b032..2f4571869b5 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -1,9 +1,14 @@ module.exports = { - presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'], + presets: [ + ['@babel/preset-env', { shippedProposals: true }], + '@babel/preset-react', + '@babel/preset-flow', + ], plugins: [ 'babel-plugin-emotion', 'babel-plugin-macros', '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-export-default-from', [ '@babel/plugin-transform-runtime', @@ -20,7 +25,7 @@ module.exports = { overrides: [ { test: './examples/vue-kitchen-sink', - presets: ['@babel/preset-env', 'babel-preset-vue'], + presets: [['@babel/preset-env', { shippedProposals: true }], 'babel-preset-vue'], }, { test: [ diff --git a/.eslintignore b/.eslintignore index 73f2bb84a21..a8c48aefad8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,5 @@ dist +lib/ui/dll build coverage node_modules diff --git a/.eslintrc.js b/.eslintrc.js index 917bf9b0070..6de2f6ae78b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -123,6 +123,12 @@ module.exports = { ], }, overrides: [ + { + files: ['**/__tests__/**', '**/*.test.js/**', '**/*.spec.js/**'], + rules: { + 'import/no-extraneous-dependencies': ignore, + }, + }, { files: ['**/react-native*/**', '**/REACT_NATIVE*/**', '**/crna*/**'], rules: { diff --git a/.gitignore b/.gitignore index a1bdccd96d1..e52abde7a47 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ integration/__image_snapshots__/__diff_output__ .jest-test-results.json /examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/ lib/*.jar +lib/ui/dll diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json index 97e41f90767..88c7d5a7e71 100644 --- a/addons/backgrounds/package.json +++ b/addons/backgrounds/package.json @@ -30,6 +30,7 @@ "@emotion/styled": "^0.10.6", "@storybook/addons": "4.1.0-alpha.7", "@storybook/core-events": "4.1.0-alpha.7", + "eventemitter3": "^3.1.0", "global": "^4.3.2", "prop-types": "^15.6.2", "util-deprecate": "^1.0.2" diff --git a/addons/backgrounds/src/__tests__/BackgroundPanel.js b/addons/backgrounds/src/__tests__/BackgroundPanel.js index 6cdee1c901b..c1591f48392 100644 --- a/addons/backgrounds/src/__tests__/BackgroundPanel.js +++ b/addons/backgrounds/src/__tests__/BackgroundPanel.js @@ -1,6 +1,6 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; -import EventEmitter from 'events'; +import EventEmitter from 'eventemitter3'; import BackgroundPanel from '../BackgroundPanel'; import Events from '../constants'; diff --git a/lib/core/package.json b/lib/core/package.json index fb44097e774..64ef36f1fe9 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -53,6 +53,7 @@ "detect-port": "^1.2.3", "dotenv-webpack": "^1.5.7", "ejs": "^2.6.1", + "eventemitter3": "^3.1.0", "express": "^4.16.3", "file-loader": "^2.0.0", "file-system-cache": "^1.0.5", diff --git a/lib/core/src/client/preview/story_store.js b/lib/core/src/client/preview/story_store.js index cb96b7b6ca9..a2b5498105e 100644 --- a/lib/core/src/client/preview/story_store.js +++ b/lib/core/src/client/preview/story_store.js @@ -1,5 +1,5 @@ /* eslint no-underscore-dangle: 0 */ -import { EventEmitter } from 'events'; +import EventEmitter from 'eventemitter3'; import Events from '@storybook/core-events'; let count = 0; diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js index 3956fc8e072..1c3796e3d76 100644 --- a/lib/core/src/server/build-dev.js +++ b/lib/core/src/server/build-dev.js @@ -21,8 +21,9 @@ import { getDevCli } from './cli'; const defaultFavIcon = require.resolve('./public/favicon.ico'); +const cacheDir = findCacheDir({ name: 'storybook' }); const cache = Cache({ - basePath: findCacheDir({ name: 'storybook' }), + basePath: cacheDir, ns: 'storybook', // Optional. A grouping namespace for items. }); @@ -52,6 +53,7 @@ function getServer(app, options) { function applyStatic(app, options) { const { staticDir } = options; + let hasCustomFavicon = false; if (staticDir) { @@ -139,11 +141,20 @@ export async function buildDevStandalone(options) { const app = express(); const server = getServer(app, options); + app.use( + '/sb_dll', + express.static( + path.join(require.resolve('@storybook/ui/package.json').replace('package.json', ''), 'dll'), + { index: false } + ) + ); + applyStatic(app, options); const storybookMiddleware = await storybook(options); app.use(storybookMiddleware); + // ; const serverListening = listenToServer(server, listenAddr); @@ -224,6 +235,18 @@ export async function buildDevStandalone(options) { ); if (options.smokeTest) { + fs.writeFileSync( + path.join(cacheDir, 'preview-stats.json'), + JSON.stringify(iframeStats.toJson(), null, 2), + 'utf8' + ); + fs.writeFileSync( + path.join(cacheDir, 'manager-stats.json'), + JSON.stringify(managerStats.toJson(), null, 2), + 'utf8' + ); + logger.info(`stats written to => ${chalk.cyan(path.join(cacheDir, '[name].json'))}`); + process.exit(iframeStats.toJson().warnings.length ? 1 : 0); process.exit(managerStats.toJson().warnings.length ? 1 : 0); } else if (!options.ci) { diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 3a687852762..31680aa3edb 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -17,12 +17,22 @@ export async function buildStaticStandalone(options) { const configType = 'PRODUCTION'; const outputDir = path.join(process.cwd(), options.outputDir); + const dllPath = require + .resolve('@storybook/ui/package.json') + .replace('/package.json', '/dll/storybook_ui_dll.js'); + // create output directory if not exists shelljs.mkdir('-p', outputDir); - // clear the static dir + shelljs.mkdir('-p', path.join(outputDir, 'sb_dll')); + + logger.info('clean outputDir..'); shelljs.rm('-rf', path.join(outputDir, 'static')); + shelljs.cp(defaultFavIcon, outputDir); + logger.info('copy dll..'); + shelljs.cp(dllPath, path.join(outputDir, 'sb_dll')); + logger.info('building manager..'); const managerStartTime = process.hrtime(); @@ -58,8 +68,6 @@ export async function buildStaticStandalone(options) { ...options, }); - // config.output.path = path.resolve(outputDir); - // copy all static files if (staticDir) { staticDir.forEach(dir => { @@ -89,6 +97,7 @@ export async function buildStaticStandalone(options) { const previewTotalTime = process.hrtime(previewStartTime); logger.trace({ message: 'preview built', time: previewTotalTime }); + logger.info(`output directory: ${outputDir}`); return resolve(stats); }; diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 10766dfb4eb..d1ec366677a 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -18,47 +18,53 @@ export const webpackValid = new Promise((resolve, reject) => { webpackReject = reject; }); +const cache = {}; + export default async function(options) { const configDir = path.resolve(options.configDir); const outputDir = path.resolve(options.outputDir || path.join(__dirname, '..', 'public')); const configType = 'DEVELOPMENT'; - const managerStartTime = process.hrtime(); + const startTime = process.hrtime(); let managerTotalTime; + let iframeTotalTime; - const managerConfig = await loadManagerConfig({ + const managerPromise = loadManagerConfig({ configType, outputDir, configDir, + cache, corePresets: [require.resolve('./manager/manager-preset.js')], - }); + }).then( + config => + new Promise((res, rej) => { + webpack(config).watch( + { + aggregateTimeout: 1, + ignored: /node_modules/, + }, + (err, stats) => { + managerTotalTime = process.hrtime(startTime); + + if (err || stats.hasErrors()) { + rej(stats); + } else { + res(stats); + } + } + ); + }) + ); const iframeConfig = await loadConfig({ configType, outputDir, + // cache, corePresets: [require.resolve('./preview/preview-preset.js')], overridePresets: [require.resolve('./preview/custom-webpack-preset.js')], ...options, }); - const managerPromise = new Promise((res, rej) => { - webpack(managerConfig).watch( - { - aggregateTimeout: 1, - ignored: /node_modules/, - }, - (err, stats) => { - managerTotalTime = process.hrtime(managerStartTime); - - if (err || stats.hasErrors()) { - rej(stats); - } else { - res(stats); - } - } - ); - }); - const middlewareFn = getMiddleware(configDir); // remove the leading '/' @@ -67,8 +73,6 @@ export default async function(options) { publicPath = publicPath.slice(1); } - const iframeStartTime = process.hrtime(); - let iframeTotalTime; const iframeCompiler = webpack(iframeConfig); const devMiddlewareOptions = { publicPath: iframeConfig.output.publicPath, @@ -94,7 +98,7 @@ export default async function(options) { const iframePromise = new Promise((res, rej) => { webpackDevMiddlewareInstance.waitUntilValid(stats => { - iframeTotalTime = process.hrtime(iframeStartTime); + iframeTotalTime = process.hrtime(startTime); if (stats.hasErrors()) { rej(stats); diff --git a/lib/core/src/server/manager/manager-preset.js b/lib/core/src/server/manager/manager-preset.js index 91956f8b153..3f3a2145d13 100644 --- a/lib/core/src/server/manager/manager-preset.js +++ b/lib/core/src/server/manager/manager-preset.js @@ -7,7 +7,8 @@ export async function managerWebpack(_, options) { export async function managerEntries(_, options) { const { presets } = options; - const entries = [require.resolve('../common/polyfills')]; + // const entries = [require.resolve('../common/polyfills')]; + const entries = []; const installedAddons = await presets.apply('addons', [], options); diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js index a4036684233..62e7d912cb9 100644 --- a/lib/core/src/server/manager/manager-webpack.config.js +++ b/lib/core/src/server/manager/manager-webpack.config.js @@ -1,22 +1,27 @@ +import path from 'path'; import webpack from 'webpack'; 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 findCacheDir from 'find-cache-dir'; + import { version } from '../../../package.json'; import { getManagerHeadHtml } from '../utils/template'; import { loadEnv, getBabelRuntimePath } from '../config/utils'; -export default ({ configDir, entries, outputDir }) => { - const { raw, stringified } = loadEnv(); +const r = require.resolve('@storybook/ui/package.json').replace('package.json', ''); +const context = path.join(r, '../../node_modules'); +const cacheDir = findCacheDir({ name: 'storybook' }); - const exclude = /node_modules/; +export default ({ configDir, configType, entries, outputDir, cache }) => { + const { raw, stringified } = loadEnv(); + const isProd = configType === 'PRODUCTION'; return { name: 'manager', - mode: 'production', - bail: true, + mode: isProd ? 'production' : 'development', + bail: isProd, devtool: 'none', entry: entries, output: { @@ -24,7 +29,12 @@ export default ({ configDir, entries, outputDir }) => { filename: '[name].[chunkhash].bundle.js', publicPath: '', }, + cache, plugins: [ + new webpack.DllReferencePlugin({ + context, + manifest: path.join(r, '/dll/storybook_ui-manifest.json'), + }), new HtmlWebpackPlugin({ filename: `index.html`, chunksSortMode: 'none', @@ -35,36 +45,18 @@ export default ({ configDir, entries, outputDir }) => { files, options, version, + dlls: ['/sb_dll/storybook_ui_dll.js'], headHtmlSnippet: getManagerHeadHtml(configDir, process.env), }), template: require.resolve(`../templates/index.ejs`), }), - new HtmlWebpackHarddiskPlugin(), new webpack.DefinePlugin({ 'process.env': stringified }), new CaseSensitivePathsPlugin(), new Dotenv({ silent: true }), + // new webpack.debug.ProfilingPlugin({ + // outputPath: path.join(cacheDir, './manager-profileEvents.json'), + // }), ], - module: { - rules: [ - { - test: /\.jsx?$/, - use: [ - { - loader: 'babel-loader', - }, - ], - exclude, - }, - { - test: /\.md$/, - use: [ - { - loader: require.resolve('raw-loader'), - }, - ], - }, - ], - }, resolve: { extensions: ['.mjs', '.js', '.jsx', '.json'], modules: ['node_modules'].concat(raw.NODE_PATH || []), @@ -74,6 +66,7 @@ export default ({ configDir, entries, outputDir }) => { 'react-dom': require.resolve('react-dom'), }, }, + recordsPath: path.join(cacheDir, 'records.json'), optimization: { splitChunks: { chunks: 'all', diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js index b1408691f83..09a88a74ee0 100644 --- a/lib/core/src/server/preview/iframe-webpack.config.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -48,6 +48,7 @@ export default ({ options, version: packageJson.version, headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), + dlls: [], bodyHtmlSnippet: getPreviewBodyHtml(), }), template: require.resolve(`../templates/index.ejs`), diff --git a/lib/core/src/server/templates/index.ejs b/lib/core/src/server/templates/index.ejs index cb0822c14f9..11870aa616f 100644 --- a/lib/core/src/server/templates/index.ejs +++ b/lib/core/src/server/templates/index.ejs @@ -38,6 +38,10 @@ <% } %> +<% dlls.forEach(file => { %> + +<% }); %> + <% files.js.forEach(file => { %> <% }); %> diff --git a/lib/ui/dll/config.js b/lib/ui/dll/config.js new file mode 100644 index 00000000000..56868eeaf84 --- /dev/null +++ b/lib/ui/dll/config.js @@ -0,0 +1,67 @@ +import path from 'path'; +import webpack from 'webpack'; + +const resolveLocal = dir => path.join(__dirname, dir); +const toSafeFilename = packageName => packageName.replace('@', '').replace(/[^a-z]/g, '_'); + +const r = resolveLocal('../../../node_modules'); + +export default ({ entry, provided = [] }) => ({ + name: 'storybook-ui', + mode: 'production', + + entry, + output: { + path: resolveLocal('.'), + filename: '[name]_dll.js', + library: '[name]_dll', + }, + externals: provided, + + module: { + rules: [ + { + test: /\.jsx?$/, + use: [ + { + loader: 'babel-loader', + options: { + presets: [ + ['@babel/preset-env', { shippedProposals: true, modules: false }], + '@babel/preset-react', + '@babel/preset-flow', + ], + }, + }, + ], + }, + ], + }, + resolve: { + extensions: ['.mjs', '.js', '.jsx', '.json'], + modules: [path.join(__dirname, '../../../node_modules')], + // alias: { + // react: require.resolve('react'), + // 'prop-types': require.resolve('prop-types'), + // 'react-dom': require.resolve('react-dom'), + // }, + }, + + plugins: [ + // ...provided.map( + // p => + // new webpack.DllReferencePlugin({ + // context: resolveLocal('.'), + // manifest: require(`./${toSafeFilename(p)}-manifest.json`), + // }) + // ), + new webpack.DllPlugin({ + context: r, + path: `${__dirname}/[name]-manifest.json`, + name: '[name]_dll', + }), + ], + performance: { + hints: false, + }, +}); diff --git a/lib/ui/dll/script.js b/lib/ui/dll/script.js new file mode 100644 index 00000000000..ac8f49c623b --- /dev/null +++ b/lib/ui/dll/script.js @@ -0,0 +1,62 @@ +import path from 'path'; +import webpack from 'webpack'; + +import config from './config'; + +const resolveLocal = dir => path.join(__dirname, dir); +const webpackAsPromised = c => + new Promise((res, rej) => { + webpack(c).run((err, stats) => { + if (err || stats.hasErrors() || stats.hasWarnings()) { + rej(stats); + } + res(stats); + }); + }); + +const run = async () => { + // const out = await webpackAsPromised( + // config({ + // entry: { + // react: ['react', 'react-dom'], + // }, + // provided: [], + // }) + // ); + const out2 = await webpackAsPromised( + config({ + entry: { + storybook_ui: [ + 'core-js/fn/array/iterator', + 'airbnb-js-shims', + 'core-js/es6/symbol', + 'react', + 'prop-types', + 'react-dom', + '@storybook/components', + '@storybook/addons', + '@storybook/core-events', + '@emotion/styled', + '@emotion/provider', + '@emotion/core', + resolveLocal('../dist/index.js') + ], + }, + // provided: ['react', 'react-dom'], + }) + ); + return out2; +}; + +// storybook_ui: [resolveLocal('../dist/index.js')], + +run().then( + (s => { + console.log('success: ', s.toString()); + process.exitCode = 0; + }), + (s => { + console.error('failed: ', s.toString()); + process.exitCode = 1; + }) +); diff --git a/lib/ui/package.json b/lib/ui/package.json index cc32363d954..47f96e581c7 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -20,9 +20,8 @@ "main": "dist/index.js", "jsnext:main": "src/index.js", "scripts": { - "prepare": "node ../../scripts/prepare.js", - "publish-storybook": "bash ./.scripts/publish_storybook.sh", - "storybook": "start-storybook -p 9010" + "prepare": "node ../../scripts/prepare.js && yarn dll", + "dll": "node -r esm ./dll/script.js" }, "dependencies": { "@emotion/core": "^0.13.1", @@ -34,7 +33,7 @@ "@storybook/podda": "^1.2.3", "@storybook/react-komposer": "^2.0.5", "deep-equal": "^1.0.1", - "events": "^3.0.0", + "eventemitter3": "^3.1.0", "fuse.js": "^3.3.0", "global": "^4.3.2", "keycode": "^2.2.0", @@ -46,10 +45,6 @@ "react-modal": "^3.6.1", "react-treebeard": "^3.1.0" }, - "devDependencies": { - "@storybook/addon-actions": "4.1.0-alpha.7", - "@storybook/react": "4.1.0-alpha.7" - }, "peerDependencies": { "react": "*", "react-dom": "*" diff --git a/lib/ui/src/modules/api/configs/init_api.js b/lib/ui/src/modules/api/configs/init_api.js index 8e00ce5d073..ddbb680c2cb 100644 --- a/lib/ui/src/modules/api/configs/init_api.js +++ b/lib/ui/src/modules/api/configs/init_api.js @@ -1,4 +1,4 @@ -import { EventEmitter } from 'events'; +import EventEmitter from 'eventemitter3'; import { getUrlState } from '../../ui/configs/handle_routing'; export default function(provider, clientStore, actions) { diff --git a/lib/ui/src/modules/ui/components/menu_item.stories.js b/lib/ui/src/modules/ui/components/menu_item.stories.js index 23971b87c18..1849a614bb6 100644 --- a/lib/ui/src/modules/ui/components/menu_item.stories.js +++ b/lib/ui/src/modules/ui/components/menu_item.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies +import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies import MenuItem from './menu_item'; diff --git a/lib/ui/src/modules/ui/components/search_box.stories.js b/lib/ui/src/modules/ui/components/search_box.stories.js index 2d2d90819e7..98b746e0ad3 100644 --- a/lib/ui/src/modules/ui/components/search_box.stories.js +++ b/lib/ui/src/modules/ui/components/search_box.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactModal from 'react-modal'; -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies +import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies import { document, navigator } from 'global'; import Component from './search_box'; diff --git a/lib/ui/src/modules/ui/components/shortcuts_help.stories.js b/lib/ui/src/modules/ui/components/shortcuts_help.stories.js index 804b7481b9d..008cbede4c6 100644 --- a/lib/ui/src/modules/ui/components/shortcuts_help.stories.js +++ b/lib/ui/src/modules/ui/components/shortcuts_help.stories.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactModal from 'react-modal'; -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies +import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies import { document, navigator } from 'global'; import ShortcutsHelp from './shortcuts_help'; diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.stories.js b/lib/ui/src/modules/ui/components/stories_panel/index.stories.js index d7f6aa967c0..ba212e12735 100644 --- a/lib/ui/src/modules/ui/components/stories_panel/index.stories.js +++ b/lib/ui/src/modules/ui/components/stories_panel/index.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies +import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies import StoriesPanel from './index'; import { createHierarchies } from '../../libs/hierarchy'; diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js index 91ce0bc7f4f..7438df3a646 100644 --- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js +++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; +import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies import Stories from './index'; import { setContext } from '../../../../../compose'; diff --git a/lib/ui/src/modules/ui/components/stories_panel/text_filter.stories.js b/lib/ui/src/modules/ui/components/stories_panel/text_filter.stories.js index fe41c794043..a5489fe26a5 100644 --- a/lib/ui/src/modules/ui/components/stories_panel/text_filter.stories.js +++ b/lib/ui/src/modules/ui/components/stories_panel/text_filter.stories.js @@ -1,6 +1,6 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; +import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies +import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies import TextFilter from './text_filter'; diff --git a/package.json b/package.json index 4932902d6e2..9953ad79acd 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "eslint-plugin-prettier": "^3.0.0", "eslint-plugin-react": "^7.10.0", "eslint-teamcity": "^2.1.0", + "esm": "^3.0.84", "github-release-from-changelog": "^1.3.2", "glob": "^7.1.3", "husky": "^1.1.1", diff --git a/scripts/compile-js.js b/scripts/compile-js.js index 78230420170..1ebba2962c7 100644 --- a/scripts/compile-js.js +++ b/scripts/compile-js.js @@ -10,7 +10,7 @@ function getCommand(watch) { '--ignore **/__mocks__/,**/tests/*,**/__tests__/,**/**.test.js,**/stories/,**/**.story.js,**/**.stories.js,**/__snapshots__', './src --out-dir ./dist', '--copy-files', - `--config-file ${path.resolve(__dirname, '../.babelrc')}`, + `--config-file ${path.resolve(__dirname, '../.babelrc.js')}`, ]; if (watch) { diff --git a/yarn.lock b/yarn.lock index fc655dc69fe..1d0c730dfc8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9025,6 +9025,11 @@ eslint@^5.8.0: table "^5.0.2" text-table "^0.2.0" +esm@^3.0.84: + version "3.0.84" + resolved "https://registry.yarnpkg.com/esm/-/esm-3.0.84.tgz#bb108989f4673b32d4f62406869c28eed3815a63" + integrity sha512-SzSGoZc17S7P+12R9cg21Bdb7eybX25RnIeRZ80xZs+VZ3kdQKzqTp2k4hZJjR7p9l0186TTXSgrxzlMDBktlw== + espree@^3.4.3: version "3.5.4" resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7" From a78b9091155b1f47ca7ebf83d0c246c3124b6ee7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 26 Nov 2018 11:32:47 +0100 Subject: [PATCH 02/25] FIX build-static --- lib/core/src/server/build-static.js | 164 ++++++++++++++++------------ lib/ui/package.json | 2 +- scripts/bootstrap.js | 2 + 3 files changed, 96 insertions(+), 72 deletions(-) diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 31680aa3edb..6c89afbc3f9 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -11,8 +11,8 @@ import loadManagerConfig from './manager/manager-config'; const defaultFavIcon = require.resolve('./public/favicon.ico'); -export async function buildStaticStandalone(options) { - const { staticDir, watch, configDir, packageJson } = options; +export function buildStaticStandalone(options) { + const { staticDir, configDir, packageJson } = options; const configType = 'PRODUCTION'; const outputDir = path.join(process.cwd(), options.outputDir); @@ -30,44 +30,6 @@ export async function buildStaticStandalone(options) { shelljs.cp(defaultFavIcon, outputDir); - logger.info('copy dll..'); - shelljs.cp(dllPath, path.join(outputDir, 'sb_dll')); - - logger.info('building manager..'); - const managerStartTime = process.hrtime(); - - const managerConfig = await loadManagerConfig({ - configType, - outputDir, - configDir, - corePresets: [require.resolve('./manager/manager-preset.js')], - }); - - await new Promise((res, rej) => { - webpack(managerConfig).run((err, stats) => { - const managerTotalTime = process.hrtime(managerStartTime); - logger.trace({ message: 'manager built', time: managerTotalTime }); - - if (stats.hasErrors()) { - rej(stats); - } else { - res(stats); - } - }); - }); - - // 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, - outputDir, - packageJson, - corePresets: [require.resolve('./preview/preview-preset.js')], - overridePresets: [require.resolve('./preview/custom-webpack-preset.js')], - ...options, - }); - // copy all static files if (staticDir) { staticDir.forEach(dir => { @@ -80,43 +42,103 @@ export async function buildStaticStandalone(options) { }); } - // compile all resources with webpack and write them to the disk. - return new Promise((resolve, reject) => { - const previewStartTime = process.hrtime(); - - const webpackCb = (err, stats) => { - if (err || stats.hasErrors()) { - logger.error('Failed to build the storybook'); - // eslint-disable-next-line no-unused-expressions - err && logger.error(err.message); - // eslint-disable-next-line no-unused-expressions - stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e)); - process.exitCode = 1; - return reject(err); - } + logger.info('copy dll..'); + shelljs.cp(dllPath, path.join(outputDir, 'sb_dll')); - const previewTotalTime = process.hrtime(previewStartTime); - logger.trace({ message: 'preview built', time: previewTotalTime }); + let startTime; + + return new Promise(res => { + logger.info('building manager..'); + startTime = process.hrtime(); + + res(); + }) + .then(() => + loadManagerConfig({ + configType, + outputDir, + configDir, + corePresets: [require.resolve('./manager/manager-preset.js')], + }) + ) + .then( + managerConfig => + new Promise((resolve, reject) => { + webpack(managerConfig).run((err, stats) => { + if (err || !stats || stats.hasErrors()) { + logger.error('Failed to build the manager'); + // eslint-disable-next-line no-unused-expressions + err && logger.error(err.message); + // eslint-disable-next-line no-unused-expressions + stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e)); + process.exitCode = 1; + + reject(stats); + } + + resolve(stats); + }); + }) + ) + .then(stats => { + logger.trace({ message: 'manager built', time: process.hrtime(startTime) }); + logger.info(stats.hash); + stats.toJson().warnings.forEach(e => logger.warn(e)); + }) + .then(() => { + startTime = process.hrtime(); + logger.info('building preview..'); + }) + .then(() => + loadConfig({ + configType, + outputDir, + packageJson, + corePresets: [require.resolve('./preview/preview-preset.js')], + overridePresets: [require.resolve('./preview/custom-webpack-preset.js')], + ...options, + }) + ) + .then( + config => + new Promise((resolve, reject) => { + webpack(config).run((err, stats) => { + if (err || !stats || stats.hasErrors()) { + logger.error('Failed to build the preview'); + // eslint-disable-next-line no-unused-expressions + err && logger.error(err.message); + // eslint-disable-next-line no-unused-expressions + stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e)); + process.exitCode = 1; + reject(err); + } + + resolve(stats); + }); + }) + ) + .then(stats => { + logger.trace({ message: 'preview built', time: process.hrtime(startTime) }); + logger.info(stats.hash); + stats.toJson().warnings.forEach(e => logger.warn(e)); + }) + .then(() => { logger.info(`output directory: ${outputDir}`); - - return resolve(stats); - }; - - logger.info('building preview..'); - const compiler = webpack(config); - - if (watch) { - compiler.watch({}, webpackCb); - } else { - compiler.run(webpackCb); - } - }); + }) + .catch(p => { + if (p && p.toJson) { + p.toJson().errors.forEach(e => logger.error(e)); + p.toJson().warnings.forEach(e => logger.error(e)); + } else { + console.log('THE ERROR', p); + } + }); } -export async function buildStatic({ packageJson, ...loadOptions }) { +export function buildStatic({ packageJson, ...loadOptions }) { const cliOptions = getProdCli(packageJson); - await buildStaticStandalone({ + return buildStaticStandalone({ ...cliOptions, ...loadOptions, packageJson, diff --git a/lib/ui/package.json b/lib/ui/package.json index 47f96e581c7..1e0b08cd9d2 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -20,7 +20,7 @@ "main": "dist/index.js", "jsnext:main": "src/index.js", "scripts": { - "prepare": "node ../../scripts/prepare.js && yarn dll", + "prepare": "node ../../scripts/prepare.js", "dll": "node -r esm ./dll/script.js" }, "dependencies": { diff --git a/scripts/bootstrap.js b/scripts/bootstrap.js index 0f40276abbc..3efc402d419 100755 --- a/scripts/bootstrap.js +++ b/scripts/bootstrap.js @@ -81,6 +81,8 @@ const tasks = { spawn('yarn install'); log.info(prefix, 'prepare'); spawn('lerna run prepare -- --silent'); + log.info(prefix, 'dll'); + spawn('lerna run dll --scope "@storybook/ui"'); }, }), docs: createTask({ From cc4fb669b4733c445e8a20dca4c4beeb8c125d47 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 26 Nov 2018 11:50:01 +0100 Subject: [PATCH 03/25] FIX snapshots --- addons/info/src/__snapshots__/index.test.js.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap index 16692901cbe..3bff0c35ba1 100644 --- a/addons/info/src/__snapshots__/index.test.js.snap +++ b/addons/info/src/__snapshots__/index.test.js.snap @@ -2880,6 +2880,7 @@ exports[`addon Info should render component description 1`] = `
From d06fe56a778bad3f56f8873ccf859ce53c2c9985 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 26 Nov 2018 15:01:35 +0100 Subject: [PATCH 04/25] CHANGE output of dll to lib/core so it's easier to reference --- .gitignore | 2 +- lib/core/package.json | 6 +++--- .../server/manager/manager-webpack.config.js | 7 ++----- lib/ui/package.json | 13 ++++++++----- lib/ui/{dll => scripts}/config.js | 18 +++--------------- lib/ui/{dll => scripts}/script.js | 10 +++++----- scripts/bootstrap.js | 11 ++++++++++- 7 files changed, 32 insertions(+), 35 deletions(-) rename lib/ui/{dll => scripts}/config.js (64%) rename lib/ui/{dll => scripts}/script.js (94%) diff --git a/.gitignore b/.gitignore index e52abde7a47..0ed76d9dcdc 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,4 @@ integration/__image_snapshots__/__diff_output__ .jest-test-results.json /examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/ lib/*.jar -lib/ui/dll +lib/**/dll diff --git a/lib/core/package.json b/lib/core/package.json index 28656b6d8bb..ecd6cdd1026 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -6,9 +6,6 @@ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/lib/core", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -95,5 +92,8 @@ "babel-loader": "^7.0.0 || ^8.0.0", "react": ">=16.3.0", "react-dom": ">=16.3.0" + }, + "publishConfig": { + "access": "public" } } diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js index 62e7d912cb9..0ab87962321 100644 --- a/lib/core/src/server/manager/manager-webpack.config.js +++ b/lib/core/src/server/manager/manager-webpack.config.js @@ -10,7 +10,7 @@ import { version } from '../../../package.json'; import { getManagerHeadHtml } from '../utils/template'; import { loadEnv, getBabelRuntimePath } from '../config/utils'; -const r = require.resolve('@storybook/ui/package.json').replace('package.json', ''); +const r = require.resolve('@storybook/core/package.json').replace('package.json', ''); const context = path.join(r, '../../node_modules'); const cacheDir = findCacheDir({ name: 'storybook' }); @@ -33,7 +33,7 @@ export default ({ configDir, configType, entries, outputDir, cache }) => { plugins: [ new webpack.DllReferencePlugin({ context, - manifest: path.join(r, '/dll/storybook_ui-manifest.json'), + manifest: path.join(__dirname, '../../../dll/storybook_ui-manifest.json'), }), new HtmlWebpackPlugin({ filename: `index.html`, @@ -53,9 +53,6 @@ export default ({ configDir, configType, entries, outputDir, cache }) => { new webpack.DefinePlugin({ 'process.env': stringified }), new CaseSensitivePathsPlugin(), new Dotenv({ silent: true }), - // new webpack.debug.ProfilingPlugin({ - // outputPath: path.join(cacheDir, './manager-profileEvents.json'), - // }), ], resolve: { extensions: ['.mjs', '.js', '.jsx', '.json'], diff --git a/lib/ui/package.json b/lib/ui/package.json index 4e81e1139a8..245031355b3 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -6,9 +6,6 @@ "storybook" ], "homepage": "https://github.com/storybooks/storybook/tree/master/lib/ui", - "publishConfig": { - "access": "public" - }, "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, @@ -20,8 +17,8 @@ "main": "dist/index.js", "jsnext:main": "src/index.js", "scripts": { - "prepare": "node ../../scripts/prepare.js", - "dll": "node -r esm ./dll/script.js" + "dll": "node -r esm ./scripts/script.js", + "prepare": "node ../../scripts/prepare.js" }, "dependencies": { "@emotion/core": "^0.13.1", @@ -45,8 +42,14 @@ "react-modal": "^3.6.1", "react-treebeard": "^3.1.0" }, + "devDependencies": { + "webpack": "^4.23.1" + }, "peerDependencies": { "react": "*", "react-dom": "*" + }, + "publishConfig": { + "access": "public" } } diff --git a/lib/ui/dll/config.js b/lib/ui/scripts/config.js similarity index 64% rename from lib/ui/dll/config.js rename to lib/ui/scripts/config.js index 56868eeaf84..fe546f3feff 100644 --- a/lib/ui/dll/config.js +++ b/lib/ui/scripts/config.js @@ -2,17 +2,17 @@ import path from 'path'; import webpack from 'webpack'; const resolveLocal = dir => path.join(__dirname, dir); -const toSafeFilename = packageName => packageName.replace('@', '').replace(/[^a-z]/g, '_'); const r = resolveLocal('../../../node_modules'); +const out = resolveLocal('../../core/dll'); export default ({ entry, provided = [] }) => ({ name: 'storybook-ui', mode: 'production', entry, output: { - path: resolveLocal('.'), + path: out, filename: '[name]_dll.js', library: '[name]_dll', }, @@ -40,24 +40,12 @@ export default ({ entry, provided = [] }) => ({ resolve: { extensions: ['.mjs', '.js', '.jsx', '.json'], modules: [path.join(__dirname, '../../../node_modules')], - // alias: { - // react: require.resolve('react'), - // 'prop-types': require.resolve('prop-types'), - // 'react-dom': require.resolve('react-dom'), - // }, }, plugins: [ - // ...provided.map( - // p => - // new webpack.DllReferencePlugin({ - // context: resolveLocal('.'), - // manifest: require(`./${toSafeFilename(p)}-manifest.json`), - // }) - // ), new webpack.DllPlugin({ context: r, - path: `${__dirname}/[name]-manifest.json`, + path: `${out}/[name]-manifest.json`, name: '[name]_dll', }), ], diff --git a/lib/ui/dll/script.js b/lib/ui/scripts/script.js similarity index 94% rename from lib/ui/dll/script.js rename to lib/ui/scripts/script.js index ac8f49c623b..abe60641778 100644 --- a/lib/ui/dll/script.js +++ b/lib/ui/scripts/script.js @@ -39,7 +39,7 @@ const run = async () => { '@emotion/styled', '@emotion/provider', '@emotion/core', - resolveLocal('../dist/index.js') + resolveLocal('../dist/index.js'), ], }, // provided: ['react', 'react-dom'], @@ -51,12 +51,12 @@ const run = async () => { // storybook_ui: [resolveLocal('../dist/index.js')], run().then( - (s => { + s => { console.log('success: ', s.toString()); process.exitCode = 0; - }), - (s => { + }, + s => { console.error('failed: ', s.toString()); process.exitCode = 1; - }) + } ); diff --git a/scripts/bootstrap.js b/scripts/bootstrap.js index 3efc402d419..82764f260df 100755 --- a/scripts/bootstrap.js +++ b/scripts/bootstrap.js @@ -73,7 +73,7 @@ const tasks = { }, }), core: createTask({ - name: `Core & Examples ${chalk.gray('(core)')}`, + name: `Core, Dll & Examples ${chalk.gray('(core)')}`, defaultValue: true, option: '--core', command: () => { @@ -85,6 +85,15 @@ const tasks = { spawn('lerna run dll --scope "@storybook/ui"'); }, }), + dll: createTask({ + name: `Generate DLL ${chalk.gray('(dll)')}`, + defaultValue: false, + option: '--dll', + command: () => { + log.info(prefix, 'dll'); + spawn('lerna run dll --scope "@storybook/ui"'); + }, + }), docs: createTask({ name: `Documentation ${chalk.gray('(docs)')}`, defaultValue: false, From 9b66549f9508210c18cf1138c65a24135e483c67 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 26 Nov 2018 16:18:48 +0100 Subject: [PATCH 05/25] FIX linting --- .eslintignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintignore b/.eslintignore index a8c48aefad8..e8aacb9b8fa 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,5 @@ dist -lib/ui/dll +lib/**/dll build coverage node_modules From 05418b2595302c950758d3835506ce5728cbf5ee Mon Sep 17 00:00:00 2001 From: Hypnosphi Date: Mon, 26 Nov 2018 16:11:29 +0100 Subject: [PATCH 06/25] cache DLL (cherry picked from commit 2bd85402d1ed8a13c01efc04d0c187c4aba16de9) --- .../buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt | 1 + .../OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt index f18d4aaf868..718441abced 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt @@ -17,6 +17,7 @@ object OpenSourceProjects_Storybook_Bootstrap : BuildType({ addons/storyshots/*/dist/** => dist.zip/addons/storyshots app/*/dist/** => dist.zip/app lib/*/dist/** => dist.zip/lib + lib/core/dll/** => dll.zip """.trimIndent() vcs { diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt index 93a9b13b25d..ca7457b1a68 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt @@ -82,7 +82,10 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged: } artifacts { - artifactRules = "dist.zip!**" + artifactRules = """ + dist.zip!** + dll.zip!** => lib/core/dll + """.trimIndent() } } } From b198e0827168b6f65724a5c035c463fb502cd2f8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 26 Nov 2018 17:01:28 +0100 Subject: [PATCH 07/25] CLEANUP --- addons/options/README.md | 4 ++-- lib/core/src/server/build-static.js | 8 +++++--- lib/ui/scripts/script.js | 13 ++----------- 3 files changed, 9 insertions(+), 16 deletions(-) diff --git a/addons/options/README.md b/addons/options/README.md index e678f0eb9df..4de59b4ac8d 100644 --- a/addons/options/README.md +++ b/addons/options/README.md @@ -137,7 +137,7 @@ To install type definitions: `npm install -D @types/storybook__addon-options` Make sure you also have the type definitions installed for the following libs: - - node - - react +- node +- react You can install them using `npm install -D @types/node @types/react`, assuming you are using Typescript >2.0. diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 6c89afbc3f9..0929458f839 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -127,10 +127,12 @@ export function buildStaticStandalone(options) { }) .catch(p => { if (p && p.toJson) { - p.toJson().errors.forEach(e => logger.error(e)); - p.toJson().warnings.forEach(e => logger.error(e)); + const stats = p.toJson(); + + stats.errors.forEach(e => logger.error(e)); + stats.warnings.forEach(e => logger.error(e)); } else { - console.log('THE ERROR', p); + logger.error(p); } }); } diff --git a/lib/ui/scripts/script.js b/lib/ui/scripts/script.js index abe60641778..deeb50cb131 100644 --- a/lib/ui/scripts/script.js +++ b/lib/ui/scripts/script.js @@ -15,14 +15,6 @@ const webpackAsPromised = c => }); const run = async () => { - // const out = await webpackAsPromised( - // config({ - // entry: { - // react: ['react', 'react-dom'], - // }, - // provided: [], - // }) - // ); const out2 = await webpackAsPromised( config({ entry: { @@ -42,20 +34,19 @@ const run = async () => { resolveLocal('../dist/index.js'), ], }, - // provided: ['react', 'react-dom'], }) ); return out2; }; -// storybook_ui: [resolveLocal('../dist/index.js')], - run().then( s => { + // eslint-disable-next-line no-console console.log('success: ', s.toString()); process.exitCode = 0; }, s => { + // eslint-disable-next-line no-console console.error('failed: ', s.toString()); process.exitCode = 1; } From ce9a74845c784a58d294c0342843c697a5508510 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 27 Nov 2018 18:11:28 +0100 Subject: [PATCH 08/25] FIX location of dll --- lib/core/src/server/build-dev.js | 10 +++------- lib/core/src/server/build-static.js | 4 +--- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js index 1c3796e3d76..74b2d6a1a36 100644 --- a/lib/core/src/server/build-dev.js +++ b/lib/core/src/server/build-dev.js @@ -27,6 +27,8 @@ const cache = Cache({ ns: 'storybook', // Optional. A grouping namespace for items. }); +const dllPath = path.join(__dirname, '../../dll/storybook_ui_dll.js'); + function getServer(app, options) { if (!options.https) { return app; @@ -141,13 +143,7 @@ export async function buildDevStandalone(options) { const app = express(); const server = getServer(app, options); - app.use( - '/sb_dll', - express.static( - path.join(require.resolve('@storybook/ui/package.json').replace('package.json', ''), 'dll'), - { index: false } - ) - ); + app.use('/sb_dll', express.static(dllPath, { index: false })); applyStatic(app, options); diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 0929458f839..9aa17d6b108 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -17,9 +17,7 @@ export function buildStaticStandalone(options) { const configType = 'PRODUCTION'; const outputDir = path.join(process.cwd(), options.outputDir); - const dllPath = require - .resolve('@storybook/ui/package.json') - .replace('/package.json', '/dll/storybook_ui_dll.js'); + const dllPath = path.join(__dirname, '../../dll/storybook_ui_dll.js'); // create output directory if not exists shelljs.mkdir('-p', outputDir); From 492408316066bcb6ec1b8e24791992f632051e02 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 27 Nov 2018 20:37:47 +0100 Subject: [PATCH 09/25] FIX dll cache on teamcity (maybe) --- .../buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt | 2 +- .../buildTypes/OpenSourceProjects_Storybook_Examples.kt | 8 ++++---- .../buildTypes/StorybookApp.kt | 1 - 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt index 718441abced..f609d196a3e 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt @@ -17,7 +17,7 @@ object OpenSourceProjects_Storybook_Bootstrap : BuildType({ addons/storyshots/*/dist/** => dist.zip/addons/storyshots app/*/dist/** => dist.zip/app lib/*/dist/** => dist.zip/lib - lib/core/dll/** => dll.zip + lib/core/dll/** => dist.zip/lib/core/dll """.trimIndent() vcs { diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Examples.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Examples.kt index 53ee4bd4075..2fe164bb30e 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Examples.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Examples.kt @@ -12,10 +12,10 @@ object OpenSourceProjects_Storybook_Examples : BuildType({ name = "Examples" artifactRules = """ -${StorybookApp.values().map { it.artifactPath }.joinToString("\n")} -examples/official-storybook/storybook-static => official.zip -examples/official-storybook/image-snapshots/__image_snapshots__ => image-snapshots -""".trimIndent() + ${StorybookApp.values().map { it.artifactPath }.joinToString("\n")} + examples/official-storybook/storybook-static => official.zip + examples/official-storybook/image-snapshots/__image_snapshots__ => image-snapshots + """.trimIndent() vcs { root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster) diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt index ca7457b1a68..3f043631cee 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/StorybookApp.kt @@ -84,7 +84,6 @@ enum class StorybookApp(val appName: String, val exampleDir: String, val merged: artifacts { artifactRules = """ dist.zip!** - dll.zip!** => lib/core/dll """.trimIndent() } } From 3502befb4b7cad42797c4f52eb3dcf61594d6e2e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 28 Nov 2018 12:04:10 +0100 Subject: [PATCH 10/25] CHANGE the dll express route to dev-server --- lib/core/src/server/build-dev.js | 4 ---- lib/core/src/server/dev-server.js | 8 +++++++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js index 74b2d6a1a36..e914291c34c 100644 --- a/lib/core/src/server/build-dev.js +++ b/lib/core/src/server/build-dev.js @@ -27,8 +27,6 @@ const cache = Cache({ ns: 'storybook', // Optional. A grouping namespace for items. }); -const dllPath = path.join(__dirname, '../../dll/storybook_ui_dll.js'); - function getServer(app, options) { if (!options.https) { return app; @@ -143,8 +141,6 @@ export async function buildDevStandalone(options) { const app = express(); const server = getServer(app, options); - app.use('/sb_dll', express.static(dllPath, { index: false })); - applyStatic(app, options); const storybookMiddleware = await storybook(options); diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index d1ec366677a..6d61a3efe97 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -13,6 +13,8 @@ import loadManagerConfig from './manager/manager-config'; let webpackResolve = () => {}; let webpackReject = () => {}; +const dllPath = path.join(__dirname, '../../dll'); + export const webpackValid = new Promise((resolve, reject) => { webpackResolve = resolve; webpackReject = reject; @@ -114,8 +116,12 @@ export default async function(options) { response.set('Content-Type', 'text/html'); response.sendFile(path.join(`${outputDir}/index.html`)); }); + router.get(/\/sb_dll\/(.+\.js)$/, (request, response) => { + response.set('Content-Type', 'text/javascript'); + response.sendFile(path.join(`${dllPath}/${request.params[0]}`)); + }); router.get(/(.+\.js)$/, (request, response) => { - response.set('Content-Type', 'text/javascript '); + response.set('Content-Type', 'text/javascript'); response.sendFile(path.join(`${outputDir}/${request.params[0]}`)); }); From c46781863ae3e207b080b91faf302659d96c1bdc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 28 Nov 2018 15:03:22 +0100 Subject: [PATCH 11/25] CLEANUP --- lib/core/src/server/build-dev.js | 1 - lib/core/src/server/build-static.js | 15 ++++++--------- lib/core/src/server/dev-server.js | 2 +- lib/core/src/server/manager/manager-preset.js | 1 - lib/ui/scripts/script.js | 7 +++---- 5 files changed, 10 insertions(+), 16 deletions(-) diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js index e914291c34c..f8cc2b197df 100644 --- a/lib/core/src/server/build-dev.js +++ b/lib/core/src/server/build-dev.js @@ -146,7 +146,6 @@ export async function buildDevStandalone(options) { const storybookMiddleware = await storybook(options); app.use(storybookMiddleware); - // ; const serverListening = listenToServer(server, listenAddr); diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 710bad4e7ef..49989b8636c 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -72,6 +72,7 @@ export function buildStaticStandalone(options) { process.exitCode = 1; reject(stats); + return; } resolve(stats); @@ -80,23 +81,21 @@ export function buildStaticStandalone(options) { ) .then(stats => { logger.trace({ message: 'manager built', time: process.hrtime(startTime) }); - logger.info(stats.hash); stats.toJson().warnings.forEach(e => logger.warn(e)); }) .then(() => { startTime = process.hrtime(); logger.info('building preview..'); - }) - .then(() => - loadConfig({ + + return loadConfig({ configType, outputDir, packageJson, corePresets: [require.resolve('./preview/preview-preset.js')], overridePresets: [require.resolve('./preview/custom-webpack-preset.js')], ...options, - }) - ) + }); + }) .then( config => new Promise((resolve, reject) => { @@ -109,6 +108,7 @@ export function buildStaticStandalone(options) { stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e)); process.exitCode = 1; reject(err); + return; } resolve(stats); @@ -117,10 +117,7 @@ export function buildStaticStandalone(options) { ) .then(stats => { logger.trace({ message: 'preview built', time: process.hrtime(startTime) }); - logger.info(stats.hash); stats.toJson().warnings.forEach(e => logger.warn(e)); - }) - .then(() => { logger.info(`output directory: ${outputDir}`); }) .catch(p => { diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 6d61a3efe97..0280ed77fa7 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -61,7 +61,7 @@ export default async function(options) { const iframeConfig = await loadConfig({ configType, outputDir, - // cache, + cache, corePresets: [require.resolve('./preview/preview-preset.js')], overridePresets: [require.resolve('./preview/custom-webpack-preset.js')], ...options, diff --git a/lib/core/src/server/manager/manager-preset.js b/lib/core/src/server/manager/manager-preset.js index 3f3a2145d13..51123ec73b9 100644 --- a/lib/core/src/server/manager/manager-preset.js +++ b/lib/core/src/server/manager/manager-preset.js @@ -7,7 +7,6 @@ export async function managerWebpack(_, options) { export async function managerEntries(_, options) { const { presets } = options; - // const entries = [require.resolve('../common/polyfills')]; const entries = []; const installedAddons = await presets.apply('addons', [], options); diff --git a/lib/ui/scripts/script.js b/lib/ui/scripts/script.js index deeb50cb131..4e0c90ab3bf 100644 --- a/lib/ui/scripts/script.js +++ b/lib/ui/scripts/script.js @@ -9,13 +9,14 @@ const webpackAsPromised = c => webpack(c).run((err, stats) => { if (err || stats.hasErrors() || stats.hasWarnings()) { rej(stats); + return; } res(stats); }); }); -const run = async () => { - const out2 = await webpackAsPromised( +const run = () => + webpackAsPromised( config({ entry: { storybook_ui: [ @@ -36,8 +37,6 @@ const run = async () => { }, }) ); - return out2; -}; run().then( s => { From e7c24bae120f4b3e0407fb1b1be130cc199e888d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 28 Nov 2018 16:05:19 +0100 Subject: [PATCH 12/25] MOVE licence notices into their own file && OPTIMISE the dll by specifying a preset-env target --- lib/core/src/server/dev-server.js | 4 ++++ lib/ui/scripts/config.js | 28 ++++++++++++++++++++++-- package.json | 5 +++-- yarn.lock | 36 ++++++++++++++++++++++++++++++- 4 files changed, 68 insertions(+), 5 deletions(-) diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 0280ed77fa7..4a3f382c73a 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -120,6 +120,10 @@ export default async function(options) { response.set('Content-Type', 'text/javascript'); response.sendFile(path.join(`${dllPath}/${request.params[0]}`)); }); + router.get(/\/sb_dll\/(.+\.LICENCE)$/, (request, response) => { + response.set('Content-Type', 'text/html'); + response.sendFile(path.join(`${dllPath}/${request.params[0]}`)); + }); router.get(/(.+\.js)$/, (request, response) => { response.set('Content-Type', 'text/javascript'); response.sendFile(path.join(`${outputDir}/${request.params[0]}`)); diff --git a/lib/ui/scripts/config.js b/lib/ui/scripts/config.js index fe546f3feff..9ac662ee17b 100644 --- a/lib/ui/scripts/config.js +++ b/lib/ui/scripts/config.js @@ -1,11 +1,13 @@ import path from 'path'; import webpack from 'webpack'; +// eslint-disable-next-line import/no-extraneous-dependencies +import UglifyJsPlugin from 'uglifyjs-webpack-plugin'; const resolveLocal = dir => path.join(__dirname, dir); const r = resolveLocal('../../../node_modules'); - const out = resolveLocal('../../core/dll'); + export default ({ entry, provided = [] }) => ({ name: 'storybook-ui', mode: 'production', @@ -27,7 +29,14 @@ export default ({ entry, provided = [] }) => ({ loader: 'babel-loader', options: { presets: [ - ['@babel/preset-env', { shippedProposals: true, modules: false }], + [ + '@babel/preset-env', + { + shippedProposals: true, + modules: false, + targets: '> 0.25%, not dead', + }, + ], '@babel/preset-react', '@babel/preset-flow', ], @@ -43,12 +52,27 @@ export default ({ entry, provided = [] }) => ({ }, plugins: [ + new webpack.ProgressPlugin(), new webpack.DllPlugin({ context: r, path: `${out}/[name]-manifest.json`, name: '[name]_dll', }), ], + optimization: { + concatenateModules: true, + portableRecords: true, + moduleIds: 'hashed', + minimizer: [ + new UglifyJsPlugin({ + extractComments: { + condition: /^\**!|@preserve|@license|@cc_on/i, + filename: file => file.replace('.js', '.LICENCE'), + banner: licenseFile => `License information can be found in ${licenseFile}`, + }, + }), + ], + }, performance: { hints: false, }, diff --git a/package.json b/package.json index c89da686ce6..d19dc9d83e7 100644 --- a/package.json +++ b/package.json @@ -65,10 +65,10 @@ "babel-eslint": "^10.0.1", "babel-jest": "^23.6.0", "babel-loader": "^8.0.4", + "babel-plugin-dynamic-import-node": "^2.2.0", "babel-plugin-emotion": "^9.2.11", "babel-plugin-macros": "^2.4.2", "babel-plugin-require-context-hook": "^1.0.0", - "babel-plugin-dynamic-import-node": "^2.2.0", "babel-preset-vue": "^2.0.2", "chalk": "^2.4.1", "codecov": "^3.1.0", @@ -122,7 +122,8 @@ "tslint": "~5.11.0", "tslint-config-prettier": "^1.15.0", "tslint-plugin-prettier": "^2.0.1", - "typescript": "^3.1.6" + "typescript": "^3.1.6", + "uglifyjs-webpack-plugin": "^2.0.1" }, "husky": { "hooks": { diff --git a/yarn.lock b/yarn.lock index a00f6f066ab..c48a214cd08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5967,6 +5967,26 @@ cacache@^11.0.1, cacache@^11.0.2: unique-filename "^1.1.0" y18n "^4.0.0" +cacache@^11.2.0: + version "11.3.1" + resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.1.tgz#d09d25f6c4aca7a6d305d141ae332613aa1d515f" + integrity sha512-2PEw4cRRDu+iQvBTTuttQifacYjLPhET+SYO/gEFMy8uhi+jlJREDAjSF5FWSdV/Aw5h18caHA7vMTw2c+wDzA== + dependencies: + bluebird "^3.5.1" + chownr "^1.0.1" + figgy-pudding "^3.1.0" + glob "^7.1.2" + graceful-fs "^4.1.11" + lru-cache "^4.1.3" + mississippi "^3.0.0" + mkdirp "^0.5.1" + move-concurrently "^1.0.1" + promise-inflight "^1.0.1" + rimraf "^2.6.2" + ssri "^6.0.0" + unique-filename "^1.1.0" + y18n "^4.0.0" + cache-base@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2" @@ -22264,7 +22284,7 @@ uglify-es@^3.1.9, uglify-es@^3.3.4: commander "~2.13.0" source-map "~0.6.1" -uglify-js@3.4.x, uglify-js@^3.1.4, uglify-js@^3.4.0: +uglify-js@3.4.x, uglify-js@^3.0.0, uglify-js@^3.1.4, uglify-js@^3.4.0: version "3.4.9" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3" integrity sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q== @@ -22286,6 +22306,20 @@ uglifyjs-webpack-plugin@^1.2.4: webpack-sources "^1.1.0" worker-farm "^1.5.2" +uglifyjs-webpack-plugin@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-2.0.1.tgz#f346af53ed496ce72fef462517d417f62bec3010" + integrity sha512-1HhCHkOB6wRCcv7htcz1QRPVbWPEY074RP9vzt/X0LF4xXm9l4YGd0qja7z88abDixQlnVwBjXsTBs+Xsn/eeQ== + dependencies: + cacache "^11.2.0" + find-cache-dir "^2.0.0" + schema-utils "^1.0.0" + serialize-javascript "^1.4.0" + source-map "^0.6.1" + uglify-js "^3.0.0" + webpack-sources "^1.1.0" + worker-farm "^1.5.2" + uid-number@0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81" From cf8e97998265d49681a8a9c5a0cf872dda8f5cee Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 29 Nov 2018 17:00:57 +0100 Subject: [PATCH 13/25] CHANGE to use terser over uglify --- lib/ui/package.json | 3 ++- lib/ui/scripts/config.js | 5 ++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/ui/package.json b/lib/ui/package.json index ecf420db185..32df3815e99 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -43,7 +43,8 @@ "react-treebeard": "^3.1.0" }, "devDependencies": { - "webpack": "^4.23.1" + "webpack": "^4.23.1", + "terser-webpack-plugin": "^1.1.0" }, "peerDependencies": { "react": "*", diff --git a/lib/ui/scripts/config.js b/lib/ui/scripts/config.js index 9ac662ee17b..8ca854447e8 100644 --- a/lib/ui/scripts/config.js +++ b/lib/ui/scripts/config.js @@ -1,7 +1,6 @@ import path from 'path'; import webpack from 'webpack'; -// eslint-disable-next-line import/no-extraneous-dependencies -import UglifyJsPlugin from 'uglifyjs-webpack-plugin'; +import TerserPlugin from 'terser-webpack-plugin'; const resolveLocal = dir => path.join(__dirname, dir); @@ -64,7 +63,7 @@ export default ({ entry, provided = [] }) => ({ portableRecords: true, moduleIds: 'hashed', minimizer: [ - new UglifyJsPlugin({ + new TerserPlugin({ extractComments: { condition: /^\**!|@preserve|@license|@cc_on/i, filename: file => file.replace('.js', '.LICENCE'), From 7096cf3ff2cf30bbd2605bc13f21f72ad1f91e78 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 29 Nov 2018 17:05:31 +0100 Subject: [PATCH 14/25] RENAME config to webpackDllsConfig for clarity and easier search-ability --- lib/ui/scripts/script.js | 2 +- lib/ui/scripts/{config.js => webpackDllsConfig.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename lib/ui/scripts/{config.js => webpackDllsConfig.js} (100%) diff --git a/lib/ui/scripts/script.js b/lib/ui/scripts/script.js index 4e0c90ab3bf..427b4c0870b 100644 --- a/lib/ui/scripts/script.js +++ b/lib/ui/scripts/script.js @@ -1,7 +1,7 @@ import path from 'path'; import webpack from 'webpack'; -import config from './config'; +import config from './webpackDllsConfig'; const resolveLocal = dir => path.join(__dirname, dir); const webpackAsPromised = c => diff --git a/lib/ui/scripts/config.js b/lib/ui/scripts/webpackDllsConfig.js similarity index 100% rename from lib/ui/scripts/config.js rename to lib/ui/scripts/webpackDllsConfig.js From b088ed011466231235da58cb97d7c939e17ec5de Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 29 Nov 2018 17:07:03 +0100 Subject: [PATCH 15/25] RENAME script to createDlls for clarity & search-ability --- lib/ui/package.json | 2 +- lib/ui/scripts/{script.js => createDlls.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename lib/ui/scripts/{script.js => createDlls.js} (100%) diff --git a/lib/ui/package.json b/lib/ui/package.json index 32df3815e99..73d44301964 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -17,7 +17,7 @@ "main": "dist/index.js", "jsnext:main": "src/index.js", "scripts": { - "dll": "node -r esm ./scripts/script.js", + "dll": "node -r esm ./scripts/createDlls.js", "prepare": "node ../../scripts/prepare.js" }, "dependencies": { diff --git a/lib/ui/scripts/script.js b/lib/ui/scripts/createDlls.js similarity index 100% rename from lib/ui/scripts/script.js rename to lib/ui/scripts/createDlls.js From 6efe2a50492e92579bfac3748597d03ae527e656 Mon Sep 17 00:00:00 2001 From: Igor Date: Thu, 29 Nov 2018 17:20:26 +0100 Subject: [PATCH 16/25] Update lib/core/src/server/manager/manager-webpack.config.js Co-Authored-By: ndelangen --- lib/core/src/server/manager/manager-webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js index 0ab87962321..919fcb8c710 100644 --- a/lib/core/src/server/manager/manager-webpack.config.js +++ b/lib/core/src/server/manager/manager-webpack.config.js @@ -10,7 +10,7 @@ import { version } from '../../../package.json'; import { getManagerHeadHtml } from '../utils/template'; import { loadEnv, getBabelRuntimePath } from '../config/utils'; -const r = require.resolve('@storybook/core/package.json').replace('package.json', ''); +const coreDirName = path.dirname(require.resolve('@storybook/core/package.json')); const context = path.join(r, '../../node_modules'); const cacheDir = findCacheDir({ name: 'storybook' }); From 7b8c7ae23cf67514bbfc23b48efb45df093bca6f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 29 Nov 2018 20:12:49 +0100 Subject: [PATCH 17/25] REFACTOR to use fs-extra because I hear people like async/await && REFACTOR writing stats to file --- lib/core/package.json | 1 + lib/core/src/server/build-dev.js | 72 ++++++++++++++++---------------- yarn.lock | 21 +++++++--- 3 files changed, 53 insertions(+), 41 deletions(-) diff --git a/lib/core/package.json b/lib/core/package.json index 596c9dde0d2..d523342192c 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -55,6 +55,7 @@ "file-loader": "^2.0.0", "file-system-cache": "^1.0.5", "find-cache-dir": "^2.0.0", + "fs-extra": "^7.0.1", "global": "^4.3.2", "html-webpack-plugin": "^4.0.0-beta.2", "inquirer": "^6.2.0", diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js index f8cc2b197df..3c737bf6373 100644 --- a/lib/core/src/server/build-dev.js +++ b/lib/core/src/server/build-dev.js @@ -3,7 +3,7 @@ import https from 'https'; import ip from 'ip'; import favicon from 'serve-favicon'; import path from 'path'; -import fs from 'fs'; +import fs from 'fs-extra'; import chalk from 'chalk'; import { logger, colors } from '@storybook/node-logger'; import fetch from 'node-fetch'; @@ -27,7 +27,15 @@ const cache = Cache({ ns: 'storybook', // Optional. A grouping namespace for items. }); -function getServer(app, options) { +const writeStats = async (name, stats) => { + await fs.writeFile( + path.join(cacheDir, `${name}-stats.json`), + JSON.stringify(stats.toJson(), null, 2), + 'utf8' + ); +}; + +async function getServer(app, options) { if (!options.https) { return app; } @@ -43,38 +51,40 @@ function getServer(app, options) { } const sslOptions = { - ca: (options.sslCa || []).map(ca => fs.readFileSync(ca, 'utf-8')), - cert: fs.readFileSync(options.sslCert, 'utf-8'), - key: fs.readFileSync(options.sslKey, 'utf-8'), + ca: await Promise.all((options.sslCa || []).map(ca => fs.readFile(ca, 'utf-8'))), + cert: await fs.readFile(options.sslCert, 'utf-8'), + key: await fs.readFile(options.sslKey, 'utf-8'), }; return https.createServer(sslOptions, app); } -function applyStatic(app, options) { +async function applyStatic(app, options) { const { staticDir } = options; let hasCustomFavicon = false; if (staticDir) { - staticDir.forEach(dir => { - const staticPath = path.resolve(dir); + await Promise.all( + staticDir.map(async dir => { + const staticPath = path.resolve(dir); - if (!fs.existsSync(staticPath)) { - logger.error(`Error: no such directory to load static files: ${staticPath}`); - process.exit(-1); - } + if (await !fs.exists(staticPath)) { + logger.error(`Error: no such directory to load static files: ${staticPath}`); + process.exit(-1); + } - logger.info(`=> Loading static files from: ${staticPath} .`); - app.use(express.static(staticPath, { index: false })); + logger.info(`=> Loading static files from: ${staticPath} .`); + app.use(express.static(staticPath, { index: false })); - const faviconPath = path.resolve(staticPath, 'favicon.ico'); + const faviconPath = path.resolve(staticPath, 'favicon.ico'); - if (fs.existsSync(faviconPath)) { - hasCustomFavicon = true; - app.use(favicon(faviconPath)); - } - }); + if (await fs.exists(faviconPath)) { + hasCustomFavicon = true; + app.use(favicon(faviconPath)); + } + }) + ); } if (!hasCustomFavicon) { @@ -139,9 +149,9 @@ export async function buildDevStandalone(options) { } const app = express(); - const server = getServer(app, options); + const server = await getServer(app, options); - applyStatic(app, options); + await applyStatic(app, options); const storybookMiddleware = await storybook(options); @@ -150,7 +160,7 @@ export async function buildDevStandalone(options) { const serverListening = listenToServer(server, listenAddr); const [ - { iframeStats, managerStats, managerTotalTime, iframeTotalTime }, + { previewStats, managerStats, managerTotalTime, previewTotalTime }, updateInfo, ] = await Promise.all([ webpackValid, @@ -216,7 +226,7 @@ export async function buildDevStandalone(options) { ${colors.green(`Storybook ${chalk.bold(options.packageJson.version)} started`)} ${chalk.gray(stripIndents` ${chalk.underline(prettyTime(managerTotalTime))} for manager and ${chalk.underline( - prettyTime(iframeTotalTime) + prettyTime(previewTotalTime) )} for preview`)} ${serveMessage.toString()}${updateMessage ? `\n\n${updateMessage}` : ''} @@ -226,19 +236,11 @@ export async function buildDevStandalone(options) { ); if (options.smokeTest) { - fs.writeFileSync( - path.join(cacheDir, 'preview-stats.json'), - JSON.stringify(iframeStats.toJson(), null, 2), - 'utf8' - ); - fs.writeFileSync( - path.join(cacheDir, 'manager-stats.json'), - JSON.stringify(managerStats.toJson(), null, 2), - 'utf8' - ); + await writeStats('preview', previewStats); + await writeStats('manager', managerStats); logger.info(`stats written to => ${chalk.cyan(path.join(cacheDir, '[name].json'))}`); - process.exit(iframeStats.toJson().warnings.length ? 1 : 0); + process.exit(previewStats.toJson().warnings.length ? 1 : 0); process.exit(managerStats.toJson().warnings.length ? 1 : 0); } else if (!options.ci) { opn(address).catch(() => { diff --git a/yarn.lock b/yarn.lock index c48a214cd08..2b5aea190e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10422,6 +10422,15 @@ fs-extra@^5.0.0: jsonfile "^4.0.0" universalify "^0.1.0" +fs-extra@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9" + integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw== + dependencies: + graceful-fs "^4.1.2" + jsonfile "^4.0.0" + universalify "^0.1.0" + fs-minipass@^1.2.5: version "1.2.5" resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d" @@ -10967,12 +10976,12 @@ graphql-request@^1.5.0: dependencies: cross-fetch "2.2.2" -graphql@^0.13.2, graphql@^14.0.2: - version "0.13.2" - resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270" - integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog== +graphql@^14.0.2: + version "14.0.2" + resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.0.2.tgz#7dded337a4c3fd2d075692323384034b357f5650" + integrity sha512-gUC4YYsaiSJT1h40krG3J+USGlwhzNTXSb4IOZljn9ag5Tj+RkoXrWp+Kh7WyE3t1NCfab5kzCuxBIvOMERMXw== dependencies: - iterall "^1.2.1" + iterall "^1.2.2" grizzly@^3.0.3: version "3.0.3" @@ -12719,7 +12728,7 @@ istextorbinary@2.1.0: editions "^1.1.1" textextensions "1 || 2" -iterall@^1.2.1: +iterall@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7" integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA== From 26e935716932a69e5e8690953ed67ea80057b8bb Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 29 Nov 2018 21:06:13 +0100 Subject: [PATCH 18/25] RENAME script to create DLLs && REMOVE unneeded babel loader in DLL config --- lib/ui/package.json | 2 +- lib/ui/scripts/webpackDllsConfig.js | 26 -------------------------- scripts/bootstrap.js | 2 +- 3 files changed, 2 insertions(+), 28 deletions(-) diff --git a/lib/ui/package.json b/lib/ui/package.json index 73d44301964..897cd0c6526 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -17,7 +17,7 @@ "main": "dist/index.js", "jsnext:main": "src/index.js", "scripts": { - "dll": "node -r esm ./scripts/createDlls.js", + "createDlls": "node -r esm ./scripts/createDlls.js", "prepare": "node ../../scripts/prepare.js" }, "dependencies": { diff --git a/lib/ui/scripts/webpackDllsConfig.js b/lib/ui/scripts/webpackDllsConfig.js index 8ca854447e8..1e472c18b0d 100644 --- a/lib/ui/scripts/webpackDllsConfig.js +++ b/lib/ui/scripts/webpackDllsConfig.js @@ -19,32 +19,6 @@ export default ({ entry, provided = [] }) => ({ }, externals: provided, - module: { - rules: [ - { - test: /\.jsx?$/, - use: [ - { - loader: 'babel-loader', - options: { - presets: [ - [ - '@babel/preset-env', - { - shippedProposals: true, - modules: false, - targets: '> 0.25%, not dead', - }, - ], - '@babel/preset-react', - '@babel/preset-flow', - ], - }, - }, - ], - }, - ], - }, resolve: { extensions: ['.mjs', '.js', '.jsx', '.json'], modules: [path.join(__dirname, '../../../node_modules')], diff --git a/scripts/bootstrap.js b/scripts/bootstrap.js index 82764f260df..0a53624111d 100755 --- a/scripts/bootstrap.js +++ b/scripts/bootstrap.js @@ -91,7 +91,7 @@ const tasks = { option: '--dll', command: () => { log.info(prefix, 'dll'); - spawn('lerna run dll --scope "@storybook/ui"'); + spawn('lerna run createDlls --scope "@storybook/ui"'); }, }), docs: createTask({ From 4141f485345187e75cd6164b831e3060ad5089af Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 29 Nov 2018 21:15:42 +0100 Subject: [PATCH 19/25] REMOVE @ndelangen/html-webpack-harddisk-plugin --- lib/core/package.json | 1 - yarn.lock | 19 ++++++------------- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/lib/core/package.json b/lib/core/package.json index d523342192c..3f0be45700d 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -27,7 +27,6 @@ "@emotion/core": "^0.13.1", "@emotion/provider": "^0.11.2", "@emotion/styled": "^0.10.6", - "@ndelangen/html-webpack-harddisk-plugin": "^0.2.0", "@storybook/addons": "4.1.0-alpha.9", "@storybook/channel-postmessage": "4.1.0-alpha.9", "@storybook/client-logger": "4.1.0-alpha.9", diff --git a/yarn.lock b/yarn.lock index 2b5aea190e0..e1f843a2e74 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1959,13 +1959,6 @@ 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.2": version "6.1.2" resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-6.1.2.tgz#20fb5ab4d79571b804a348093aa11a167fe2946f" @@ -10976,12 +10969,12 @@ graphql-request@^1.5.0: dependencies: cross-fetch "2.2.2" -graphql@^14.0.2: - version "14.0.2" - resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.0.2.tgz#7dded337a4c3fd2d075692323384034b357f5650" - integrity sha512-gUC4YYsaiSJT1h40krG3J+USGlwhzNTXSb4IOZljn9ag5Tj+RkoXrWp+Kh7WyE3t1NCfab5kzCuxBIvOMERMXw== +graphql@^0.13.2, graphql@^14.0.2: + version "0.13.2" + resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270" + integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog== dependencies: - iterall "^1.2.2" + iterall "^1.2.1" grizzly@^3.0.3: version "3.0.3" @@ -12728,7 +12721,7 @@ istextorbinary@2.1.0: editions "^1.1.1" textextensions "1 || 2" -iterall@^1.2.2: +iterall@^1.2.1: version "1.2.2" resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7" integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA== From 998dab0a392849ce950205e161b04460f489f756 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 29 Nov 2018 21:23:37 +0100 Subject: [PATCH 20/25] REFACTOR build-static to use fs-extra as well && CLEANUP --- lib/core/src/server/build-dev.js | 2 +- lib/core/src/server/build-static.js | 71 +++++------------------------ 2 files changed, 13 insertions(+), 60 deletions(-) diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js index 3c737bf6373..ea9d878f522 100644 --- a/lib/core/src/server/build-dev.js +++ b/lib/core/src/server/build-dev.js @@ -64,7 +64,7 @@ async function applyStatic(app, options) { let hasCustomFavicon = false; - if (staticDir) { + if (staticDir && staticDir.length) { await Promise.all( staticDir.map(async dir => { const staticPath = path.resolve(dir); diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 5b23d599abc..6c05eb91b73 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -1,4 +1,4 @@ -import fs from 'fs'; +import fs from 'fs-extra'; import path from 'path'; import webpack from 'webpack'; import shelljs from 'shelljs'; @@ -32,13 +32,17 @@ export async function buildStaticStandalone(options) { // copy all static files if (staticDir && staticDir.length) { - staticDir.forEach(dir => { - if (!fs.existsSync(dir)) { - logger.error(`Error: no such directory to load static files: ${dir}`); - process.exit(-1); - } - shelljs.cp('-r', `${dir}/!(index.html)`, outputDir); - }); + await Promise.all( + staticDir.map(async dir => { + const staticPath = path.resolve(dir); + + if (await !fs.exists(staticPath)) { + logger.error(`Error: no such directory to load static files: ${staticPath}`); + process.exit(-1); + } + shelljs.cp('-r', `${dir}/!(index.html)`, outputDir); + }) + ); logger.info(`=> Copying static files from: ${staticDir.join(', ')}`); } @@ -128,57 +132,6 @@ export async function buildStaticStandalone(options) { }); logger.info(`=> Output directory: ${outputDir}`); - - // return new Promise(res => { - // res(); - // }) - // .then(() => { - // startTime = process.hrtime(); - // logger.info('building preview..'); - - // return loadConfig({ - // configType, - // outputDir, - // packageJson, - // corePresets: [require.resolve('./preview/preview-preset.js')], - // overridePresets: [require.resolve('./preview/custom-webpack-preset.js')], - // ...options, - // }); - // }) - // .then( - // config => - // new Promise((resolve, reject) => { - // webpack(config).run((err, stats) => { - // if (err || !stats || stats.hasErrors()) { - // logger.error('Failed to build the preview'); - // // eslint-disable-next-line no-unused-expressions - // err && logger.error(err.message); - // // eslint-disable-next-line no-unused-expressions - // stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e)); - // process.exitCode = 1; - // reject(err); - // return; - // } - - // resolve(stats); - // }); - // }) - // ) - // .then(stats => { - // logger.trace({ message: 'preview built', time: process.hrtime(startTime) }); - // stats.toJson().warnings.forEach(e => logger.warn(e)); - // logger.info(`output directory: ${outputDir}`); - // }) - // .catch(p => { - // if (p && p.toJson) { - // const stats = p.toJson(); - - // stats.errors.forEach(e => logger.error(e)); - // stats.warnings.forEach(e => logger.error(e)); - // } else { - // logger.error(p); - // } - // }); } export function buildStatic({ packageJson, ...loadOptions }) { From 8231388ac9328965f120661c97c415baee1a4daf Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 29 Nov 2018 21:39:43 +0100 Subject: [PATCH 21/25] ADD watch mode for static build back --- lib/core/src/server/build-static.js | 66 ++++++++++++++++++----------- 1 file changed, 42 insertions(+), 24 deletions(-) diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 6c05eb91b73..3b0d7fd3ca4 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -10,7 +10,7 @@ import loadConfig from './config'; import loadManagerConfig from './manager/manager-config'; export async function buildStaticStandalone(options) { - const { staticDir, configDir, packageJson } = options; + const { staticDir, configDir, packageJson, watch } = options; const configType = 'PRODUCTION'; const outputDir = path.join(process.cwd(), options.outputDir); @@ -102,34 +102,52 @@ export async function buildStaticStandalone(options) { ...options, }); - logger.info('=> Compiling preview..'); - await new Promise((resolve, reject) => { - webpack(previewConfig).run((error, stats) => { - if (error || !stats || stats.hasErrors()) { - logger.error('=> Failed to build the preview'); - - if (error) { - logger.error(error.message); + if (watch) { + logger.info('=> Compiling preview in watch mode..'); + await new Promise(() => { + webpack(previewConfig).watch( + { + aggregateTimeout: 1, + }, + (error, stats) => { + if (!error) { + console.log(stats.toString({ colors: true })); + } else { + logger.error(error.message); + } } - - if ((stats && stats.hasErrors()) || stats.hasWarnings()) { - const { warnings, errors } = stats.toJson(); - - errors.forEach(e => logger.error(e)); - warnings.forEach(e => logger.error(e)); + ); + }); + } else { + logger.info('=> Compiling preview..'); + await new Promise((resolve, reject) => { + webpack(previewConfig).run((error, stats) => { + if (error || !stats || stats.hasErrors()) { + logger.error('=> Failed to build the preview'); + + if (error) { + logger.error(error.message); + } + + if ((stats && stats.hasErrors()) || stats.hasWarnings()) { + const { warnings, errors } = stats.toJson(); + + errors.forEach(e => logger.error(e)); + warnings.forEach(e => logger.error(e)); + } + + process.exitCode = 1; + reject(error || stats); + return; } - process.exitCode = 1; - reject(error || stats); - return; - } - - logger.trace({ message: '=> Preview built', time: process.hrtime(previewStartTime) }); - stats.toJson().warnings.forEach(e => logger.warn(e)); + logger.trace({ message: '=> Preview built', time: process.hrtime(previewStartTime) }); + stats.toJson().warnings.forEach(e => logger.warn(e)); - resolve(stats); + resolve(stats); + }); }); - }); + } logger.info(`=> Output directory: ${outputDir}`); } From 80e4eeb38dd41a0ced4df6e9a254f9fabff9d332 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 30 Nov 2018 01:03:16 +0100 Subject: [PATCH 22/25] FIX bug in checks for errors/warnings --- lib/core/src/server/build-static.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 3b0d7fd3ca4..389283fc824 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -70,7 +70,7 @@ export async function buildStaticStandalone(options) { logger.error(error.message); } - if ((stats && stats.hasErrors()) || stats.hasWarnings()) { + if (stats && (stats.hasErrors() || stats.hasWarnings())) { const { warnings, errors } = stats.toJson(); errors.forEach(e => logger.error(e)); @@ -111,6 +111,7 @@ export async function buildStaticStandalone(options) { }, (error, stats) => { if (!error) { + // eslint-disable-next-line no-console console.log(stats.toString({ colors: true })); } else { logger.error(error.message); @@ -129,7 +130,7 @@ export async function buildStaticStandalone(options) { logger.error(error.message); } - if ((stats && stats.hasErrors()) || stats.hasWarnings()) { + if (stats && (stats.hasErrors() || stats.hasWarnings())) { const { warnings, errors } = stats.toJson(); errors.forEach(e => logger.error(e)); From d781dc2f2734b4c550218ea57a7916029cc64de7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 30 Nov 2018 01:05:43 +0100 Subject: [PATCH 23/25] FIX dll copy command --- lib/core/src/server/build-static.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 389283fc824..06a08137315 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -47,7 +47,7 @@ export async function buildStaticStandalone(options) { } logger.info(`=> Copying prebuild dll's..`); - shelljs.cp(dllPath, path.join(outputDir, 'sb_dll')); + shelljs.cp('-r', dllPath, path.join(outputDir, 'sb_dll')); logger.info('=> Building manager..'); const managerStartTime = process.hrtime(); From 0b22923e5c552e41d267be787bdab737f5178444 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 30 Nov 2018 01:13:45 +0100 Subject: [PATCH 24/25] FIX bootstrap script after rename to createDlls --- scripts/bootstrap.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/bootstrap.js b/scripts/bootstrap.js index 0a53624111d..b968eff9def 100755 --- a/scripts/bootstrap.js +++ b/scripts/bootstrap.js @@ -82,7 +82,7 @@ const tasks = { log.info(prefix, 'prepare'); spawn('lerna run prepare -- --silent'); log.info(prefix, 'dll'); - spawn('lerna run dll --scope "@storybook/ui"'); + spawn('lerna run createDlls --scope "@storybook/ui"'); }, }), dll: createTask({ From 67d26291ee4e5fe4f0c7ebcc3dbd4f67258ae074 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 30 Nov 2018 12:28:59 +0100 Subject: [PATCH 25/25] FIX after rename of iframe to preview --- lib/core/src/server/build-static.js | 9 ++++----- lib/core/src/server/dev-server.js | 27 ++++++++++++++------------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js index 06a08137315..d89080b5897 100644 --- a/lib/core/src/server/build-static.js +++ b/lib/core/src/server/build-static.js @@ -125,9 +125,11 @@ export async function buildStaticStandalone(options) { webpack(previewConfig).run((error, stats) => { if (error || !stats || stats.hasErrors()) { logger.error('=> Failed to build the preview'); + process.exitCode = 1; if (error) { logger.error(error.message); + return reject(error); } if (stats && (stats.hasErrors() || stats.hasWarnings())) { @@ -135,17 +137,14 @@ export async function buildStaticStandalone(options) { errors.forEach(e => logger.error(e)); warnings.forEach(e => logger.error(e)); + return reject(stats); } - - process.exitCode = 1; - reject(error || stats); - return; } logger.trace({ message: '=> Preview built', time: process.hrtime(previewStartTime) }); stats.toJson().warnings.forEach(e => logger.warn(e)); - resolve(stats); + return resolve(stats); }); }); } diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 4a3f382c73a..7fd664eded1 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -29,7 +29,7 @@ export default async function(options) { const startTime = process.hrtime(); let managerTotalTime; - let iframeTotalTime; + let previewTotalTime; const managerPromise = loadManagerConfig({ configType, @@ -39,7 +39,7 @@ export default async function(options) { corePresets: [require.resolve('./manager/manager-preset.js')], }).then( config => - new Promise((res, rej) => { + new Promise((resolve, reject) => { webpack(config).watch( { aggregateTimeout: 1, @@ -47,11 +47,10 @@ export default async function(options) { }, (err, stats) => { managerTotalTime = process.hrtime(startTime); - if (err || stats.hasErrors()) { - rej(stats); + reject(stats); } else { - res(stats); + resolve(stats); } } ); @@ -98,20 +97,22 @@ export default async function(options) { // custom middleware middlewareFn(router); - const iframePromise = new Promise((res, rej) => { + const previewPromise = new Promise((resolve, reject) => { webpackDevMiddlewareInstance.waitUntilValid(stats => { - iframeTotalTime = process.hrtime(startTime); + previewTotalTime = process.hrtime(startTime); - if (stats.hasErrors()) { - rej(stats); + if (!stats) { + reject(new Error('no stats after building iframe')); + } else if (stats.hasErrors()) { + reject(stats); } else { - res(stats); + resolve(stats); } }); }); - Promise.all([managerPromise, iframePromise]) - .then(([managerStats, iframeStats]) => { + Promise.all([managerPromise, previewPromise]) + .then(([managerStats, previewStats]) => { router.get('/', (request, response) => { response.set('Content-Type', 'text/html'); response.sendFile(path.join(`${outputDir}/index.html`)); @@ -129,7 +130,7 @@ export default async function(options) { response.sendFile(path.join(`${outputDir}/${request.params[0]}`)); }); - webpackResolve({ iframeStats, managerStats, managerTotalTime, iframeTotalTime }); + webpackResolve({ previewStats, managerStats, managerTotalTime, previewTotalTime }); }) .catch(e => webpackReject(e));