Core: Zero-config TypeScript loading

.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:

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [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.

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,

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",

app/react/src/server/framework-preset-react-docgen.test.ts

@@ -1,76 +1,36 @@
-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'],
       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'],
+    const config = preset.babel(babelConfig, {
+      typescriptOptions: { check: false, reactDocgen: 'react-docgen' },
     });
-  });
-
-  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|tsx?|jsx?)$/,
+          plugins: [
+            [
+              babelPluginReactDocgenPath,
+              {
+                DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+              },
+            ],
+          ],
+        },
       ],
-      presets: ['env', 'foo-preset'],
     });
   });
 });

app/react/src/server/framework-preset-react-docgen.ts

@@ -1,22 +1,50 @@
-import { TransformOptions } from '@babel/core';
+import type { TransformOptions } from '@babel/core';
+import type { Configuration } from 'webpack';
+import type { StorybookOptions } from '@storybook/core/types';
 
-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, { typescriptOptions }: StorybookOptions) {
+  const { reactDocgen } = typescriptOptions;
+  if (!reactDocgen) {
+    return config;
+  }
+  return {
+    ...config,
+    overrides: [
       {
-        DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
+        test: reactDocgen === '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, { typescriptOptions }: StorybookOptions) {
+  const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions;
+  if (reactDocgen !== 'react-docgen-typescript') return config;
   return {
     ...config,
-    plugins: [].concat(babelConfigPlugins, extraPlugins),
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.tsx?$/,
+          // include: path.resolve(__dirname, "../src"),
+          use: [
+            {
+              loader: require.resolve('react-docgen-typescript-loader'),
+              options: reactDocgenTypescriptOptions,
+            },
+          ],
+        },
+      ],
+    },
   };
 }

app/vue/package.json

@@ -41,6 +41,7 @@
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",
     "ts-dedent": "^1.1.1",
+    "ts-loader": "^6.2.2",
     "webpack": "^4.43.0"
   },
   "devDependencies": {
@@ -57,6 +58,7 @@
     "css-loader": "*",
     "react": "*",
     "react-dom": "*",
+    "ts-loader": "^6.2.2",
     "vue": "^2.6.8",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.8"

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: {

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;