feat(cra): move to react-docgen-typescript-plugin

storybookjs · Jun 15, 2020 · d6d815d · d6d815d
1 parent 8aec1d9
commit d6d815d
Show file tree

Hide file tree

Showing 17 changed files with 257 additions and 639 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -10,15 +10,18 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
           node-version: 12.x
-      - uses: actions/cache@v1
+      - id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v2
         with:
-          path: /home/runner/.cache/yarn/v6
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
+          restore-keys: |
+            ${{ runner.os }}-yarn-
       - name: Install dependencies
         run: yarn --frozen-lockfile --prefer-offline
       - name: Lint all files
@@ -28,15 +31,18 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
           node-version: 12.x
-      - uses: actions/cache@v1
+      - id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v2
         with:
-          path: /home/runner/.cache/yarn/v6
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
+          restore-keys: |
+            ${{ runner.os }}-yarn-
       - name: Install dependencies
         run: yarn --frozen-lockfile --prefer-offline
       - name: Run all tests
@@ -50,15 +56,18 @@ jobs:
         os: [macos-latest, ubuntu-latest, windows-latest]
         node: [10, 12]
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node }}
-      - uses: actions/cache@v1
+      - id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v2
         with:
-          path: /home/runner/.cache/yarn/v6
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
+          restore-keys: |
+            ${{ runner.os }}-yarn-
       - name: Install dependencies
         run: yarn --frozen-lockfile --prefer-offline
       - name: Build all projects

diff --git a/.prettierignore b/.prettierignore
@@ -1,4 +1,5 @@
 # Builds
 packages/*/dist
+packages/*/storybook-static
 examples/*/build
 examples/*/storybook-static
diff --git a/examples/cra-ts/package.json b/examples/cra-ts/package.json
@@ -3,17 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@storybook/addon-docs": "5.3.17",
+    "@storybook/addon-docs": "5.3.19",
     "@storybook/preset-create-react-app": "*",
-    "@storybook/react": "5.3.17",
+    "@storybook/react": "5.3.19",
     "@types/jest": "25.1.4",
     "@types/node": "13.9.1",
