CPLAT-11722 Add uiForwardRef

lib/src/builder/parsing/ast_util.dart

@@ -42,16 +42,11 @@ extension InitializerHelperTopLevel on TopLevelVariableDeclaration {
   /// The first variable in this list.
   VariableDeclaration get firstVariable => variables.firstVariable;
 
-  /// Returns whether or not the config argument of a Function type is generated.
+  /// Returns whether or not there is a generated config being used.
   bool get usesAGeneratedConfig {
     return firstInitializer != null &&
         anyDescendantIdentifiers(firstInitializer, (identifier) {
-          final uiFactoryDeclaration = identifier.thisOrAncestorOfType<VariableDeclaration>();
-
-          return firstInitializer != null &&
-              anyDescendantIdentifiers(firstInitializer, (identifier) {
-                return identifier.nameWithoutPrefix == '\$${uiFactoryDeclaration.name.name}Config';
-              });
+          return identifier.nameWithoutPrefix == '\$${firstVariable.name.name}Config';
         });
   }
 }

lib/src/component/ref_util.dart

@@ -293,15 +293,15 @@ UiFactory<TProps> Function(UiFactory<TProps>) forwardRef<TProps extends UiProps>
 /// UiFactory<TProps> withLogging<TProps extends UiProps>(UiFactory<TProps> factoryToWrap) {
 ///   return uiForwardRef(
 ///     (props, ref) {
-///       useEffect(() => 'the component rendered!');
+///       useEffect(() => '${factoryToWrap().componentFactory.type} rendered!');
 ///
 ///       return (factoryToWrap()
 ///         ..addAll(props)
 ///         ..ref = ref
 ///       )(props.children);
 ///     },
 ///     factoryToBeWrapped.asForwardRefConfig(
-///       displayName: 'withLogging(${getDisplayName(factoryToWrap)})',
+///       displayName: 'WithLogging',
 ///     ),
 ///   );
 /// }
@@ -326,7 +326,7 @@ UiFactory<TProps> Function(UiFactory<TProps>) forwardRef<TProps extends UiProps>
 /// version wrapped in `uiForwardRef`:
 ///
 /// ```dart
-/// UiFactory<LogPropsProps> _Foo = _$_Foo; // ignore: undefined_identifier
+/// UiFactory<FooProps> _Foo = _$_Foo; // ignore: undefined_identifier
 /// mixin FooProps on UiProps {
 ///   // Private since we only use this to pass along the ref provided in
 ///   // uiForwardRef.
@@ -340,9 +340,9 @@ UiFactory<TProps> Function(UiFactory<TProps>) forwardRef<TProps extends UiProps>
 ///     return Dom.div()(
 ///       (Dom.input()
 ///         ..type = 'text'
-///         ..ref = _inputRef
-///       )();
-///     )
+///         ..ref = props._inputRef
+///       )()
+///     );
 ///   }
 /// }
 ///
@@ -384,7 +384,7 @@ UiFactory<TProps> Function(UiFactory<TProps>) forwardRef<TProps extends UiProps>
 /// }
 ///
 /// class Foo2Props = UiProps with AnotherPropsMixin, FooProps;
-/// final Foo2 = uiForwardRef<LogsPropsComponent2Props>((props, ref) {
+/// final Foo2 = uiForwardRef<Foo2Props>((props, ref) {
 ///     print(props.anExampleAdditionalProp);
 ///
 ///     return (_Foo()

test/over_react/component_declaration/builder_integration_tests/new_boilerplate/function_component_test.dart

@@ -41,50 +41,10 @@ main() {
       functionComponentTestHelper(_Test, testId: '_testId');
     });
 
