CPLAT-3873 Function Components

README.md

@@ -846,6 +846,30 @@ that you get for free from OverReact, you're ready to start building your own cu
       }
     }
     ```
+
+* #### Function Component Boilerplate
+
+  ```dart
+  import 'package:over_react/over_react.dart';
+  part 'foo_component.over_react.g.dart';
+
+  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!
+  },
+  // The generated props config will match the factory name.
+  $FooPropsConfig);
+
+  mixin FooProps on UiProps {
+    // Props go here, declared as fields:
+    bool isDisabled;
+    Iterable<String> items;
+  }
+  ```
 
 &nbsp;
 

doc/new_boilerplate_migration.md

@@ -727,19 +727,19 @@ 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
+  $FooPropsConfig, // 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 
@@ -755,24 +755,24 @@ 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
+  $FooPropsConfig, // ignore: undefined_identifier
 ); 
 ```
 
 #### With propTypes
 
 ```dart
-UiFactory<FooProps> Foo = uiFunctionComponent(
+UiFactory<FooProps> Foo = uiFunction(
   (props) {
     return 'foo: ${props.foo}'; 
   }, 
-  $fooPropsConfig, // ignore: undefined_identifier
+  $FooPropsConfig, // ignore: undefined_identifier
   getPropTypes: (keyFor) => {
     keyFor((p) => p.foo): (props, info) {
       if (props.foo == 'bar') {
@@ -803,14 +803,14 @@ 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 
+    $FooPropsConfig, // ignore: undefined_identifier 
   ); 
 
   return FooHoc; 

example/builder/main.dart

@@ -22,6 +22,7 @@ import './src/basic.dart';
 import './src/basic_library.dart';
 import './src/generic_inheritance_sub.dart';
 import './src/generic_inheritance_super.dart';
+import './src/function_component.dart' as function;
 
 main() {
   setClientConfiguration();
@@ -52,6 +53,8 @@ main() {
           ..subProp = 'sub prop part of lib'
           ..superProp = 'super prop part of lib'
         )(),
+        Dom.h3()('Function component:'),
+        function.functionComponentContent(),
         Dom.h3()('getDefaultProps via component factories'),
         componentConstructorsByName.keys.map((name) => Dom.div()(
           'new $name()',

example/builder/src/function_component.dart

@@ -0,0 +1,79 @@
+// Copyright 2020 Workiva Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import 'package:over_react/over_react.dart';
+import 'package:react/react_client.dart';
+import 'package:react/react_client/react_interop.dart';
+
+// ignore_for_file: uri_has_not_been_generated
+part 'function_component.over_react.g.dart';
+
+mixin BasicProps on UiProps {
+  String basicProp;
+  String basic1;
+  String basic2;
+  String basic3;
+  String basic4;
+}
+
+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}'),
+  );
+}, $BasicPropsConfig);
+
+final Simple = uiFunction<BasicProps>((props) {
+  final basicProp = props.basicProp ?? 'basicProp';
+  final basic1 = props.basic1 ?? 'basic1';
+
+  return Fragment()(
+    Dom.div()('prop id: ${props.id}'),
+    Dom.div()('default prop testing: $basicProp'),
+    Dom.div()('default prop testing: $basic1'),
+    Dom.div()(null, props.basic4, 'children: ${props.children}'),
+  );
+}, $SimplePropsConfig);
+
+ReactElement functionComponentContent() {
+  GenericFactory(props) {
+    return Dom.div()('prop id: ${props.id}');
+  }
+  final genericFactory = uiFunction<UiProps>(GenericFactory, null);
+
+  final basicFactory = uiFunction<BasicProps>(
+    (props) {
+      return Fragment()(
+        Dom.div()('prop id: ${props.id}'),
+        Dom.div()('prop basic1: ${props.basic1}'),
+      );
+    },
+    null,
+    propsFactory: PropsFactory.fromUiFactory(Basic),
+    displayName: 'basicFactory',
+  );
+
+  return Fragment()(
+    (genericFactory()..id = '1')(),
+    (basicFactory()
+      ..id = '2'
+      ..basic1 = 'basic1 value')(),
+    (Basic()
+      ..id = '3'
+      ..basicProp = 'basicProp')(),
+    (Simple()..id = '4')(),
+  );
+}

lib/over_react.dart

@@ -61,6 +61,7 @@ export 'src/component_declaration/component_base_2.dart' show
     UiStatefulMixin2;
 export 'src/component_declaration/built_redux_component.dart';
 export 'src/component_declaration/flux_component.dart';
+export 'src/component_declaration/function_component.dart';
 export 'src/util/character_constants.dart';
 export 'src/util/class_names.dart';
 export 'src/util/constants_base.dart';

lib/src/builder/codegen.dart

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