@react-native/codegen 0.73.0 → 0.74.0-nightly-20231003-5dedf277c

package/lib/parsers/typescript/components/events.js.flow

@@ -16,9 +16,30 @@ import type {
   EventTypeAnnotation,
 } from '../../../CodegenSchema.js';
 import type {TypeDeclarationMap} from '../../utils';
+import type {Parser} from '../../parser';
 const {flattenProperties} = require('./componentsUtils');
 const {parseTopLevelType} = require('../parseTopLevelType');
-
+const {
+  throwIfEventHasNoName,
+  throwIfBubblingTypeIsNull,
+  throwIfArgumentPropsAreNull,
+} = require('../../error-utils');
+const {
+  getEventArgument,
+  buildPropertiesForEvent,
+  handleEventHandler,
+  emitBuildEventSchema,
+} = require('../../parsers-commons');
+const {
+  emitBoolProp,
+  emitDoubleProp,
+  emitFloatProp,
+  emitMixedProp,
+  emitStringProp,
+  emitInt32Prop,
+  emitObjectProp,
+  emitUnionProp,
+} = require('../../parsers-primitives');
 function getPropertyType(
   /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
    * LTI update could not be added via codemod */
@@ -27,82 +48,128 @@ function getPropertyType(
   /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
    * LTI update could not be added via codemod */
   annotation,
+  parser: Parser,
 ): NamedShape<EventTypeAnnotation> {
   const topLevelType = parseTopLevelType(annotation);
   const typeAnnotation = topLevelType.type;
   const optional = optionalProperty || topLevelType.optional;
   const type =
     typeAnnotation.type === 'TSTypeReference'
-      ? typeAnnotation.typeName.name
+      ? parser.getTypeAnnotationName(typeAnnotation)
       : typeAnnotation.type;
 
   switch (type) {
     case 'TSBooleanKeyword':
+      return emitBoolProp(name, optional);
+    case 'TSStringKeyword':
+      return emitStringProp(name, optional);
+    case 'Int32':
+      return emitInt32Prop(name, optional);
+    case 'Double':
+      return emitDoubleProp(name, optional);
+    case 'Float':
+      return emitFloatProp(name, optional);
+    case 'TSTypeLiteral':
+      return emitObjectProp(
+        name,
+        optional,
+        parser,
+        typeAnnotation,
+        extractArrayElementType,
+      );
+    case 'TSUnionType':
+      return emitUnionProp(name, optional, parser, typeAnnotation);
+    case 'UnsafeMixed':
+      return emitMixedProp(name, optional);
+    case 'TSArrayType':
       return {
         name,
         optional,
-        typeAnnotation: {
-          type: 'BooleanTypeAnnotation',
-        },
+        typeAnnotation: extractArrayElementType(typeAnnotation, name, parser),
       };
+    default:
+      throw new Error(`Unable to determine event type for "${name}": ${type}`);
+  }
+}
+
+function extractArrayElementType(
+  typeAnnotation: $FlowFixMe,
+  name: string,
+  parser: Parser,
+): EventTypeAnnotation {
+  const type = extractTypeFromTypeAnnotation(typeAnnotation, parser);
+
+  switch (type) {
+    case 'TSParenthesizedType':
+      return extractArrayElementType(
+        typeAnnotation.typeAnnotation,
+        name,
+        parser,
+      );
+    case 'TSBooleanKeyword':
+      return {type: 'BooleanTypeAnnotation'};
     case 'TSStringKeyword':
+      return {type: 'StringTypeAnnotation'};
+    case 'Float':
       return {
-        name,
-        optional,
-        typeAnnotation: {
-          type: 'StringTypeAnnotation',
-        },
+        type: 'FloatTypeAnnotation',
       };
     case 'Int32':
       return {
-        name,
-        optional,
-        typeAnnotation: {
-          type: 'Int32TypeAnnotation',
-        },
+        type: 'Int32TypeAnnotation',
       };
+    case 'TSNumberKeyword':
     case 'Double':
       return {
-        name,
-        optional,
-        typeAnnotation: {
-          type: 'DoubleTypeAnnotation',
-        },
+        type: 'DoubleTypeAnnotation',
       };
-    case 'Float':
+    case 'TSUnionType':
       return {
-        name,
-        optional,
-        typeAnnotation: {
-          type: 'FloatTypeAnnotation',
-        },
+        type: 'StringEnumTypeAnnotation',
+        options: typeAnnotation.types.map(option =>
+          parser.getLiteralValue(option),
+        ),
       };
     case 'TSTypeLiteral':
       return {
-        name,
-        optional,
-        typeAnnotation: {
-          type: 'ObjectTypeAnnotation',
-          properties: typeAnnotation.members.map(buildPropertiesForEvent),
-        },
+        type: 'ObjectTypeAnnotation',
+        properties: parser
+          .getObjectProperties(typeAnnotation)
+          .map(member =>
+            buildPropertiesForEvent(member, parser, getPropertyType),
+          ),
       };
-
-    case 'TSUnionType':
+    case 'TSArrayType':
       return {
-        name,
-        optional,
-        typeAnnotation: {
-          type: 'StringEnumTypeAnnotation',
-          options: typeAnnotation.types.map(option => option.literal.value),
-        },
+        type: 'ArrayTypeAnnotation',
+        elementType: extractArrayElementType(
+          typeAnnotation.elementType,
+          name,
+          parser,
+        ),
       };
     default:
-      (type: empty);
-      throw new Error(`Unable to determine event type for "${name}": ${type}`);
+      throw new Error(
+        `Unrecognized ${type} for Array ${name} in events.\n${JSON.stringify(
+          typeAnnotation,
+          null,
+          2,
+        )}`,
+      );
   }
 }
 
+function extractTypeFromTypeAnnotation(
+  typeAnnotation: $FlowFixMe,
+  parser: Parser,
+): string {
+  return typeAnnotation.type === 'TSTypeReference'
+    ? parser.getTypeAnnotationName(typeAnnotation)
+    : typeAnnotation.type;
+}
+
 function findEventArgumentsAndType(
+  parser: Parser,
   typeAnnotation: $FlowFixMe,
   types: TypeDeclarationMap,
   bubblingType: void | 'direct' | 'bubble',
@@ -114,7 +181,7 @@ function findEventArgumentsAndType(
 } {
   if (typeAnnotation.type === 'TSInterfaceDeclaration') {
     return {
-      argumentProps: flattenProperties([typeAnnotation], types),
+      argumentProps: flattenProperties([typeAnnotation], types, parser),
       paperTopLevelNameDeprecated: paperName,
       bubblingType,
     };
@@ -122,52 +189,37 @@ function findEventArgumentsAndType(
 
   if (typeAnnotation.type === 'TSTypeLiteral') {
     return {
-      argumentProps: typeAnnotation.members,
+      argumentProps: parser.getObjectProperties(typeAnnotation),
       paperTopLevelNameDeprecated: paperName,
       bubblingType,
     };
   }
 
-  if (!typeAnnotation.typeName) {
-    throw new Error("typeAnnotation of event doesn't have a name");
-  }
-  const name = typeAnnotation.typeName.name;
+  throwIfEventHasNoName(typeAnnotation, parser);
+  const name = parser.getTypeAnnotationName(typeAnnotation);
   if (name === 'Readonly') {
     return findEventArgumentsAndType(
+      parser,
       typeAnnotation.typeParameters.params[0],
       types,
       bubblingType,
       paperName,
     );
   } else if (name === 'BubblingEventHandler' || name === 'DirectEventHandler') {
-    const eventType = name === 'BubblingEventHandler' ? 'bubble' : 'direct';
-    const paperTopLevelNameDeprecated =
-      typeAnnotation.typeParameters.params.length > 1
-        ? typeAnnotation.typeParameters.params[1].literal.value
-        : null;
-
-    switch (typeAnnotation.typeParameters.params[0].type) {
-      case 'TSNullKeyword':
-      case 'TSUndefinedKeyword':
-        return {
-          argumentProps: [],
-          bubblingType: eventType,
-          paperTopLevelNameDeprecated,
-        };
-      default:
-        return findEventArgumentsAndType(
-          typeAnnotation.typeParameters.params[0],
-          types,
-          eventType,
-          paperTopLevelNameDeprecated,
-        );
-    }
+    return handleEventHandler(
+      name,
+      typeAnnotation,
+      parser,
+      types,
+      findEventArgumentsAndType,
+    );
   } else if (types[name]) {
     let elementType = types[name];
     if (elementType.type === 'TSTypeAliasDeclaration') {
       elementType = elementType.typeAnnotation;
     }
     return findEventArgumentsAndType(
+      parser,
       elementType,
       types,
       bubblingType,
@@ -182,32 +234,14 @@ function findEventArgumentsAndType(
   }
 }
 
-/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
- * LTI update could not be added via codemod */
-function buildPropertiesForEvent(property): NamedShape<EventTypeAnnotation> {
-  const name = property.key.name;
-  const optional = property.optional || false;
-  let typeAnnotation = property.typeAnnotation.typeAnnotation;
-
-  return getPropertyType(name, optional, typeAnnotation);
-}
-
-/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
- * LTI update could not be added via codemod */
-function getEventArgument(argumentProps, name: $FlowFixMe) {
-  return {
-    type: 'ObjectTypeAnnotation',
-    properties: argumentProps.map(buildPropertiesForEvent),
-  };
-}
-
 // $FlowFixMe[unclear-type] TODO(T108222691): Use flow-types for @babel/parser
 type EventTypeAST = Object;
 
 function buildEventSchema(
   types: TypeDeclarationMap,
   property: EventTypeAST,
-): EventTypeShape {
+  parser: Parser,
+): ?EventTypeShape {
   // unpack WithDefault, (T) or T|U
   const topLevelType = parseTopLevelType(
     property.typeAnnotation.typeAnnotation,
@@ -218,45 +252,40 @@ function buildEventSchema(
   const typeAnnotation = topLevelType.type;
   const optional = property.optional || topLevelType.optional;
   const {argumentProps, bubblingType, paperTopLevelNameDeprecated} =
-    findEventArgumentsAndType(typeAnnotation, types);
+    findEventArgumentsAndType(parser, typeAnnotation, types);
 
-  if (!argumentProps) {
-    throw new Error(`Unable to determine event arguments for "${name}"`);
-  } else if (!bubblingType) {
-    throw new Error(`Unable to determine event bubbling type for "${name}"`);
-  } else {
-    if (paperTopLevelNameDeprecated != null) {
-      return {
-        name,
-        optional,
-        bubblingType,
-        paperTopLevelNameDeprecated,
-        typeAnnotation: {
-          type: 'EventTypeAnnotation',
-          argument: getEventArgument(argumentProps, name),
-        },
-      };
-    }
+  const nonNullableArgumentProps = throwIfArgumentPropsAreNull(
+    argumentProps,
+    name,
+  );
+  const nonNullableBubblingType = throwIfBubblingTypeIsNull(bubblingType, name);
 
-    return {
-      name,
-      optional,
-      bubblingType,
-      typeAnnotation: {
-        type: 'EventTypeAnnotation',
-        argument: getEventArgument(argumentProps, name),
-      },
-    };
-  }
+  const argument = getEventArgument(
+    nonNullableArgumentProps,
+    parser,
+    getPropertyType,
+  );
+
+  return emitBuildEventSchema(
+    paperTopLevelNameDeprecated,
+    name,
+    optional,
+    nonNullableBubblingType,
+    argument,
+  );
 }
 
 function getEvents(
   eventTypeAST: $ReadOnlyArray<EventTypeAST>,
   types: TypeDeclarationMap,
+  parser: Parser,
 ): $ReadOnlyArray<EventTypeShape> {
-  return eventTypeAST.map(property => buildEventSchema(types, property));
+  return eventTypeAST
+    .map(property => buildEventSchema(types, property, parser))
+    .filter(Boolean);
 }
 
 module.exports = {
   getEvents,
+  extractArrayElementType,
 };

package/lib/parsers/typescript/components/extends.js

@@ -12,28 +12,6 @@
 
 const _require = require('../parseTopLevelType'),
   parseTopLevelType = _require.parseTopLevelType;
-const _require2 = require('./componentsUtils.js'),
-  flattenProperties = _require2.flattenProperties;
-function extendsForProp(prop, types) {
-  if (!prop.expression) {
-    console.log('null', prop);
-  }
-  const name = prop.expression.name;
-  if (types[name] != null) {
-    // This type is locally defined in the file
-    return null;
-  }
-  switch (name) {
-    case 'ViewProps':
-      return {
-        type: 'ReactNativeBuiltInType',
-        knownTypeName: 'ReactNativeCoreViewProps',
-      };
-    default: {
-      throw new Error(`Unable to handle prop spread: ${name}`);
-    }
-  }
-}
 function isEvent(typeAnnotation) {
   if (typeAnnotation.type !== 'TSTypeReference') {
     return false;
@@ -41,35 +19,12 @@ function isEvent(typeAnnotation) {
   const eventNames = new Set(['BubblingEventHandler', 'DirectEventHandler']);
   return eventNames.has(typeAnnotation.typeName.name);
 }
-function isProp(name, typeAnnotation) {
-  if (typeAnnotation.type !== 'TSTypeReference') {
-    return true;
-  }
-  const isStyle =
-    name === 'style' &&
-    typeAnnotation.type === 'GenericTypeAnnotation' &&
-    typeAnnotation.typeName.name === 'ViewStyleProp';
-  return !isStyle;
-}
 
 // $FlowFixMe[unclear-type] TODO(T108222691): Use flow-types for @babel/parser
 
-function categorizeProps(typeDefinition, types, extendsProps, props, events) {
-  const remaining = [];
+function categorizeProps(typeDefinition, types, events) {
+  // find events
   for (const prop of typeDefinition) {
-    // find extends
-    if (prop.type === 'TSExpressionWithTypeArguments') {
-      const extend = extendsForProp(prop, types);
-      if (extend) {
-        extendsProps.push(extend);
-        continue;
-      }
-    }
-    remaining.push(prop);
-  }
-
-  // find events and props
-  for (const prop of flattenProperties(remaining, types)) {
     if (prop.type === 'TSPropertySignature') {
       const topLevelType = parseTopLevelType(
         prop.typeAnnotation.typeAnnotation,
@@ -77,8 +32,6 @@ function categorizeProps(typeDefinition, types, extendsProps, props, events) {
       );
       if (isEvent(topLevelType.type)) {
         events.push(prop);
-      } else if (isProp(prop.key.name, prop)) {
-        props.push(prop);
       }
     }
   }

package/lib/parsers/typescript/components/extends.js.flow

@@ -10,33 +10,8 @@
 
 'use strict';
 
-import type {ExtendsPropsShape} from '../../../CodegenSchema.js';
 import type {TypeDeclarationMap} from '../../utils';
 const {parseTopLevelType} = require('../parseTopLevelType');
-const {flattenProperties} = require('./componentsUtils.js');
-
-function extendsForProp(prop: PropsAST, types: TypeDeclarationMap) {
-  if (!prop.expression) {
-    console.log('null', prop);
-  }
-  const name = prop.expression.name;
-
-  if (types[name] != null) {
-    // This type is locally defined in the file
-    return null;
-  }
-
-  switch (name) {
-    case 'ViewProps':
-      return {
-        type: 'ReactNativeBuiltInType',
-        knownTypeName: 'ReactNativeCoreViewProps',
-      };
-    default: {
-      throw new Error(`Unable to handle prop spread: ${name}`);
-    }
-  }
-}
 
 function isEvent(typeAnnotation: $FlowFixMe): boolean {
   if (typeAnnotation.type !== 'TSTypeReference') {
@@ -46,43 +21,16 @@ function isEvent(typeAnnotation: $FlowFixMe): boolean {
   return eventNames.has(typeAnnotation.typeName.name);
 }
 
-function isProp(name: string, typeAnnotation: $FlowFixMe): boolean {
-  if (typeAnnotation.type !== 'TSTypeReference') {
-    return true;
-  }
-  const isStyle =
-    name === 'style' &&
-    typeAnnotation.type === 'GenericTypeAnnotation' &&
-    typeAnnotation.typeName.name === 'ViewStyleProp';
-  return !isStyle;
-}
-
 // $FlowFixMe[unclear-type] TODO(T108222691): Use flow-types for @babel/parser
 type PropsAST = Object;
 
 function categorizeProps(
   typeDefinition: $ReadOnlyArray<PropsAST>,
   types: TypeDeclarationMap,
-  extendsProps: Array<ExtendsPropsShape>,
-  props: Array<PropsAST>,
   events: Array<PropsAST>,
 ): void {
-  const remaining: Array<PropsAST> = [];
+  // find events
   for (const prop of typeDefinition) {
-    // find extends
-    if (prop.type === 'TSExpressionWithTypeArguments') {
-      const extend = extendsForProp(prop, types);
-      if (extend) {
-        extendsProps.push(extend);
-        continue;
-      }
-    }
-
-    remaining.push(prop);
-  }
-
-  // find events and props
-  for (const prop of flattenProperties(remaining, types)) {
     if (prop.type === 'TSPropertySignature') {
       const topLevelType = parseTopLevelType(
         prop.typeAnnotation.typeAnnotation,
@@ -91,8 +39,6 @@ function categorizeProps(
 
       if (isEvent(topLevelType.type)) {
         events.push(prop);
-      } else if (isProp(prop.key.name, prop)) {
-        props.push(prop);
       }
     }
   }

package/lib/parsers/typescript/components/index.js

@@ -16,114 +16,29 @@ const _require2 = require('./events'),
   getEvents = _require2.getEvents;
 const _require3 = require('./extends'),
   categorizeProps = _require3.categorizeProps;
-const _require4 = require('./props'),
-  getProps = _require4.getProps;
-const _require5 = require('./componentsUtils.js'),
-  getProperties = _require5.getProperties;
-const _require6 = require('../../error-utils'),
-  throwIfMoreThanOneCodegenNativecommands =
-    _require6.throwIfMoreThanOneCodegenNativecommands;
-const _require7 = require('../../parsers-commons'),
-  createComponentConfig = _require7.createComponentConfig,
-  findNativeComponentType = _require7.findNativeComponentType,
-  propertyNames = _require7.propertyNames,
-  getCommandOptions = _require7.getCommandOptions,
-  getOptions = _require7.getOptions,
-  getCommandTypeNameAndOptionsExpression =
-    _require7.getCommandTypeNameAndOptionsExpression;
-
-// $FlowFixMe[signature-verification-failure] TODO(T108222691): Use flow-types for @babel/parser
-function findComponentConfig(ast, parser) {
-  const foundConfigs = [];
-  const defaultExports = ast.body.filter(
-    node => node.type === 'ExportDefaultDeclaration',
-  );
-  defaultExports.forEach(statement =>
-    findNativeComponentType(statement, foundConfigs, parser),
-  );
-  if (foundConfigs.length === 0) {
-    throw new Error('Could not find component config for native component');
-  }
-  if (foundConfigs.length > 1) {
-    throw new Error('Only one component is supported per file');
-  }
-  const foundConfig = foundConfigs[0];
-  const namedExports = ast.body.filter(
-    node => node.type === 'ExportNamedDeclaration',
-  );
-  const commandsTypeNames = namedExports
-    .map(statement => getCommandTypeNameAndOptionsExpression(statement, parser))
-    .filter(Boolean);
-  throwIfMoreThanOneCodegenNativecommands(commandsTypeNames);
-  return createComponentConfig(foundConfig, commandsTypeNames);
-}
-function getCommandProperties(ast, parser) {
-  const _findComponentConfig = findComponentConfig(ast, parser),
-    commandTypeName = _findComponentConfig.commandTypeName,
-    commandOptionsExpression = _findComponentConfig.commandOptionsExpression;
-  if (commandTypeName == null) {
-    return [];
-  }
-  const types = parser.getTypes(ast);
-  const typeAlias = types[commandTypeName];
-  if (typeAlias.type !== 'TSInterfaceDeclaration') {
-    throw new Error(
-      `The type argument for codegenNativeCommands must be an interface, received ${typeAlias.type}`,
-    );
-  }
-  const properties = parser.bodyProperties(typeAlias);
-  if (!properties) {
-    throw new Error(
-      `Failed to find type definition for "${commandTypeName}", please check that you have a valid codegen typescript file`,
-    );
-  }
-  const typeScriptPropertyNames = propertyNames(properties);
-  const commandOptions = getCommandOptions(commandOptionsExpression);
-  if (commandOptions == null || commandOptions.supportedCommands == null) {
-    throw new Error(
-      'codegenNativeCommands must be given an options object with supportedCommands array',
-    );
-  }
-  if (
-    commandOptions.supportedCommands.length !==
-      typeScriptPropertyNames.length ||
-    !commandOptions.supportedCommands.every(supportedCommand =>
-      typeScriptPropertyNames.includes(supportedCommand),
-    )
-  ) {
-    throw new Error(
-      `codegenNativeCommands expected the same supportedCommands specified in the ${commandTypeName} interface: ${typeScriptPropertyNames.join(
-        ', ',
-      )}`,
-    );
-  }
-  return properties;
-}
+const _require4 = require('../../parsers-commons'),
+  getOptions = _require4.getOptions,
+  findComponentConfig = _require4.findComponentConfig,
+  getCommandProperties = _require4.getCommandProperties;
 
 // $FlowFixMe[unclear-type] TODO(T108222691): Use flow-types for @babel/parser
 
 // $FlowFixMe[signature-verification-failure] TODO(T108222691): Use flow-types for @babel/parser
 function buildComponentSchema(ast, parser) {
-  const _findComponentConfig2 = findComponentConfig(ast, parser),
-    componentName = _findComponentConfig2.componentName,
-    propsTypeName = _findComponentConfig2.propsTypeName,
-    optionsExpression = _findComponentConfig2.optionsExpression;
+  const _findComponentConfig = findComponentConfig(ast, parser),
+    componentName = _findComponentConfig.componentName,
+    propsTypeName = _findComponentConfig.propsTypeName,
+    optionsExpression = _findComponentConfig.optionsExpression;
   const types = parser.getTypes(ast);
-  const propProperties = getProperties(propsTypeName, types);
+  const propProperties = parser.getProperties(propsTypeName, types);
   const commandProperties = getCommandProperties(ast, parser);
   const options = getOptions(optionsExpression);
-  const extendsProps = [];
-  const componentPropAsts = [];
   const componentEventAsts = [];
-  categorizeProps(
-    propProperties,
-    types,
-    extendsProps,
-    componentPropAsts,
-    componentEventAsts,
-  );
-  const props = getProps(componentPropAsts, types);
-  const events = getEvents(componentEventAsts, types);
+  categorizeProps(propProperties, types, componentEventAsts);
+  const _parser$getProps = parser.getProps(propProperties, types),
+    props = _parser$getProps.props,
+    extendsProps = _parser$getProps.extendsProps;
+  const events = getEvents(componentEventAsts, types, parser);
   const commands = getCommands(commandProperties, types);
   return {
     filename: componentName,