CPLAT-3873 Function Components

README.md

@@ -861,6 +861,10 @@ that you get for free from OverReact, you're ready to start building your own cu
 
       // Return the rendered component contents here.
       // The `props` variable is typed; no need for string keys!
+      return Fragment()(
+        Dom.div()(items),
+        (Dom.button()..disabled = isDisabled)('Click me!'),
+      );
     },
     // The generated props config will match the factory name.
     $FooConfig, // ignore: undefined_identifier

doc/new_boilerplate_migration.md

@@ -765,6 +765,19 @@ UiFactory<FooProps> Foo = uiFunction(
 ); 
 ```
 
+#### With UiProps
+
+```dart
+UiFactory<UiProps> Foo = uiFunction(
+  (props) {
+    return 'id: ${props.id}'; 
+  }, 
+  FunctionComponentConfig(
+    displayName: 'Foo',
+  ),
+);
+```
+
 #### With propTypes
 
 ```dart
@@ -810,13 +823,45 @@ UiFactory<FooProps> createFooHoc(UiFactory otherFactory) {
         Dom.div()('prop foo: ${props.foo}'), 
       );   
     },
-    $FooConfig, // ignore: undefined_identifier 
+    FunctionComponentConfig(
+        displayName: 'FooHoc',
+        propsFactory: PropsFactory.fromUiFactory(Foo),
+    ),
   ); 
 
   return FooHoc; 
 } 
 ```
 
+#### With forwardRef
+
+```dart
+mixin FooProps on UiProps {
+  Ref forwardedRef;
+  Function doSomething;
+}
+
+UiFactory<FooProps> Foo = forwardRef<FooProps>((props, ref) {
+  return (_Foo()
+    ..forwardedRef = ref
+    ..doSomething = props.doSomething
+  )();
+})(_Foo);
+
+UiFactory<FooProps> _Foo = uiFunction(
+  (props) {
+    return Fragment()(
+      Dom.div()('Some text.'),
+      (Dom.button()
+        ..ref = props.forwardedRef 
+        ..onClick = props.doSomething
+      )('Click me!'),
+    );
+  },
+  $_FooConfig, // ignore: undefined_identifier
+);
+```
+
 ## Upgrading Existing Code
 
 To update your repository to the new boilerplate, you can use 

example/builder/src/function_component.dart

@@ -18,25 +18,35 @@ import 'package:over_react/over_react.dart';
 part 'function_component.over_react.g.dart';
 
 mixin BasicProps on UiProps {
+  Ref forwardedRef;
   String basicProp;
   String basic1;
   String basic2;
   String basic3;
   String basic4;
 }
 
-UiFactory<BasicProps> Basic = uiFunction((props) {
+UiFactory<BasicProps> Basic = forwardRef<BasicProps>((props, ref) {
+  return (_Basic()
+    ..forwardedRef = ref
+    ..addProps(props))();
+})(_Basic);
+
+UiFactory<BasicProps> _Basic = uiFunction(
+  (props) {
     return Fragment()(
       Dom.div()('prop id: ${props.id}'),
       Dom.div()('default prop testing: ${props.basicProp}'),
       Dom.div()('default prop testing: ${props.basic1}'),
-      Dom.div()(props.basic3, 'children: ${props.children}'),
+      (Dom.div()..ref = props.forwardedRef)(
+          props.basic3, 'children: ${props.children}'),
     );
   },
-  $BasicConfig, // ignore: undefined_identifier
+  $_BasicConfig, // ignore: undefined_identifier
 );
 
-final Simple = uiFunction<BasicProps>((props) {
+final Simple = uiFunction<BasicProps>(
+  (props) {
     final basicProp = props.basicProp ?? 'basicProp';
     final basic1 = props.basic1 ?? 'basic1';
 
@@ -45,17 +55,30 @@ final Simple = uiFunction<BasicProps>((props) {
       Dom.div()('default prop testing: $basicProp'),
       Dom.div()('default prop testing: $basic1'),
       Dom.div()(null, props.basic4, 'children: ${props.children}'),
+      (Foo()..content = props.basic2)(),
     );
   },
   $SimpleConfig, // ignore: undefined_identifier
 );
 
+mixin FooProps on UiProps {
+  String content;
+}
+
+final Foo = uiFunction<FooProps>(
+  (props) => Dom.div()('forwarded prop: ${props.content}'),
+  $FooConfig, // ignore: undefined_identifier
+);
+
 ReactElement functionComponentContent() {
   GenericFactory(props) {
     return Dom.div()('prop id: ${props.id}');
   }
 
-  final genericFactory = uiFunction<UiProps>(GenericFactory, null);
+  final genericFactory = uiFunction<UiProps>(
+    GenericFactory,
+    FunctionComponentConfig(),
+  );
 
   final basicFactory = uiFunction<BasicProps>(
     (props) {
@@ -64,19 +87,26 @@ ReactElement functionComponentContent() {
         Dom.div()('prop basic1: ${props.basic1}'),
       );
     },
-    null,
-    propsFactory: PropsFactory.fromUiFactory(Basic),
-    displayName: 'basicFactory',
+    FunctionComponentConfig(
+      propsFactory: PropsFactory.fromUiFactory(Basic),
+      displayName: 'basicFactory',
+    )
   );
 
+  // Access the div element later using `divRef.current`.
+  Ref divRef = createRef();
+
   return Fragment()(
     (genericFactory()..id = '1')(),
     (basicFactory()
       ..id = '2'
       ..basic1 = 'basic1 value')(),
     (Basic()
+      ..ref = divRef
       ..id = '3'
       ..basicProp = 'basicProp')(),
-    (Simple()..id = '4')(),
+    (Simple()
+      ..id = '4'
+      ..basic2 = 'basic2 value')(),
   );
 }

lib/src/builder/codegen.dart

@@ -35,10 +35,7 @@ class ImplGenerator {
   void generate(BoilerplateDeclaration declaration) {
     switch (declaration.type) {
       case DeclarationType.propsMapViewOrFunctionComponentDeclaration:
-        // Generated code only needed for props config.
-        if ((declaration as PropsMapViewOrFunctionComponentDeclaration).props != null) {
-          _generatePropsMapViewOrFunctionComponent(declaration);
-        }
+        _generatePropsMapViewOrFunctionComponent(declaration);
         break;
       case DeclarationType.classComponentDeclaration:
         _generateClassComponent(declaration);