-    group('with UiProps', () {
-      UiFactory<UiProps> TestUiProps = uiFunction(
-        (props) => (Dom.div()..addTestId('testId3'))('id: ${props.id}'),
-        UiFactoryConfig(),
-      );
-
-      test(
-          'renders a component from end to end, successfully reading props via typed getters',
-          () {
-        final jacket = mount((TestUiProps()..id = '1')());
-        final node = queryAllByTestId(jacket.mountNode, 'testId3').first;
-
-        expect(node, isA<DivElement>());
-        expect(node.text, 'id: 1');
-      });
-
-      group('initializes the factory variable with a function', () {
-        test('that returns a new props class implementation instance', () {
-          final instance = TestUiProps();
-          expect(instance, isA<UiProps>());
-          expect(instance, isA<Map>());
-        });
-
-        test(
-            'that returns a new props class implementation instance backed by an existing map',
-            () {
-          Map existingMap = {'key': 'test'};
-          final props = TestUiProps(existingMap);
-
-          expect(props.key, equals('test'));
-
-          props.key = 'modified';
-          expect(props.key, equals('modified'));
-          expect(existingMap['key'], equals('modified'));
-        });
-      });
-
-      test(
-          'generates prop getters/setters with the prop name as the key by default',
-          () {
-        expect(TestUiProps()..key = 'test', containsPair('key', 'test'));
-        expect(TestUiProps()..id = '2', containsPair('id', '2'));
-      });
-    });
+    uiPropsTest(uiFunction(
+              (props) => (Dom.div()..addTestId('testId3'))('id: ${props.id}'),
+          UiFactoryConfig(),
+        ));
 
     group('throws an error when', () {
       test('config is null', () {
@@ -106,6 +66,94 @@ main() {
       });
     });
   });
+
+  group('uiForwardRef', () {
+    group('with generated props config', () {
+      functionComponentTestHelper(BasicUiForwardRef);
+    });
+
+    group('with custom PropsFactory', () {
+      functionComponentTestHelper(CustomUiForwardRef, testId: 'testIdCustom');
+    });
+
+    group('with no left hand typing', () {
+      functionComponentTestHelper(NoLHSUiForwardRefTest, testId: 'testIdNoLHS');
+    });
+
+    group('with private prefix', () {
+      functionComponentTestHelper(_UiForwardRef, testId: '_testId');
+    });
+
+    uiPropsTest(uiForwardRef(
+          (props, ref) => (Dom.div()
+              ..addTestId('testId3')
+              ..ref = ref
+          )('id: ${props.id}'),
+      Dom.div.asForwardRefConfig(),
+    ));
+
+    group('throws an error when', () {
+      test('config is null', () {
+        expect(
+                () => uiForwardRef<TestProps>(
+                  (props, ref) => Dom.div()(),
+              null,
+            ),
+            throwsArgumentError);
+      });
+
+      test('props factory is not provided when using custom props class', () {
+        expect(
+                () => uiForwardRef<TestProps>(
+                  (props, ref) => Dom.div()(),
+              UiFactoryConfig(displayName: 'Foo'),
+            ),
+            throwsArgumentError);
+      });
+    });
+  });
+}
+
+void uiPropsTest(UiFactory<UiProps> factory) {
+  group('with UiProps', () {
+    test(
+        'renders a component from end to end, successfully reading props via typed getters',
+            () {
+          final jacket = mount((factory()..id = '1')());
+          final node = queryAllByTestId(jacket.mountNode, 'testId3').first;
+
+          expect(node, isA<DivElement>());
+          expect(node.text, 'id: 1');
+        });
+
+    group('initializes the factory variable with a function', () {
+      test('that returns a new props class implementation instance', () {
+        final instance = factory();
+        expect(instance, isA<UiProps>());
+        expect(instance, isA<Map>());
+      });
+
+      test(
+          'that returns a new props class implementation instance backed by an existing map',
+              () {
+            Map existingMap = {'key': 'test'};
+            final props = factory(existingMap);
+
+            expect(props.key, equals('test'));
+
+            props.key = 'modified';
+            expect(props.key, equals('modified'));
+            expect(existingMap['key'], equals('modified'));
+          });
+    });
+
+    test(
+        'generates prop getters/setters with the prop name as the key by default',
+            () {
+          expect(factory()..key = 'test', containsPair('key', 'test'));
+          expect(factory()..id = '2', containsPair('id', '2'));
+        });
+  });
 }
 
 void functionComponentTestHelper(UiFactory<TestProps> factory,
@@ -186,6 +234,72 @@ void functionComponentTestHelper(UiFactory<TestProps> factory,
   });
 }
 
