React: Update react-docgen to 6.0.1

code/frameworks/react-vite/package.json

@@ -52,9 +52,8 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
     "@vitejs/plugin-react": "^3.0.1",
-    "ast-types": "^0.14.2",
     "magic-string": "^0.30.0",
-    "react-docgen": "6.0.0-alpha.3"
+    "react-docgen": "^6.0.2"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",

code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts

@@ -9,40 +9,46 @@
  * directly from displayNameHandler, using the same approach as babel-plugin-react-docgen.
  */
 
-import { namedTypes as t } from 'ast-types';
-import type { NodePath } from 'ast-types/lib/node-path';
-import { getNameOrValue, isReactForwardRefCall } from 'react-docgen/dist/utils';
-import type { Importer } from 'react-docgen/dist/parse';
-import type Documentation from 'react-docgen/dist/Documentation';
+import type { Handler, NodePath, babelTypes as t } from 'react-docgen';
+import { utils } from 'react-docgen';
 
-export default function actualNameHandler(
-  documentation: Documentation,
-  path: NodePath,
-  importer: Importer
-): void {
-  if (t.ClassDeclaration.check(path.node) || t.FunctionDeclaration.check(path.node)) {
-    documentation.set('actualName', getNameOrValue(path.get('id')));
+const { getNameOrValue, isReactForwardRefCall } = utils;
+
+const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
+  if (
+    (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
+    componentDefinition.has('id')
+  ) {
+    documentation.set(
+      'actualName',
+      getNameOrValue(componentDefinition.get('id') as NodePath<t.Identifier>)
+    );
   } else if (
-    t.ArrowFunctionExpression.check(path.node) ||
-    t.FunctionExpression.check(path.node) ||
-    isReactForwardRefCall(path, importer)
+    componentDefinition.isArrowFunctionExpression() ||
+    componentDefinition.isFunctionExpression() ||
+    isReactForwardRefCall(componentDefinition)
   ) {
-    let currentPath = path;
-    while (currentPath.parent) {
-      if (t.VariableDeclarator.check(currentPath.parent.node)) {
-        documentation.set('actualName', getNameOrValue(currentPath.parent.get('id')));
+    let currentPath: NodePath = componentDefinition;
+
+    while (currentPath.parentPath) {
+      if (currentPath.parentPath.isVariableDeclarator()) {
+        documentation.set('actualName', getNameOrValue(currentPath.parentPath.get('id')));
         return;
       }
-      if (t.AssignmentExpression.check(currentPath.parent.node)) {
-        const leftPath = currentPath.parent.get('left');
-        if (t.Identifier.check(leftPath.node) || t.Literal.check(leftPath.node)) {
+      if (currentPath.parentPath.isAssignmentExpression()) {
+        const leftPath = currentPath.parentPath.get('left');
+
+        if (leftPath.isIdentifier() || leftPath.isLiteral()) {
           documentation.set('actualName', getNameOrValue(leftPath));
           return;
         }
       }
-      currentPath = currentPath.parent;
+
+      currentPath = currentPath.parentPath;
     }
     // Could not find an actual name
     documentation.set('actualName', '');
   }
-}
+};
+
+export default actualNameHandler;

code/frameworks/react-vite/src/plugins/react-docgen.ts

@@ -1,22 +1,23 @@
 import path from 'path';
 import { createFilter } from '@rollup/pluginutils';
+import type { Documentation } from 'react-docgen';
 import {
+  ERROR_CODES,
   parse,
-  handlers as docgenHandlers,
-  resolver as docgenResolver,
-  importers as docgenImporters,
+  builtinHandlers as docgenHandlers,
+  builtinResolvers as docgenResolver,
+  builtinImporters as docgenImporters,
 } from 'react-docgen';
-import type { DocumentationObject } from 'react-docgen/dist/Documentation';
 import MagicString from 'magic-string';
 import type { PluginOption } from 'vite';
 import actualNameHandler from './docgen-handlers/actualNameHandler';
 
-type DocObj = DocumentationObject & { actualName: string };
+type DocObj = Documentation & { actualName: string };
 
 // TODO: None of these are able to be overridden, so `default` is aspirational here.
 const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
-const defaultResolver = docgenResolver.findAllExportedComponentDefinitions;
-const defaultImporter = docgenImporters.makeFsImporter();
+const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
+const defaultImporter = docgenImporters.fsImporter;
 const handlers = [...defaultHandlers, actualNameHandler];
 
 type Options = {
@@ -39,8 +40,9 @@ export function reactDocgen({
       if (!filter(relPath)) return;
 
       try {
-        // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.
-        const docgenResults = parse(src, defaultResolver, handlers, {
+        const docgenResults = parse(src, {
+          resolver: defaultResolver,
+          handlers,
           importer: defaultImporter,
           filename: id,
         }) as DocObj[];
@@ -59,10 +61,12 @@ export function reactDocgen({
           code: s.toString(),
           map: s.generateMap(),
         };
-      } catch (e) {
-        // Usually this is just an error from react-docgen that it couldn't find a component
-        // Only uncomment for troubleshooting
-        // console.error(e);
+      } catch (e: any) {
+        // Ignore the error when react-docgen cannot find a react component
+        if (e.code === ERROR_CODES.MISSING_DEFINITION) {
+          return;
+        }
+        throw e;
       }
     },
   };

code/frameworks/react-vite/tsconfig.json

@@ -4,7 +4,7 @@
     "rootDir": "./src",
     "types": ["node"],
     "resolveJsonModule": true,
-    "strict": true
+    "skipLibCheck": true
   },
   "include": ["src/**/*"]
 }