Improve react docgen plugin usage

storybookjs · Jul 25, 2022 · 26e6647 · 26e6647
1 parent e6c7f90
commit 26e6647
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/packages/builder-vite/plugins/react-docgen.ts b/packages/builder-vite/plugins/react-docgen.ts
@@ -24,7 +24,10 @@ type Options = {
   exclude?: string | RegExp | (string | RegExp)[];
 };
 
-export function reactDocgen({ include = /\.(mjs|tsx?|jsx?)$/, exclude = [/node_modules\/.*/] }: Options = {}): Plugin {
+export function reactDocgen({
+  include = /\.(mjs|tsx?|jsx?)$/,
+  exclude = [/node_modules\/.*/, '**/**.stories.tsx'],
+}: Options = {}): Plugin {
   const cwd = process.cwd();
   const filter = createFilter(include, exclude);
 

diff --git a/packages/builder-vite/vite-config.ts b/packages/builder-vite/vite-config.ts
@@ -166,23 +166,29 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig
   }
 
   if (framework === 'react') {
-    const { reactDocgen, reactDocgenTypescriptOptions } = await presets.apply('typescript', {} as TypescriptConfig);
-
-    let typescriptPresent;
-
-    try {
-      const pkgJson = readPackageJson();
-      typescriptPresent = pkgJson && (pkgJson?.devDependencies?.typescript || pkgJson?.dependencies?.typescript);
-    } catch (e) {
-      typescriptPresent = false;
+    const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply(
+      'typescript',
+      {} as TypescriptConfig
+    );
+
+    if (reactDocgenOption === 'react-docgen-typescript') {
+      plugins.push(
+        require('@joshwooding/vite-plugin-react-docgen-typescript')({
+          ...reactDocgenTypescriptOptions,
+          // We *need* this set so that RDT returns default values in the same format as react-docgen
+          savePropValueAsString: true,
+        })
+      );
     }
 
-    if (reactDocgen === 'react-docgen-typescript' && typescriptPresent) {
-      plugins.push(require('@joshwooding/vite-plugin-react-docgen-typescript')(reactDocgenTypescriptOptions));
-    } else if (reactDocgen) {
+    // Add react-docgen so long as the option is not false
+    if (typeof reactDocgenOption === 'string') {
       const { reactDocgen } = await import('./plugins/react-docgen');
       // Needs to run before the react plugin, so add to the front
-      plugins.unshift(reactDocgen());
+      plugins.unshift(
+        // If react-docgen is specified, use it for everything, otherwise only use it for non-typescript files
+        reactDocgen({ include: reactDocgenOption === 'react-docgen' ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/ })
+      );
     }
   }