From 85ef89d06cfdebaa2928290c87268214a7c29723 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Sat, 18 Jan 2020 16:15:03 -0500 Subject: [PATCH 1/5] First try at moving the react-docgen dependency to the docs preset --- addons/docs/package.json | 2 + addons/docs/src/frameworks/common/preset.ts | 7 +- app/react/package.json | 2 - .../framework-preset-react-docgen.test.ts | 76 ------------------- .../server/framework-preset-react-docgen.ts | 22 ------ app/react/src/server/options.ts | 1 - .../cra-ts-kitchen-sink/.storybook/main.js | 23 +++--- examples/cra-ts-kitchen-sink/package.json | 2 +- 8 files changed, 20 insertions(+), 115 deletions(-) delete mode 100644 app/react/src/server/framework-preset-react-docgen.test.ts delete mode 100644 app/react/src/server/framework-preset-react-docgen.ts diff --git a/addons/docs/package.json b/addons/docs/package.json index c150950f7de9..d8c6c1b3b80e 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -57,6 +57,8 @@ "acorn": "^7.1.0", "acorn-jsx": "^5.1.0", "acorn-walk": "^7.0.0", + "babel-plugin-add-react-displayname": "^0.0.5", + "babel-plugin-react-docgen": "^5.1.0", "core-js": "^3.0.1", "doctrine": "^3.0.0", "escodegen": "^1.12.0", diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index f1c5764d6508..2c2a00b217e1 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -14,7 +14,12 @@ function createBabelOptions(babelOptions?: any, configureJSX?: boolean) { // for frameworks that are not working with react, we need to configure // the jsx to transpile mdx, for now there will be a flag for that // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx' - plugins: [...babelPlugins, '@babel/plugin-transform-react-jsx'], + plugins: [ + ...babelPlugins, + '@babel/plugin-transform-react-jsx', + 'babel-plugin-react-docgen', + 'babel-plugin-add-react-displayname', + ], }; } diff --git a/app/react/package.json b/app/react/package.json index 6fdfeb9964b7..518f550cf594 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -41,9 +41,7 @@ "@storybook/node-logger": "5.3.5", "@svgr/webpack": "^4.0.3", "@types/webpack-env": "^1.15.0", - "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-named-asset-import": "^0.3.1", - "babel-plugin-react-docgen": "^4.0.0", "core-js": "^3.0.1", "global": "^4.3.2", "lodash": "^4.17.15", diff --git a/app/react/src/server/framework-preset-react-docgen.test.ts b/app/react/src/server/framework-preset-react-docgen.test.ts deleted file mode 100644 index 1b1f0e27ca87..000000000000 --- a/app/react/src/server/framework-preset-react-docgen.test.ts +++ /dev/null @@ -1,76 +0,0 @@ -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.', () => { - const babelConfig = { - babelrc: false, - presets: ['env', 'foo-preset'], - plugins: ['foo-plugin'], - }; - - const config = preset.babel(babelConfig); - - 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, - presets: ['env', 'foo-preset'], - }; - - const config = preset.babel(babelConfig); - - expect(config).toEqual({ - babelrc: false, - 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 deleted file mode 100644 index fae63672c360..000000000000 --- a/app/react/src/server/framework-preset-react-docgen.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { TransformOptions } from '@babel/core'; - -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'), - { - 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. - return { - ...config, - plugins: [].concat(babelConfigPlugins, extraPlugins), - }; -} diff --git a/app/react/src/server/options.ts b/app/react/src/server/options.ts index 5e16a0eaee5b..3db6e58d6b12 100644 --- a/app/react/src/server/options.ts +++ b/app/react/src/server/options.ts @@ -6,6 +6,5 @@ export default { frameworkPresets: [ require.resolve('./framework-preset-react.js'), require.resolve('./framework-preset-cra.js'), - require.resolve('./framework-preset-react-docgen.js'), ], }; diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.js b/examples/cra-ts-kitchen-sink/.storybook/main.js index 04b6bba21210..ab152f990f41 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/main.js +++ b/examples/cra-ts-kitchen-sink/.storybook/main.js @@ -6,18 +6,17 @@ module.exports = { { name: '@storybook/preset-create-react-app', options: { - tsDocgenLoaderOptions: { - tsconfigPath: path.resolve(__dirname, '../tsconfig.json'), - shouldExtractLiteralValuesFromEnum: true, - propFilter: prop => { - // Currently not working, prop.parent is always null. - if (prop.parent) { - return !prop.parent.fileName.includes('node_modules/@types/react/'); - } - - return true; - }, - }, + // tsDocgenLoaderOptions: { + // tsconfigPath: path.resolve(__dirname, '../tsconfig.json'), + // shouldExtractLiteralValuesFromEnum: true, + // propFilter: prop => { + // // Currently not working, prop.parent is always null. + // if (prop.parent) { + // return !prop.parent.fileName.includes('node_modules/@types/react/'); + // } + // return true; + // }, + // }, }, }, '@storybook/addon-docs', diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json index 092985e2b82d..6fb0cd218f85 100644 --- a/examples/cra-ts-kitchen-sink/package.json +++ b/examples/cra-ts-kitchen-sink/package.json @@ -36,6 +36,7 @@ "devDependencies": { "@storybook/addon-a11y": "5.3.5", "@storybook/addon-actions": "5.3.5", + "@storybook/addon-docs": "5.3.5", "@storybook/addon-info": "5.3.5", "@storybook/addon-knobs": "5.3.5", "@storybook/addon-links": "5.3.5", @@ -50,7 +51,6 @@ "enzyme-adapter-react-16": "^1.9.1", "enzyme-to-json": "^3.4.1", "fork-ts-checker-webpack-plugin": "^3.0.1", - "react-docgen-typescript-loader": "^3.3.0", "react-moment-proptypes": "^1.7.0", "react-scripts": "^3.0.1", "tslint": "^5.14.0", From 4f71ff212e6090ce1b62a1b6a8dd84dce204921f Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Sat, 18 Jan 2020 16:20:15 -0500 Subject: [PATCH 2/5] Fixed babel-plugin-react-docgen dependency --- addons/docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/docs/package.json b/addons/docs/package.json index d8c6c1b3b80e..04cbaece9294 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -58,7 +58,7 @@ "acorn-jsx": "^5.1.0", "acorn-walk": "^7.0.0", "babel-plugin-add-react-displayname": "^0.0.5", - "babel-plugin-react-docgen": "^5.1.0", + "babel-plugin-react-docgen": "^4.1.0", "core-js": "^3.0.1", "doctrine": "^3.0.0", "escodegen": "^1.12.0", From 4e894341a3fa517944aee85b782a43d3a921f5b7 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Sat, 18 Jan 2020 16:37:44 -0500 Subject: [PATCH 3/5] Fix yarn.lock --- yarn.lock | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/yarn.lock b/yarn.lock index 582ad80f2b18..e6798f5511f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6567,10 +6567,10 @@ babel-plugin-named-asset-import@^0.3.1, babel-plugin-named-asset-import@^0.3.2, resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz#4a8fc30e9a3e2b1f5ed36883386ab2d84e1089bd" integrity sha512-S6d+tEzc5Af1tKIMbsf2QirCcPdQ+mKUCY2H1nJj1DyA1ShwpsoxEOAwbWsG5gcXNV/olpvQd9vrUWRx4bnhpw== -babel-plugin-react-docgen@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.0.0.tgz#1be997bc135b2a0eec54364202d01ed0f15f0098" - integrity sha512-6vdky/CRaq0zE64ZRR1fOjUfFS3kX7USMuC6mAH/ASYt/EGY9Ms1F5uLwHhmBhaOGKiJJHvhKz16wX9IBWBLKg== +babel-plugin-react-docgen@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.1.0.tgz#1dfa447dac9ca32d625a123df5733a9e47287c26" + integrity sha512-vzpnBlfGv8XOhJM2zbPyyqw2OLEbelgZZsaaRRTpVwNKuYuc+pUg4+dy7i9gCRms0uOQn4osX571HRcCJMJCmA== dependencies: lodash "^4.17.15" react-docgen "^5.0.0" @@ -25816,7 +25816,7 @@ react-devtools-core@^3.4.2, react-devtools-core@^3.6.0: shell-quote "^1.6.1" ws "^3.3.1" -react-docgen-typescript-loader@^3.3.0, react-docgen-typescript-loader@^3.6.0: +react-docgen-typescript-loader@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.6.0.tgz#5515f03f869e66d49e287c5f1e7ec10f2084f7bb" integrity sha512-+uEsM3VYCdlcBGxF3tBqI5XWL1phvrh8dkiIfdpciKlM1BDHW+d82kKJI9hX6zk9H8TL+3Th/j/JAEaKb5FFNw== From 6dda92798819fddcbd77a7a903905d9c9d652732 Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Sat, 18 Jan 2020 17:18:49 -0500 Subject: [PATCH 4/5] Updated docs preset --- .babelrc.js | 1 - addons/docs/src/frameworks/common/preset.ts | 32 +++++++++++++------ .../src/server/framework-preset-react.ts | 1 - .../cra-ts-kitchen-sink/.storybook/main.js | 17 +--------- lib/core/package.json | 1 - package.json | 1 - 6 files changed, 24 insertions(+), 29 deletions(-) diff --git a/.babelrc.js b/.babelrc.js index cb85c9eb2b75..8b38fa8d0dea 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -69,7 +69,6 @@ module.exports = { 'babel-plugin-macros', ['emotion', { sourceMap: true, autoLabel: true }], '@babel/plugin-transform-react-constant-elements', - 'babel-plugin-add-react-displayname', ], env: { test: withTests, diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index 2c2a00b217e1..6e45ad2eec7b 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -4,11 +4,8 @@ import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; function createBabelOptions(babelOptions?: any, configureJSX?: boolean) { - if (!configureJSX) { - return babelOptions; - } - const babelPlugins = (babelOptions && babelOptions.plugins) || []; + return { ...babelOptions, // for frameworks that are not working with react, we need to configure @@ -16,10 +13,10 @@ function createBabelOptions(babelOptions?: any, configureJSX?: boolean) { // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx' plugins: [ ...babelPlugins, - '@babel/plugin-transform-react-jsx', + configureJSX && '@babel/plugin-transform-react-jsx', 'babel-plugin-react-docgen', 'babel-plugin-add-react-displayname', - ], + ].filter(Boolean), }; } @@ -33,6 +30,8 @@ export function webpack(webpackConfig: any = {}, options: any = {}) { sourceLoaderOptions = {}, } = options; + const babelPresets = (babelOptions && babelOptions.presets) || []; + const mdxLoaderOptions = { remarkPlugins: [remarkSlug, remarkExternalLinks], }; @@ -61,9 +60,24 @@ export function webpack(webpackConfig: any = {}, options: any = {}) { use: [ { loader: 'babel-loader', - options: { - presets: [[require.resolve('@babel/preset-env'), { modules: 'commonjs' }]], - }, + options: createBabelOptions( + { + presets: [ + ...babelPresets, + [require.resolve('@babel/preset-env'), { modules: 'commonjs' }], + ], + }, + false + ), + }, + ], + }, + { + test: /\.[tj]sx$/, + use: [ + { + loader: 'babel-loader', + options: createBabelOptions(babelOptions, configureJSX), }, ], }, diff --git a/app/react/src/server/framework-preset-react.ts b/app/react/src/server/framework-preset-react.ts index 23d9151b636b..ab302f7122ce 100644 --- a/app/react/src/server/framework-preset-react.ts +++ b/app/react/src/server/framework-preset-react.ts @@ -11,7 +11,6 @@ export function babelDefault(config: TransformOptions) { plugins: [ ...(config.plugins || []), require.resolve('@babel/plugin-transform-react-constant-elements'), - require.resolve('babel-plugin-add-react-displayname'), ], }; } diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.js b/examples/cra-ts-kitchen-sink/.storybook/main.js index ab152f990f41..78b840d8d818 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/main.js +++ b/examples/cra-ts-kitchen-sink/.storybook/main.js @@ -3,22 +3,7 @@ const path = require('path'); module.exports = { stories: ['../src/**/*.stories.(mdx|[tj]sx?)'], addons: [ - { - name: '@storybook/preset-create-react-app', - options: { - // tsDocgenLoaderOptions: { - // tsconfigPath: path.resolve(__dirname, '../tsconfig.json'), - // shouldExtractLiteralValuesFromEnum: true, - // propFilter: prop => { - // // Currently not working, prop.parent is always null. - // if (prop.parent) { - // return !prop.parent.fileName.includes('node_modules/@types/react/'); - // } - // return true; - // }, - // }, - }, - }, + '@storybook/preset-create-react-app', '@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links', diff --git a/lib/core/package.json b/lib/core/package.json index f037b06a3b83..9fc1ad4dfac5 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -45,7 +45,6 @@ "airbnb-js-shims": "^2.2.1", "ansi-to-html": "^0.6.11", "autoprefixer": "^9.7.2", - "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-emotion": "^10.0.20", "babel-plugin-macros": "^2.7.0", "babel-preset-minify": "^0.5.0 || 0.6.0-alpha.5", diff --git a/package.json b/package.json index b0f43486af59..b6303f134291 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,6 @@ "babel-eslint": "^10.0.1", "babel-jest": "^24.7.1", "babel-loader": "^8.0.5", - "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-dynamic-import-node": "^2.2.0", "babel-plugin-emotion": "^10.0.20", "babel-plugin-macros": "^2.7.0", From 4c0eb995995b3d237d436201c319f005df9d0f7f Mon Sep 17 00:00:00 2001 From: "patrick.lafrance" Date: Sat, 18 Jan 2020 17:36:20 -0500 Subject: [PATCH 5/5] Added a babel function to the docs preset --- addons/docs/src/frameworks/common/preset.ts | 54 ++++++++++++--------- 1 file changed, 30 insertions(+), 24 deletions(-) diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index 6e45ad2eec7b..c1dbca067ea8 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -2,8 +2,13 @@ import createCompiler from '@storybook/addon-docs/mdx-compiler-plugin'; import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; +import { TransformOptions } from '@babel/core'; function createBabelOptions(babelOptions?: any, configureJSX?: boolean) { + if (!configureJSX) { + return babelOptions; + } + const babelPlugins = (babelOptions && babelOptions.plugins) || []; return { @@ -11,12 +16,30 @@ function createBabelOptions(babelOptions?: any, configureJSX?: boolean) { // for frameworks that are not working with react, we need to configure // the jsx to transpile mdx, for now there will be a flag for that // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx' - plugins: [ - ...babelPlugins, - configureJSX && '@babel/plugin-transform-react-jsx', + plugins: [...babelPlugins, '@babel/plugin-transform-react-jsx'], + }; +} + +// eslint-disable-next-line no-shadow +export function babel(config: TransformOptions) { + // Ensure plugins are defined or fallback to an array to avoid empty values. + const babelConfigPlugins = config.plugins || []; + + const extraPlugins = [ + [ 'babel-plugin-react-docgen', + { + DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES', + }, 'babel-plugin-add-react-displayname', - ].filter(Boolean), + ], + ]; + + // If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it + // as a single value, if it is an `Array` it will spread. + return { + ...config, + plugins: [].concat(babelConfigPlugins, extraPlugins), }; } @@ -30,8 +53,6 @@ export function webpack(webpackConfig: any = {}, options: any = {}) { sourceLoaderOptions = {}, } = options; - const babelPresets = (babelOptions && babelOptions.presets) || []; - const mdxLoaderOptions = { remarkPlugins: [remarkSlug, remarkExternalLinks], }; @@ -60,24 +81,9 @@ export function webpack(webpackConfig: any = {}, options: any = {}) { use: [ { loader: 'babel-loader', - options: createBabelOptions( - { - presets: [ - ...babelPresets, - [require.resolve('@babel/preset-env'), { modules: 'commonjs' }], - ], - }, - false - ), - }, - ], - }, - { - test: /\.[tj]sx$/, - use: [ - { - loader: 'babel-loader', - options: createBabelOptions(babelOptions, configureJSX), + options: { + presets: [[require.resolve('@babel/preset-env'), { modules: 'commonjs' }]], + }, }, ], },