Improve compat of preset-typescript with Vue

- remove ts docgen loader (rollup storybookjs#103) - don't default to empty include option (rollup storybookjs#106) - add appendTsSuffixTo to tsLoader options if framework is vue
graup · Feb 28, 2020 · 05a0aa5 · 05a0aa5
1 parent 7d2b2ae
commit 05a0aa5
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 23 deletions.
diff --git a/packages/preset-typescript/.storybook/presets.ts b/packages/preset-typescript/.storybook/presets.ts
@@ -4,9 +4,6 @@ module.exports = [
   {
     name: '@storybook/preset-typescript',
     options: {
-      tsDocgenLoaderOptions: {
-        tsconfigPath: resolve(__dirname, '../tsconfig.json'),
-      },
       forkTsCheckerWebpackPluginOptions: {
         colors: false, // disables built-in colors in logger messages
       },

diff --git a/packages/preset-typescript/index.d.ts b/packages/preset-typescript/index.d.ts
@@ -1,10 +1,8 @@
 import { Configuration } from 'webpack';
 import { Options as TSLoaderOptions } from 'ts-loader';
-import TSDocgenLoaderOptions from 'react-docgen-typescript-loader/dist/LoaderOptions';
 
 interface Options {
   tsLoaderOptions?: TSLoaderOptions;
-  tsDocgenLoaderOptions?: TSDocgenLoaderOptions;
   transpileManager?: boolean;
   include?: string[];
 }

diff --git a/packages/preset-typescript/index.js b/packages/preset-typescript/index.js
@@ -4,9 +4,8 @@ function webpack(webpackConfig = {}, options = {}) {
   const { module = {}, resolve = {}, plugins = [] } = webpackConfig;
   const {
     tsLoaderOptions = { transpileOnly: true },
-    tsDocgenLoaderOptions = {},
     forkTsCheckerWebpackPluginOptions,
-    include = [],
+    include,
   } = options;
 
   if (tsLoaderOptions.transpileOnly) {
@@ -15,26 +14,31 @@ function webpack(webpackConfig = {}, options = {}) {
     );
   }
 
+  const tsLoader = {
+    test: /\.tsx?$/,
+    use: [
+      {
+        loader: require.resolve('ts-loader'),
+        options: tsLoaderOptions,
+      },
+    ],
+  };
+
+  if (include) {
+    tsLoader.include = include;
+  }
+
+  if (options.framework === 'vue') {
+    tsLoaderOptions.appendTsSuffixTo = [...(tsLoaderOptions.appendTsSuffixTo || []), /\.vue$/];
+  }
+
   return {
     ...webpackConfig,
     module: {
       ...module,
       rules: [
         ...(module.rules || []),
-        {
-          test: /\.tsx?$/,
-          use: [
-            {
-              loader: require.resolve('ts-loader'),
-              options: tsLoaderOptions,
-            },
-            {
-              loader: require.resolve('react-docgen-typescript-loader'),
-              options: tsDocgenLoaderOptions,
-            },
-          ],
-          include,
-        },
+        tsLoader,
       ],
     },
     resolve: {

diff --git a/packages/preset-typescript/package.json b/packages/preset-typescript/package.json
@@ -27,7 +27,6 @@
     "babel-loader": "^8.0.2",
     "fork-ts-checker-webpack-plugin": "^3.1.0",
     "react": "^16.11.0",
-    "react-docgen-typescript-loader": "^3.3.0",
     "react-dom": "^16.11.0",
     "ts-loader": "^6.2.1",
     "ts-node": "^7.0.0",
@@ -36,7 +35,6 @@
   "peerDependencies": {
     "@types/webpack": "*",
     "fork-ts-checker-webpack-plugin": "*",
-    "react-docgen-typescript-loader": "*",
     "ts-loader": "*",
     "typescript": "^3.4"
   }