@react-native/codegen 0.72.1

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

@@ -0,0 +1,240 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ * @format
+ */
+
+'use strict';
+
+const _require = require('./componentsUtils'),
+  flattenProperties = _require.flattenProperties;
+const _require2 = require('../parseTopLevelType'),
+  parseTopLevelType = _require2.parseTopLevelType;
+function getPropertyType(
+  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+   * LTI update could not be added via codemod */
+  name,
+  optionalProperty,
+  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+   * LTI update could not be added via codemod */
+  annotation,
+) {
+  const topLevelType = parseTopLevelType(annotation);
+  const typeAnnotation = topLevelType.type;
+  const optional = optionalProperty || topLevelType.optional;
+  const type =
+    typeAnnotation.type === 'TSTypeReference'
+      ? typeAnnotation.typeName.name
+      : typeAnnotation.type;
+  switch (type) {
+    case 'TSBooleanKeyword':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'BooleanTypeAnnotation',
+        },
+      };
+    case 'TSStringKeyword':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'StringTypeAnnotation',
+        },
+      };
+    case 'Int32':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'Int32TypeAnnotation',
+        },
+      };
+    case 'Double':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'DoubleTypeAnnotation',
+        },
+      };
+    case 'Float':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'FloatTypeAnnotation',
+        },
+      };
+    case 'TSTypeLiteral':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'ObjectTypeAnnotation',
+          properties: typeAnnotation.members.map(buildPropertiesForEvent),
+        },
+      };
+    case 'TSUnionType':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'StringEnumTypeAnnotation',
+          options: typeAnnotation.types.map(option => option.literal.value),
+        },
+      };
+    default:
+      type;
+      throw new Error(`Unable to determine event type for "${name}": ${type}`);
+  }
+}
+function findEventArgumentsAndType(
+  typeAnnotation,
+  types,
+  bubblingType,
+  paperName,
+) {
+  if (typeAnnotation.type === 'TSInterfaceDeclaration') {
+    return {
+      argumentProps: flattenProperties([typeAnnotation], types),
+      paperTopLevelNameDeprecated: paperName,
+      bubblingType,
+    };
+  }
+  if (typeAnnotation.type === 'TSTypeLiteral') {
+    return {
+      argumentProps: typeAnnotation.members,
+      paperTopLevelNameDeprecated: paperName,
+      bubblingType,
+    };
+  }
+  if (!typeAnnotation.typeName) {
+    throw new Error("typeAnnotation of event doesn't have a name");
+  }
+  const name = typeAnnotation.typeName.name;
+  if (name === 'Readonly') {
+    return findEventArgumentsAndType(
+      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,
+        );
+    }
+  } else if (types[name]) {
+    let elementType = types[name];
+    if (elementType.type === 'TSTypeAliasDeclaration') {
+      elementType = elementType.typeAnnotation;
+    }
+    return findEventArgumentsAndType(
+      elementType,
+      types,
+      bubblingType,
+      paperName,
+    );
+  } else {
+    return {
+      argumentProps: null,
+      bubblingType: null,
+      paperTopLevelNameDeprecated: null,
+    };
+  }
+}
+
+/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+ * LTI update could not be added via codemod */
+function buildPropertiesForEvent(property) {
+  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) {
+  return {
+    type: 'ObjectTypeAnnotation',
+    properties: argumentProps.map(buildPropertiesForEvent),
+  };
+}
+
+// $FlowFixMe[unclear-type] TODO(T108222691): Use flow-types for @babel/parser
+
+function buildEventSchema(types, property) {
+  // unpack WithDefault, (T) or T|U
+  const topLevelType = parseTopLevelType(
+    property.typeAnnotation.typeAnnotation,
+    types,
+  );
+  const name = property.key.name;
+  const typeAnnotation = topLevelType.type;
+  const optional = property.optional || topLevelType.optional;
+  const _findEventArgumentsAn = findEventArgumentsAndType(
+      typeAnnotation,
+      types,
+    ),
+    argumentProps = _findEventArgumentsAn.argumentProps,
+    bubblingType = _findEventArgumentsAn.bubblingType,
+    paperTopLevelNameDeprecated =
+      _findEventArgumentsAn.paperTopLevelNameDeprecated;
+  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),
+        },
+      };
+    }
+    return {
+      name,
+      optional,
+      bubblingType,
+      typeAnnotation: {
+        type: 'EventTypeAnnotation',
+        argument: getEventArgument(argumentProps, name),
+      },
+    };
+  }
+}
+function getEvents(eventTypeAST, types) {
+  return eventTypeAST.map(property => buildEventSchema(types, property));
+}
+module.exports = {
+  getEvents,
+};

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

