Add ArrayTypeAnnotation

Summary: Adds support for `ArrayTypeAnnotation`, usage is as: ``` { type: 'ArrayTypeAnnotation', items: { type: 'BooleanTypeAnnotation', } { type: 'ArrayTypeAnnotation', items: { type: 'StringTypeAnnotation', } { type: 'ArrayTypeAnnotation', items: { type: 'FloatTypeAnnotation', } { type: 'ArrayTypeAnnotation', items: { type: 'Int32TypeAnnotation', } { type: 'ArrayTypeAnnotation', items: { type: 'NativePrimitiveTypeAnnotation', name: 'ImageSourcePrimitive' } { type: 'ArrayTypeAnnotation', items: { type: 'NativePrimitiveTypeAnnotation', name: 'ColorPrimitive' } { type: 'ArrayTypeAnnotation', items: { type: 'NativePrimitiveTypeAnnotation', name: 'PointPrimitive' // added in the next dfif } ``` Reviewed By: TheSavior Differential Revision: D14462086 fbshipit-source-id: f0c25f8fe969efc01e5838f3966d910fbbd9c86c
2019-03-19 06:25:06 -07:00 · 2019-03-19 06:25:06 -07:00 · 7723c31329
--- a/packages/react-native-codegen/BUCK
+++ b/packages/react-native-codegen/BUCK
@ -71,6 +71,10 @@ rn_codegen_test(
    fixture_name = "IMAGE_PROP",
 )

+rn_codegen_test(
+    fixture_name = "ARRAY_PROPS",
+)
+
 rn_codegen_test(
    fixture_name = "MULTI_NATIVE_PROP",
 )