-    "@types/react": "16.9.23",
-    "@types/react-dom": "16.9.5",
+    "@types/react": "16.9.36",
+    "@types/react-dom": "16.9.8",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "react-scripts": "3.4.0",
-    "typescript": "3.8.3"
+    "react-scripts": "3.4.1",
+    "typescript": "3.9.5"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/examples/cra-ts/src/serviceWorker.ts b/examples/cra-ts/src/serviceWorker.ts
@@ -65,7 +65,7 @@ export function register(config?: Config) {
 function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -101,23 +101,23 @@ function registerValidSW(swUrl: string, config?: Config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
 
 function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
       if (
         response.status === 404 ||
         (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -136,7 +136,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }

diff --git a/examples/cra/package.json b/examples/cra/package.json
@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@storybook/addon-docs": "5.3.17",
+    "@storybook/addon-docs": "5.3.19",
     "@storybook/preset-create-react-app": "*",
-    "@storybook/react": "5.3.17",
+    "@storybook/react": "5.3.19",
     "prop-types": "^15.7.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "react-scripts": "3.4.0"
+    "react-scripts": "3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/examples/cra/src/serviceWorker.js b/examples/cra/src/serviceWorker.js
@@ -57,7 +57,7 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -93,23 +93,23 @@ function registerValidSW(swUrl, config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
 
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
       if (
         response.status === 404 ||
         (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -128,7 +128,7 @@ function checkValidServiceWorker(swUrl, config) {
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }

diff --git a/examples/ts-react/package.json b/examples/ts-react/package.json
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@babel/core": "^7.8.7",
-    "@storybook/addon-docs": "^5.3.14",
+    "@storybook/addon-docs": "^5.3.19",
     "@storybook/preset-typescript": "*",
-    "@storybook/react": "^5.3.17",
+    "@storybook/react": "^5.3.19",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
     "babel-loader": "^8.0.6",

diff --git a/examples/ts-vue/package.json b/examples/ts-vue/package.json
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@babel/core": "^7.8.7",
-    "@storybook/addon-docs": "^5.3.14",
+    "@storybook/addon-docs": "^5.3.19",
     "@storybook/preset-typescript": "*",
-    "@storybook/vue": "^5.3.14",
+    "@storybook/vue": "^5.3.19",
     "babel-loader": "^8.0.6",
     "babel-preset-vue": "^2.0.2",
     "typescript": "^3.8.3",

diff --git a/package.json b/package.json
@@ -40,12 +40,12 @@
     ]
   },
   "resolutions": {
-    "babel-loader": "8.0.6"
+    "babel-loader": "8.1.0"
   },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^2.24.0",
     "@typescript-eslint/parser": "^2.24.0",
-    "babel-eslint": "10.0.3",
+    "babel-eslint": "10.1.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.10.0",
@@ -58,7 +58,7 @@
     "husky": "^4.2.3",
     "jest": "24.9.0",
     "lint-staged": "^10.0.8",
-    "prettier": "^1.19.1",
+    "prettier": "^2.0.5",
     "shelljs": "^0.8.2"
   }
 }
diff --git a/packages/preset-create-react-app/package.json b/packages/preset-create-react-app/package.json
@@ -34,10 +34,13 @@
   },
   "devDependencies": {
     "@types/semver": "^7.2.0",
+    "react-docgen-typescript-plugin": "^0.4.0",
     "typescript": "^3.9.3"
   },
   "peerDependencies": {
+    "@babel/core": "*",
     "@storybook/react": ">=5.2",
+    "react-docgen-typescript-plugin": ">=0.4.0",
     "react-scripts": ">=3.0.0"
   },
   "publishConfig": {

diff --git a/packages/preset-create-react-app/src/helpers/checkPresets.ts b/packages/preset-create-react-app/src/helpers/checkPresets.ts
@@ -1,13 +1,13 @@
 import { join, resolve } from 'path';
 import { logger } from '@storybook/node-logger';
-import { Preset, Options } from '../options';
+import { Preset, StorybookConfig } from '../types';
 
 const incompatiblePresets = [
   '@storybook/preset-scss',
   '@storybook/preset-typescript',
 ];
 
-export const checkPresets = (options: Options): void => {
+export const checkPresets = (options: StorybookConfig): void => {
   let presetsList: Preset[] = options.presetsList || [];
 
   // Look for a legacy presets file if one exists.

diff --git a/packages/preset-create-react-app/src/helpers/mergePlugins.ts b/packages/preset-create-react-app/src/helpers/mergePlugins.ts
@@ -7,7 +7,7 @@ export const mergePlugins = (
   [...basePlugins, ...additionalPlugins].reduce((plugins, plugin) => {
     if (
       plugins.some(
-        includedPlugin =>
+        (includedPlugin) =>
           includedPlugin.constructor.name === plugin.constructor.name,
       )
     ) {

diff --git a/packages/preset-create-react-app/src/helpers/processCraConfig.ts b/packages/preset-create-react-app/src/helpers/processCraConfig.ts
@@ -1,7 +1,7 @@
 import { resolve } from 'path';
 import { Configuration, RuleSetRule } from 'webpack'; // eslint-disable-line import/no-extraneous-dependencies
 import semver from 'semver';
-import { Options } from '../options';
+import { StorybookConfig } from '../types';
 
 const isRegExp = (value: RegExp | unknown): value is RegExp =>
   value instanceof RegExp;
@@ -13,13 +13,13 @@ const isString = (value: string | unknown): value is string =>
 const testMatch = (rule: RuleSetRule, string: string): boolean => {
   if (!rule.test) return false;
   return Array.isArray(rule.test)
-    ? rule.test.some(test => isRegExp(test) && test.test(string))
+    ? rule.test.some((test) => isRegExp(test) && test.test(string))
     : isRegExp(rule.test) && rule.test.test(string);
 };
 
 export const processCraConfig = (
   craWebpackConfig: Configuration,
-  options: Options,
+  options: StorybookConfig,
 ): RuleSetRule[] => {
   const configDir = resolve(options.configDir);
 

diff --git a/packages/preset-create-react-app/src/index.ts b/packages/preset-create-react-app/src/index.ts
@@ -2,6 +2,7 @@ import { join, relative, resolve, dirname } from 'path';
 import { Configuration } from 'webpack'; // eslint-disable-line import/no-extraneous-dependencies
 import { logger } from '@storybook/node-logger';
 import PnpWebpackPlugin from 'pnp-webpack-plugin';
+import ReactDocgenTypescriptPlugin from 'react-docgen-typescript-plugin';
 import { mergePlugins } from './helpers/mergePlugins';
 import {
   getReactScriptsPath,
@@ -10,7 +11,7 @@ import {
 import { processCraConfig } from './helpers/processCraConfig';
 import { checkPresets } from './helpers/checkPresets';
 import { getModulePath } from './helpers/getModulePath';
-import { Options } from './options';
+import { StorybookConfig } from './types';
 
 const CWD = process.cwd();
 // When operating under PnP environments, this value will be set to a number
@@ -53,7 +54,7 @@ export const managerWebpack = (
 // Update the core Webpack config.
 export const webpack = (
   webpackConfig: Configuration = {},
-  options: Options,
+  options: StorybookConfig,
 ): Configuration => {
   let scriptsPath = REACT_SCRIPTS_PATH;
 
@@ -118,21 +119,19 @@ export const webpack = (
     },
   );
 
-  // A temporary fix to align with Storybook 6.
-  const { typescriptOptions } = options;
-  const tsDocgenRule =
-    !typescriptOptions ||
+  // NOTE: These are set by default in Storybook 6.
+  const {
+    typescriptOptions = {
+      reactDocgen: 'react-docgen-typescript',
+      reactDocgenTypescriptOptions: {},
+    },
+  } = options;
+  const tsDocgenPlugin =
     typescriptOptions.reactDocgen === 'react-docgen-typescript'
       ? [
-          {
-            test: /\.tsx?$/,
-            use: [
-              {
-                loader: require.resolve('react-docgen-typescript-loader'),
-                options: typescriptOptions?.reactDocgenTypescriptOptions,
-              },
-            ],
-          },
+          new ReactDocgenTypescriptPlugin(
+            typescriptOptions.reactDocgenTypescriptOptions,
+          ),
         ]
       : [];
 
@@ -141,7 +140,7 @@ export const webpack = (
     ...webpackConfig,
     module: {
       ...webpackConfig.module,
-      rules: [...(filteredRules || []), ...craRules, ...tsDocgenRule],
+      rules: [...(filteredRules || []), ...craRules],
     },
     plugins: mergePlugins(webpackConfig.plugins, craWebpackConfig.plugins),
     resolve: {
@@ -152,7 +151,7 @@ export const webpack = (
         join(REACT_SCRIPTS_PATH, 'node_modules'),
         ...getModulePath(CWD),
       ],
-      plugins: [...plugins, PnpWebpackPlugin],
+      plugins: [...plugins, ...tsDocgenPlugin, PnpWebpackPlugin],
     },
     resolveLoader,
   };