fix: support Babel 8 traversal and TypeScript AST changes

Author: Stanzilla

.changeset/tidy-beans-smile.md

@@ -2,4 +2,4 @@
 'react-docgen': patch
 ---
 
-Allow parsing with Babel 8 when it is supplied via an override, while preserving Babel 7's default parser behavior.
+Support Babel 8 dependency overrides for parsing and traversal, including TypeScript generic props, inherited interfaces, function types, and mapped types. Preserve Babel 7 compatibility.

packages/react-docgen/src/handlers/codeTypeHandler.ts

@@ -55,7 +55,9 @@ function setPropDescriptor(
         },
         typeParams,
       );
-    } else if (!argument.has('typeParameters')) {
+    } else if (!(
+      'typeParameters' in argument.node && argument.node.typeParameters
+    )) {
       documentation.addComposes(id.node.name);
     }
   } else if (path.isObjectTypeProperty()) {

packages/react-docgen/src/handlers/displayNameHandler.ts

@@ -24,7 +24,7 @@ const displayNameHandler: Handler = function (
     if (
       (componentDefinition.isClassDeclaration() ||
         componentDefinition.isFunctionDeclaration()) &&
-      componentDefinition.has('id')
+      componentDefinition.node.id
     ) {
       documentation.set(
         'displayName',

packages/react-docgen/src/importer/makeFsImporter.ts

@@ -196,13 +196,14 @@ export default function makeFsImporter(
           }
         } else if (
           declaration.hasNode() &&
-          declaration.has('id') &&
+          'id' in declaration.node &&
+          declaration.node.id &&
           (declaration.get('id') as NodePath).isIdentifier({ name })
         ) {
           // export function/class/type/interface/enum ...
 
           state.resultPath = declaration;
-        } else if (path.has('specifiers')) {
+        } else if (path.node.specifiers.length > 0) {
           // export { ... } or export x from ... or export * as x from ...
 
           for (const specifierPath of path.get('specifiers')) {
@@ -213,7 +214,7 @@ export default function makeFsImporter(
 
             if (exported.isIdentifier({ name })) {
               // export ... from ''
-              if (path.has('source')) {
+              if (path.node.source) {
                 const local = specifierPath.isExportSpecifier()
                   ? specifierPath.node.local.name
                   : 'default';

packages/react-docgen/src/utils/__tests__/getTypeParameters-test.ts

@@ -1,3 +1,4 @@
+import getTypeArguments from '../getTypeArguments.js';
 import type {
   TSTypeAliasDeclaration,
   TSTypeParameterDeclaration,
@@ -20,9 +21,9 @@ describe('getTypeParameters', () => {
       expect(
         getTypeParameters(
           path.get('typeParameters') as NodePath<TSTypeParameterDeclaration>,
-          path
-            .get('typeAnnotation')
-            .get('typeParameters') as NodePath<TSTypeParameterInstantiation>,
+          getTypeArguments(
+            path.get('typeAnnotation'),
+          ) as NodePath<TSTypeParameterInstantiation>,
           null,
         ),
       ).toMatchSnapshot();
@@ -35,9 +36,9 @@ describe('getTypeParameters', () => {
       expect(
         getTypeParameters(
           path.get('typeParameters') as NodePath<TSTypeParameterDeclaration>,
-          path
-            .get('typeAnnotation')
-            .get('typeParameters') as NodePath<TSTypeParameterInstantiation>,
+          getTypeArguments(
+            path.get('typeAnnotation'),
+          ) as NodePath<TSTypeParameterInstantiation>,
           null,
         ),
       ).toMatchSnapshot();

packages/react-docgen/src/utils/getFlowType.ts

@@ -174,7 +174,11 @@ function handleGenericTypeAnnotation(
   const resolvedPath =
     (typeParams && typeParams[type.name]) || resolveToValue(path.get('id'));
 
-  if (typeParameters.hasNode() && resolvedPath.has('typeParameters')) {
+  if (
+    typeParameters.hasNode() &&
+    'typeParameters' in resolvedPath.node &&
+    resolvedPath.node.typeParameters
+  ) {
     typeParams = getTypeParameters(
       resolvedPath.get('typeParameters') as NodePath<TypeParameterDeclaration>,
       typeParameters,
@@ -195,7 +199,7 @@ function handleGenericTypeAnnotation(
     );
   }
 
-  if (resolvedPath && resolvedPath.has('right')) {
+  if (resolvedPath && 'right' in resolvedPath.node && resolvedPath.node.right) {
     type = getFlowTypeWithResolvedTypes(
       resolvedPath.get('right') as NodePath<FlowType>,
       typeParams,

packages/react-docgen/src/utils/getPropertyName.ts

@@ -42,7 +42,7 @@ export default function getPropertyName(
     }
 
     return null;
-  } else if (propertyPath.has('computed')) {
+  } else if ('computed' in propertyPath.node && propertyPath.node.computed) {
     const key = propertyPath.get('key') as NodePath<Expression>;
 
     // Try to resolve variables and member expressions

packages/react-docgen/src/utils/getTSType.ts

@@ -1,3 +1,4 @@
+import getTypeArguments from './getTypeArguments.js';
 import getPropertyName from './getPropertyName.js';
 import printValue from './printValue.js';
 import getTypeAnnotation from '../utils/getTypeAnnotation.js';
@@ -130,12 +131,15 @@ function handleTSTypeReference(
     (typeParams && typeParams[type.name]) ||
     resolveToValue(path.get('typeName'));
 
-  const typeParameters = path.get('typeParameters');
+  const typeParameters = getTypeArguments(path);
   const resolvedTypeParameters = resolvedPath.get('typeParameters') as NodePath<
     TSTypeParameterDeclaration | null | undefined
   >;
 
-  if (typeParameters.hasNode() && resolvedTypeParameters.hasNode()) {
+  if (
+    typeParameters.isTSTypeParameterInstantiation() &&
+    resolvedTypeParameters.hasNode()
+  ) {
     typeParams = getTypeParameters(
       resolvedTypeParameters,
       typeParameters,
@@ -157,7 +161,7 @@ function handleTSTypeReference(
 
   if (resolvedTypeAnnotation.hasNode()) {
     type = getTSTypeWithResolvedTypes(resolvedTypeAnnotation, typeParams);
-  } else if (typeParameters.hasNode()) {
+  } else if (typeParameters.isTSTypeParameterInstantiation()) {
     const params = typeParameters.get('params');
 
     type = {
@@ -408,7 +412,10 @@ function handleTSTypeQuery(
   if (exprName.isIdentifier()) {
     const resolvedPath = resolveToValue(path.get('exprName'));
 
-    if (resolvedPath.has('typeAnnotation')) {
+    if (
+      'typeAnnotation' in resolvedPath.node &&
+      resolvedPath.node.typeAnnotation
+    ) {
       return getTSTypeWithResolvedTypes(
         resolvedPath.get('typeAnnotation') as NodePath<TypeScript>,
         typeParams,

packages/react-docgen/src/utils/getTypeAnnotation.ts

@@ -8,14 +8,21 @@ import type { FlowType, Node, TSType } from '@babel/types';
 export default function getTypeAnnotation<T extends Node = FlowType | TSType>(
   path: NodePath<Node | null | undefined>,
 ): NodePath<T> | null {
-  if (!path.has('typeAnnotation')) return null;
+  if (
+    !path.node ||
+    !('typeAnnotation' in path.node) ||
+    !path.node.typeAnnotation
+  )
+    return null;
 
   let resultPath = path;
 
   do {
     resultPath = resultPath.get('typeAnnotation') as NodePath;
   } while (
-    resultPath.has('typeAnnotation') &&
+    resultPath.node &&
+    'typeAnnotation' in resultPath.node &&
+    resultPath.node.typeAnnotation &&
     !resultPath.isFlowType() &&
     !resultPath.isTSType()
   );

packages/react-docgen/src/utils/getTypeArguments.ts

@@ -0,0 +1,18 @@
+import type { NodePath } from '@babel/traverse';
+import type {
+  TSTypeParameterInstantiation,
+  TypeParameterInstantiation,
+} from '@babel/types';
+
+/** Reads type arguments from both Babel 7 and Babel 8 ASTs. */
+export default function getTypeArguments(
+  path: NodePath,
+): NodePath<
+  TSTypeParameterInstantiation | TypeParameterInstantiation | null | undefined
+> {
+  return path.get(
+    'typeArguments' in path.node ? 'typeArguments' : 'typeParameters',
+  ) as NodePath<
+    TSTypeParameterInstantiation | TypeParameterInstantiation | null | undefined
+  >;
+}