@ -111,6 +115,7 @@ fb_xplat_cxx_binary(
    ],
    visibility = ["PUBLIC"],
    deps = [
+        ":generated_components-ARRAY_PROPS",
        ":generated_components-BOOLEAN_PROP",
        ":generated_components-COLOR_PROP",
        ":generated_components-ENUM_PROP",
@ -146,6 +151,7 @@ rn_xplat_cxx_library(
        "PUBLIC",
    ],
    deps = [
+        ":generated_components-ARRAY_PROPS",
        ":generated_components-BOOLEAN_PROP",
        ":generated_components-COLOR_PROP",
        ":generated_components-ENUM_PROP",
--- a/packages/react-native-codegen/buck_tests/emptyFile.cpp
+++ b/packages/react-native-codegen/buck_tests/emptyFile.cpp
@ -1,3 +1,4 @@
+#import <react/components/ARRAY_PROPS/ComponentDescriptors.h>
 #import <react/components/INTERFACE_ONLY/ComponentDescriptors.h>
 #import <react/components/BOOLEAN_PROP/ComponentDescriptors.h>
 #import <react/components/STRING_PROP/ComponentDescriptors.h>
--- a/packages/react-native-codegen/src/CodegenSchema.js
+++ b/packages/react-native-codegen/src/CodegenSchema.js
@ -65,6 +65,10 @@ type PropTypeTypeAnnotation =
  | $ReadOnly<{|
      type: 'NativePrimitiveTypeAnnotation',
      name: 'ColorPrimitive' | 'ImageSourcePrimitive',
+    |}>
+  | $ReadOnly<{|
+      type: 'ArrayTypeAnnotation',
+      elementType: $ReadOnly<PropTypeTypeAnnotation>,
    |}>;

 export type PropTypeShape = $ReadOnly<{|
--- a/packages/react-native-codegen/src/generators/GeneratePropsCpp.js
+++ b/packages/react-native-codegen/src/generators/GeneratePropsCpp.js
@ -81,22 +81,32 @@ function getClassExtendString(component): string {

 function getImports(component): Set<string> {
  const imports: Set<string> = new Set();
+
+  function addImportsForNativeName(name) {
+    switch (name) {
+      case 'ColorPrimitive':
+        return;
+      case 'ImageSourcePrimitive':
+        imports.add('#include <react/components/image/conversions.h>');
+        return;
+      default:
+        (name: empty);
+        throw new Error(`Invalid name, got ${name}`);
+    }
+  }
+
  component.props.forEach(prop => {
    const typeAnnotation = prop.typeAnnotation;

    if (typeAnnotation.type === 'NativePrimitiveTypeAnnotation') {
-      switch (typeAnnotation.name) {
-        case 'ColorPrimitive':
-          return;
-        case 'ImageSourcePrimitive':
-          imports.add('#include <react/components/image/conversions.h>');
-          return;
-        default:
-          (typeAnnotation.name: empty);
-          throw new Error(
-            `Invalid NativePrimitiveTypeAnnotation name, got ${prop.name}`,
-          );
-      }
+      addImportsForNativeName(typeAnnotation.name);
+    }
+
+    if (
+      typeAnnotation.type === 'ArrayTypeAnnotation' &&
+      typeAnnotation.elementType.type === 'NativePrimitiveTypeAnnotation'
+    ) {
+      addImportsForNativeName(typeAnnotation.elementType.name);
    }
  });

--- a/packages/react-native-codegen/src/generators/GeneratePropsH.js
+++ b/packages/react-native-codegen/src/generators/GeneratePropsH.js
@ -113,6 +113,18 @@ function getNativeTypeFromAnnotation(componentName: string, prop): string {
          (typeAnnotation.name: empty);
          throw new Error('Receieved unknown NativePrimitiveTypeAnnotation');
      }
+    case 'ArrayTypeAnnotation': {
+      if (typeAnnotation.elementType.type === 'ArrayTypeAnnotation') {
+        throw new Error(
+          'ArrayTypeAnnotation of type ArrayTypeAnnotation not supported',
+        );
+      }
+      const itemAnnotation = getNativeTypeFromAnnotation(componentName, {
+        typeAnnotation: typeAnnotation.elementType,
+        name: componentName,
+      });
+      return `std::vector<${itemAnnotation}>`;
+    }
    case 'StringEnumTypeAnnotation':
      return getEnumName(componentName, prop.name);
    default:
@ -145,6 +157,9 @@ function convertDefaultTypeToString(componentName: string, prop): string {
          (typeAnnotation.name: empty);
          throw new Error('Receieved unknown NativePrimitiveTypeAnnotation');
      }
+    case 'ArrayTypeAnnotation': {
+      return '';
+    }
    case 'StringEnumTypeAnnotation':
      return `${getEnumName(componentName, prop.name)}::${upperCaseFirst(
        typeAnnotation.default,
@ -236,23 +251,38 @@ function getImports(component): Set<string> {
    }
  });

+  function addImportsForNativeName(name) {
+    switch (name) {
+      case 'ColorPrimitive':
+        imports.add('#include <react/graphics/Color.h>');
+        return;
+      case 'ImageSourcePrimitive':
+        imports.add('#include <react/imagemanager/primitives.h>');
+        return;
+      default:
+        (name: empty);
+        throw new Error(
+          `Invalid NativePrimitiveTypeAnnotation name, got ${name}`,
+        );
+    }
+  }
+
  component.props.forEach(prop => {
    const typeAnnotation = prop.typeAnnotation;

    if (typeAnnotation.type === 'NativePrimitiveTypeAnnotation') {
-      switch (typeAnnotation.name) {
-        case 'ColorPrimitive':
-          imports.add('#include <react/graphics/Color.h>');
-          return;
-        case 'ImageSourcePrimitive':
-          imports.add('#include <react/imagemanager/primitives.h>');
-          return;
-        default:
-          (typeAnnotation.name: empty);
-          throw new Error(
-            `Invalid NativePrimitiveTypeAnnotation name, got ${prop.name}`,
-          );
-      }
+      addImportsForNativeName(typeAnnotation.name);
+    }
+
+    if (typeAnnotation.type === 'ArrayTypeAnnotation') {
+      imports.add('#include <vector>');
+    }
+
+    if (
+      typeAnnotation.type === 'ArrayTypeAnnotation' &&
+      typeAnnotation.elementType.type === 'NativePrimitiveTypeAnnotation'
+    ) {
+      addImportsForNativeName(typeAnnotation.elementType.name);
    }
  });

--- a/packages/react-native-codegen/src/generators/GenerateViewConfigJs.js
+++ b/packages/react-native-codegen/src/generators/GenerateViewConfigJs.js
@ -43,6 +43,7 @@ function getReactDiffProcessValue(prop) {
    case 'StringTypeAnnotation':
    case 'Int32TypeAnnotation':
    case 'FloatTypeAnnotation':
+    case 'ArrayTypeAnnotation':
    case 'StringEnumTypeAnnotation':
      return j.literal(true);
    case 'NativePrimitiveTypeAnnotation':
--- a/packages/react-native-codegen/src/generators/__test_fixtures__/fixtures.js
+++ b/packages/react-native-codegen/src/generators/__test_fixtures__/fixtures.js
@ -284,6 +284,88 @@ const IMAGE_PROP: SchemaType = {
  },
 };

+const ARRAY_PROPS: SchemaType = {
+  modules: {
+    Slider: {
+      components: {
+        ArrayPropsNativeComponent: {
+          extendsProps: [
+            {
+              type: 'ReactNativeBuiltInType',
+              knownTypeName: 'ReactNativeCoreViewProps',
+            },
+          ],
+          events: [],
+          props: [
+            {
+              name: 'names',
+              optional: true,
+              typeAnnotation: {
+                type: 'ArrayTypeAnnotation',
+                elementType: {
+                  type: 'StringTypeAnnotation',
+                },
+              },
+            },
+            {
+              name: 'disableds',
+              optional: true,
+              typeAnnotation: {
+                type: 'ArrayTypeAnnotation',
+                elementType: {
+                  type: 'BooleanTypeAnnotation',
+                },
+              },
+            },
+            {
+              name: 'progress',
+              optional: true,
+              typeAnnotation: {
+                type: 'ArrayTypeAnnotation',
+                elementType: {
+                  type: 'Int32TypeAnnotation',
+                },
+              },
+            },
+            {
+              name: 'radii',
+              optional: true,
+              typeAnnotation: {
+                type: 'ArrayTypeAnnotation',
+                elementType: {
+                  type: 'FloatTypeAnnotation',
+                },
+              },
+            },
+            {
+              name: 'colors',
+              optional: true,
+              typeAnnotation: {
+                type: 'ArrayTypeAnnotation',
+                elementType: {
+                  type: 'NativePrimitiveTypeAnnotation',
+                  name: 'ColorPrimitive',
+                },
+              },
+            },
+            {
+              name: 'srcs',
+              optional: true,
+              typeAnnotation: {
+                type: 'ArrayTypeAnnotation',
+                elementType: {
+                  type: 'NativePrimitiveTypeAnnotation',
+                  name: 'ImageSourcePrimitive',
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
 const MULTI_NATIVE_PROP: SchemaType = {
  modules: {
    Slider: {
@ -643,6 +725,7 @@ module.exports = {
  FLOAT_PROPS,
  COLOR_PROP,
  IMAGE_PROP,
+  ARRAY_PROPS,
  MULTI_NATIVE_PROP,
  ENUM_PROP,
  EVENT_PROPS,
--- a/packages/react-native-codegen/src/generators/tests/GenerateComponentDescriptorH-test.js
+++ b/packages/react-native-codegen/src/generators/tests/GenerateComponentDescriptorH-test.js
@ -14,6 +14,7 @@
 const generator = require('../GenerateComponentDescriptorH.js');

 const {
+  ARRAY_PROPS,
  BOOLEAN_PROP,
  STRING_PROP,
  INTEGER_PROPS,
@ -28,6 +29,10 @@ const {
 } = require('../__test_fixtures__/fixtures.js');

 describe('GenerateComponentDescriptorH', () => {
+  it('can generate a array props', () => {
+    expect(generator.generate('ARRAY_PROPS', ARRAY_PROPS)).toMatchSnapshot();
+  });
+
  it('can generate a single boolean prop', () => {
    expect(generator.generate('BOOLEAN_PROP', BOOLEAN_PROP)).toMatchSnapshot();
  });
--- a/packages/react-native-codegen/src/generators/tests/snapshots/GenerateComponentDescriptorH-test.js.snap
+++ b/packages/react-native-codegen/src/generators/tests/snapshots/GenerateComponentDescriptorH-test.js.snap
@ -1,5 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`GenerateComponentDescriptorH can generate a array props 1`] = `
+Map {
+  "ComponentDescriptors.h" => "
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/components/ARRAY_PROPS/ShadowNodes.h>
+#include <react/core/ConcreteComponentDescriptor.h>
+
+namespace facebook {
+namespace react {
+
+using ArrayPropsNativeComponentComponentDescriptor = ConcreteComponentDescriptor<ArrayPropsNativeComponentShadowNode>;
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateComponentDescriptorH can generate a native primitive image prop 1`] = `
 Map {
  "ComponentDescriptors.h" => "
--- a/packages/react-native-codegen/src/generators/tests/snapshots/GenerateEventEmitterCpp-test.js.snap
+++ b/packages/react-native-codegen/src/generators/tests/snapshots/GenerateEventEmitterCpp-test.js.snap
@ -1,5 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`GenerateEventEmitterCpp can generate fixture ARRAY_PROPS 1`] = `
+Map {
+  "EventEmitters.cpp" => "
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <react/components/ARRAY_PROPS/EventEmitters.h>
+
+namespace facebook {
+namespace react {
+
+
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateEventEmitterCpp can generate fixture BOOLEAN_PROP 1`] = `
 Map {
  "EventEmitters.cpp" => "
--- a/packages/react-native-codegen/src/generators/tests/snapshots/GenerateEventEmitterH-test.js.snap
+++ b/packages/react-native-codegen/src/generators/tests/snapshots/GenerateEventEmitterH-test.js.snap
@ -1,5 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`GenerateEventEmitterH can generate fixture ARRAY_PROPS 1`] = `
+Map {
+  "EventEmitters.h" => "
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+#pragma once
+
+#include <react/components/view/ViewEventEmitter.h>
+
+namespace facebook {
+namespace react {
+
+
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateEventEmitterH can generate fixture BOOLEAN_PROP 1`] = `
 Map {
  "EventEmitters.h" => "
--- a/packages/react-native-codegen/src/generators/tests/snapshots/GeneratePropsCpp-test.js.snap
+++ b/packages/react-native-codegen/src/generators/tests/snapshots/GeneratePropsCpp-test.js.snap
@ -1,5 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`GeneratePropsCpp can generate fixture ARRAY_PROPS 1`] = `
+Map {
+  "Props.cpp" => "
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <react/components/ARRAY_PROPS/Props.h>
+#include <react/components/image/conversions.h>
+#include <react/core/propsConversions.h>
+
+namespace facebook {
+namespace react {
+
+ArrayPropsNativeComponentProps::ArrayPropsNativeComponentProps(
+    const ArrayPropsNativeComponentProps &sourceProps,
+    const RawProps &rawProps): ViewProps(sourceProps, rawProps),
+
+    names(convertRawProp(rawProps, \\"names\\", sourceProps.names, names)),
+disableds(convertRawProp(rawProps, \\"disableds\\", sourceProps.disableds, disableds)),
+progress(convertRawProp(rawProps, \\"progress\\", sourceProps.progress, progress)),
+radii(convertRawProp(rawProps, \\"radii\\", sourceProps.radii, radii)),
+colors(convertRawProp(rawProps, \\"colors\\", sourceProps.colors, colors)),
+srcs(convertRawProp(rawProps, \\"srcs\\", sourceProps.srcs, srcs))
+      {}
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GeneratePropsCpp can generate fixture BOOLEAN_PROP 1`] = `
 Map {
  "Props.cpp" => "
--- a/packages/react-native-codegen/src/generators/tests/snapshots/GeneratePropsH-test.js.snap
+++ b/packages/react-native-codegen/src/generators/tests/snapshots/GeneratePropsH-test.js.snap
@ -1,5 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`GeneratePropsH can generate fixture ARRAY_PROPS 1`] = `
+Map {
+  "Props.h" => "
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+#pragma once
+
+#include <react/components/view/ViewProps.h>
+#include <react/graphics/Color.h>
+#include <react/imagemanager/primitives.h>
+#include <vector>
+
+namespace facebook {
+namespace react {
+
+class ArrayPropsNativeComponentProps final : public ViewProps {
+ public:
+  ArrayPropsNativeComponentProps() = default;
+  ArrayPropsNativeComponentProps(const ArrayPropsNativeComponentProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+
+  const std::vector<std::string> names{};
+const std::vector<bool> disableds{};
+const std::vector<int> progress{};
+const std::vector<Float> radii{};
+const std::vector<SharedColor> colors{};
+const std::vector<ImageSource> srcs{};
+};
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GeneratePropsH can generate fixture BOOLEAN_PROP 1`] = `
 Map {
  "Props.h" => "
--- a/packages/react-native-codegen/src/generators/tests/snapshots/GenerateShadowNodeCpp-test.js.snap
+++ b/packages/react-native-codegen/src/generators/tests/snapshots/GenerateShadowNodeCpp-test.js.snap
@ -1,5 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`GenerateShadowNodeCpp can generate fixture ARRAY_PROPS 1`] = `
+Map {
+  "ShadowNodes.cpp" => "
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include <react/components/ARRAY_PROPS/ShadowNodes.h>
+
+namespace facebook {
+namespace react {
+
+extern const char ArrayPropsNativeComponentComponentName[] = \\"ArrayPropsNativeComponent\\";
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateShadowNodeCpp can generate fixture BOOLEAN_PROP 1`] = `
 Map {
  "ShadowNodes.cpp" => "
--- a/packages/react-native-codegen/src/generators/tests/snapshots/GenerateShadowNodeH-test.js.snap
+++ b/packages/react-native-codegen/src/generators/tests/snapshots/GenerateShadowNodeH-test.js.snap
@ -1,5 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`GenerateShadowNodeH can generate fixture ARRAY_PROPS 1`] = `
+Map {
+  "ShadowNodes.h" => "
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/components/ARRAY_PROPS/Props.h>
+#include <react/components/view/ConcreteViewShadowNode.h>
+
+namespace facebook {
+namespace react {
+
+extern const char ArrayPropsNativeComponentComponentName[];
+
+/*
+ * \`ShadowNode\` for <ArrayPropsNativeComponent> component.
+ */
+using ArrayPropsNativeComponentShadowNode = ConcreteViewShadowNode<
+    ArrayPropsNativeComponentComponentName,
+    ArrayPropsNativeComponentProps>;
+
+} // namespace react
+} // namespace facebook
+",
+}
+`;
+
 exports[`GenerateShadowNodeH can generate fixture BOOLEAN_PROP 1`] = `
 Map {
  "ShadowNodes.h" => "
--- a/packages/react-native-codegen/src/generators/tests/snapshots/GenerateViewConfigJs-test.js.snap
+++ b/packages/react-native-codegen/src/generators/tests/snapshots/GenerateViewConfigJs-test.js.snap
@ -1,5 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`GenerateViewConfigJs can generate fixture ARRAY_PROPS 1`] = `
+Map {
+  "ViewConfigs.js" => "
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
+const ReactNativeViewConfigRegistry = require('ReactNativeViewConfigRegistry');
+
+const ArrayPropsNativeComponentViewConfig = {
+  uiViewClassName: 'ArrayPropsNativeComponent',
+
+  validAttributes: {
+    names: true,
+    disableds: true,
+    progress: true,
+    radii: true,
+    colors: true,
+    srcs: true,
+    style: ReactNativeStyleAttributes
+  }
+};
+
+ReactNativeViewConfigRegistry.register(
+  'ArrayPropsNativeComponent',
+  () => ArrayPropsNativeComponentViewConfig,
+);
+",
+}
+`;
+
 exports[`GenerateViewConfigJs can generate fixture BOOLEAN_PROP 1`] = `
 Map {
  "ViewConfigs.js" => "