From 8310948e3b8ab2da66a27106eeea24ec6669a56f Mon Sep 17 00:00:00 2001 From: Brody McKee Date: Sun, 17 May 2020 14:00:42 +0300 Subject: [PATCH 01/37] feat: add root TypeScript support --- .../src/server/framework-preset-angular.ts | 1 - app/react/package.json | 1 + .../framework-preset-react-docgen.test.ts | 70 ++++--------------- .../server/framework-preset-react-docgen.ts | 45 ++++++++---- app/vue/package.json | 1 + app/vue/src/server/framework-preset-vue.ts | 12 ++++ examples/react-ts/README.md | 3 + examples/react-ts/main.js | 7 ++ examples/react-ts/package.json | 19 +++++ examples/react-ts/src/button.stories.tsx | 6 ++ examples/react-ts/src/button.tsx | 7 ++ examples/react-ts/tsconfig.json | 10 +++ lib/core/package.json | 3 +- lib/core/src/server/common/babel.js | 1 + lib/core/src/server/config.js | 20 +++++- .../src/server/config/useBaseTsSupport.js | 8 +++ .../server/manager/babel-loader-manager.js | 1 - .../server/preview/babel-loader-preview.js | 5 +- .../server/preview/iframe-webpack.config.js | 11 ++- yarn.lock | 21 ++++-- 20 files changed, 171 insertions(+), 81 deletions(-) create mode 100644 examples/react-ts/README.md create mode 100644 examples/react-ts/main.js create mode 100644 examples/react-ts/package.json create mode 100644 examples/react-ts/src/button.stories.tsx create mode 100644 examples/react-ts/src/button.tsx create mode 100644 examples/react-ts/tsconfig.json create mode 100644 lib/core/src/server/config/useBaseTsSupport.js diff --git a/app/angular/src/server/framework-preset-angular.ts b/app/angular/src/server/framework-preset-angular.ts index 8521d9c07b88..5b0239b58a72 100644 --- a/app/angular/src/server/framework-preset-angular.ts +++ b/app/angular/src/server/framework-preset-angular.ts @@ -51,7 +51,6 @@ export function webpack( }, resolve: { ...config.resolve, - extensions: ['.ts', '.tsx', ...config.resolve.extensions], }, plugins: [ ...config.plugins, diff --git a/app/react/package.json b/app/react/package.json index 2bfe6fd65353..d08a59aebedd 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -50,6 +50,7 @@ "lodash": "^4.17.15", "prop-types": "^15.7.2", "react-dev-utils": "^10.0.0", + "react-docgen-typescript-loader": "^3.7.2", "regenerator-runtime": "^0.13.3", "semver": "^7.3.2", "ts-dedent": "^1.1.1", diff --git a/app/react/src/server/framework-preset-react-docgen.test.ts b/app/react/src/server/framework-preset-react-docgen.test.ts index 1b1f0e27ca87..d4130c0aba30 100644 --- a/app/react/src/server/framework-preset-react-docgen.test.ts +++ b/app/react/src/server/framework-preset-react-docgen.test.ts @@ -1,10 +1,9 @@ -import { TransformOptions } from '@babel/core'; import * as preset from './framework-preset-react-docgen'; describe('framework-preset-react-docgen', () => { const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen'); - it('should return the config with the extra plugins when `plugins` is an array.', () => { + it('should return the config with the extra plugin', () => { const babelConfig = { babelrc: false, presets: ['env', 'foo-preset'], @@ -15,62 +14,21 @@ describe('framework-preset-react-docgen', () => { expect(config).toEqual({ babelrc: false, - plugins: [ - 'foo-plugin', - [ - babelPluginReactDocgenPath, - { - DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', - }, - ], - ], - presets: ['env', 'foo-preset'], - }); - }); - - it('should return the config with the extra plugins when `plugins` is not an array.', () => { - const babelConfig: TransformOptions = { - babelrc: false, - presets: ['env', 'foo-preset'], - plugins: ['bar-plugin'], - }; - - const config = preset.babel(babelConfig); - - expect(config).toEqual({ - babelrc: false, - plugins: [ - 'bar-plugin', - [ - babelPluginReactDocgenPath, - { - DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', - }, - ], - ], - presets: ['env', 'foo-preset'], - }); - }); - - it('should return the config only with the extra plugins when `plugins` is not present.', () => { - const babelConfig = { - babelrc: false, + plugins: ['foo-plugin'], presets: ['env', 'foo-preset'], - }; - - const config = preset.babel(babelConfig); - - expect(config).toEqual({ - babelrc: false, - plugins: [ - [ - babelPluginReactDocgenPath, - { - DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', - }, - ], + overrides: [ + { + test: /\.(mjs|jsx?)$/, + plugins: [ + [ + babelPluginReactDocgenPath, + { + DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', + }, + ], + ], + }, ], - presets: ['env', 'foo-preset'], }); }); }); diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts index fae63672c360..2e9f24f39363 100644 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ b/app/react/src/server/framework-preset-react-docgen.ts @@ -1,22 +1,43 @@ import { TransformOptions } from '@babel/core'; +import { Configuration } from 'webpack'; -export function babel(config: TransformOptions) { - // Ensure plugins are defined or fallback to an array to avoid empty values. - const babelConfigPlugins = config.plugins || []; - - const extraPlugins = [ - [ - require.resolve('babel-plugin-react-docgen'), +export function babel( + config: TransformOptions, + { typescript: { docgen = 'react-docgen-typescript' } = {} } = {} +) { + return { + ...config, + overrides: [ { - DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', + test: docgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, + plugins: [ + [ + require.resolve('babel-plugin-react-docgen'), + { + DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', + }, + ], + ], }, ], - ]; + }; +} - // If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it - // as a single value, if it is an `Array` it will spread. +export function webpackFinal( + config: Configuration, + { typescript: { docgen = 'react-docgen-typescript' } } = { typescript: {} } +) { + if (docgen !== 'react-docgen-typescript') return config; return { ...config, - plugins: [].concat(babelConfigPlugins, extraPlugins), + module: { + ...config.module, + rules: [ + ...config.module.rules, + { + loader: require.resolve('react-docgen-typescript-loader'), + }, + ], + }, }; } diff --git a/app/vue/package.json b/app/vue/package.json index 161eda3bf5f0..1b320821aaba 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -57,6 +57,7 @@ "css-loader": "*", "react": "*", "react-dom": "*", + "ts-loader": "^7.0.4", "vue": "^2.6.8", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.8" diff --git a/app/vue/src/server/framework-preset-vue.ts b/app/vue/src/server/framework-preset-vue.ts index aa063f3d0a4a..490aa2d9b81a 100644 --- a/app/vue/src/server/framework-preset-vue.ts +++ b/app/vue/src/server/framework-preset-vue.ts @@ -14,6 +14,18 @@ export function webpack(config: Configuration) { loader: require.resolve('vue-loader'), options: {}, }, + { + test: /\.tsx?$/, + use: [ + { + loader: require.resolve('ts-loader'), + options: { + transpileOnly: true, + appendTsSuffixTo: [/\.vue$/], + }, + }, + ], + }, ], }, resolve: { diff --git a/examples/react-ts/README.md b/examples/react-ts/README.md new file mode 100644 index 000000000000..70d4f2ccb02b --- /dev/null +++ b/examples/react-ts/README.md @@ -0,0 +1,3 @@ +# Storybook TS example + +This Storybook demonstrates support for TypeScript in Storybook without additional configuration. diff --git a/examples/react-ts/main.js b/examples/react-ts/main.js new file mode 100644 index 000000000000..752ddf1f25e9 --- /dev/null +++ b/examples/react-ts/main.js @@ -0,0 +1,7 @@ +module.exports = { + stories: ['./src/*.stories.*'], + typescript: { + check: true, + checkOptions: {}, + }, +}; diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json new file mode 100644 index 000000000000..ee22103c642f --- /dev/null +++ b/examples/react-ts/package.json @@ -0,0 +1,19 @@ +{ + "name": "@storybook/example-react-ts", + "version": "6.0.0-beta.7", + "private": true, + "scripts": { + "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./", + "debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll", + "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll" + }, + "dependencies": { + "@storybook/react": "6.0.0-beta.7", + "@types/react": "^16.9.35", + "@types/react-dom": "^16.9.8", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "typescript": "^3.9.2", + "webpack": "^4.43.0" + } +} diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx new file mode 100644 index 000000000000..41ea8e4e19c0 --- /dev/null +++ b/examples/react-ts/src/button.stories.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Button } from './button'; + +export default { component: Button, title: 'Examples / Button' }; + +export const SimpleButton = () => ; diff --git a/examples/react-ts/tsconfig.json b/examples/react-ts/tsconfig.json new file mode 100644 index 000000000000..8b8ebe54e839 --- /dev/null +++ b/examples/react-ts/tsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "skipLibCheck": true, + "jsx": "preserve", + "esModuleInterop": true, + "strict": true + }, + "include": ["src/*"] +} diff --git a/lib/core/package.json b/lib/core/package.json index 9c0aee4f2c01..fe53259c654c 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -36,7 +36,7 @@ "@babel/plugin-transform-react-constant-elements": "^7.2.0", "@babel/preset-env": "^7.9.6", "@babel/preset-react": "^7.8.3", - "@babel/preset-typescript": "^7.8.3", + "@babel/preset-typescript": "^7.9.0", "@babel/register": "^7.8.3", "@storybook/addons": "6.0.0-beta.7", "@storybook/api": "6.0.0-beta.7", @@ -74,6 +74,7 @@ "file-system-cache": "^1.0.5", "find-cache-dir": "^3.0.0", "find-up": "^4.1.0", + "fork-ts-checker-webpack-plugin": "^4.1.4", "fs-extra": "^9.0.0", "glob": "^7.1.6", "glob-base": "^0.3.0", diff --git a/lib/core/src/server/common/babel.js b/lib/core/src/server/common/babel.js index 5fccc35dde54..5de00f0722c5 100644 --- a/lib/core/src/server/common/babel.js +++ b/lib/core/src/server/common/babel.js @@ -6,6 +6,7 @@ export default () => { require.resolve('@babel/preset-env'), { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }, ], + require.resolve('@babel/preset-typescript'), ], plugins: [ require.resolve('@babel/plugin-proposal-object-rest-spread'), diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index 5c89aeffa12b..a01816dae014 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -1,3 +1,4 @@ +import { logger } from '@storybook/node-logger'; import loadPresets from './presets'; import loadCustomPresets from './common/custom-presets'; @@ -5,8 +6,13 @@ async function getPreviewWebpackConfig(options, presets) { const babelOptions = await presets.apply('babel', {}, options); const entries = await presets.apply('entries', [], options); const stories = await presets.apply('stories', [], options); + const typescriptOptions = await presets.apply('typescript', {}, options); - return presets.apply('webpack', {}, { ...options, babelOptions, entries, stories }); + return presets.apply( + 'webpack', + {}, + { ...options, babelOptions, entries, stories, typescriptOptions } + ); } export default async (options) => { @@ -20,7 +26,17 @@ export default async (options) => { ...overridePresets, ]; - const presets = loadPresets(presetsConfig, restOptions); + // Remove `@storybook/preset-typescript` and add a warning if in use. + const filteredPresetConfig = presetsConfig.filter( + (preset) => !/@storybook[\\\\/]preset-typescript/.test(preset) + ); + if (filteredPresetConfig.length < presetsConfig.length) { + logger.warn( + 'Storybook now supports TypeScript natively. You can safely remove `@storybook/preset-typescript`.' + ); + } + + const presets = loadPresets(filteredPresetConfig, restOptions); return getPreviewWebpackConfig({ ...restOptions, presets }, presets); }; diff --git a/lib/core/src/server/config/useBaseTsSupport.js b/lib/core/src/server/config/useBaseTsSupport.js new file mode 100644 index 000000000000..0706158ed3e5 --- /dev/null +++ b/lib/core/src/server/config/useBaseTsSupport.js @@ -0,0 +1,8 @@ +/** + * Returns true if the framework can use the base TS config. + * @param {string} framework + */ +export const useBaseTsSupport = (framework) => { + // These packages both have their own TS implementation. + return !['vue', 'angular'].includes(framework); +}; diff --git a/lib/core/src/server/manager/babel-loader-manager.js b/lib/core/src/server/manager/babel-loader-manager.js index 6086275c7380..64a10c624b3b 100644 --- a/lib/core/src/server/manager/babel-loader-manager.js +++ b/lib/core/src/server/manager/babel-loader-manager.js @@ -12,7 +12,6 @@ export default () => ({ require.resolve('@babel/preset-env'), { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }, ], - require.resolve('@babel/preset-typescript'), require.resolve('@babel/preset-react'), ], plugins: [ diff --git a/lib/core/src/server/preview/babel-loader-preview.js b/lib/core/src/server/preview/babel-loader-preview.js index 71f06b021cac..ecae102b0860 100644 --- a/lib/core/src/server/preview/babel-loader-preview.js +++ b/lib/core/src/server/preview/babel-loader-preview.js @@ -1,7 +1,8 @@ import { includePaths, excludePaths } from '../config/utils'; +import { useBaseTsSupport } from '../config/useBaseTsSupport'; -export default (options) => ({ - test: /\.(mjs|jsx?)$/, +export default (options, framework) => ({ + test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, use: [ { loader: 'babel-loader', diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js index 0bbf7a79dc65..ae050e614e9f 100644 --- a/lib/core/src/server/preview/iframe-webpack.config.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -8,6 +8,7 @@ import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModul import TerserWebpackPlugin from 'terser-webpack-plugin'; import VirtualModulePlugin from 'webpack-virtual-modules'; import PnpWebpackPlugin from 'pnp-webpack-plugin'; +import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import resolveFrom from 'resolve-from'; @@ -16,6 +17,7 @@ import createBabelLoader from './babel-loader-preview'; import { nodeModulesPaths, loadEnv } from '../config/utils'; import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template'; import { toRequireContextString } from './to-require-context'; +import { useBaseTsSupport } from '../config/useBaseTsSupport'; const reactPaths = {}; try { @@ -36,10 +38,11 @@ export default async ({ configType, framework, presets, + typescriptOptions, }) => { const dlls = await presets.apply('webpackDlls', []); const { raw, stringified } = loadEnv({ production: true }); - const babelLoader = createBabelLoader(babelOptions); + const babelLoader = createBabelLoader(babelOptions, framework); const isProd = configType === 'PRODUCTION'; const entryTemplate = await fse.readFile(path.join(__dirname, 'virtualModuleEntry.template.js'), { encoding: 'utf8', @@ -81,6 +84,9 @@ export default async ({ .replace("'{{stories}}'", stories.map(toRequireContextString).join(',')); } + const shouldCheckTs = useBaseTsSupport(framework) && typescriptOptions.check; + const tsCheckOptions = typescriptOptions.checkOptions || {}; + return { mode: isProd ? 'production' : 'development', bail: isProd, @@ -129,6 +135,7 @@ export default async ({ new CaseSensitivePathsPlugin(), quiet ? null : new ProgressPlugin(), new Dotenv({ silent: true }), + shouldCheckTs ? new ForkTsCheckerWebpackPlugin(tsCheckOptions) : null, ].filter(Boolean), module: { rules: [ @@ -144,7 +151,7 @@ export default async ({ ], }, resolve: { - extensions: ['.mjs', '.js', '.jsx', '.json', '.cjs'], + extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'], modules: ['node_modules'].concat(raw.NODE_PATH || []), alias: { 'babel-runtime/core-js/object/assign': require.resolve('core-js/es/object/assign'), diff --git a/yarn.lock b/yarn.lock index fc2c0dbeed8b..3e7628aaed8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1692,7 +1692,7 @@ "@babel/plugin-transform-react-jsx-self" "^7.9.0" "@babel/plugin-transform-react-jsx-source" "^7.9.0" -"@babel/preset-typescript@7.9.0", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.3.3", "@babel/preset-typescript@^7.8.3": +"@babel/preset-typescript@7.9.0", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.3.3", "@babel/preset-typescript@^7.9.0": version "7.9.0" resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.9.0.tgz#87705a72b1f0d59df21c179f7c3d2ef4b16ce192" integrity sha512-S4cueFnGrIbvYJgwsVFKdvOmpiL0XGw9MFW9D0vgRys5g36PBhZRL8NX8Gr2akz8XRtzq6HuDXPD/1nniagNUg== @@ -4821,7 +4821,7 @@ dependencies: "@types/react" "*" -"@types/react-dom@*": +"@types/react-dom@*", "@types/react-dom@^16.9.8": version "16.9.8" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423" integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA== @@ -4879,7 +4879,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.0.0", "@types/react@^16.9.27": +"@types/react@*", "@types/react@^16.0.0", "@types/react@^16.9.27", "@types/react@^16.9.35": version "16.9.35" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.35.tgz#a0830d172e8aadd9bd41709ba2281a3124bbd368" integrity sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ== @@ -14706,6 +14706,19 @@ fork-ts-checker-webpack-plugin@^4.0.3: tapable "^1.0.0" worker-rpc "^0.1.0" +fork-ts-checker-webpack-plugin@^4.1.4: + version "4.1.4" + resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.4.tgz#f0dc3ece19ec5b792d7b8ecd2a7f43509a5285ce" + integrity sha512-R0nTlZSyV0uCCzYe1kgR7Ve8mXyDvMm1pJwUFb6zzRVF5rTNb24G6gn2DFQy+W5aJYp2eq8aexpCOO+1SCyCSA== + dependencies: + "@babel/code-frame" "^7.5.5" + chalk "^2.4.1" + micromatch "^3.1.10" + minimatch "^3.0.4" + semver "^5.6.0" + tapable "^1.0.0" + worker-rpc "^0.1.0" + form-data@^2.5.0: version "2.5.1" resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.1.tgz#f2cbec57b5e59e23716e128fe44d4e5dd23895f4" @@ -30729,7 +30742,7 @@ typescript@^2.4.2: resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c" integrity sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w== -typescript@^3.0.0, typescript@^3.2.4, typescript@^3.4.0, typescript@^3.5.3, typescript@^3.8.0-dev.20200111, typescript@^3.8.3, typescript@latest: +typescript@^3.0.0, typescript@^3.2.4, typescript@^3.4.0, typescript@^3.5.3, typescript@^3.8.0-dev.20200111, typescript@^3.8.3, typescript@^3.9.2, typescript@latest: version "3.9.2" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.2.tgz#64e9c8e9be6ea583c54607677dd4680a1cf35db9" integrity sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw== From e7a460f0bf97de047653bf50bd5473fe81bc3ce8 Mon Sep 17 00:00:00 2001 From: Paul Grau Date: Mon, 18 May 2020 14:18:43 +0900 Subject: [PATCH 02/37] Add vue typescript component to kitchen sink --- .../src/stories/components/ButtonTs.vue | 39 +++++++++++++++++++ .../stories/components/button-ts.stories.js | 11 ++++++ 2 files changed, 50 insertions(+) create mode 100644 examples/vue-kitchen-sink/src/stories/components/ButtonTs.vue create mode 100644 examples/vue-kitchen-sink/src/stories/components/button-ts.stories.js diff --git a/examples/vue-kitchen-sink/src/stories/components/ButtonTs.vue b/examples/vue-kitchen-sink/src/stories/components/ButtonTs.vue new file mode 100644 index 000000000000..d316faf20c8f --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/components/ButtonTs.vue @@ -0,0 +1,39 @@ + + + diff --git a/examples/vue-kitchen-sink/src/stories/components/button-ts.stories.js b/examples/vue-kitchen-sink/src/stories/components/button-ts.stories.js new file mode 100644 index 000000000000..caab5dd3642b --- /dev/null +++ b/examples/vue-kitchen-sink/src/stories/components/button-ts.stories.js @@ -0,0 +1,11 @@ +import ButtonTs from './ButtonTs.vue'; + +export default { + title: 'Button (Typescript)', + component: ButtonTs, +}; + +export const ButtonTsStory = () => ({ + components: { ButtonTs }, + template: 'Storybook has builtin Typescript support for Vue components', +}); From bb84352e2806a624819db6f0044ad36951885ad0 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 10:19:44 +0800 Subject: [PATCH 03/37] Fix docgen preset --- app/react/src/server/framework-preset-react-docgen.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts index 2e9f24f39363..a70f995ed3ea 100644 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ b/app/react/src/server/framework-preset-react-docgen.ts @@ -23,10 +23,9 @@ export function babel( }; } -export function webpackFinal( - config: Configuration, - { typescript: { docgen = 'react-docgen-typescript' } } = { typescript: {} } -) { +export function webpackFinal(config: Configuration, { typescript } = { typescript: {} }) { + // @ts-ignore + const docgen = typescript?.docgen || 'react-docgen-typescript'; if (docgen !== 'react-docgen-typescript') return config; return { ...config, From 322380fad5877650982f56d5dda5c73e08e45bfd Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 11:40:01 +0800 Subject: [PATCH 04/37] Clean up typescriptOptions handling for docgen --- .../src/server/framework-preset-react-docgen.ts | 17 +++++++++++++---- lib/core/src/server/config.js | 4 ++-- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts index a70f995ed3ea..de7634d8d640 100644 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ b/app/react/src/server/framework-preset-react-docgen.ts @@ -1,10 +1,17 @@ import { TransformOptions } from '@babel/core'; import { Configuration } from 'webpack'; +type Docgen = 'react-docgen' | 'react-docgen-typescript'; +interface TypescriptOptions { + typescriptOptions?: { docgen?: Docgen }; +} +const DEFAULT_DOCGEN = 'react-docgen-typescript'; + export function babel( config: TransformOptions, - { typescript: { docgen = 'react-docgen-typescript' } = {} } = {} + { typescriptOptions }: TypescriptOptions = { typescriptOptions: {} } ) { + const docgen = typescriptOptions?.docgen || DEFAULT_DOCGEN; return { ...config, overrides: [ @@ -23,9 +30,11 @@ export function babel( }; } -export function webpackFinal(config: Configuration, { typescript } = { typescript: {} }) { - // @ts-ignore - const docgen = typescript?.docgen || 'react-docgen-typescript'; +export function webpackFinal( + config: Configuration, + { typescriptOptions }: TypescriptOptions = { typescriptOptions: {} } +) { + const docgen = typescriptOptions?.docgen || DEFAULT_DOCGEN; if (docgen !== 'react-docgen-typescript') return config; return { ...config, diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index a01816dae014..5aff0e31b297 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -3,10 +3,10 @@ import loadPresets from './presets'; import loadCustomPresets from './common/custom-presets'; async function getPreviewWebpackConfig(options, presets) { - const babelOptions = await presets.apply('babel', {}, options); + const typescriptOptions = await presets.apply('typescript', {}, options); + const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions }); const entries = await presets.apply('entries', [], options); const stories = await presets.apply('stories', [], options); - const typescriptOptions = await presets.apply('typescript', {}, options); return presets.apply( 'webpack', From 267a01e18a9ac41acc74c21ed73439e2011a66a8 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 11:40:50 +0800 Subject: [PATCH 05/37] Clean up `react-ts` example and addon-essentials for testing --- examples/react-ts/main.js | 2 ++ examples/react-ts/package.json | 1 + examples/react-ts/src/button.stories.tsx | 6 ++++-- examples/react-ts/src/button.tsx | 3 +++ 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/examples/react-ts/main.js b/examples/react-ts/main.js index 752ddf1f25e9..c1e1e15290eb 100644 --- a/examples/react-ts/main.js +++ b/examples/react-ts/main.js @@ -1,7 +1,9 @@ module.exports = { stories: ['./src/*.stories.*'], + addons: ['@storybook/addon-essentials'], typescript: { check: true, checkOptions: {}, + docgen: 'react-docgen', }, }; diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json index ee22103c642f..c5c9f2a57822 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -8,6 +8,7 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll" }, "dependencies": { + "@storybook/addon-essentials": "6.0.0-beta.7", "@storybook/react": "6.0.0-beta.7", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx index 41ea8e4e19c0..b2350a28722f 100644 --- a/examples/react-ts/src/button.stories.tsx +++ b/examples/react-ts/src/button.stories.tsx @@ -1,6 +1,8 @@ import React from 'react'; +import { argsStory } from '@storybook/react'; import { Button } from './button'; -export default { component: Button, title: 'Examples / Button' }; +export default { component: Button, title: 'Examples/Button' }; -export const SimpleButton = () => +`; From 1e621e35e5d8065ee7a68a3b13a006e7651b1534 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 17:02:17 +0800 Subject: [PATCH 08/37] Update main.js typescript docgen handling --- .../framework-preset-react-docgen.test.ts | 2 +- .../server/framework-preset-react-docgen.ts | 36 ++++++++++++------- examples/react-ts/main.js | 5 ++- examples/react-ts/src/button.tsx | 6 +++- lib/core/package.json | 1 + lib/core/types/index.ts | 10 ++++++ 6 files changed, 45 insertions(+), 15 deletions(-) create mode 100644 lib/core/types/index.ts diff --git a/app/react/src/server/framework-preset-react-docgen.test.ts b/app/react/src/server/framework-preset-react-docgen.test.ts index 0770853daa1a..d4130c0aba30 100644 --- a/app/react/src/server/framework-preset-react-docgen.test.ts +++ b/app/react/src/server/framework-preset-react-docgen.test.ts @@ -18,7 +18,7 @@ describe('framework-preset-react-docgen', () => { presets: ['env', 'foo-preset'], overrides: [ { - test: /\.(mjs|tsx?|jsx?)$/, + test: /\.(mjs|jsx?)$/, plugins: [ [ babelPluginReactDocgenPath, diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts index 240936a36b82..cf731c965252 100644 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ b/app/react/src/server/framework-preset-react-docgen.ts @@ -1,22 +1,27 @@ import { TransformOptions } from '@babel/core'; import { Configuration } from 'webpack'; +import type { StorybookOptions } from '@storybook/core/types'; -type Docgen = 'react-docgen' | 'react-docgen-typescript'; -interface TypescriptOptions { - typescriptOptions?: { docgen?: Docgen }; -} -const DEFAULT_DOCGEN = 'react-docgen'; +const DEFAULT_DOCGEN = 'react-docgen-typescript'; + +const getDocgen = (typescriptOptions: StorybookOptions['typescriptOptions']) => { + const docgen = typescriptOptions?.reactDocgen; + return typeof docgen === 'undefined' ? DEFAULT_DOCGEN : docgen; +}; export function babel( config: TransformOptions, - { typescriptOptions }: TypescriptOptions = { typescriptOptions: {} } + { typescriptOptions }: StorybookOptions = { typescriptOptions: {} } ) { - const docgen = typescriptOptions?.docgen || DEFAULT_DOCGEN; + const reactDocgen = getDocgen(typescriptOptions); + if (!reactDocgen) { + return config; + } return { ...config, overrides: [ { - test: docgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, + test: reactDocgen === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, plugins: [ [ require.resolve('babel-plugin-react-docgen'), @@ -32,10 +37,10 @@ export function babel( export function webpackFinal( config: Configuration, - { typescriptOptions }: TypescriptOptions = { typescriptOptions: {} } + { typescriptOptions }: StorybookOptions = { typescriptOptions: {} } ) { - const docgen = typescriptOptions?.docgen || DEFAULT_DOCGEN; - if (docgen !== 'react-docgen-typescript') return config; + const reactDocgen = getDocgen(typescriptOptions); + if (reactDocgen !== 'react-docgen-typescript') return config; return { ...config, module: { @@ -43,7 +48,14 @@ export function webpackFinal( rules: [ ...config.module.rules, { - loader: require.resolve('react-docgen-typescript-loader'), + test: /\.tsx?$/, + // include: path.resolve(__dirname, "../src"), + use: [ + { + loader: require.resolve('react-docgen-typescript-loader'), + options: typescriptOptions?.reactDocgenTypescriptOptions, + }, + ], }, ], }, diff --git a/examples/react-ts/main.js b/examples/react-ts/main.js index c1e1e15290eb..e901e7decb65 100644 --- a/examples/react-ts/main.js +++ b/examples/react-ts/main.js @@ -4,6 +4,9 @@ module.exports = { typescript: { check: true, checkOptions: {}, - docgen: 'react-docgen', + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + propFilter: (prop) => ['label', 'disabled'].includes(prop.name), + }, }, }; diff --git a/examples/react-ts/src/button.tsx b/examples/react-ts/src/button.tsx index 3115bbcbf2c9..d91f88f34b38 100644 --- a/examples/react-ts/src/button.tsx +++ b/examples/react-ts/src/button.tsx @@ -7,4 +7,8 @@ export interface ButtonProps extends ButtonHTMLAttributes { label: string; } -export const Button = ({ label }: ButtonProps) => ; +export const Button = ({ label, disabled }: ButtonProps) => ( + +); diff --git a/lib/core/package.json b/lib/core/package.json index fe53259c654c..2f05cf416e8e 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -20,6 +20,7 @@ "files": [ "dist/**/*", "dll/**/*", + "types/**/*", "README.md", "*.js", "*.d.ts", diff --git a/lib/core/types/index.ts b/lib/core/types/index.ts new file mode 100644 index 000000000000..ed98b6d293a3 --- /dev/null +++ b/lib/core/types/index.ts @@ -0,0 +1,10 @@ +type ReactDocgen = 'react-docgen' | 'react-docgen-typescript' | false; + +export interface StorybookOptions { + typescriptOptions?: { + reactDocgen?: ReactDocgen; + reactDocgenTypescriptOptions?: any; + check?: boolean; + checkOptions?: any; + }; +} From 0b5b8c8f62dedbb9260b2993d0ed77e74e10473b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 17:05:57 +0800 Subject: [PATCH 09/37] Update addon-jest.testresults.json --- examples/angular-cli/addon-jest.testresults.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/angular-cli/addon-jest.testresults.json b/examples/angular-cli/addon-jest.testresults.json index c0ee4138b182..dd2a4552dbaa 100644 --- a/examples/angular-cli/addon-jest.testresults.json +++ b/examples/angular-cli/addon-jest.testresults.json @@ -1 +1 @@ -{"numFailedTestSuites":1,"numFailedTests":0,"numPassedTestSuites":0,"numPassedTests":0,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":1,"numTodoTests":0,"numTotalTestSuites":1,"numTotalTests":0,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1589783494030,"success":false,"testResults":[{"assertionResults":[],"coverage":{},"endTime":1589783495323,"message":" \u001b[1m● \u001b[22mTest suite failed to run\n\n File not found: /tsconfig.spec.json (resolved as: /Users/shilman/projects/baseline/storybook/examples/angular-cli/tsconfig.spec.json)\n\n \u001b[2mat ConfigSet.resolvePath (\u001b[22m../../node_modules/ts-jest/dist/config/config-set.js\u001b[2m:696:19)\u001b[22m\n \u001b[2mat ConfigSet.get (\u001b[22m../../node_modules/ts-jest/dist/config/config-set.js\u001b[2m:213:67)\u001b[22m\n \u001b[2mat ConfigSet.tsJest (\u001b[22m../../node_modules/ts-jest/dist/util/memoize.js\u001b[2m:43:24)\u001b[22m\n \u001b[2mat ConfigSet.get (\u001b[22m../../node_modules/ts-jest/dist/config/config-set.js\u001b[2m:301:41)\u001b[22m\n \u001b[2mat ConfigSet.versions (\u001b[22m../../node_modules/ts-jest/dist/util/memoize.js\u001b[2m:43:24)\u001b[22m\n \u001b[2mat ConfigSet.get (\u001b[22m../../node_modules/ts-jest/dist/config/config-set.js\u001b[2m:571:32)\u001b[22m\n \u001b[2mat ConfigSet.jsonValue (\u001b[22m../../node_modules/ts-jest/dist/util/memoize.js\u001b[2m:43:24)\u001b[22m\n \u001b[2mat ConfigSet.get [as cacheKey] (\u001b[22m../../node_modules/ts-jest/dist/config/config-set.js\u001b[2m:586:25)\u001b[22m\n \u001b[2mat TsJestTransformer.getCacheKey (\u001b[22m../../node_modules/ts-jest/dist/ts-jest-transformer.js\u001b[2m:109:36)\u001b[22m\n \u001b[2mat ScriptTransformer._getCacheKey (\u001b[22m../../node_modules/@jest/transform/build/ScriptTransformer.js\u001b[2m:255:23)\u001b[22m\n","name":"/Users/shilman/projects/baseline/storybook/examples/angular-cli/src/app/app.component.spec.ts","startTime":1589783495323,"status":"failed","summary":""}],"wasInterrupted":false} \ No newline at end of file +{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":1,"numPassedTests":3,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":1,"numTotalTests":3,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1588390378489,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should create the app","location":null,"status":"passed","title":"should create the app"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should have as title 'app'","location":null,"status":"passed","title":"should have as title 'app'"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should render title in a h1 tag","location":null,"status":"passed","title":"should render title in a h1 tag"}],"endTime":1588390380761,"message":"","name":"C:\\Users\\Brandon\\Desktop\\storybook\\examples\\angular-cli\\src\\app\\app.component.spec.ts","startTime":1588390379328,"status":"passed","summary":""}],"wasInterrupted":false} \ No newline at end of file From 6a19a43116750b638b52ef7b07268d9df12c6579 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 18 May 2020 17:52:24 +0800 Subject: [PATCH 10/37] Update package.json --- examples/react-ts/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json index c5c9f2a57822..6ab3104715d3 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/example-react-ts", - "version": "6.0.0-beta.7", + "version": "6.0.0-beta.8", "private": true, "scripts": { "build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./", @@ -8,8 +8,8 @@ "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll" }, "dependencies": { - "@storybook/addon-essentials": "6.0.0-beta.7", - "@storybook/react": "6.0.0-beta.7", + "@storybook/addon-essentials": "6.0.0-beta.8", + "@storybook/react": "6.0.0-beta.8", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", "react": "^16.13.1", From 811b66ba05e2e221db1aa83f29b0ad415e3e47bf Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 18 May 2020 12:43:42 +0200 Subject: [PATCH 11/37] FIX angular example tests --- examples/angular-cli/jest.addon-config.js | 5 +++-- examples/angular-cli/jest.config.js | 11 +++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/examples/angular-cli/jest.addon-config.js b/examples/angular-cli/jest.addon-config.js index 198ac29daeda..44649f828715 100644 --- a/examples/angular-cli/jest.addon-config.js +++ b/examples/angular-cli/jest.addon-config.js @@ -1,5 +1,6 @@ +const config = require('./jest.config.js'); + module.exports = { - preset: 'jest-preset-angular', + ...config, testPathIgnorePatterns: ['/node_modules/', '/storybook-static/', 'angularshots.test.js', 'dist'], - setupFilesAfterEnv: ['./jest-config/setup.ts'], }; diff --git a/examples/angular-cli/jest.config.js b/examples/angular-cli/jest.config.js index 649376ad1633..40fc03557da6 100644 --- a/examples/angular-cli/jest.config.js +++ b/examples/angular-cli/jest.config.js @@ -1,19 +1,21 @@ +const path = require('path'); const config = require('../../jest.config'); +const projectDir = path.resolve('../../'); + module.exports = { preset: 'jest-preset-angular', - ...config, globals: { 'ts-jest': { - tsConfig: '/examples/angular-cli/src/tsconfig.spec.json', + tsConfig: '/src/tsconfig.spec.json', stringifyContentPathRegex: '\\.html$', }, }, roots: [__dirname], transform: { '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName', - '^.+\\.jsx?$': '/scripts/babel-jest.js', - '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '/scripts/jest-ts-babel.js', + '^.+\\.jsx?$': path.join(projectDir, 'scripts/babel-jest.js'), + '^.+[/\\\\].storybook[/\\\\]config\\.ts$': path.join(projectDir, 'scripts/jest-ts-babel.js'), '^.+\\.(ts|js|html)$': 'ts-jest', '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx', }, @@ -23,4 +25,5 @@ module.exports = { 'jest-preset-angular/build/AngularSnapshotSerializer.js', 'jest-preset-angular/build/HTMLCommentSerializer.js', ], + setupFilesAfterEnv: ['./jest-config/setup.ts'], }; From 5eda5b9ad802068a1fa6981866c2abfdbfe5d5f1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 18 May 2020 13:03:07 +0200 Subject: [PATCH 12/37] FIX problem with building all examples in CI (offset was wrong) --- scripts/build-storybooks.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/scripts/build-storybooks.js b/scripts/build-storybooks.js index 67fe57daacf7..ffa25886177e 100755 --- a/scripts/build-storybooks.js +++ b/scripts/build-storybooks.js @@ -150,18 +150,21 @@ const handleExamples = async (deployables) => { }; const run = async () => { - const examples = await readdir(p(['examples'])); + const list = getDeployables(await readdir(p(['examples']))); - const { length } = examples; + const { length } = list; const [a, b] = [process.env.CIRCLE_NODE_INDEX || 0, process.env.CIRCLE_NODE_TOTAL || 1]; const step = Math.ceil(length / b); const offset = step * a; - const list = examples.slice().splice(offset, step); - const deployables = getDeployables(list); + const deployables = list.slice().splice(offset, step); if (deployables.length) { - logger.log(`will build: ${deployables.join(', ')}`); + logger.log( + `will build: ${deployables.join(', ')} (${ + deployables.length + } total - offset: ${offset} | step: ${step})` + ); await handleExamples(deployables); } From ef2d51c3fca3fc58f662e7f22116abf76d0e65a4 Mon Sep 17 00:00:00 2001 From: Paul Grau Date: Tue, 19 May 2020 00:09:35 +0900 Subject: [PATCH 13/37] Add vue-cli example application --- examples/vue-cli/.storybook/main.js | 4 + examples/vue-cli/.storybook/preview.js | 6 + examples/vue-cli/README.md | 8 + examples/vue-cli/babel.config.js | 3 + examples/vue-cli/package.json | 28 + examples/vue-cli/src/App.vue | 26 + examples/vue-cli/src/button/Button.stories.ts | 20 + examples/vue-cli/src/button/Button.vue | 41 ++ examples/vue-cli/src/button/types.ts | 2 + examples/vue-cli/src/main.ts | 6 + examples/vue-cli/src/shims-vue.d.ts | 4 + examples/vue-cli/tsconfig.json | 27 + yarn.lock | 539 ++++++++++++++++-- 13 files changed, 675 insertions(+), 39 deletions(-) create mode 100644 examples/vue-cli/.storybook/main.js create mode 100644 examples/vue-cli/.storybook/preview.js create mode 100644 examples/vue-cli/README.md create mode 100644 examples/vue-cli/babel.config.js create mode 100644 examples/vue-cli/package.json create mode 100644 examples/vue-cli/src/App.vue create mode 100644 examples/vue-cli/src/button/Button.stories.ts create mode 100644 examples/vue-cli/src/button/Button.vue create mode 100644 examples/vue-cli/src/button/types.ts create mode 100644 examples/vue-cli/src/main.ts create mode 100644 examples/vue-cli/src/shims-vue.d.ts create mode 100644 examples/vue-cli/tsconfig.json diff --git a/examples/vue-cli/.storybook/main.js b/examples/vue-cli/.storybook/main.js new file mode 100644 index 000000000000..00f380b141c8 --- /dev/null +++ b/examples/vue-cli/.storybook/main.js @@ -0,0 +1,4 @@ +module.exports = { + stories: ['../src/**/*.stories.(ts|js|mdx)'], + addons: ['@storybook/addon-docs', '@storybook/addon-storysource', '@storybook/preset-scss'], +}; diff --git a/examples/vue-cli/.storybook/preview.js b/examples/vue-cli/.storybook/preview.js new file mode 100644 index 000000000000..fcd90ee5ab46 --- /dev/null +++ b/examples/vue-cli/.storybook/preview.js @@ -0,0 +1,6 @@ +export const parameters = { + passArgsFirst: true, + docs: { + iframeHeight: '60px', + }, +}; diff --git a/examples/vue-cli/README.md b/examples/vue-cli/README.md new file mode 100644 index 000000000000..07e0689d2ddf --- /dev/null +++ b/examples/vue-cli/README.md @@ -0,0 +1,8 @@ +# Storybook Demo + +This is a demo app to test Vue-CLI integration with Storybook. +Please check vue-kitchen-sink for more examples of different ways to integrate with Storybook. + +Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook. + +You can also try `yarn serve` to see that vue-cli service also works. diff --git a/examples/vue-cli/babel.config.js b/examples/vue-cli/babel.config.js new file mode 100644 index 000000000000..078c0056ff32 --- /dev/null +++ b/examples/vue-cli/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ['@vue/cli-plugin-babel/preset'], +}; diff --git a/examples/vue-cli/package.json b/examples/vue-cli/package.json new file mode 100644 index 000000000000..4ce559e2f268 --- /dev/null +++ b/examples/vue-cli/package.json @@ -0,0 +1,28 @@ +{ + "name": "vue-cli-example", + "version": "6.0.0-beta.7", + "private": true, + "scripts": { + "build": "vue-cli-service build", + "build-storybook": "build-storybook -s public", + "serve": "vue-cli-service serve", + "storybook": "start-storybook -p 9009 -s public" + }, + "dependencies": { + "core-js": "^3.6.4", + "vue": "^2.6.8", + "vue-class-component": "^7.2.3", + "vue-property-decorator": "^8.4.1" + }, + "devDependencies": { + "@storybook/addon-essentials": "6.0.0-beta.7", + "@storybook/preset-scss": "^1.0.2", + "@storybook/source-loader": "6.0.0-beta.7", + "@storybook/vue": "6.0.0-beta.7", + "@vue/cli-plugin-babel": "~4.3.0", + "@vue/cli-plugin-typescript": "~4.3.0", + "@vue/cli-service": "~4.3.0", + "typescript": "^3.8.3", + "vue-template-compiler": "^2.6.11" + } +} diff --git a/examples/vue-cli/src/App.vue b/examples/vue-cli/src/App.vue new file mode 100644 index 000000000000..d45bdace644f --- /dev/null +++ b/examples/vue-cli/src/App.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/vue-cli/src/button/Button.stories.ts b/examples/vue-cli/src/button/Button.stories.ts new file mode 100644 index 000000000000..0724b37f531f --- /dev/null +++ b/examples/vue-cli/src/button/Button.stories.ts @@ -0,0 +1,20 @@ +import Button from './Button.vue'; +import { ButtonSizes } from './types'; + +export default { + title: 'Button', + component: Button, +}; + +export const ButtonWithProps = (args: any) => ({ + components: { Button }, + template: '', + data() { + return args; + }, +}); +ButtonWithProps.story = { + argTypes: { + size: { control: { type: 'options', options: ButtonSizes } }, + }, +}; diff --git a/examples/vue-cli/src/button/Button.vue b/examples/vue-cli/src/button/Button.vue new file mode 100644 index 000000000000..78fa7a39218a --- /dev/null +++ b/examples/vue-cli/src/button/Button.vue @@ -0,0 +1,41 @@ + + + + + \ No newline at end of file diff --git a/examples/vue-cli/src/button/types.ts b/examples/vue-cli/src/button/types.ts new file mode 100644 index 000000000000..5f6f11053c11 --- /dev/null +++ b/examples/vue-cli/src/button/types.ts @@ -0,0 +1,2 @@ +export const ButtonSizes = ['default', 'small', 'big'] as const; +export type ButtonSize = typeof ButtonSizes[number]; diff --git a/examples/vue-cli/src/main.ts b/examples/vue-cli/src/main.ts new file mode 100644 index 000000000000..4e015510bd8f --- /dev/null +++ b/examples/vue-cli/src/main.ts @@ -0,0 +1,6 @@ +import Vue from 'vue'; +import App from './App.vue'; + +new Vue({ + render: (h) => h(App), +}).$mount('#app'); diff --git a/examples/vue-cli/src/shims-vue.d.ts b/examples/vue-cli/src/shims-vue.d.ts new file mode 100644 index 000000000000..d9f24faa42e7 --- /dev/null +++ b/examples/vue-cli/src/shims-vue.d.ts @@ -0,0 +1,4 @@ +declare module '*.vue' { + import Vue from 'vue' + export default Vue +} diff --git a/examples/vue-cli/tsconfig.json b/examples/vue-cli/tsconfig.json new file mode 100644 index 000000000000..826f15ec18b8 --- /dev/null +++ b/examples/vue-cli/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "strict": true, + "jsx": "preserve", + "importHelpers": true, + "moduleResolution": "node", + "experimentalDecorators": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "sourceMap": true, + "skipLibCheck": true, + "lib": [ + "esnext", + "dom", + "dom.iterable", + "scripthost" + ] + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "**/node_modules" + ] +} diff --git a/yarn.lock b/yarn.lock index 3e7628aaed8b..bec90b16ebde 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1035,7 +1035,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.0" -"@babel/plugin-syntax-jsx@7.8.3", "@babel/plugin-syntax-jsx@^7.8.3": +"@babel/plugin-syntax-jsx@7.8.3", "@babel/plugin-syntax-jsx@^7.2.0", "@babel/plugin-syntax-jsx@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94" integrity sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A== @@ -2195,7 +2195,7 @@ resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.0.4.tgz#e80ad4e8e8d2adc6c77d985f698447e8628b6010" integrity sha512-EwaJS7RjoXUZ2cXXKZZxZqieGtc7RbvQhUy8FwDoMQtxWVi14tFjeFCYPZAM1mBCpOpiBpyaZbb9NeHc7eGKgw== -"@hapi/joi@^15.0.0": +"@hapi/joi@^15.0.0", "@hapi/joi@^15.0.1": version "15.1.1" resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7" integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ== @@ -2278,6 +2278,15 @@ resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8" integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw== +"@intervolga/optimize-cssnano-plugin@^1.0.5": + version "1.0.6" + resolved "https://registry.yarnpkg.com/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz#be7c7846128b88f6a9b1d1261a0ad06eb5c0fdf8" + integrity sha512-zN69TnSr0viRSU6cEDIcuPcP67QcpQ6uHACg58FiN9PDrU6SLyGW3MR4tiISbYxy1kDWAVPwD+XwQTWE5cigAA== + dependencies: + cssnano "^4.0.0" + cssnano-preset-default "^4.0.0" + postcss "^7.0.0" + "@istanbuljs/load-nyc-config@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b" @@ -3863,6 +3872,20 @@ dependencies: "@sinonjs/commons" "^1.7.0" +"@soda/friendly-errors-webpack-plugin@^1.7.1": + version "1.7.1" + resolved "https://registry.yarnpkg.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz#706f64bcb4a8b9642b48ae3ace444c70334d615d" + integrity sha512-cWKrGaFX+rfbMrAxVv56DzhPNqOJPZuNIS2HGMELtgGzb+vsMzyig9mml5gZ/hr2BGtSLV+dP2LUEuAL8aG2mQ== + dependencies: + chalk "^1.1.3" + error-stack-parser "^2.0.0" + string-width "^2.0.0" + +"@soda/get-current-script@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.0.tgz#623aa40623550e3b94767cffeb096a6fb597ed09" + integrity sha512-9GvTek+7cVw7r+L7TNGOG1astZJWXz2h5q4BqMXl28KN+24iSCm1xo+RhZOZvwdT3bzNe9hD7riJc/lBoO7mgg== + "@storybook/addons@6.0.0-alpha.0": version "6.0.0-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.0.0-alpha.0.tgz#f4416a8c9c081961e5950a7962d7a5102138717e" @@ -4035,6 +4058,11 @@ pnp-webpack-plugin "^1.6.4" semver "^7.1.3" +"@storybook/preset-scss@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@storybook/preset-scss/-/preset-scss-1.0.2.tgz#6c993b972c6f599237082b55e12c875f0f66ab06" + integrity sha512-Kq+Y3H7qRBxocLW57V9HtQhrw9ZzmTodFCjf+OelMh1k6SZ7/FvJHb7mtWofafHcqq1tSQlNIgYMtHRDJ64WVg== + "@storybook/react-native@6.0.0-alpha.0": version "6.0.0-alpha.0" resolved "https://registry.yarnpkg.com/@storybook/react-native/-/react-native-6.0.0-alpha.0.tgz#e05090a351d41da756fb0cf9a637a05be15babb4" @@ -5136,7 +5164,214 @@ semver "^7.3.2" tsutils "^3.17.1" -"@vue/component-compiler-utils@^3.1.0": +"@vue/babel-helper-vue-jsx-merge-props@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040" + integrity sha512-6tyf5Cqm4m6v7buITuwS+jHzPlIPxbFzEhXR5JGZpbrvOcp1hiQKckd305/3C7C36wFekNTQSxAtgeM0j0yoUw== + +"@vue/babel-plugin-transform-vue-jsx@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.1.2.tgz#c0a3e6efc022e75e4247b448a8fc6b86f03e91c0" + integrity sha512-YfdaoSMvD1nj7+DsrwfTvTnhDXI7bsuh+Y5qWwvQXlD24uLgnsoww3qbiZvWf/EoviZMrvqkqN4CBw0W3BWUTQ== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/plugin-syntax-jsx" "^7.2.0" + "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0" + html-tags "^2.0.0" + lodash.kebabcase "^4.1.1" + svg-tags "^1.0.0" + +"@vue/babel-preset-app@^4.3.1": + version "4.3.1" + resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.3.1.tgz#bb67aae562983067c5b242c27fb7de17f40cf109" + integrity sha512-iNkySkbRWXGUA+Cvzj+/gEP0Y0uVAwwzfn21S7hkggSeIg9LJyZ+QzdxgKO0wgi01yTdb2mYWgeLQAfHZ65aew== + dependencies: + "@babel/core" "^7.9.0" + "@babel/helper-compilation-targets" "^7.8.7" + "@babel/helper-module-imports" "^7.8.3" + "@babel/plugin-proposal-class-properties" "^7.8.3" + "@babel/plugin-proposal-decorators" "^7.8.3" + "@babel/plugin-syntax-dynamic-import" "^7.8.3" + "@babel/plugin-syntax-jsx" "^7.8.3" + "@babel/plugin-transform-runtime" "^7.9.0" + "@babel/preset-env" "^7.9.0" + "@babel/runtime" "^7.9.2" + "@vue/babel-preset-jsx" "^1.1.2" + babel-plugin-dynamic-import-node "^2.3.0" + core-js "^3.6.4" + core-js-compat "^3.6.4" + +"@vue/babel-preset-jsx@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.1.2.tgz#2e169eb4c204ea37ca66c2ea85a880bfc99d4f20" + integrity sha512-zDpVnFpeC9YXmvGIDSsKNdL7qCG2rA3gjywLYHPCKDT10erjxF4U+6ay9X6TW5fl4GsDlJp9bVfAVQAAVzxxvQ== + dependencies: + "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0" + "@vue/babel-plugin-transform-vue-jsx" "^1.1.2" + "@vue/babel-sugar-functional-vue" "^1.1.2" + "@vue/babel-sugar-inject-h" "^1.1.2" + "@vue/babel-sugar-v-model" "^1.1.2" + "@vue/babel-sugar-v-on" "^1.1.2" + +"@vue/babel-sugar-functional-vue@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.1.2.tgz#f7e24fba09e6f1ee70104560a8808057555f1a9a" + integrity sha512-YhmdJQSVEFF5ETJXzrMpj0nkCXEa39TvVxJTuVjzvP2rgKhdMmQzlJuMv/HpadhZaRVMCCF3AEjjJcK5q/cYzQ== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@vue/babel-sugar-inject-h@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.1.2.tgz#8a5276b6d8e2ed16ffc8078aad94236274e6edf0" + integrity sha512-VRSENdTvD5htpnVp7i7DNuChR5rVMcORdXjvv5HVvpdKHzDZAYiLSD+GhnhxLm3/dMuk8pSzV+k28ECkiN5m8w== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + +"@vue/babel-sugar-v-model@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.1.2.tgz#1ff6fd1b800223fc9cb1e84dceb5e52d737a8192" + integrity sha512-vLXPvNq8vDtt0u9LqFdpGM9W9IWDmCmCyJXuozlq4F4UYVleXJ2Fa+3JsnTZNJcG+pLjjfnEGHci2339Kj5sGg== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0" + "@vue/babel-plugin-transform-vue-jsx" "^1.1.2" + camelcase "^5.0.0" + html-tags "^2.0.0" + svg-tags "^1.0.0" + +"@vue/babel-sugar-v-on@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.1.2.tgz#b2ef99b8f2fab09fbead25aad70ef42e1cf5b13b" + integrity sha512-T8ZCwC8Jp2uRtcZ88YwZtZXe7eQrJcfRq0uTFy6ShbwYJyz5qWskRFoVsdTi9o0WEhmQXxhQUewodOSCUPVmsQ== + dependencies: + "@babel/plugin-syntax-jsx" "^7.2.0" + "@vue/babel-plugin-transform-vue-jsx" "^1.1.2" + camelcase "^5.0.0" + +"@vue/cli-overlay@^4.3.1": + version "4.3.1" + resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-4.3.1.tgz#434529c188b628a54773670201667a0b4a361e07" + integrity sha512-UA399aWHhre2VHrQFQSJhFLrFMqOYQ8ly+Ni6T+cpCjOwssjiaqaqrG5YiZBAqDwQvjrtYori4lU66qrY5DVhA== + +"@vue/cli-plugin-babel@~4.3.0": + version "4.3.1" + resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-4.3.1.tgz#6e3a6aa18595b98ad5c52898a2850d452404712b" + integrity sha512-tBqu0v1l4LfWX8xuJmofpp+8xQzKddFNxdLmeVDOX/omDBQX0qaVDeMUtRxxSTazI06SKr605SnUQoa35qwbvw== + dependencies: + "@babel/core" "^7.9.0" + "@vue/babel-preset-app" "^4.3.1" + "@vue/cli-shared-utils" "^4.3.1" + babel-loader "^8.1.0" + cache-loader "^4.1.0" + thread-loader "^2.1.3" + webpack "^4.0.0" + +"@vue/cli-plugin-router@^4.3.1": + version "4.3.1" + resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-4.3.1.tgz#0ba589f4e9a1f3e64a8ff6ccd92f7ce2845586bf" + integrity sha512-m0ntr5R6q62oNMODgoyHAVAd/sDtsH15GdBrScZsPNeyHxmzmNBDlsNM38yYGGY064zDRRWif15d1yaTREybrA== + dependencies: + "@vue/cli-shared-utils" "^4.3.1" + +"@vue/cli-plugin-typescript@~4.3.0": + version "4.3.1" + resolved "https://registry.yarnpkg.com/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.3.1.tgz#dd403b78680376b8682f90de3db851ae5ecc71e8" + integrity sha512-Uos7MTqG0btNMMhZdgLTPx24fqiiHhqz0Bow2rTeNa0piDeSjiQdyq0vgVKqJOLUu8zkvmG2jKUr15QQ0+yobQ== + dependencies: + "@types/webpack-env" "^1.15.1" + "@vue/cli-shared-utils" "^4.3.1" + cache-loader "^4.1.0" + fork-ts-checker-webpack-plugin "^3.1.1" + globby "^9.2.0" + thread-loader "^2.1.3" + ts-loader "^6.2.2" + tslint "^5.20.1" + webpack "^4.0.0" + yorkie "^2.0.0" + +"@vue/cli-plugin-vuex@^4.3.1": + version "4.3.1" + resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.3.1.tgz#2b73aff56f9e1be31018873d5ed2d59f155e7476" + integrity sha512-mukwOlhZGBJhkqO2b3wHFFHjK5aP00b1WUHdrOfLR7M18euhaTyb4kA5nwZwEOmU3EzZx6kHzSFCRy/XaMkLug== + +"@vue/cli-service@~4.3.0": + version "4.3.1" + resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-4.3.1.tgz#94b2121d08e343a55f7ecef260af5257a9ffe7e5" + integrity sha512-CsNGfHe+9oKZdRwJmweQ0KsMYM27ssg1eNQqRKL/t+IgDLO3Tu86uaOOCLn4ZAaU5oxxpq4aSFvz+A0YxQRSWw== + dependencies: + "@intervolga/optimize-cssnano-plugin" "^1.0.5" + "@soda/friendly-errors-webpack-plugin" "^1.7.1" + "@soda/get-current-script" "^1.0.0" + "@vue/cli-overlay" "^4.3.1" + "@vue/cli-plugin-router" "^4.3.1" + "@vue/cli-plugin-vuex" "^4.3.1" + "@vue/cli-shared-utils" "^4.3.1" + "@vue/component-compiler-utils" "^3.0.2" + "@vue/preload-webpack-plugin" "^1.1.0" + "@vue/web-component-wrapper" "^1.2.0" + acorn "^7.1.0" + acorn-walk "^7.1.1" + address "^1.1.2" + autoprefixer "^9.7.5" + browserslist "^4.11.1" + cache-loader "^4.1.0" + case-sensitive-paths-webpack-plugin "^2.3.0" + cli-highlight "^2.1.4" + clipboardy "^2.3.0" + cliui "^6.0.0" + copy-webpack-plugin "^5.1.1" + css-loader "^3.4.2" + cssnano "^4.1.10" + debug "^4.1.1" + default-gateway "^5.0.5" + dotenv "^8.2.0" + dotenv-expand "^5.1.0" + file-loader "^4.2.0" + fs-extra "^7.0.1" + globby "^9.2.0" + hash-sum "^2.0.0" + html-webpack-plugin "^3.2.0" + launch-editor-middleware "^2.2.1" + lodash.defaultsdeep "^4.6.1" + lodash.mapvalues "^4.6.0" + lodash.transform "^4.6.0" + mini-css-extract-plugin "^0.9.0" + minimist "^1.2.5" + pnp-webpack-plugin "^1.6.4" + portfinder "^1.0.25" + postcss-loader "^3.0.0" + ssri "^7.1.0" + terser-webpack-plugin "^2.3.5" + thread-loader "^2.1.3" + url-loader "^2.2.0" + vue-loader "^15.9.1" + vue-style-loader "^4.1.2" + webpack "^4.0.0" + webpack-bundle-analyzer "^3.6.1" + webpack-chain "^6.4.0" + webpack-dev-server "^3.10.3" + webpack-merge "^4.2.2" + +"@vue/cli-shared-utils@^4.3.1": + version "4.3.1" + resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-4.3.1.tgz#a74bf4d53825d4a4b05a84b03e023974871bc38a" + integrity sha512-lcfRalou7Z9jZgIh9PeTIpwDK7RIjr9OxfLGwbdR8czUZYUeUa67zVEMJD0OPYh/CCoREtzNbVfLPb/IYYxWEA== + dependencies: + "@hapi/joi" "^15.0.1" + chalk "^2.4.2" + execa "^1.0.0" + launch-editor "^2.2.1" + lru-cache "^5.1.1" + node-ipc "^9.1.1" + open "^6.3.0" + ora "^3.4.0" + read-pkg "^5.1.1" + request "^2.88.2" + request-promise-native "^1.0.8" + semver "^6.1.0" + strip-ansi "^6.0.0" + +"@vue/component-compiler-utils@^3.0.2", "@vue/component-compiler-utils@^3.1.0": version "3.1.2" resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.1.2.tgz#8213a5ff3202f9f2137fe55370f9e8b9656081c3" integrity sha512-QLq9z8m79mCinpaEeSURhnNCN6djxpHw0lpP/bodMlt5kALfONpryMthvnrQOlTcIKoF+VoPi+lPHUYeDFPXug== @@ -5152,6 +5387,16 @@ optionalDependencies: prettier "^1.18.2" +"@vue/preload-webpack-plugin@^1.1.0": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.1.tgz#18723530d304f443021da2292d6ec9502826104a" + integrity sha512-8VCoJeeH8tCkzhkpfOkt+abALQkS11OIHhte5MBzYaKMTqK0A3ZAKEUVAffsOklhEv7t0yrQt696Opnu9oAx+w== + +"@vue/web-component-wrapper@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz#bb0e46f1585a7e289b4ee6067dcc5a6ae62f1dd1" + integrity sha512-Xn/+vdm9CjuC9p3Ae+lTClNutrVhsXpzxvoTXXtoys6kVRX9FkueSUAqSWAyZntmVLlR4DosBV4pH8y5Z/HbUw== + "@webassemblyjs/ast@1.8.5": version "1.8.5" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359" @@ -5604,7 +5849,7 @@ acorn@^7.0.0, acorn@^7.1.0, acorn@^7.1.1: resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.2.0.tgz#17ea7e40d7c8640ff54a694c889c26f31704effe" integrity sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ== -address@1.1.2, address@^1.0.1, address@^1.1.0: +address@1.1.2, address@^1.0.1, address@^1.1.0, address@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6" integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA== @@ -5962,6 +6207,11 @@ arch@2.1.1: resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e" integrity sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg== +arch@^2.1.1: + version "2.1.2" + resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.2.tgz#0c52bbe7344bb4fa260c443d2cbad9c00ff2f0bf" + integrity sha512-NTBIIbAfkJeIletyABbVtdPgeKfDafR+1mZV/AyyfC1UkVkp9iUjV+wwmqtUgphHYajbI86jejBJp5e+jkGTiQ== + are-we-there-yet@~1.1.2: version "1.1.5" resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21" @@ -6445,6 +6695,19 @@ autoprefixer@^9.4.3, autoprefixer@^9.4.9, autoprefixer@^9.6.1, autoprefixer@^9.7 postcss "^7.0.27" postcss-value-parser "^4.0.3" +autoprefixer@^9.7.5: + version "9.8.0" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.0.tgz#68e2d2bef7ba4c3a65436f662d0a56a741e56511" + integrity sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A== + dependencies: + browserslist "^4.12.0" + caniuse-lite "^1.0.30001061" + chalk "^2.4.2" + normalize-range "^0.1.2" + num2fraction "^1.2.2" + postcss "^7.0.30" + postcss-value-parser "^4.1.0" + aws-sign2@~0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.5.0.tgz#c57103f7a17fc037f02d7c2e64b602ea223f7d63" @@ -6815,7 +7078,7 @@ babel-loader@8.0.6: mkdirp "^0.5.1" pify "^4.0.1" -babel-loader@8.1.0, babel-loader@^8, babel-loader@^8.0.4, babel-loader@^8.0.5, babel-loader@^8.0.6: +babel-loader@8.1.0, babel-loader@^8, babel-loader@^8.0.4, babel-loader@^8.0.5, babel-loader@^8.0.6, babel-loader@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3" integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw== @@ -6895,7 +7158,7 @@ babel-plugin-debug-macros@^0.3.0, babel-plugin-debug-macros@^0.3.3: dependencies: semver "^5.3.0" -babel-plugin-dynamic-import-node@^2.3.3: +babel-plugin-dynamic-import-node@^2.3.0, babel-plugin-dynamic-import-node@^2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3" integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ== @@ -8862,7 +9125,7 @@ browserslist@^3.2.6: caniuse-lite "^1.0.30000844" electron-to-chromium "^1.3.47" -browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.1.1, browserslist@^4.11.1, browserslist@^4.3.4, browserslist@^4.4.2, browserslist@^4.6.2, browserslist@^4.6.4, browserslist@^4.8.3, browserslist@^4.8.5, browserslist@^4.9.1: +browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.1.1, browserslist@^4.11.1, browserslist@^4.12.0, browserslist@^4.3.4, browserslist@^4.4.2, browserslist@^4.6.2, browserslist@^4.6.4, browserslist@^4.8.3, browserslist@^4.8.5, browserslist@^4.9.1: version "4.12.0" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d" integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg== @@ -8941,6 +9204,11 @@ buffer-indexof@^1.0.0: resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c" integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g== +buffer-json@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/buffer-json/-/buffer-json-2.0.0.tgz#f73e13b1e42f196fe2fd67d001c7d7107edd7c23" + integrity sha512-+jjPFVqyfF1esi9fvfUs3NqM0pH1ziZ36VP4hmA/y/Ssfo/5w5xHKfTw9BwQjoJ1w/oVtpLomqwUHKdefGyuHw== + buffer-xor@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9" @@ -9012,6 +9280,11 @@ build-plugin-rax-app@^0.2.0: webpack-chain "^6.0.0" webpack-sources "^1.3.0" +builtin-modules@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f" + integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8= + builtin-status-codes@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8" @@ -9178,6 +9451,18 @@ cache-base@^1.0.1: union-value "^1.0.0" unset-value "^1.0.0" +cache-loader@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-4.1.0.tgz#9948cae353aec0a1fcb1eafda2300816ec85387e" + integrity sha512-ftOayxve0PwKzBF/GLsZNC9fJBXl8lkZE3TOsjkboHfVHVkL39iUEs1FO07A33mizmci5Dudt38UZrrYXDtbhw== + dependencies: + buffer-json "^2.0.0" + find-cache-dir "^3.0.0" + loader-utils "^1.2.3" + mkdirp "^0.5.1" + neo-async "^2.6.1" + schema-utils "^2.0.0" + cacheable-request@^2.1.1: version "2.1.4" resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-2.1.4.tgz#0d808801b6342ad33c91df9d0b44dc09b91e5c3d" @@ -9369,6 +9654,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000939, can resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001058.tgz#9f8a318389e28f060272274ac93a661d17f8bf0d" integrity sha512-UiRZmBYd1HdVVdFKy7PuLVx9e2NS7SMyx7QpWvFjiklYrLJKpLd19cRnRNqlw4zYa7vVejS3c8JUVobX241zHQ== +caniuse-lite@^1.0.30001061: + version "1.0.30001061" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001061.tgz#80ca87ef14eb543a7458e7fd2b5e2face3458c9f" + integrity sha512-SMICCeiNvMZnyXpuoO+ot7FHpMVPlrsR+HmfByj6nY4xYDHXLqMTbgH7ecEkDNXWkH1vaip+ZS0D7VTXwM1KYQ== + canonical-path@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/canonical-path/-/canonical-path-1.0.0.tgz#fcb470c23958def85081856be7a86e904f180d1d" @@ -9399,7 +9689,7 @@ case-sensitive-paths-webpack-plugin@2.2.0: resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz#3371ef6365ef9c25fa4b81c16ace0e9c7dc58c3e" integrity sha512-u5ElzokS8A1pm9vM3/iDgTcI3xqHxuCao94Oz8etI3cf0Tio0p8izkDYbTIn09uP3yUUr6+veaE6IkjnTYS46g== -case-sensitive-paths-webpack-plugin@2.3.0, case-sensitive-paths-webpack-plugin@^2.1.2, case-sensitive-paths-webpack-plugin@^2.2.0: +case-sensitive-paths-webpack-plugin@2.3.0, case-sensitive-paths-webpack-plugin@^2.1.2, case-sensitive-paths-webpack-plugin@^2.2.0, case-sensitive-paths-webpack-plugin@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz#23ac613cc9a856e4f88ff8bb73bbb5e989825cf7" integrity sha512-/4YgnZS8y1UXXmC02xD5rRrBEu6T5ub+mQHLNRj0fzTRbgdBYhsNo2V5EqwgqrExjxsjtF/OpAKAMkKsxbD5XQ== @@ -9772,6 +10062,18 @@ cli-cursor@^3.1.0: dependencies: restore-cursor "^3.1.0" +cli-highlight@^2.1.4: + version "2.1.4" + resolved "https://registry.yarnpkg.com/cli-highlight/-/cli-highlight-2.1.4.tgz#098cb642cf17f42adc1c1145e07f960ec4d7522b" + integrity sha512-s7Zofobm20qriqDoU9sXptQx0t2R9PEgac92mENNm7xaEe1hn71IIMsXMK+6encA6WRCWWxIGQbipr3q998tlQ== + dependencies: + chalk "^3.0.0" + highlight.js "^9.6.0" + mz "^2.4.0" + parse5 "^5.1.1" + parse5-htmlparser2-tree-adapter "^5.1.1" + yargs "^15.0.0" + cli-spinners@^1.1.0: version "1.3.1" resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a" @@ -9847,6 +10149,15 @@ clipboard@^2.0.0: select "^1.1.2" tiny-emitter "^2.0.0" +clipboardy@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290" + integrity sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ== + dependencies: + arch "^2.1.1" + execa "^1.0.0" + is-wsl "^2.1.1" + cliui@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1" @@ -10157,7 +10468,7 @@ commander@4.1.0: resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83" integrity sha512-NIQrwvv9V39FHgGFm36+U9SMQzbiHvU79k+iADraJTpmrFFfx7Ds0IvDoAdZsDrknlkRk14OYoWXb57uTh7/sw== -commander@^2.11.0, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.6.0, commander@~2.20.3: +commander@^2.11.0, commander@^2.12.1, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@^2.6.0, commander@~2.20.3: version "2.20.3" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== @@ -10584,7 +10895,7 @@ copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.2.0: dependencies: toggle-selection "^1.0.6" -copy-webpack-plugin@5.1.1, copy-webpack-plugin@^5.0.4: +copy-webpack-plugin@5.1.1, copy-webpack-plugin@^5.0.4, copy-webpack-plugin@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz#5481a03dea1123d88a988c6ff8b78247214f0b88" integrity sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg== @@ -10602,7 +10913,7 @@ copy-webpack-plugin@5.1.1, copy-webpack-plugin@^5.0.4: serialize-javascript "^2.1.2" webpack-log "^2.0.0" -core-js-compat@^3.6.2: +core-js-compat@^3.6.2, core-js-compat@^3.6.4: version "3.6.5" resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c" integrity sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng== @@ -10630,7 +10941,7 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5: resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c" integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg== -core-js@^3.0.1, core-js@^3.0.4, core-js@^3.5.0: +core-js@^3.0.1, core-js@^3.0.4, core-js@^3.5.0, core-js@^3.6.4: version "3.6.5" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a" integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA== @@ -10957,7 +11268,7 @@ css-loader@3.5.1: schema-utils "^2.6.5" semver "^6.3.0" -css-loader@^3.0.0, css-loader@^3.5.3: +css-loader@^3.0.0, css-loader@^3.4.2, css-loader@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.5.3.tgz#95ac16468e1adcd95c844729e0bb167639eb0bcf" integrity sha512-UEr9NH5Lmi7+dguAm+/JSPovNjYbm2k3TK58EiwQHzOHH5Jfq1Y+XoP2bQO6TMn7PptMd0opxxedAWcaSTRKHw== @@ -11128,7 +11439,7 @@ csslint@^1.0.5: clone "~2.1.0" parserlib "~1.1.1" -cssnano-preset-default@^4.0.7: +cssnano-preset-default@^4.0.0, cssnano-preset-default@^4.0.7: version "4.0.7" resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76" integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA== @@ -11591,6 +11902,13 @@ default-gateway@^4.2.0: execa "^1.0.0" ip-regex "^2.1.0" +default-gateway@^5.0.5: + version "5.0.5" + resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-5.0.5.tgz#4fd6bd5d2855d39b34cc5a59505486e9aafc9b10" + integrity sha512-z2RnruVmj8hVMmAnEJMTIJNijhKCDiGjbLP+BHJFOT7ld3Bo5qcIBpVYDniqhbMIIf+jZDlkP2MkPXiQy/DBLA== + dependencies: + execa "^3.3.0" + defaults@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d" @@ -12230,6 +12548,11 @@ duplexify@^3.4.2, duplexify@^3.6.0: readable-stream "^2.0.0" stream-shift "^1.0.0" +easy-stack@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/easy-stack/-/easy-stack-1.0.0.tgz#12c91b3085a37f0baa336e9486eac4bf94e3e788" + integrity sha1-EskbMIWjfwuqM26UhurEv5Tj54g= + ecc-jsbn@~0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9" @@ -13001,7 +13324,7 @@ error-ex@^1.2.0, error-ex@^1.3.1: dependencies: is-arrayish "^0.2.1" -error-stack-parser@^2.0.1: +error-stack-parser@^2.0.0, error-stack-parser@^2.0.1: version "2.0.6" resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.6.tgz#5a99a707bd7a4c58a797902d48d82803ede6aad8" integrity sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ== @@ -13713,6 +14036,11 @@ event-emitter@^0.3.5, event-emitter@~0.3.5: d "1" es5-ext "~0.10.14" +event-pubsub@4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e" + integrity sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ== + event-stream@3.3.4: version "3.3.4" resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571" @@ -13830,7 +14158,20 @@ execa@^0.7.0: signal-exit "^3.0.0" strip-eof "^1.0.0" -execa@^3.2.0: +execa@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da" + integrity sha1-2NdrvBtVIX7RkP1t1J08d07PyNo= + dependencies: + cross-spawn "^5.0.1" + get-stream "^3.0.0" + is-stream "^1.1.0" + npm-run-path "^2.0.0" + p-finally "^1.0.0" + signal-exit "^3.0.0" + strip-eof "^1.0.0" + +execa@^3.2.0, execa@^3.3.0: version "3.4.0" resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89" integrity sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g== @@ -14679,7 +15020,7 @@ fork-ts-checker-webpack-plugin@1.5.0: tapable "^1.0.0" worker-rpc "^0.1.0" -fork-ts-checker-webpack-plugin@3.1.1: +fork-ts-checker-webpack-plugin@3.1.1, fork-ts-checker-webpack-plugin@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-3.1.1.tgz#a1642c0d3e65f50c2cc1742e9c0a80f441f86b19" integrity sha512-DuVkPNrM12jR41KM2e+N+styka0EgLkTnXmNcXdgOM37vtGeY+oCBK/Jx0hzSeEU6memFCtWb4htrHPMDfwwUQ== @@ -15929,6 +16270,11 @@ hash-sum@^1.0.2: resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04" integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ= +hash-sum@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a" + integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg== + hash.js@^1.0.0, hash.js@^1.0.3: version "1.1.7" resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42" @@ -16053,6 +16399,11 @@ hex-color-regex@^1.1.0: resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ== +highlight.js@^9.6.0: + version "9.18.1" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c" + integrity sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg== + highlight.js@~9.13.0: version "9.13.1" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e" @@ -16253,7 +16604,7 @@ html-webpack-plugin@4.0.0-beta.5: tapable "^1.1.0" util.promisify "1.0.0" -html-webpack-plugin@^3.0.0: +html-webpack-plugin@^3.0.0, html-webpack-plugin@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b" integrity sha1-sBq71yOsqqeze2r0SS69oD2d03s= @@ -19209,6 +19560,18 @@ js-levenshtein@^1.1.3: resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d" integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g== +js-message@1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.5.tgz#2300d24b1af08e89dd095bc1a4c9c9cfcb892d15" + integrity sha1-IwDSSxrwjondCVvBpMnJz8uJLRU= + +js-queue@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/js-queue/-/js-queue-2.0.0.tgz#362213cf860f468f0125fc6c96abc1742531f948" + integrity sha1-NiITz4YPRo8BJfxslqvBdCUx+Ug= + dependencies: + easy-stack "^1.0.0" + js-string-escape@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef" @@ -20009,6 +20372,21 @@ latest-version@^5.0.0: dependencies: package-json "^6.3.0" +launch-editor-middleware@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/launch-editor-middleware/-/launch-editor-middleware-2.2.1.tgz#e14b07e6c7154b0a4b86a0fd345784e45804c157" + integrity sha512-s0UO2/gEGiCgei3/2UN3SMuUj1phjQN8lcpnvgLSz26fAzNWPQ6Nf/kF5IFClnfU2ehp6LrmKdMU/beveO+2jg== + dependencies: + launch-editor "^2.2.1" + +launch-editor@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.2.1.tgz#871b5a3ee39d6680fcc26d37930b6eeda89db0ca" + integrity sha512-On+V7K2uZK6wK7x691ycSUbLD/FyKKelArkbaAMSSJU8JmqmhwN2+mnJDNINuJWSrh2L0kDk+ZQtbC/gOWUwLw== + dependencies: + chalk "^2.3.0" + shell-quote "^1.6.1" + lazy-ass@1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513" @@ -20462,7 +20840,7 @@ loader-fs-cache@^1.0.0, loader-fs-cache@^1.0.2: find-cache-dir "^0.1.1" mkdirp "^0.5.1" -loader-runner@^2.3.0, loader-runner@^2.4.0: +loader-runner@^2.3.0, loader-runner@^2.3.1, loader-runner@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357" integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw== @@ -20752,6 +21130,11 @@ lodash.istypedarray@^3.0.0: resolved "https://registry.yarnpkg.com/lodash.istypedarray/-/lodash.istypedarray-3.0.6.tgz#c9a477498607501d8e8494d283b87c39281cef62" integrity sha1-yaR3SYYHUB2OhJTSg7h8OSgc72I= +lodash.kebabcase@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36" + integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY= + lodash.keys@^3.0.0: version "3.1.2" resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a" @@ -20846,6 +21229,11 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "^3.0.0" +lodash.transform@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0" + integrity sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A= + lodash.unescape@4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c" @@ -21763,7 +22151,7 @@ mini-css-extract-plugin@0.5.0, mini-css-extract-plugin@^0.5.0: schema-utils "^1.0.0" webpack-sources "^1.1.0" -mini-css-extract-plugin@0.9.0: +mini-css-extract-plugin@0.9.0, mini-css-extract-plugin@^0.9.0: version "0.9.0" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e" integrity sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A== @@ -22112,7 +22500,7 @@ mute-stream@0.0.8, mute-stream@~0.0.4: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== -mz@^2.5.0: +mz@^2.4.0, mz@^2.5.0: version "2.7.0" resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32" integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q== @@ -22324,6 +22712,15 @@ node-int64@^0.4.0: resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b" integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs= +node-ipc@^9.1.1: + version "9.1.1" + resolved "https://registry.yarnpkg.com/node-ipc/-/node-ipc-9.1.1.tgz#4e245ed6938e65100e595ebc5dc34b16e8dd5d69" + integrity sha512-FAyICv0sIRJxVp3GW5fzgaf9jwwRQxAKDJlmNFUL5hOy+W4X/I5AypyHoq0DXXbo9o/gt79gj++4cMr4jVWE/w== + dependencies: + event-pubsub "4.3.0" + js-message "1.0.5" + js-queue "2.0.0" + node-libs-browser@^2.0.0, node-libs-browser@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425" @@ -22492,6 +22889,11 @@ normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package- semver "2 || 3 || 4 || 5" validate-npm-package-license "^3.0.1" +normalize-path@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-1.0.0.tgz#32d0e472f91ff345701c15a8311018d3b0a90379" + integrity sha1-MtDkcvkf80VwHBWoMRAY07CpA3k= + normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9" @@ -23618,6 +24020,13 @@ parse-url@^5.0.0: parse-path "^4.0.0" protocols "^1.4.0" +parse5-htmlparser2-tree-adapter@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-5.1.1.tgz#e8c743d4e92194d5293ecde2b08be31e67461cbc" + integrity sha512-CF+TKjXqoqyDwHqBhFQ+3l5t83xYi6fVT1tQNg+Ye0JRLnTxWvIroCjEp1A0k4lneHNBGnICUf0cfYVYGEazqw== + dependencies: + parse5 "^5.1.1" + parse5@4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608" @@ -24823,7 +25232,7 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== -postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.0.3: +postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.0.3, postcss-value-parser@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== @@ -24874,7 +25283,7 @@ postcss@7.0.27: source-map "^0.6.1" supports-color "^6.1.0" -postcss@7.x.x, postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.23, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.5, postcss@^7.0.6: +postcss@7.x.x, postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.23, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.30, postcss@^7.0.5, postcss@^7.0.6: version "7.0.30" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.30.tgz#cc9378beffe46a02cbc4506a0477d05fcea9a8e2" integrity sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ== @@ -27946,7 +28355,7 @@ schema-utils@^1.0.0: ajv-errors "^1.0.0" ajv-keywords "^3.1.0" -schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6.4, schema-utils@^2.6.5, schema-utils@^2.6.6: +schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6.4, schema-utils@^2.6.5, schema-utils@^2.6.6: version "2.6.6" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.6.tgz#299fe6bd4a3365dc23d99fd446caff8f1d6c330c" integrity sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA== @@ -28065,7 +28474,7 @@ semver@6.0.0: resolved "https://registry.yarnpkg.com/semver/-/semver-6.0.0.tgz#05e359ee571e5ad7ed641a6eec1e547ba52dea65" integrity sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ== -semver@6.3.0, semver@6.x, semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0: +semver@6.3.0, semver@6.x, semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0: version "6.3.0" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== @@ -28884,7 +29293,7 @@ ssri@^6.0.0, ssri@^6.0.1: dependencies: figgy-pudding "^3.5.1" -ssri@^7.0.0: +ssri@^7.0.0, ssri@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/ssri/-/ssri-7.1.0.tgz#92c241bf6de82365b5c7fb4bd76e975522e1294d" integrity sha512-77/WrDZUWocK0mvA5NTRQyveUf+wsrIc6vyrxpS8tVvYBcX215QbafrJR3KtkpskIzoFLqqNuuYQvxaMjXJ/0g== @@ -29906,7 +30315,7 @@ terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.4.3: webpack-sources "^1.4.0" worker-farm "^1.7.0" -terser-webpack-plugin@^2.1.3: +terser-webpack-plugin@^2.1.3, terser-webpack-plugin@^2.3.5: version "2.3.6" resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.6.tgz#a4014b311a61f87c6a1b217ef4f5a75bd0665a69" integrity sha512-I8IDsQwZrqjdmOicNeE8L/MhwatAap3mUrtcAKJuilsemUNcX+Hier/eAzwStVqhlCxq0aG3ni9bK/0BESXkTg== @@ -30046,6 +30455,15 @@ thenify-all@^1.0.0: dependencies: any-promise "^1.0.0" +thread-loader@^2.1.3: + version "2.1.3" + resolved "https://registry.yarnpkg.com/thread-loader/-/thread-loader-2.1.3.tgz#cbd2c139fc2b2de6e9d28f62286ab770c1acbdda" + integrity sha512-wNrVKH2Lcf8ZrWxDF/khdlLlsTMczdcwPA9VEK4c2exlEPynYWxi9op3nPTo5lAnDIkE0rQEB3VBP+4Zncc9Hg== + dependencies: + loader-runner "^2.3.1" + loader-utils "^1.1.0" + neo-async "^2.6.0" + throat@^4.0.0: version "4.1.0" resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a" @@ -30503,7 +30921,7 @@ ts-loader@^5.3.3: micromatch "^3.1.4" semver "^5.0.1" -ts-loader@^6.0.0, ts-loader@^6.0.1, ts-loader@^6.2.0: +ts-loader@^6.0.0, ts-loader@^6.0.1, ts-loader@^6.2.0, ts-loader@^6.2.2: version "6.2.2" resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.2.2.tgz#dffa3879b01a1a1e0a4b85e2b8421dc0dfff1c58" integrity sha512-HDo5kXZCBml3EUPcc7RlZOV/JGlLHwppTLEHb3SHnr5V7NXD4klMEkrhJe5wgRbaWsSXi+Y1SIBN/K9B6zWGWQ== @@ -30601,11 +31019,37 @@ tslib@1.11.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35" integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA== -tslib@^1.10.0, tslib@^1.11.1, tslib@^1.8.1, tslib@^1.9.0: +tslib@^1.10.0, tslib@^1.11.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: version "1.13.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== +tslint@^5.20.1: + version "5.20.1" + resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d" + integrity sha512-EcMxhzCFt8k+/UP5r8waCf/lzmeSyVlqxqMEDQE7rWYiQky8KpIBz1JAoYXfROHrPZ1XXd43q8yQnULOLiBRQg== + dependencies: + "@babel/code-frame" "^7.0.0" + builtin-modules "^1.1.1" + chalk "^2.3.0" + commander "^2.12.1" + diff "^4.0.1" + glob "^7.1.1" + js-yaml "^3.13.1" + minimatch "^3.0.4" + mkdirp "^0.5.1" + resolve "^1.3.2" + semver "^5.3.0" + tslib "^1.8.0" + tsutils "^2.29.0" + +tsutils@^2.29.0: + version "2.29.0" + resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99" + integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA== + dependencies: + tslib "^1.8.1" + tsutils@^3.17.1, tsutils@^3.7.0: version "3.17.1" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759" @@ -31318,7 +31762,7 @@ url-loader@1.1.2: mime "^2.0.3" schema-utils "^1.0.0" -url-loader@2.3.0: +url-loader@2.3.0, url-loader@^2.2.0: version "2.3.0" resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.3.0.tgz#e0e2ef658f003efb8ca41b0f3ffbf76bab88658b" integrity sha512-goSdg8VY+7nPZKUEChZSEtW5gjbS66USIGCeSJ1OVOJ7Yfuh/36YxCwMi5HVEJh6mqUYOoy3NJ0vlOMrWsSHog== @@ -31637,7 +32081,7 @@ vscode-uri@^2.1.1: resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-2.1.1.tgz#5aa1803391b6ebdd17d047f51365cf62c38f6e90" integrity sha512-eY9jmGoEnVf8VE8xr5znSah7Qt1P/xsCdErz+g8HYZtJ7bZqKH5E3d+6oVNm1AC/c6IHUDokbmVXKOi4qPAC9A== -vue-class-component@^7.1.0: +vue-class-component@^7.1.0, vue-class-component@^7.2.3: version "7.2.3" resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.3.tgz#a5b1abd53513a72ad51098752e2dedd499807cca" integrity sha512-oEqYpXKaFN+TaXU+mRLEx8dX0ah85aAJEe61mpdoUrq0Bhe/6sWhyZX1JjMQLhVsHAkncyhedhmCdDVSasUtDw== @@ -31672,7 +32116,7 @@ vue-hot-reload-api@^2.3.0: resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2" integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog== -vue-loader@^15.7.0: +vue-loader@^15.7.0, vue-loader@^15.9.1: version "15.9.2" resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.2.tgz#ae01f5f4c9c6a04bff4483912e72ef91a402c1ae" integrity sha512-oXBubaY//CYEISBlHX+c2YPJbmOH68xXPXjFv4MAgPqQvUsnjrBAjCJi8HXZ/r/yfn0tPL5VZj1Zcp8mJPI8VA== @@ -31690,6 +32134,13 @@ vue-property-decorator@8.3.0: dependencies: vue-class-component "^7.1.0" +vue-property-decorator@^8.4.1: + version "8.4.2" + resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.4.2.tgz#016e17f259f73bc547e77a50ce282ba18db4ee41" + integrity sha512-IqbARlvgPE2pzKfbecKxsu2yEH0Wv7hfHR6m4eZA3LTnNw9hveAX77vDfLFyTeMISS5N7Kucp/xRSHjcQ6bAfQ== + dependencies: + vue-class-component "^7.1.0" + vue-style-loader@^4.1.0, vue-style-loader@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8" @@ -31698,7 +32149,7 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.2: hash-sum "^1.0.2" loader-utils "^1.0.2" -vue-template-compiler@^2.0.0, vue-template-compiler@^2.6.8: +vue-template-compiler@^2.0.0, vue-template-compiler@^2.6.11, vue-template-compiler@^2.6.8: version "2.6.11" resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080" integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA== @@ -31897,7 +32348,7 @@ webidl-conversions@^6.0.0: resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514" integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w== -webpack-bundle-analyzer@^3.4.1: +webpack-bundle-analyzer@^3.4.1, webpack-bundle-analyzer@^3.6.1: version "3.7.0" resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.7.0.tgz#84da434e89442899b884d9ad38e466d0db02a56f" integrity sha512-mETdjZ30a3Yf+NTB/wqTgACK7rAYQl5uxKK0WVTNmF0sM3Uv8s3R58YZMW7Rhu0Lk2Rmuhdj5dcH5Q76zCDVdA== @@ -31916,7 +32367,7 @@ webpack-bundle-analyzer@^3.4.1: opener "^1.5.1" ws "^6.0.0" -webpack-chain@^6.0.0: +webpack-chain@^6.0.0, webpack-chain@^6.4.0: version "6.4.0" resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-6.4.0.tgz#22f0b27b6a9bc9ee3cba4f9e6513cf66394034e2" integrity sha512-f97PYqxU+9/u0IUqp/ekAHRhBD1IQwhBv3wlJo2nvyELpr2vNnUqO3XQEk+qneg0uWGP54iciotszpjfnEExFA== @@ -32027,7 +32478,7 @@ webpack-dev-server@3.2.1: webpack-log "^2.0.0" yargs "12.0.2" -webpack-dev-server@^3.7.2, webpack-dev-server@^3.8.2: +webpack-dev-server@^3.10.3, webpack-dev-server@^3.7.2, webpack-dev-server@^3.8.2: version "3.11.0" resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz#8f154a3bce1bcfd1cc618ef4e703278855e7ff8c" integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg== @@ -32113,7 +32564,7 @@ webpack-manifest-plugin@2.2.0: object.entries "^1.1.0" tapable "^1.0.0" -webpack-merge@4.2.2, webpack-merge@^4.2.1: +webpack-merge@4.2.2, webpack-merge@^4.2.1, webpack-merge@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.2.2.tgz#a27c52ea783d1398afd2087f547d7b9d2f43634d" integrity sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g== @@ -32208,7 +32659,7 @@ webpack@4.42.0: watchpack "^1.6.0" webpack-sources "^1.4.1" -webpack@^4.27.1, webpack@^4.33.0, webpack@^4.38.0, webpack@^4.41.2, webpack@^4.41.4, webpack@^4.43.0: +webpack@^4.0.0, webpack@^4.27.1, webpack@^4.33.0, webpack@^4.38.0, webpack@^4.41.2, webpack@^4.41.4, webpack@^4.43.0: version "4.43.0" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6" integrity sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g== @@ -33011,7 +33462,7 @@ yargs@^14.0.0, yargs@^14.2.2: y18n "^4.0.0" yargs-parser "^15.0.1" -yargs@^15.0.2, yargs@^15.3.1: +yargs@^15.0.0, yargs@^15.0.2, yargs@^15.3.1: version "15.3.1" resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b" integrity sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA== @@ -33083,6 +33534,16 @@ yn@3.1.1: resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50" integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q== +yorkie@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/yorkie/-/yorkie-2.0.0.tgz#92411912d435214e12c51c2ae1093e54b6bb83d9" + integrity sha512-jcKpkthap6x63MB4TxwCyuIGkV0oYP/YRyuQU5UO0Yz/E/ZAu+653/uov+phdmO54n6BcvFRyyt0RRrWdN2mpw== + dependencies: + execa "^0.8.0" + is-ci "^1.0.10" + normalize-path "^1.0.0" + strip-indent "^2.0.0" + yui@^3.18.1: version "3.18.1" resolved "https://registry.yarnpkg.com/yui/-/yui-3.18.1.tgz#e000269ec0a7b6fbc741cbb8fcbd0e65117b014c" From 14d3e1b729bb4c0c14b9966fa36baa5c4ad51530 Mon Sep 17 00:00:00 2001 From: Paul Grau Date: Tue, 19 May 2020 00:10:24 +0900 Subject: [PATCH 14/37] Vue: Remove babel-preset-vue #4475 See the vue-kitchen-sink app for a migration path. Basically you just need to add the preset to your or storybook's babel config. --- app/vue/package.json | 1 - app/vue/src/server/framework-preset-vue.ts | 7 ------- examples/vue-kitchen-sink/babel.config.json | 3 +++ examples/vue-kitchen-sink/package.json | 1 + examples/vue-kitchen-sink/webpack.config.js | 2 -- 5 files changed, 4 insertions(+), 10 deletions(-) create mode 100644 examples/vue-kitchen-sink/babel.config.json diff --git a/app/vue/package.json b/app/vue/package.json index 1b320821aaba..a4f2a187ddb0 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -46,7 +46,6 @@ "devDependencies": { "@types/node": "^13.13.4", "@types/webpack": "^4.41.12", - "babel-preset-vue": "^2.0.2", "vue": "^2.6.8", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.8" diff --git a/app/vue/src/server/framework-preset-vue.ts b/app/vue/src/server/framework-preset-vue.ts index 490aa2d9b81a..bf6f79b53ad5 100644 --- a/app/vue/src/server/framework-preset-vue.ts +++ b/app/vue/src/server/framework-preset-vue.ts @@ -38,10 +38,3 @@ export function webpack(config: Configuration) { }, }; } - -export function babelDefault(config: any) { - return { - ...config, - presets: [...config.presets, require.resolve('babel-preset-vue')], - }; -} diff --git a/examples/vue-kitchen-sink/babel.config.json b/examples/vue-kitchen-sink/babel.config.json new file mode 100644 index 000000000000..1b11af8a9a98 --- /dev/null +++ b/examples/vue-kitchen-sink/babel.config.json @@ -0,0 +1,3 @@ +{ + "presets": ["babel-preset-vue"] +} \ No newline at end of file diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 4978ac6c7844..f6ae674c2074 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -28,6 +28,7 @@ "@storybook/vue": "6.0.0-beta.7", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.5", + "babel-preset-vue": "^2.0.2", "cross-env": "^7.0.0", "file-loader": "^6.0.0", "prop-types": "^15.7.2", diff --git a/examples/vue-kitchen-sink/webpack.config.js b/examples/vue-kitchen-sink/webpack.config.js index 2587213e415f..92943434adba 100644 --- a/examples/vue-kitchen-sink/webpack.config.js +++ b/examples/vue-kitchen-sink/webpack.config.js @@ -59,8 +59,6 @@ module.exports = { options: { // enable CSS Modules modules: true, - // customize generated class names - localIdentName: '[local]_[hash:base64:8]', }, }, ], From 1ea65954ca397f911e2422beaa36322ab4a562f0 Mon Sep 17 00:00:00 2001 From: Brody McKee Date: Tue, 19 May 2020 10:36:36 +0300 Subject: [PATCH 15/37] feat: update types and defaults --- .../server/framework-preset-react-docgen.ts | 27 +++----- examples/react-ts/{main.js => main.ts} | 5 +- examples/react-ts/package.json | 1 + examples/react-ts/src/button.stories.tsx | 2 +- examples/react-ts/src/button.tsx | 6 +- examples/react-ts/src/emoji-button.js | 19 ++++++ examples/react-ts/src/emoji-button.stories.js | 8 +++ examples/react-ts/tsconfig.json | 6 +- lib/core/src/server/config.js | 3 +- lib/core/src/server/config/defaults.js | 4 ++ lib/core/src/server/manager/manager-config.js | 4 +- lib/core/types/index.ts | 61 ++++++++++++++++--- yarn.lock | 2 +- 13 files changed, 109 insertions(+), 39 deletions(-) rename examples/react-ts/{main.js => main.ts} (76%) create mode 100644 examples/react-ts/src/emoji-button.js create mode 100644 examples/react-ts/src/emoji-button.stories.js create mode 100644 lib/core/src/server/config/defaults.js diff --git a/app/react/src/server/framework-preset-react-docgen.ts b/app/react/src/server/framework-preset-react-docgen.ts index cf731c965252..a525c8d03f94 100644 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ b/app/react/src/server/framework-preset-react-docgen.ts @@ -1,19 +1,9 @@ -import { TransformOptions } from '@babel/core'; -import { Configuration } from 'webpack'; +import type { TransformOptions } from '@babel/core'; +import type { Configuration } from 'webpack'; import type { StorybookOptions } from '@storybook/core/types'; -const DEFAULT_DOCGEN = 'react-docgen-typescript'; - -const getDocgen = (typescriptOptions: StorybookOptions['typescriptOptions']) => { - const docgen = typescriptOptions?.reactDocgen; - return typeof docgen === 'undefined' ? DEFAULT_DOCGEN : docgen; -}; - -export function babel( - config: TransformOptions, - { typescriptOptions }: StorybookOptions = { typescriptOptions: {} } -) { - const reactDocgen = getDocgen(typescriptOptions); +export function babel(config: TransformOptions, { typescriptOptions }: StorybookOptions) { + const { reactDocgen } = typescriptOptions; if (!reactDocgen) { return config; } @@ -35,11 +25,8 @@ export function babel( }; } -export function webpackFinal( - config: Configuration, - { typescriptOptions }: StorybookOptions = { typescriptOptions: {} } -) { - const reactDocgen = getDocgen(typescriptOptions); +export function webpackFinal(config: Configuration, { typescriptOptions }: StorybookOptions) { + const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions; if (reactDocgen !== 'react-docgen-typescript') return config; return { ...config, @@ -53,7 +40,7 @@ export function webpackFinal( use: [ { loader: require.resolve('react-docgen-typescript-loader'), - options: typescriptOptions?.reactDocgenTypescriptOptions, + options: reactDocgenTypescriptOptions, }, ], }, diff --git a/examples/react-ts/main.js b/examples/react-ts/main.ts similarity index 76% rename from examples/react-ts/main.js rename to examples/react-ts/main.ts index e901e7decb65..17f75117a167 100644 --- a/examples/react-ts/main.js +++ b/examples/react-ts/main.ts @@ -1,12 +1,13 @@ +import type { StorybookConfig } from '@storybook/core/types'; + module.exports = { stories: ['./src/*.stories.*'], addons: ['@storybook/addon-essentials'], typescript: { check: true, checkOptions: {}, - reactDocgen: 'react-docgen-typescript', reactDocgenTypescriptOptions: { propFilter: (prop) => ['label', 'disabled'].includes(prop.name), }, }, -}; +} as StorybookConfig; diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json index 6ab3104715d3..0d31cc0c6027 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -12,6 +12,7 @@ "@storybook/react": "6.0.0-beta.8", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", + "prop-types": "15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", "typescript": "^3.9.2", diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx index b2350a28722f..4f6fa70cb1ca 100644 --- a/examples/react-ts/src/button.stories.tsx +++ b/examples/react-ts/src/button.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { argsStory } from '@storybook/react'; import { Button } from './button'; -export default { component: Button, title: 'Examples/Button' }; +export default { component: Button, title: 'Examples / Button' }; export const WithArgs = argsStory({ label: 'With args' }); export const Basic = () => ); diff --git a/examples/react-ts/src/emoji-button.js b/examples/react-ts/src/emoji-button.js new file mode 100644 index 000000000000..716afa1238c0 --- /dev/null +++ b/examples/react-ts/src/emoji-button.js @@ -0,0 +1,19 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export const EmojiButton = ({ label, ...props }) => ( + +); + +EmojiButton.propTypes = { + /** + * A label to show on the button + */ + label: PropTypes.string, +}; + +EmojiButton.defaultProps = { + label: 'Hello', +}; diff --git a/examples/react-ts/src/emoji-button.stories.js b/examples/react-ts/src/emoji-button.stories.js new file mode 100644 index 000000000000..2721965b84c1 --- /dev/null +++ b/examples/react-ts/src/emoji-button.stories.js @@ -0,0 +1,8 @@ +import React from 'react'; +import { argsStory } from '@storybook/react'; +import { EmojiButton } from './emoji-button'; + +export default { component: EmojiButton, title: 'Examples / Emoji Button' }; + +export const WithArgs = argsStory({ label: 'With args' }); +export const Basic = () => ; diff --git a/examples/react-ts/tsconfig.json b/examples/react-ts/tsconfig.json index 8b8ebe54e839..5447ee7e4d86 100644 --- a/examples/react-ts/tsconfig.json +++ b/examples/react-ts/tsconfig.json @@ -1,10 +1,10 @@ { "compilerOptions": { "baseUrl": ".", - "skipLibCheck": true, - "jsx": "preserve", "esModuleInterop": true, + "jsx": "preserve", + "skipLibCheck": true, "strict": true }, - "include": ["src/*"] + "include": ["src/*", "main.ts"] } diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index 5aff0e31b297..7e5970bf30d2 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -1,9 +1,10 @@ import { logger } from '@storybook/node-logger'; import loadPresets from './presets'; import loadCustomPresets from './common/custom-presets'; +import { typeScriptDefaults } from './config/defaults'; async function getPreviewWebpackConfig(options, presets) { - const typescriptOptions = await presets.apply('typescript', {}, options); + const typescriptOptions = await presets.apply('typescript', { ...typeScriptDefaults }, options); const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions }); const entries = await presets.apply('entries', [], options); const stories = await presets.apply('stories', [], options); diff --git a/lib/core/src/server/config/defaults.js b/lib/core/src/server/config/defaults.js new file mode 100644 index 000000000000..28c4b29435c2 --- /dev/null +++ b/lib/core/src/server/config/defaults.js @@ -0,0 +1,4 @@ +export const typeScriptDefaults = { + check: false, + reactDocgen: 'react-docgen-typescript', +}; diff --git a/lib/core/src/server/manager/manager-config.js b/lib/core/src/server/manager/manager-config.js index 5c48a1a75895..ab8ff4038689 100644 --- a/lib/core/src/server/manager/manager-config.js +++ b/lib/core/src/server/manager/manager-config.js @@ -5,6 +5,7 @@ import resolveFrom from 'resolve-from'; import loadPresets from '../presets'; import loadCustomPresets from '../common/custom-presets'; +import { typeScriptDefaults } from '../config/defaults'; const getAutoRefs = async (options) => { const location = await findUp('package.json', { cwd: options.configDir }); @@ -39,7 +40,8 @@ const toTitle = (input) => { }; async function getManagerWebpackConfig(options, presets) { - const babelOptions = await presets.apply('babel', {}, options); + const typescriptOptions = await presets.apply('typescript', { ...typeScriptDefaults }, options); + const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions }); const autoRefs = await getAutoRefs(options); const refs = await presets.apply('refs', undefined, options); diff --git a/lib/core/types/index.ts b/lib/core/types/index.ts index ed98b6d293a3..2edb41497374 100644 --- a/lib/core/types/index.ts +++ b/lib/core/types/index.ts @@ -1,10 +1,57 @@ -type ReactDocgen = 'react-docgen' | 'react-docgen-typescript' | false; +import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; +import type LoaderOptions from 'react-docgen-typescript-loader/dist/LoaderOptions'; +/** + * The interface for Storybook configuration in `main.js` files. + */ +export interface StorybookConfig { + /** + * Sets the addons you want to use with Storybook. + * + * @example `['@storybook/addon-essentials']` + */ + addons: string[]; + /** + * Tells Storybook where to find stories. + * + * @example `['./src/*.stories.(j|t)sx?']` + */ + stories: string[]; + /** + * Controls how Storybook hanldes TypeScript files. + */ + typescript?: Partial; +} + +/** + * The internal options object, used by Storybook frameworks and adddons. + */ export interface StorybookOptions { - typescriptOptions?: { - reactDocgen?: ReactDocgen; - reactDocgenTypescriptOptions?: any; - check?: boolean; - checkOptions?: any; - }; + typescriptOptions: TypescriptOptions; +} + +/** + * Options for TypeScript usage within Storybook. + */ +export interface TypescriptOptions { + /** + * Enables type checking within Storybook. + * + * @defalt `false` + */ + check: boolean; + /** + * Configures `fork-ts-checker-webpack-plugin` + */ + checkOptions?: ForkTsCheckerWebpackPlugin['options']; + /** + * Sets the type of Docgen when working with React and TypeScript + * + * @default `'react-docgen-typescript'` + */ + reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false; + /** + * Configures `react-docgen-typescript-loader` + */ + reactDocgenTypescriptOptions?: LoaderOptions; } diff --git a/yarn.lock b/yarn.lock index 3e7628aaed8b..093170faf5f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25182,7 +25182,7 @@ prop-types-exact@^1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== From 5270f070b3dba80f8193ef09478c60b6fb3100e0 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 19 May 2020 21:13:12 +0800 Subject: [PATCH 16/37] Update package.json --- examples/vue-cli/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/vue-cli/package.json b/examples/vue-cli/package.json index 4ce559e2f268..2f1f2cf6918b 100644 --- a/examples/vue-cli/package.json +++ b/examples/vue-cli/package.json @@ -1,6 +1,6 @@ { "name": "vue-cli-example", - "version": "6.0.0-beta.7", + "version": "6.0.0-beta.8", "private": true, "scripts": { "build": "vue-cli-service build", @@ -15,10 +15,10 @@ "vue-property-decorator": "^8.4.1" }, "devDependencies": { - "@storybook/addon-essentials": "6.0.0-beta.7", + "@storybook/addon-essentials": "6.0.0-beta.8", "@storybook/preset-scss": "^1.0.2", - "@storybook/source-loader": "6.0.0-beta.7", - "@storybook/vue": "6.0.0-beta.7", + "@storybook/source-loader": "6.0.0-beta.8", + "@storybook/vue": "6.0.0-beta.8", "@vue/cli-plugin-babel": "~4.3.0", "@vue/cli-plugin-typescript": "~4.3.0", "@vue/cli-service": "~4.3.0", From 8bc3c9f1bbfdb63a0707f118ea0b83b8605a0980 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 19 May 2020 16:43:20 +0200 Subject: [PATCH 17/37] FIX tests --- app/react/src/server/framework-preset-react-docgen.test.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/react/src/server/framework-preset-react-docgen.test.ts b/app/react/src/server/framework-preset-react-docgen.test.ts index d4130c0aba30..33bde8f2862e 100644 --- a/app/react/src/server/framework-preset-react-docgen.test.ts +++ b/app/react/src/server/framework-preset-react-docgen.test.ts @@ -10,7 +10,9 @@ describe('framework-preset-react-docgen', () => { plugins: ['foo-plugin'], }; - const config = preset.babel(babelConfig); + const config = preset.babel(babelConfig, { + typescriptOptions: { check: false, reactDocgen: 'react-docgen' }, + }); expect(config).toEqual({ babelrc: false, @@ -18,7 +20,7 @@ describe('framework-preset-react-docgen', () => { presets: ['env', 'foo-preset'], overrides: [ { - test: /\.(mjs|jsx?)$/, + test: /\.(mjs|tsx?|jsx?)$/, plugins: [ [ babelPluginReactDocgenPath, From a38d6cfc047ecc970644b3956b23f3e5e2cddf3f Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Tue, 19 May 2020 21:26:36 +0200 Subject: [PATCH 18/37] fix babel-loader-preview --- lib/core/src/server/preview/babel-loader-preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core/src/server/preview/babel-loader-preview.js b/lib/core/src/server/preview/babel-loader-preview.js index 4cebe8f666b6..aa5368899748 100644 --- a/lib/core/src/server/preview/babel-loader-preview.js +++ b/lib/core/src/server/preview/babel-loader-preview.js @@ -2,7 +2,7 @@ import { includePaths, excludePaths } from '../config/utils'; import { plugins } from '../common/babel'; import { useBaseTsSupport } from '../config/useBaseTsSupport'; -export default (options, framework) => ({ +export const createBabelLoader = (options, framework) => ({ test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/, use: [ { From 8a98ecf7e36549f6a91079d6108e12e25564620b Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Tue, 19 May 2020 22:13:07 +0200 Subject: [PATCH 19/37] fix missing deps --- app/vue/package.json | 1 + yarn.lock | 23 ++++++++++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/app/vue/package.json b/app/vue/package.json index 165cc0e5ea63..740cb724cee5 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -41,6 +41,7 @@ "global": "^4.3.2", "regenerator-runtime": "^0.13.3", "ts-dedent": "^1.1.1", + "ts-loader": "^7.0.4", "webpack": "^4.43.0" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 269c54c59bae..5ef0173381f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -29035,7 +29035,17 @@ send@^0.16.2: range-parser "~1.2.0" statuses "~1.4.0" -serialize-javascript@^1.4.0, serialize-javascript@^2.1.2, serialize-javascript@^3.0.0: +serialize-javascript@^1.4.0: + version "1.9.1" + resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb" + integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A== + +serialize-javascript@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61" + integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ== + +serialize-javascript@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.0.0.tgz#492e489a2d77b7b804ad391a5f5d97870952548e" integrity sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw== @@ -31437,6 +31447,17 @@ ts-loader@^6.0.0, ts-loader@^6.0.1, ts-loader@^6.2.0, ts-loader@^6.2.2: micromatch "^4.0.0" semver "^6.0.0" +ts-loader@^7.0.4: + version "7.0.4" + resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-7.0.4.tgz#5d9b95227de5afb91fdd9668f8920eb193cfe0cc" + integrity sha512-5du6OQHl+4ZjO4crEyoYUyWSrmmo7bAO+inkaILZ68mvahqrfoa4nn0DRmpQ4ruT4l+cuJCgF0xD7SBIyLeeow== + dependencies: + chalk "^2.3.0" + enhanced-resolve "^4.0.0" + loader-utils "^1.0.2" + micromatch "^4.0.0" + semver "^6.0.0" + ts-map@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/ts-map/-/ts-map-1.0.3.tgz#1c4d218dec813d2103b7e04e4bcf348e1471c1ff" From d3c99108e60ddfe9656e353555c8d23485cc92f2 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Tue, 19 May 2020 22:13:15 +0200 Subject: [PATCH 20/37] fix deepscan --- examples/vue-cli/src/button/Button.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/vue-cli/src/button/Button.vue b/examples/vue-cli/src/button/Button.vue index 78fa7a39218a..165fa9e34ba1 100644 --- a/examples/vue-cli/src/button/Button.vue +++ b/examples/vue-cli/src/button/Button.vue @@ -9,7 +9,7 @@ import Vue from 'vue'; import Component from 'vue-class-component'; import { Prop } from 'vue-property-decorator'; -import { ButtonSize, ButtonSizes } from './types'; +import { ButtonSize } from './types'; /** * This is a very nice button. It comes in three sizes! @@ -32,10 +32,10 @@ export default class Button extends Vue { border-radius: 3px; &.size-small { - font-size: .8em; + font-size: 0.8em; } &.size-big { font-size: 1.5em; } } - \ No newline at end of file + From 9b41d91d75e588a72d362aea81642cb472560ab1 Mon Sep 17 00:00:00 2001 From: tooppaaa Date: Tue, 19 May 2020 22:47:23 +0200 Subject: [PATCH 21/37] fix yarn lock --- yarn.lock | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/yarn.lock b/yarn.lock index 5ef0173381f0..98161cebaeb6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -29035,17 +29035,7 @@ send@^0.16.2: range-parser "~1.2.0" statuses "~1.4.0" -serialize-javascript@^1.4.0: - version "1.9.1" - resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb" - integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A== - -serialize-javascript@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61" - integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ== - -serialize-javascript@^3.0.0: +serialize-javascript@^1.4.0, serialize-javascript@^2.1.2, serialize-javascript@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.0.0.tgz#492e489a2d77b7b804ad391a5f5d97870952548e" integrity sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw== From 03136b7c87714bd3b897f4bc12d811ced8d7208f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 08:32:33 +0800 Subject: [PATCH 22/37] Debugging CI --- scripts/build-storybooks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/build-storybooks.js b/scripts/build-storybooks.js index 52b074873bef..02952d95d597 100755 --- a/scripts/build-storybooks.js +++ b/scripts/build-storybooks.js @@ -144,7 +144,7 @@ const run = async () => { logger.log( `will build: ${deployables.join(', ')} (${ deployables.length - } total - offset: ${offset} | step: ${step})` + } total - offset: ${offset} | step: ${step} | index: ${a} | total: ${b})` ); await handleExamples(deployables); } From ce38dee1b47e22ecea58b91d3d5199fd8e96da9d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 09:01:18 +0800 Subject: [PATCH 23/37] Debug CI --- scripts/build-storybooks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/build-storybooks.js b/scripts/build-storybooks.js index 02952d95d597..324960ea4166 100755 --- a/scripts/build-storybooks.js +++ b/scripts/build-storybooks.js @@ -144,7 +144,7 @@ const run = async () => { logger.log( `will build: ${deployables.join(', ')} (${ deployables.length - } total - offset: ${offset} | step: ${step} | index: ${a} | total: ${b})` + } total - offset: ${offset} | step: ${step} | index: ${a} | total: ${b} | length: ${length})` ); await handleExamples(deployables); } From 7948a7145144edf282bc22fabf2f1d791a42714d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 09:01:36 +0800 Subject: [PATCH 24/37] Fix typescript-preset filtering --- lib/core/src/server/config.js | 7 ++++--- lib/core/src/server/config.test.js | 17 +++++++++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 lib/core/src/server/config.test.js diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index 7e5970bf30d2..3e5ea3131b44 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -16,6 +16,9 @@ async function getPreviewWebpackConfig(options, presets) { ); } +export const filterPresetsConfig = (presetsConfig) => + presetsConfig.filter((preset) => !/@storybook[\\/]preset-typescript/.test(preset.name || preset)); + export default async (options) => { const { corePresets = [], frameworkPresets = [], overridePresets = [], ...restOptions } = options; @@ -28,9 +31,7 @@ export default async (options) => { ]; // Remove `@storybook/preset-typescript` and add a warning if in use. - const filteredPresetConfig = presetsConfig.filter( - (preset) => !/@storybook[\\\\/]preset-typescript/.test(preset) - ); + const filteredPresetConfig = filterPresetsConfig(presetsConfig); if (filteredPresetConfig.length < presetsConfig.length) { logger.warn( 'Storybook now supports TypeScript natively. You can safely remove `@storybook/preset-typescript`.' diff --git a/lib/core/src/server/config.test.js b/lib/core/src/server/config.test.js new file mode 100644 index 000000000000..ff4012898816 --- /dev/null +++ b/lib/core/src/server/config.test.js @@ -0,0 +1,17 @@ +import { filterPresetsConfig } from './config'; + +describe('filterPresetsConfig', () => { + it('string config', () => { + expect( + filterPresetsConfig(['@storybook/preset-scss', '@storybook/preset-typescript']) + ).toEqual(['@storybook/preset-scss']); + }); + + it('object config', () => { + const tsConfig = { + name: '@storybook/preset-typescript', + options: { foo: 1 }, + }; + expect(filterPresetsConfig([tsConfig, 'a'])).toEqual(['a']); + }); +}); From bdbd62a010a12cfeb767d84a614b0b53bcf53dfb Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 10:09:31 +0800 Subject: [PATCH 25/37] Build: Increase parallelism --- .circleci/config.yml | 4 ++-- scripts/build-storybooks.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 01895a5a8cf2..7944b8676a0e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -55,7 +55,7 @@ jobs: - lib chromatic: <<: *defaults - parallelism: 10 + parallelism: 11 steps: - checkout - attach_workspace: @@ -77,7 +77,7 @@ jobs: yarn packtracker examples: <<: *defaults - parallelism: 10 + parallelism: 11 steps: - checkout - attach_workspace: diff --git a/scripts/build-storybooks.js b/scripts/build-storybooks.js index 324960ea4166..4be6f9787a06 100755 --- a/scripts/build-storybooks.js +++ b/scripts/build-storybooks.js @@ -144,7 +144,7 @@ const run = async () => { logger.log( `will build: ${deployables.join(', ')} (${ deployables.length - } total - offset: ${offset} | step: ${step} | index: ${a} | total: ${b} | length: ${length})` + } total - offset: ${offset} | step: ${step} | length: ${length} | node_index: ${a} | total: ${b} |)` ); await handleExamples(deployables); } From ebd85352844de0e3ab577dd51832acf25438340f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 10:30:19 +0800 Subject: [PATCH 26/37] Attempt to unify ts-loader version for e2e tests --- app/vue/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/vue/package.json b/app/vue/package.json index 740cb724cee5..c14b9812dab7 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -41,7 +41,7 @@ "global": "^4.3.2", "regenerator-runtime": "^0.13.3", "ts-dedent": "^1.1.1", - "ts-loader": "^7.0.4", + "ts-loader": "^6.2.2", "webpack": "^4.43.0" }, "devDependencies": { @@ -57,7 +57,7 @@ "css-loader": "*", "react": "*", "react-dom": "*", - "ts-loader": "^7.0.4", + "ts-loader": "^6.2.2", "vue": "^2.6.8", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.8" From 5f95289521b14a77d40318305af8648d2011eb6f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 10:39:37 +0800 Subject: [PATCH 27/37] Update yarn.lock --- yarn.lock | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/yarn.lock b/yarn.lock index 98161cebaeb6..269c54c59bae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -31437,17 +31437,6 @@ ts-loader@^6.0.0, ts-loader@^6.0.1, ts-loader@^6.2.0, ts-loader@^6.2.2: micromatch "^4.0.0" semver "^6.0.0" -ts-loader@^7.0.4: - version "7.0.4" - resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-7.0.4.tgz#5d9b95227de5afb91fdd9668f8920eb193cfe0cc" - integrity sha512-5du6OQHl+4ZjO4crEyoYUyWSrmmo7bAO+inkaILZ68mvahqrfoa4nn0DRmpQ4ruT4l+cuJCgF0xD7SBIyLeeow== - dependencies: - chalk "^2.3.0" - enhanced-resolve "^4.0.0" - loader-utils "^1.0.2" - micromatch "^4.0.0" - semver "^6.0.0" - ts-map@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/ts-map/-/ts-map-1.0.3.tgz#1c4d218dec813d2103b7e04e4bcf348e1471c1ff" From c7dfb35b6a2788464bab8272a35a6e4bd49dfabf Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 11:28:02 +0800 Subject: [PATCH 28/37] Increase cypress navigation timeout for debugging --- cypress/helper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/helper.ts b/cypress/helper.ts index 028c9393229b..d886439d90b0 100644 --- a/cypress/helper.ts +++ b/cypress/helper.ts @@ -15,7 +15,7 @@ export const visit = (route = '') => { .clearLocalStorage() .visit(getUrl(route)) .get(`#storybook-preview-iframe`) - .then({ timeout: 10000 }, (iframe) => { + .then({ timeout: 15000 }, (iframe) => { return cy.wrap(iframe, { timeout: 10000 }).should(() => { const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument; const element: HTMLElement | null = content !== null ? content.documentElement : null; From bd7d479b4dab6cc65d283b2c91d82e7417729185 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 15:21:16 +0800 Subject: [PATCH 29/37] Fix presets for windows paths --- lib/core/src/server/config.js | 4 +++- lib/core/src/server/config.test.js | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/core/src/server/config.js b/lib/core/src/server/config.js index 3e5ea3131b44..f29703372afa 100644 --- a/lib/core/src/server/config.js +++ b/lib/core/src/server/config.js @@ -17,7 +17,9 @@ async function getPreviewWebpackConfig(options, presets) { } export const filterPresetsConfig = (presetsConfig) => - presetsConfig.filter((preset) => !/@storybook[\\/]preset-typescript/.test(preset.name || preset)); + presetsConfig.filter( + (preset) => !/@storybook[\\\\/]preset-typescript/.test(preset.name || preset) + ); export default async (options) => { const { corePresets = [], frameworkPresets = [], overridePresets = [], ...restOptions } = options; diff --git a/lib/core/src/server/config.test.js b/lib/core/src/server/config.test.js index ff4012898816..44cf29c13ea3 100644 --- a/lib/core/src/server/config.test.js +++ b/lib/core/src/server/config.test.js @@ -7,6 +7,10 @@ describe('filterPresetsConfig', () => { ).toEqual(['@storybook/preset-scss']); }); + it('windows paths', () => { + expect(filterPresetsConfig(['a', '@storybook\\preset-typescript'])).toEqual(['a']); + }); + it('object config', () => { const tsConfig = { name: '@storybook/preset-typescript', From 3f4d4ef98d74f317431e42e62a3d98007881efda Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 15:22:10 +0800 Subject: [PATCH 30/37] Typescript: Filter out node_modules for docgen by default --- lib/core/src/server/config/defaults.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/core/src/server/config/defaults.js b/lib/core/src/server/config/defaults.js index 28c4b29435c2..a2ba128cc833 100644 --- a/lib/core/src/server/config/defaults.js +++ b/lib/core/src/server/config/defaults.js @@ -1,4 +1,7 @@ export const typeScriptDefaults = { check: false, reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), + }, }; From ee085e5ed26c5e8aa4c76a66e404a633919db0d9 Mon Sep 17 00:00:00 2001 From: Brody McKee Date: Wed, 20 May 2020 11:14:34 +0300 Subject: [PATCH 31/37] feat: improve shared types --- .../official-storybook/{main.js => main.ts} | 4 +++- lib/core/types/index.ts | 18 +++++++++++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) rename examples/official-storybook/{main.js => main.ts} (96%) diff --git a/examples/official-storybook/main.js b/examples/official-storybook/main.ts similarity index 96% rename from examples/official-storybook/main.js rename to examples/official-storybook/main.ts index 6eea9d783a01..2c249eff765a 100644 --- a/examples/official-storybook/main.js +++ b/examples/official-storybook/main.ts @@ -1,3 +1,5 @@ +import type { StorybookConfig } from '@storybook/core/types'; + module.exports = { stories: [ // FIXME: Breaks e2e tests './intro.stories.mdx', @@ -74,4 +76,4 @@ module.exports = { extensions: [...(config.resolve.extensions || []), '.ts', '.tsx'], }, }), -}; +} as StorybookConfig; diff --git a/lib/core/types/index.ts b/lib/core/types/index.ts index 2edb41497374..eaaf4f72a67e 100644 --- a/lib/core/types/index.ts +++ b/lib/core/types/index.ts @@ -1,8 +1,9 @@ import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import type LoaderOptions from 'react-docgen-typescript-loader/dist/LoaderOptions'; +import { Configuration } from 'webpack'; /** - * The interface for Storybook configuration in `main.js` files. + * The interface for Storybook configuration in `main.ts` files. */ export interface StorybookConfig { /** @@ -10,7 +11,7 @@ export interface StorybookConfig { * * @example `['@storybook/addon-essentials']` */ - addons: string[]; + addons?: string[]; /** * Tells Storybook where to find stories. * @@ -21,12 +22,20 @@ export interface StorybookConfig { * Controls how Storybook hanldes TypeScript files. */ typescript?: Partial; + /** + * Modify or return a custom Webpack config. + */ + webpackFinal?: ( + config: Configuration, + options: StorybookOptions + ) => Configuration | Promise; } /** * The internal options object, used by Storybook frameworks and adddons. */ export interface StorybookOptions { + configType: 'DEVELOPMENT' | 'PRODUCTION'; typescriptOptions: TypescriptOptions; } @@ -42,8 +51,11 @@ export interface TypescriptOptions { check: boolean; /** * Configures `fork-ts-checker-webpack-plugin` + * + * @default + * @see https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/config/defaults.js#L4-L6 */ - checkOptions?: ForkTsCheckerWebpackPlugin['options']; + checkOptions: ForkTsCheckerWebpackPlugin['options']; /** * Sets the type of Docgen when working with React and TypeScript * From 4a4ccb48e618c602b6cc4820d3db99c389bada3c Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 16:35:20 +0800 Subject: [PATCH 32/37] Zero-config typescript: Updated MIGRATION and storybook documentation --- MIGRATION.md | 7 + .../configurations/typescript-config/index.md | 241 +++--------------- 2 files changed, 38 insertions(+), 210 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 185de7ed25c5..e90469c08384 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [From version 5.3.x to 6.0.x](#from-version-53x-to-60x) + - [Zero config typescript](#zero-config-typescript) - [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api) - [CRA preset removed](#cra-preset-removed) - [Args passed as first argument to story](#args-passed-as-first-argument-to-story) @@ -113,6 +114,12 @@ ## From version 5.3.x to 6.0.x +### Zero config typescript + +Storybook has built-in Typescript support in 6.0. That means you should remove your complex Typescript configurations from your `.storybook` config. We've tried to pick sensible defaults that work out of the box, especially for nice prop table generation in `@storybook/addon-docs`. + +To migrate from an old setup, we recommend deleting any typescript-specific webpack/babel configurations in your project. If you want to override the defaults, see the [typescript configuration docs](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/typescript-config/index.md). + ### Backgrounds addon has a new api Starting in 6.0, the backgrounds addon now receives an object instead of an array as parameter, with a property to define the default background. diff --git a/docs/src/pages/configurations/typescript-config/index.md b/docs/src/pages/configurations/typescript-config/index.md index f239eb5b5c13..9996c71fc295 100644 --- a/docs/src/pages/configurations/typescript-config/index.md +++ b/docs/src/pages/configurations/typescript-config/index.md @@ -3,235 +3,56 @@ id: 'typescript-config' title: 'TypeScript Config' --- -> migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) if you want to migrate to this format of configuring storybook. +Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed. -This is a central reference for using Storybook with TypeScript. +- [Default configuration](#default-configuration) +- [Main.js configuration](#mainjs-configuration) +- [Manual configuration](#manual-configuration) +- [More Resources](#more-resources) -## Typescript configuration presets +## Default configuration -The fastest and easiest way to write and configure your stories in TypeScript is by using a Storybook preset. +The base Typescript configuration uses `babel-loader` for Typescript transpilation, and optionally `fork-ts-checker-webpack-plugin` for checking. -* If you're using Create React App (CRA) and have configured it to work with TS, you should use [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app), which configures Storybook to reuse CRA's TS handling. +Each framework uses the base configuration unless otherwise specified: -* If you are not using CRA or have other requirements, then the next best option is [`@storybook/preset-typescript`](https://github.com/storybookjs/presets/tree/master/packages/preset-typescript), which configures `ts-loader` under the hood. +- **Angular** ignores the base and uses `ts-loader` and `ngx-template-loader`. +- **Vue** ignores the uses `ts-loader` and applies it to both `.tsx?` and `.vue` files. +- **React** adds `react-docgen-typescript-loader` the base. -If you need more control than these presets offer, read on for manual configuration instructions. +## Main.js configuration -You can learn more about Storybook presets [over here](../../presets/introduction). +To make it easier to configure Typescript handling, we've added a new field, `typescript`, to [`main.js`](../overview/index.md). -> If using TypeScript, some addons require features available in TS version 3.4+. - -## Setting up TypeScript with ts-loader - -### Dependencies you may need - -```bash -yarn add -D typescript -yarn add -D ts-loader -yarn add -D @storybook/addon-info react-docgen-typescript-loader # optional but recommended -yarn add -D jest "@types/jest" ts-jest #testing -``` - -### Setting up TypeScript to work with Storybook - -We [configure storybook's webpack](/configurations/custom-webpack-config/#full-control-mode--default) by changing `.storybook/main.js`: - -```js -module.exports = { - webpackFinal: async config => { - config.module.rules.push({ - test: /\.(ts|tsx)$/, - use: [ - { - loader: require.resolve('ts-loader'), - }, - // Optional - { - loader: require.resolve('react-docgen-typescript-loader'), - }, - ], - }); - config.resolve.extensions.push('.ts', '.tsx'); - return config; - }, -}; -``` - -The above example shows a working Webpack config with the [TSDocgen plugin](https://github.com/strothj/react-docgen-typescript-loader) integrated. This plugin is not necessary to use Storybook and the section marked `// optional` can be safely removed if the features of TSDocgen are not required. - -### `tsconfig.json` - -```json -{ - "compilerOptions": { - "outDir": "build/lib", - "module": "commonjs", - "target": "es5", - "lib": ["es5", "es6", "es7", "es2017", "dom"], - "sourceMap": true, - "allowJs": false, - "jsx": "react", - "moduleResolution": "node", - "rootDirs": ["src", "stories"], - "baseUrl": "src", - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "noImplicitThis": true, - "noImplicitAny": true, - "strictNullChecks": true, - "suppressImplicitAnyIndexErrors": true, - "noUnusedLocals": true, - "declaration": true, - "allowSyntheticDefaultImports": true, - "experimentalDecorators": true, - "emitDecoratorMetadata": true - }, - "include": ["src/**/*"], - "exclude": ["node_modules", "build", "scripts"] -} -``` - -This is for the default configuration where `/stories` is a peer of `src`. If you have them all in `src`, you may wish to replace `"rootDirs": ["src", "stories"]` above with `"rootDir": "src",`. - -## Setting up TypeScript with babel-loader - -### A note for Create React App users - -Please use [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app) for full compatibility with [Create React App](https://create-react-app.dev/) features - which includes TypeScript support. - -### Setting up TypeScript to work with Storybook - -The following code uses [`babel-preset-react-app`](https://github.com/facebook/create-react-app/tree/master/packages/babel-preset-react-app). - -We will create a [custom Webpack config](/configurations/custom-webpack-config/) by creating editing/creating the `.storybook/main.js`: +Here are the default values: ```js module.exports = { - stories: ['../src/**/*.stories.tsx'], - webpackFinal: async config => { - config.module.rules.push({ - test: /\.(ts|tsx)$/, - loader: require.resolve('babel-loader'), - options: { - presets: [['react-app', { flow: false, typescript: true }]], - }, - }); - config.resolve.extensions.push('.ts', '.tsx'); - return config; - }, -}; -``` - -### `tsconfig.json` - -If your stories are outside the `src` folder, for example the `stories` folder in root, then `"rootDirs": ["src", "stories"]` needs to be added to be added to `compilerOptions` so it knows what folders to compile. Make sure `jsx` is set to preserve. Should be unchanged. - -## Create a TSX storybook index - -The default storybook index file is `stories/index.stories.js` -- you'll want to rename this to `stories/index.stories.tsx`. - -## Using TypeScript with the TSDocgen addon - -The very handy [Storybook Info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) autogenerates prop tables documentation for each component, however it doesn't work with Typescript types. The current solution is to use [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) to preprocess the TypeScript files to give the Info addon what it needs. The webpack config above does this, and so for the rest of your stories you use it as per normal: - -```js -import * as React from 'react'; -import TicTacToeCell from './TicTacToeCell'; - -export default { - title: 'Components', - parameters: { - info: { inline: true }, + typescript: { + check: false, + checkOptions: {}, + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), + }, }, }; - -export const TicTacToeCell = () => ( - , -); ``` -## Customizing Type annotations/descriptions - -Please refer to the [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) docs for writing prop descriptions and other annotations to your Typescript interfaces. - -Additional annotation can be achieved by setting a default set of info parameters in `.storybook/preview.js`: - -```ts -import { addDecorator } from '@storybook/react'; -import { withInfo } from '@storybook/addon-info'; - -addDecorator( - withInfo({ - styles: { - header: { - h1: { - marginRight: '20px', - fontSize: '25px', - display: 'inline', - }, - body: { - paddingTop: 0, - paddingBottom: 0, - }, - h2: { - display: 'inline', - color: '#999', - }, - }, - infoBody: { - backgroundColor: '#eee', - padding: '0px 5px', - lineHeight: '2', - }, - }, - inline: true, - source: false, - }) -); -``` - -Note: Component docgen information can not be generated for components that are only exported as default. You can work around the issue by exporting the component using a named export. +And here are the meaning of each field: -## Setting up Jest tests +| Field | Framework | Description | Type | +| -------------------------------- | --------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| **check** | All | optionally run `fork-ts-checker-webpack-plugin` | `boolean` | +| **checkOptions** | All | Options to pass to `fork-ts-checker-webpack-plugin` if it's enabled | [See docs](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) | +| **reactDocgen** | React | which variant docgen processor to run | `'react-docgen-typescript' | 'react-docgen' | false` | +| **reactDocgenTypescriptOptions** | React | Options to pass to `react-docgen-typescript-loader` if `react-docgen-typescript` is enabled. | [See docs](https://github.com/strothj/react-docgen-typescript-loader) | -The ts-jest [README](https://github.com/kulshekhar/ts-jest) explains pretty clearly how to get Jest to recognize TypeScript code. - -This is an example `jest.config.js` file for jest: - -```js -module.exports = { - transform: { - '.(ts|tsx)': 'ts-jest', - }, - testPathIgnorePatterns: ['/node_modules/', '/lib/'], - testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$', - moduleFileExtensions: ['ts', 'tsx', 'js', 'json'], -}; -``` +## Manual configuration -## Building your TypeScript Storybook - -You will need to set up some scripts - these may help: - -```json - "scripts": { - "start": "react-scripts-ts start", - "build": "npm run lint && npm run build-lib && build-storybook", - "build-lib-watch": "tsc -w", - "build-lib": "tsc && npm run copy-css-to-lib && npm run copy-svg-to-lib && npm run copy-png-to-lib && npm run copy-woff2-to-lib", - "test": "react-scripts-ts test --env=jsdom", - "test:coverage": "npm test -- --coverage", - "eject": "react-scripts-ts eject", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook", - "copy-css-to-lib": "cpx \"./src/**/*.css\" ./build/lib", - "copy-woff2-to-lib": "cpx \"./src/**/*.woff2\" ./build/lib", - "copy-svg-to-lib": "cpx \"./src/**/*.svg\" ./build/lib", - "copy-png-to-lib": "cpx \"./src/**/*.png\" ./build/lib", - }, -``` +Manual configuration support will be added in a later pre-release. -## Related Issues and Helpful Resources +## More Resources - [Storybook, React, TypeScript and Jest](https://medium.com/@mtiller/storybook-react-typescript-and-jest-c9059ea06fa7) - [React, Storybook & TypeScript](http://www.joshschreuder.me/react-storybooks-with-typescript/) From 6dfb78686a0dd6fd7ff9b7f7da589beca3a6d5ef Mon Sep 17 00:00:00 2001 From: Brody McKee Date: Wed, 20 May 2020 11:37:30 +0300 Subject: [PATCH 33/37] fix: correct TSDoc error in shared types --- lib/core/types/index.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/core/types/index.ts b/lib/core/types/index.ts index eaaf4f72a67e..2369d784dcc1 100644 --- a/lib/core/types/index.ts +++ b/lib/core/types/index.ts @@ -51,11 +51,8 @@ export interface TypescriptOptions { check: boolean; /** * Configures `fork-ts-checker-webpack-plugin` - * - * @default - * @see https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/config/defaults.js#L4-L6 */ - checkOptions: ForkTsCheckerWebpackPlugin['options']; + checkOptions?: ForkTsCheckerWebpackPlugin['options']; /** * Sets the type of Docgen when working with React and TypeScript * @@ -64,6 +61,9 @@ export interface TypescriptOptions { reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false; /** * Configures `react-docgen-typescript-loader` + * + * @default + * @see https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/config/defaults.js#L4-L6 */ - reactDocgenTypescriptOptions?: LoaderOptions; + reactDocgenTypescriptOptions: LoaderOptions; } From 3671955f56dc55331759d0e7589a15327060ecd8 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 20 May 2020 18:42:50 +0800 Subject: [PATCH 34/37] Migrate sfc_vue fixture to use babel-preset-vue --- lib/cli/test/fixtures/sfc_vue/.babelrc | 1 + lib/cli/test/fixtures/sfc_vue/package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/lib/cli/test/fixtures/sfc_vue/.babelrc b/lib/cli/test/fixtures/sfc_vue/.babelrc index 32df804ee902..228d07a8bc6a 100644 --- a/lib/cli/test/fixtures/sfc_vue/.babelrc +++ b/lib/cli/test/fixtures/sfc_vue/.babelrc @@ -6,6 +6,7 @@ "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], + "babel-preset-vue", ], "plugins": ["@babel/plugin-transform-runtime"], "env": { diff --git a/lib/cli/test/fixtures/sfc_vue/package.json b/lib/cli/test/fixtures/sfc_vue/package.json index 4ee6470b4b63..4ae145417aff 100644 --- a/lib/cli/test/fixtures/sfc_vue/package.json +++ b/lib/cli/test/fixtures/sfc_vue/package.json @@ -26,6 +26,7 @@ "autoprefixer": "^9.4.9", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.5", + "babel-preset-vue": "^2.0.2", "chalk": "^2.4.2", "connect-history-api-fallback": "^1.6.0", "copy-webpack-plugin": "^5.0.0", From 7b8e6144411835435b6f33eb2a5a4079774cffa5 Mon Sep 17 00:00:00 2001 From: Paul Grau Date: Wed, 20 May 2020 20:33:22 +0900 Subject: [PATCH 35/37] Apply babel fix to vue fixture as well --- lib/cli/test/fixtures/sfc_vue/.babelrc | 2 +- lib/cli/test/fixtures/vue/.babelrc | 3 +++ lib/cli/test/fixtures/vue/package.json | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 lib/cli/test/fixtures/vue/.babelrc diff --git a/lib/cli/test/fixtures/sfc_vue/.babelrc b/lib/cli/test/fixtures/sfc_vue/.babelrc index 228d07a8bc6a..2aa64006e9df 100644 --- a/lib/cli/test/fixtures/sfc_vue/.babelrc +++ b/lib/cli/test/fixtures/sfc_vue/.babelrc @@ -6,7 +6,7 @@ "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], - "babel-preset-vue", + "babel-preset-vue" ], "plugins": ["@babel/plugin-transform-runtime"], "env": { diff --git a/lib/cli/test/fixtures/vue/.babelrc b/lib/cli/test/fixtures/vue/.babelrc new file mode 100644 index 000000000000..1b11af8a9a98 --- /dev/null +++ b/lib/cli/test/fixtures/vue/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["babel-preset-vue"] +} \ No newline at end of file diff --git a/lib/cli/test/fixtures/vue/package.json b/lib/cli/test/fixtures/vue/package.json index ad5375707db0..114fe5d4a9bc 100644 --- a/lib/cli/test/fixtures/vue/package.json +++ b/lib/cli/test/fixtures/vue/package.json @@ -18,6 +18,7 @@ "@babel/core": "^7.3.4", "autoprefixer": "^9.4.9", "babel-core": "^7.0.0-bridge.0", + "babel-preset-vue": "^2.0.2", "cross-env": "^5.2.0", "cssnano-cli": "^1.0.5", "npm-run-all": "^4.1.5", From b50442f992a22ace1c717fc36769e94a3106a0b6 Mon Sep 17 00:00:00 2001 From: Paul Grau Date: Wed, 20 May 2020 22:16:51 +0900 Subject: [PATCH 36/37] Revert removal of babel-preset-vue --- app/vue/src/server/framework-preset-vue.ts | 7 +++++++ examples/vue-kitchen-sink/babel.config.json | 3 --- examples/vue-kitchen-sink/package.json | 1 - lib/cli/test/fixtures/sfc_vue/.babelrc | 3 +-- lib/cli/test/fixtures/sfc_vue/package.json | 1 - lib/cli/test/fixtures/vue/.babelrc | 3 --- lib/cli/test/fixtures/vue/package.json | 1 - 7 files changed, 8 insertions(+), 11 deletions(-) delete mode 100644 examples/vue-kitchen-sink/babel.config.json delete mode 100644 lib/cli/test/fixtures/vue/.babelrc diff --git a/app/vue/src/server/framework-preset-vue.ts b/app/vue/src/server/framework-preset-vue.ts index bf6f79b53ad5..490aa2d9b81a 100644 --- a/app/vue/src/server/framework-preset-vue.ts +++ b/app/vue/src/server/framework-preset-vue.ts @@ -38,3 +38,10 @@ export function webpack(config: Configuration) { }, }; } + +export function babelDefault(config: any) { + return { + ...config, + presets: [...config.presets, require.resolve('babel-preset-vue')], + }; +} diff --git a/examples/vue-kitchen-sink/babel.config.json b/examples/vue-kitchen-sink/babel.config.json deleted file mode 100644 index 1b11af8a9a98..000000000000 --- a/examples/vue-kitchen-sink/babel.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["babel-preset-vue"] -} \ No newline at end of file diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 9ca683772033..faac00b0f1af 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -28,7 +28,6 @@ "@storybook/vue": "6.0.0-beta.8", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.5", - "babel-preset-vue": "^2.0.2", "cross-env": "^7.0.0", "file-loader": "^6.0.0", "prop-types": "^15.7.2", diff --git a/lib/cli/test/fixtures/sfc_vue/.babelrc b/lib/cli/test/fixtures/sfc_vue/.babelrc index 2aa64006e9df..ba3f407ed478 100644 --- a/lib/cli/test/fixtures/sfc_vue/.babelrc +++ b/lib/cli/test/fixtures/sfc_vue/.babelrc @@ -5,8 +5,7 @@ "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } - }], - "babel-preset-vue" + }] ], "plugins": ["@babel/plugin-transform-runtime"], "env": { diff --git a/lib/cli/test/fixtures/sfc_vue/package.json b/lib/cli/test/fixtures/sfc_vue/package.json index 4ae145417aff..4ee6470b4b63 100644 --- a/lib/cli/test/fixtures/sfc_vue/package.json +++ b/lib/cli/test/fixtures/sfc_vue/package.json @@ -26,7 +26,6 @@ "autoprefixer": "^9.4.9", "babel-core": "^7.0.0-bridge.0", "babel-loader": "^8.0.5", - "babel-preset-vue": "^2.0.2", "chalk": "^2.4.2", "connect-history-api-fallback": "^1.6.0", "copy-webpack-plugin": "^5.0.0", diff --git a/lib/cli/test/fixtures/vue/.babelrc b/lib/cli/test/fixtures/vue/.babelrc deleted file mode 100644 index 1b11af8a9a98..000000000000 --- a/lib/cli/test/fixtures/vue/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["babel-preset-vue"] -} \ No newline at end of file diff --git a/lib/cli/test/fixtures/vue/package.json b/lib/cli/test/fixtures/vue/package.json index 114fe5d4a9bc..ad5375707db0 100644 --- a/lib/cli/test/fixtures/vue/package.json +++ b/lib/cli/test/fixtures/vue/package.json @@ -18,7 +18,6 @@ "@babel/core": "^7.3.4", "autoprefixer": "^9.4.9", "babel-core": "^7.0.0-bridge.0", - "babel-preset-vue": "^2.0.2", "cross-env": "^5.2.0", "cssnano-cli": "^1.0.5", "npm-run-all": "^4.1.5", From 7a4724ba393e9c1b687d0972e2de9248d55b5bbf Mon Sep 17 00:00:00 2001 From: Paul Grau Date: Wed, 20 May 2020 22:20:21 +0900 Subject: [PATCH 37/37] Revert removel of babel-preset-vue from app/vue --- app/vue/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/app/vue/package.json b/app/vue/package.json index c14b9812dab7..83be4eef5adc 100644 --- a/app/vue/package.json +++ b/app/vue/package.json @@ -47,6 +47,7 @@ "devDependencies": { "@types/node": "^13.13.4", "@types/webpack": "^4.41.12", + "babel-preset-vue": "^2.0.2", "vue": "^2.6.8", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.8"