@@ -0,0 +1,262 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import type {
+  EventTypeShape,
+  NamedShape,
+  EventTypeAnnotation,
+} from '../../../CodegenSchema.js';
+import type {TypeDeclarationMap} from '../../utils';
+const {flattenProperties} = require('./componentsUtils');
+const {parseTopLevelType} = require('../parseTopLevelType');
+
+function getPropertyType(
+  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+   * LTI update could not be added via codemod */
+  name,
+  optionalProperty: boolean,
+  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+   * LTI update could not be added via codemod */
+  annotation,
+): NamedShape<EventTypeAnnotation> {
+  const topLevelType = parseTopLevelType(annotation);
+  const typeAnnotation = topLevelType.type;
+  const optional = optionalProperty || topLevelType.optional;
+  const type =
+    typeAnnotation.type === 'TSTypeReference'
+      ? typeAnnotation.typeName.name
+      : typeAnnotation.type;
+
+  switch (type) {
+    case 'TSBooleanKeyword':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'BooleanTypeAnnotation',
+        },
+      };
+    case 'TSStringKeyword':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'StringTypeAnnotation',
+        },
+      };
+    case 'Int32':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'Int32TypeAnnotation',
+        },
+      };
+    case 'Double':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'DoubleTypeAnnotation',
+        },
+      };
+    case 'Float':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'FloatTypeAnnotation',
+        },
+      };
+    case 'TSTypeLiteral':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'ObjectTypeAnnotation',
+          properties: typeAnnotation.members.map(buildPropertiesForEvent),
+        },
+      };
+
+    case 'TSUnionType':
+      return {
+        name,
+        optional,
+        typeAnnotation: {
+          type: 'StringEnumTypeAnnotation',
+          options: typeAnnotation.types.map(option => option.literal.value),
+        },
+      };
+    default:
+      (type: empty);
+      throw new Error(`Unable to determine event type for "${name}": ${type}`);
+  }
+}
+
+function findEventArgumentsAndType(
+  typeAnnotation: $FlowFixMe,
+  types: TypeDeclarationMap,
+  bubblingType: void | 'direct' | 'bubble',
+  paperName: ?$FlowFixMe,
+): {
+  argumentProps: ?$ReadOnlyArray<$FlowFixMe>,
+  paperTopLevelNameDeprecated: ?$FlowFixMe,
+  bubblingType: ?'direct' | 'bubble',
+} {
+  if (typeAnnotation.type === 'TSInterfaceDeclaration') {
+    return {
+      argumentProps: flattenProperties([typeAnnotation], types),
+      paperTopLevelNameDeprecated: paperName,
+      bubblingType,
+    };
+  }
+
+  if (typeAnnotation.type === 'TSTypeLiteral') {
+    return {
+      argumentProps: typeAnnotation.members,
+      paperTopLevelNameDeprecated: paperName,
+      bubblingType,
+    };
+  }
+
+  if (!typeAnnotation.typeName) {
+    throw new Error("typeAnnotation of event doesn't have a name");
+  }
+  const name = typeAnnotation.typeName.name;
+  if (name === 'Readonly') {
+    return findEventArgumentsAndType(
+      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,
+        );
+    }
+  } else if (types[name]) {
+    let elementType = types[name];
+    if (elementType.type === 'TSTypeAliasDeclaration') {
+      elementType = elementType.typeAnnotation;
+    }
+    return findEventArgumentsAndType(
+      elementType,
+      types,
+      bubblingType,
+      paperName,
+    );
+  } else {
+    return {
+      argumentProps: null,
+      bubblingType: null,
+      paperTopLevelNameDeprecated: null,
+    };
+  }
+}
+
+/* $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 {
+  // unpack WithDefault, (T) or T|U
+  const topLevelType = parseTopLevelType(
+    property.typeAnnotation.typeAnnotation,
+    types,
+  );
+
+  const name = property.key.name;
+  const typeAnnotation = topLevelType.type;
+  const optional = property.optional || topLevelType.optional;
+  const {argumentProps, bubblingType, paperTopLevelNameDeprecated} =
+    findEventArgumentsAndType(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),
+        },
+      };
+    }
+
+    return {
+      name,
+      optional,
+      bubblingType,
+      typeAnnotation: {
+        type: 'EventTypeAnnotation',
+        argument: getEventArgument(argumentProps, name),
+      },
+    };
+  }
+}
+
+function getEvents(
+  eventTypeAST: $ReadOnlyArray<EventTypeAST>,
+  types: TypeDeclarationMap,
+): $ReadOnlyArray<EventTypeShape> {
+  return eventTypeAST.map(property => buildEventSchema(types, property));
+}
+
+module.exports = {
+  getEvents,
+};

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

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ * @format
+ */
+
+'use strict';
+
+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;
+  }
+  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 = [];
+  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,
+        types,
+      );
+      if (isEvent(topLevelType.type)) {
+        events.push(prop);
+      } else if (isProp(prop.key.name, prop)) {
+        props.push(prop);
+      }
+    }
+  }
+}
+module.exports = {
+  categorizeProps,
+};

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

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'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') {
+    return false;
+  }
+  const eventNames = new Set(['BubblingEventHandler', 'DirectEventHandler']);
+  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> = [];
+  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,
+        types,
+      );
+
+      if (isEvent(topLevelType.type)) {
+        events.push(prop);
+      } else if (isProp(prop.key.name, prop)) {
+        props.push(prop);
+      }
+    }
+  }
+}
+
+module.exports = {
+  categorizeProps,
+};