CPLAT-3873 Function Components

README.md

@@ -853,19 +853,22 @@ that you get for free from OverReact, you're ready to start building your own cu
   import 'package:over_react/over_react.dart';
   part 'foo_component.over_react.g.dart';
 
-  UiFactory<FooProps> Foo = uiFunctionComponent((props) {
-    // Return the rendered component contents here.
-    // The `props` variable is typed; no need for string keys!
-  },
-  // The generated props config will match the factory name.
-  $FooPropsConfig,
-  initStatics: (statics) {
-    statics.defaultProps = (statics.newProps()
-      // Cascade default props here.
-      ..isDisabled = false
-      ..items = []
-    );
-  });
+  UiFactory<FooProps> Foo = uiFunction(
+    (props) {
+      // Set default props using null-aware operators.
+      final isDisabled = props.isDisabled ?? false;
+      final items = props.items ?? [];
+
+      // 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
+  );
 
   mixin FooProps on UiProps {
     // Props go here, declared as fields:

doc/new_boilerplate_migration.md

@@ -702,7 +702,7 @@ Most code within over_react has been updated to use this new boilerplate, includ
 - The Redux sample todo app under [`app/over_react_redux/todo_client/`](../app/over_react_redux/todo_client)
 
 
-## Function Component Boilerplate _(coming soon)_
+## Function Component Boilerplate
 
 ### Function Component Constraints 
 
@@ -727,22 +727,22 @@ import 'package:over_react/over_react.dart';
 
 part 'foo.over_react.g.dart';
 
-UiFactory<FooProps> Foo = uiFunctionComponent(
+UiFactory<FooProps> Foo = uiFunction(
   (props) {
     return 'foo: ${props.foo}'; 
   },
-  $fooPropsConfig, // ignore: undefined_identifier
+  $FooConfig, // ignore: undefined_identifier
 ); 
 
 mixin FooProps on UiProps {
   String foo;
 }
 ```
 
-Here, `uiFunctionComponent` gets a generic parameter of `FooProps` inferred 
+Here, `uiFunction` gets a generic parameter of `FooProps` inferred 
 from the LHS typing, allowing props to be statically typed as `FooProps`.
 
-The generated `$FooPropsConfig` is passed in as an argument, and serves 
+The generated `$FooConfig` is passed in as an argument, and serves 
 as the entrypoint to the generated code. 
 
 #### With Default Props
@@ -755,24 +755,35 @@ same behavior as `defaultProps`, but with the restriction that a given prop
 __must either be nullable or have a default value, but not both__.
 
 ```dart
-UiFactory<FooProps> Foo = uiFunctionComponent(
+UiFactory<FooProps> Foo = uiFunction(
   (props) {
     final foo = props.foo ?? 'default foo value';
 
     return 'foo: $foo'; 
   },
-  $fooPropsConfig, // ignore: undefined_identifier
+  $FooConfig, // ignore: undefined_identifier
 ); 
 ```
 
+#### With UiProps
+
+```dart
+UiFactory<UiProps> Foo = uiFunction(
+  (props) {
+    return 'id: ${props.id}'; 
+  }, 
+  null,
+);
+```
+
 #### With propTypes
 
 ```dart
-UiFactory<FooProps> Foo = uiFunctionComponent(
+UiFactory<FooProps> Foo = uiFunction(
   (props) {
     return 'foo: ${props.foo}'; 
   }, 
-  $fooPropsConfig, // ignore: undefined_identifier
+  $FooConfig, // ignore: undefined_identifier
   getPropTypes: (keyFor) => {
     keyFor((p) => p.foo): (props, info) {
       if (props.foo == 'bar') {
@@ -803,20 +814,50 @@ UiFactory<FooProps> createFooHoc(UiFactory otherFactory) {
   Object closureVariable; 
   // ... 
 
-  final FooHoc = uiFunctionComponent<FooProps>(
+  final FooHoc = uiFunction<FooProps>(
     (props) { 
       return otherFactory()( 
         Dom.div()('closureVariable: ${closureVariable}'), 
         Dom.div()('prop foo: ${props.foo}'), 
       );   
     },
-    $fooPropsConfig, // ignore: undefined_identifier 
+    null,
+    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