+UiFactory<TestProps> BasicUiForwardRef = uiForwardRef(
+      (props, ref) {
+    return (Dom.div()
+      ..ref = ref
+      ..addTestId('testId')
+      ..addProp('data-prop-string-prop', props.stringProp)
+      ..addProp('data-prop-dynamic-prop', props.dynamicProp)
+      ..addProp('data-prop-untyped-prop', props.untypedProp)
+      ..addProp('data-prop-custom-key-prop', props.customKeyProp)
+      ..addProp('data-prop-custom-namespace-prop', props.customNamespaceProp)
+      ..addProp('data-prop-custom-key-and-namespace-prop',
+          props.customKeyAndNamespaceProp))('rendered content');
+  },
+  $TestConfig, // ignore: undefined_identifier
+);
+
+UiFactory<TestProps> CustomUiForwardRef = uiForwardRef(
+        (props, ref) {
+      return (Dom.div()
+        ..ref = ref
+        ..addTestId('testIdCustom')
+        ..addProp('data-prop-string-prop', props.stringProp)
+        ..addProp('data-prop-dynamic-prop', props.dynamicProp)
+        ..addProp('data-prop-untyped-prop', props.untypedProp)
+        ..addProp('data-prop-custom-key-prop', props.customKeyProp)
+        ..addProp('data-prop-custom-namespace-prop', props.customNamespaceProp)
+        ..addProp('data-prop-custom-key-and-namespace-prop',
+            props.customKeyAndNamespaceProp))('rendered content');
+    },
+    UiFactoryConfig(
+      propsFactory: PropsFactory.fromUiFactory(BasicUiForwardRef),
+    )
+);
+
+final NoLHSUiForwardRefTest = uiForwardRef<TestProps>(
+      (props, ref) {
+    return (Dom.div()
+      ..ref = ref
+      ..addTestId('testIdNoLHS')
+      ..addProp('data-prop-string-prop', props.stringProp)
+      ..addProp('data-prop-dynamic-prop', props.dynamicProp)
+      ..addProp('data-prop-untyped-prop', props.untypedProp)
+      ..addProp('data-prop-custom-key-prop', props.customKeyProp)
+      ..addProp('data-prop-custom-namespace-prop', props.customNamespaceProp)
+      ..addProp('data-prop-custom-key-and-namespace-prop',
+          props.customKeyAndNamespaceProp))('rendered content');
+  },
+  $NoLHSTestConfig, // ignore: undefined_identifier
+);
+
+UiFactory<TestProps> _UiForwardRef = uiForwardRef(
+      (props, ref) {
+    return (Dom.div()
+      ..ref = ref
+      ..addTestId('_testId')
+      ..addProp('data-prop-string-prop', props.stringProp)
+      ..addProp('data-prop-dynamic-prop', props.dynamicProp)
+      ..addProp('data-prop-untyped-prop', props.untypedProp)
+      ..addProp('data-prop-custom-key-prop', props.customKeyProp)
+      ..addProp('data-prop-custom-namespace-prop', props.customNamespaceProp)
+      ..addProp('data-prop-custom-key-and-namespace-prop',
+          props.customKeyAndNamespaceProp))('rendered content');
+  },
+  $_TestConfig, // ignore: undefined_identifier
+);
+
 UiFactory<TestProps> Test = uiFunction(
   (props) {
     return (Dom.div()