Add sample component with state in RNTester

packages/react-native-codegen/src/CodegenSchema.js

@@ -183,7 +183,8 @@ export type ReservedPropTypeAnnotation = $ReadOnly<{
     | 'ColorPrimitive'
     | 'ImageSourcePrimitive'
     | 'PointPrimitive'
-    | 'EdgeInsetsPrimitive',
+    | 'EdgeInsetsPrimitive'
+    | 'ImageRequestPrimitive',
 }>;
 
 export type StateTypeAnnotation = PropTypeAnnotation;

packages/react-native-codegen/src/generators/components/ComponentsGeneratorUtils.js

@@ -0,0 +1,335 @@
+/**
+ * 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
+ * @format
+ */
+
+'use strict';
+
+import type {
+  NamedShape,
+  PropTypeAnnotation,
+  StateTypeAnnotation,
+} from '../../CodegenSchema';
+
+import type {
+  StringTypeAnnotation,
+  ReservedPropTypeAnnotation,
+  ObjectTypeAnnotation,
+  Int32TypeAnnotation,
+  FloatTypeAnnotation,
+  DoubleTypeAnnotation,
+  BooleanTypeAnnotation,
+} from '../../CodegenSchema';
+
+const {
+  convertDefaultTypeToString,
+  getCppTypeForAnnotation,
+  getEnumMaskName,
+  getEnumName,
+  generateStructName,
+  getImports,
+} = require('./CppHelpers.js');
+
+function getNativeTypeFromAnnotation(
+  componentName: string,
+  prop:
+    | NamedShape<PropTypeAnnotation>
+    | NamedShape<StateTypeAnnotation>
+    | {
+        name: string,
+        typeAnnotation:
+          | $FlowFixMe
+          | DoubleTypeAnnotation
+          | FloatTypeAnnotation
+          | BooleanTypeAnnotation
+          | Int32TypeAnnotation
+          | StringTypeAnnotation
+          | ObjectTypeAnnotation<PropTypeAnnotation>
+          | ReservedPropTypeAnnotation
+          | {
+              +default: string,
+              +options: $ReadOnlyArray<string>,
+              +type: 'StringEnumTypeAnnotation',
+            }
+          | {
+              +elementType: ObjectTypeAnnotation<PropTypeAnnotation>,
+              +type: 'ArrayTypeAnnotation',
+            },
+      },
+  nameParts: $ReadOnlyArray<string>,
+): string {
+  const typeAnnotation = prop.typeAnnotation;
+
+  switch (typeAnnotation.type) {
+    case 'BooleanTypeAnnotation':
+    case 'StringTypeAnnotation':
+    case 'Int32TypeAnnotation':
+    case 'DoubleTypeAnnotation':
+    case 'FloatTypeAnnotation':
+      return getCppTypeForAnnotation(typeAnnotation.type);
+    case 'ReservedPropTypeAnnotation':
+      switch (typeAnnotation.name) {
+        case 'ColorPrimitive':
+          return 'SharedColor';
+        case 'ImageSourcePrimitive':
+          return 'ImageSource';
+        case 'ImageRequestPrimitive':
+          return 'ImageRequest';
+        case 'PointPrimitive':
+          return 'Point';
+        case 'EdgeInsetsPrimitive':
+          return 'EdgeInsets';
+        default:
+          (typeAnnotation.name: empty);
+          throw new Error('Received unknown ReservedPropTypeAnnotation');
+      }
+    case 'ArrayTypeAnnotation': {
+      const arrayType = typeAnnotation.elementType.type;
+      if (arrayType === 'ArrayTypeAnnotation') {
+        return `std::vector<${getNativeTypeFromAnnotation(
+          componentName,
+          {typeAnnotation: typeAnnotation.elementType, name: ''},
+          nameParts.concat([prop.name]),
+        )}>`;
+      }
+      if (arrayType === 'ObjectTypeAnnotation') {
+        const structName = generateStructName(
+          componentName,
+          nameParts.concat([prop.name]),
+        );
+        return `std::vector<${structName}>`;
+      }
+      if (arrayType === 'StringEnumTypeAnnotation') {
+        const enumName = getEnumName(componentName, prop.name);
+        return getEnumMaskName(enumName);
+      }
+      const itemAnnotation = getNativeTypeFromAnnotation(
+        componentName,
+        {
+          typeAnnotation: typeAnnotation.elementType,
+          name: componentName,
+        },
+        nameParts.concat([prop.name]),
+      );
+      return `std::vector<${itemAnnotation}>`;
+    }
+    case 'ObjectTypeAnnotation': {
+      return generateStructName(componentName, nameParts.concat([prop.name]));
+    }
+    case 'StringEnumTypeAnnotation':
+      return getEnumName(componentName, prop.name);
+    case 'Int32EnumTypeAnnotation':
+      return getEnumName(componentName, prop.name);
+    default:
+      (typeAnnotation: empty);
+      throw new Error(
+        `Received invalid typeAnnotation for ${componentName} prop ${prop.name}, received ${typeAnnotation.type}`,
+      );
+  }
+}
+
+function getStateConstituents(
+  componentName: string,
+  stateShape: NamedShape<StateTypeAnnotation>,
+): {
+  name: string,
+  varName: string,
+  type: string,
+  defaultValue: $FlowFixMe,
+} {
+  const name = stateShape.name;
+  const varName = `${name}_`;
+  const type = getNativeTypeFromAnnotation(componentName, stateShape, []);
+  const defaultValue = convertDefaultTypeToString(componentName, stateShape);
+
+  return {
+    name,
+    varName,
+    type,
+    defaultValue,
+  };
+}
+
+/// This function process some types if we need to customize them
+/// For example, the ImageSource and the reserved types could be trasformed into
+/// const address instead of using them as plain types.
+function convertTypesToConstAddressIfNeeded(
+  type: string,
+  convertibleTypes: Set<string>,
+): string {
+  if (convertibleTypes.has(type)) {
+    return `${type} const &`;
+  }
+  return type;
+}
+
+function convertValueToSharedPointerWithMove(
+  type: string,
+  value: string,
+  convertibleTypes: Set<string>,
+): string {
+  if (convertibleTypes.has(type)) {
+    return `std::make_shared<${type}>(std::move(${value}))`;
+  }
+  return value;
+}
+
+function convertVariableToSharedPointer(
+  type: string,
+  convertibleTypes: Set<string>,
+): string {
+  if (convertibleTypes.has(type)) {
+    return `std::shared_ptr<${type}>`;
+  }
+  return type;
+}
+
+function convertVariableToPointer(
+  type: string,
+  value: string,
+  convertibleTypes: Set<string>,
+): string {
+  if (convertibleTypes.has(type)) {
+    return `*${value}`;
+  }
+  return value;
+}
+
+const convertCtorParamToAddressType = (type: string): string => {
+  const typesToConvert: Set<string> = new Set();
+  typesToConvert.add('ImageSource');
+
+  return convertTypesToConstAddressIfNeeded(type, typesToConvert);
+};
+
+const convertCtorInitToSharedPointers = (
+  type: string,
+  value: string,
+): string => {
+  const typesToConvert: Set<string> = new Set();
+  typesToConvert.add('ImageRequest');
+
+  return convertValueToSharedPointerWithMove(type, value, typesToConvert);
+};
+
+const convertGettersReturnTypeToAddressType = (type: string): string => {
+  const typesToConvert: Set<string> = new Set();
+  typesToConvert.add('ImageRequest');
+
+  return convertTypesToConstAddressIfNeeded(type, typesToConvert);
+};
+
+const convertVarTypeToSharedPointer = (type: string): string => {
+  const typesToConvert: Set<string> = new Set();
+  typesToConvert.add('ImageRequest');
+
+  return convertVariableToSharedPointer(type, typesToConvert);
+};
+
+const convertVarValueToPointer = (type: string, value: string): string => {
+  const typesToConvert: Set<string> = new Set();
+  typesToConvert.add('ImageRequest');
+
+  return convertVariableToPointer(type, value, typesToConvert);
+};
+
+function getLocalImports(
+  properties:
+    | $ReadOnlyArray<NamedShape<PropTypeAnnotation>>
+    | $ReadOnlyArray<NamedShape<StateTypeAnnotation>>,
+): Set<string> {
+  const imports: Set<string> = new Set();
+
+  function addImportsForNativeName(
+    name:
+      | 'ColorPrimitive'
+      | 'EdgeInsetsPrimitive'
+      | 'ImageSourcePrimitive'
+      | 'PointPrimitive'
+      | 'ImageRequestPrimitive',
+  ) {
+    switch (name) {
+      case 'ColorPrimitive':
+        imports.add('#include <react/renderer/graphics/Color.h>');
+        return;
+      case 'ImageSourcePrimitive':
+        imports.add('#include <react/renderer/imagemanager/primitives.h>');
+        return;
+      case 'ImageRequestPrimitive':
+        imports.add('#include <react/renderer/imagemanager/ImageRequest.h>');
+        return;
+      case 'PointPrimitive':
+        imports.add('#include <react/renderer/graphics/Geometry.h>');
+        return;
+      case 'EdgeInsetsPrimitive':
+        imports.add('#include <react/renderer/graphics/Geometry.h>');
+        return;
+      default:
+        (name: empty);
+        throw new Error(`Invalid ReservedPropTypeAnnotation name, got ${name}`);
+    }
+  }
+
+  properties.forEach(prop => {
+    const typeAnnotation = prop.typeAnnotation;
+
+    if (typeAnnotation.type === 'ReservedPropTypeAnnotation') {
+      addImportsForNativeName(typeAnnotation.name);
+    }
+
+    if (typeAnnotation.type === 'ArrayTypeAnnotation') {
+      imports.add('#include <vector>');
+      if (typeAnnotation.elementType.type === 'StringEnumTypeAnnotation') {
+        imports.add('#include <cinttypes>');
+      }
+    }
+
+    if (
+      typeAnnotation.type === 'ArrayTypeAnnotation' &&
+      typeAnnotation.elementType.type === 'ReservedPropTypeAnnotation'
+    ) {
+      addImportsForNativeName(typeAnnotation.elementType.name);
+    }
+
+    if (
+      typeAnnotation.type === 'ArrayTypeAnnotation' &&
+      typeAnnotation.elementType.type === 'ObjectTypeAnnotation'
+    ) {
+      const objectProps = typeAnnotation.elementType.properties;
+      const objectImports = getImports(objectProps);
+      const localImports = getLocalImports(objectProps);
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      objectImports.forEach(imports.add, imports);
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      localImports.forEach(imports.add, imports);
+    }
+
+    if (typeAnnotation.type === 'ObjectTypeAnnotation') {
+      imports.add('#include <react/renderer/core/propsConversions.h>');
+      const objectImports = getImports(typeAnnotation.properties);
+      const localImports = getLocalImports(typeAnnotation.properties);
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      objectImports.forEach(imports.add, imports);
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      localImports.forEach(imports.add, imports);
+    }
+  });
+
+  return imports;
+}
+
+module.exports = {
+  getNativeTypeFromAnnotation,
+  getStateConstituents,
+  convertCtorParamToAddressType,
+  convertGettersReturnTypeToAddressType,
+  convertCtorInitToSharedPointers,
+  convertVarTypeToSharedPointer,
+  convertVarValueToPointer,
+  getLocalImports,
+};

packages/react-native-codegen/src/generators/components/CppHelpers.js

@@ -61,6 +61,7 @@ function getImports(
     name:
       | 'ColorPrimitive'
       | 'EdgeInsetsPrimitive'
+      | 'ImageRequestPrimitive'
       | 'ImageSourcePrimitive'
       | 'PointPrimitive',
   ) {
@@ -71,6 +72,8 @@ function getImports(
         return;
       case 'EdgeInsetsPrimitive':
         return;
+      case 'ImageRequestPrimitive':
+        return;
       case 'ImageSourcePrimitive':
         imports.add('#include <react/renderer/components/image/conversions.h>');
         return;
@@ -163,6 +166,8 @@ function convertDefaultTypeToString(
           return '';
         case 'ImageSourcePrimitive':
           return '';
+        case 'ImageRequestPrimitive':
+          return '';
         case 'PointPrimitive':
           return '';
         case 'EdgeInsetsPrimitive':