Workiva · kealjones-wk · Nov 13, 2019 · Oct 24, 2019 · Oct 24, 2019 · Oct 24, 2019
diff --git a/.travis.yml b/.travis.yml
@@ -17,5 +17,6 @@ before_script:
   - pub run dependency_validator -i build_runner,build_test,build_web_compilers
 
 script:
-  - pub run build_runner test --release -- -p chrome
-  - pub run build_runner test -- -p chrome
+  # TODO once production is above 2.4.1 re-check the `fails-on-2.4.1` tagged tests
+  - pub run build_runner test --release -- -p chrome -x fails-on-241
+  - pub run build_runner test -- -p chrome -x fails-on-241
diff --git a/dart_test.yaml b/dart_test.yaml
@@ -0,0 +1,2 @@
+tags:
+  "fails-on-241":
diff --git a/example/index.html b/example/index.html
@@ -52,6 +52,9 @@ <h2 class="display-5">Use Case / Test Examples</h2>
         <li>
           <a href="js_components/index.html"><code>JsComponents</code> Example</a>
         </li>
+        <li>
+          <a href="test/function_component_test.html"><code>Function Component</code> test</a>
+        </li>
       </ul>
 
     </div>

diff --git a/example/test/function_component_test.dart b/example/test/function_component_test.dart
@@ -0,0 +1,34 @@
+import 'dart:html';
+
+import 'package:react/react.dart' as react;
+import 'package:react/react_dom.dart' as react_dom;
+import 'package:react/react_client.dart';
+
+import 'react_test_components.dart';
+
+void main() {
+  setClientConfiguration();
+  var inputValue = 'World';
+  // TODO: replace this with hooks/useState when they are added.
+  render() {
+    react_dom.render(
+        react.Fragment({}, [
+          react.input(
+            {
+              'defaultValue': inputValue,
+              'onChange': (event) {
+                inputValue = event.currentTarget.value;
+                render();
+              }
+            },
+          ),
+          react.br({}),
+          helloGregFunctionComponent({'key': 'greg'}),
+          react.br({}),
+          helloGregFunctionComponent({'key': 'not greg'}, inputValue)
+        ]),
+        querySelector('#content'));
+  }
+
+  render();
+}
diff --git a/example/test/function_component_test.html b/example/test/function_component_test.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+    <title>React Dart Examples: function component test</title>
+  </head>
+  <body>
+    <div id="content" class="container"></div>
+    <script src="packages/react/react.js"></script>
+    <script src="packages/react/react_dom.js"></script>
+    <script src="function_component_test.dart.js"></script>
+  </body>
+</html>
diff --git a/example/test/react_test_components.dart b/example/test/react_test_components.dart
@@ -283,9 +283,9 @@ class _NewContextProviderComponent extends react.Component2 {
   }
 
   render() {
-    Map provideMap = {'renderCount': this.state['renderCount']};
+    final provideMap = {'renderCount': this.state['renderCount']};
 
-    Map complexValues = {
+    final complexValues = {
       'callback': printMe,
       'dartComponent': newContextRefComponent,
       'map': {
@@ -393,6 +393,16 @@ class _NewContextTypeConsumerComponent extends react.Component2 {
   }
 }
 
+var helloGregFunctionComponent = react.registerFunctionComponent(HelloGreg);
+
+HelloGreg(Map props) {
+  var content = ['Hello Greg!'];
+  if (props['children'].isNotEmpty) {
+    content = ['Hello ' + props['children'].join(' ') + '!'];
+  }
+  return react.Fragment({}, content);
+}
+
 class _Component2TestComponent extends react.Component2 with react.TypedSnapshot<String> {
   get defaultProps => {'defaultProp': true};
 

diff --git a/js_src/_dart_helpers.js b/js_src/_dart_helpers.js
@@ -1,19 +1,25 @@
 /**
  * react-dart JS interop helpers (used by react_client.dart and react_client/js_interop_helpers.dart)
  */
+
 /// Prefix to namespace react-dart symbols
-var _reactDartSymbolPrefix = 'react-dart.';
+const _reactDartSymbolPrefix = 'react-dart.';
+
 /// A global symbol to identify javascript objects owned by react-dart context,
 /// in order to jsify and unjsify context objects correctly.
-var _reactDartContextSymbol = Symbol(_reactDartSymbolPrefix+'context');
+const _reactDartContextSymbol = Symbol(_reactDartSymbolPrefix + 'context');
 
 /// A JS side function to allow Dart to throw an error from JS in order to catch it Dart side.
 /// Used within Component2 error boundry methods to dartify the error argument.
 /// See: https://github.com/dart-lang/sdk/issues/36363
-function _throwErrorFromJS(error){
+function _throwErrorFromJS(error) {
   throw error;
 }
 
+/// A JS variable that can be used with Fart interop in order to force returning a
+/// JavaScript `null`. This prevents dart2js from possibly converting Dart `null` into `undefined`.
+const _jsNull = null;
+
 function _createReactDartComponentClass(dartInteropStatics, componentStatics, jsConfig) {
   class ReactDartComponent extends React.Component {
     constructor(props, context) {
@@ -131,7 +137,7 @@ function _createReactDartComponentClass2(dartInteropStatics, componentStatics, j
   }
 
   // Delete methods that the user does not want to include (such as error boundary event).
-  jsConfig.skipMethods.forEach((method) => {
+  jsConfig.skipMethods.forEach(method => {
     if (ReactDartComponent2[method]) {
       delete ReactDartComponent2[method];
     } else {
@@ -165,4 +171,5 @@ export default {
   _createReactDartComponentClass2,
   _markChildValidated,
   _throwErrorFromJS,
-}
+  _jsNull,
+};
diff --git a/lib/react.dart b/lib/react.dart
@@ -19,7 +19,15 @@ export 'package:react/src/context.dart';
 export 'package:react/src/prop_validator.dart';
 export 'package:react/react_client/react_interop.dart' show forwardRef, createRef;
 
+typedef Error PropValidator<TProps>(TProps props, PropValidatorInfo info);
+
+/// A React component declared using a function that takes in [props] and returns rendered output.
+///
+/// See <https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components>.
+typedef DartFunctionComponent = dynamic Function(Map props);
+
 typedef T ComponentFactory<T extends Component>();
+
 typedef ReactComponentFactoryProxy ComponentRegistrar(ComponentFactory componentFactory,
     [Iterable<String> skipMethods]);
 
@@ -29,6 +37,9 @@ typedef ReactDartComponentFactoryProxy2 ComponentRegistrar2(
   Component2BridgeFactory bridgeFactory,
 });
 
+typedef ReactDartFunctionComponentFactoryProxy FunctionComponentRegistrar(DartFunctionComponent componentFactory,
+    {String displayName});
+
 /// Fragment component that allows the wrapping of children without the necessity of using
 /// an element that adds an additional layer to the DOM (div, span, etc).
 ///
@@ -1210,6 +1221,23 @@ mixin TypedSnapshot<TSnapshot> {
 
 /// Creates a ReactJS virtual DOM instance (`ReactElement` on the client).
 abstract class ReactComponentFactoryProxy implements Function {
+  /// The JS component factory used by this factory to build [ReactElement]s.
+  ///
+  /// Deprecated: Use [React.createElement()] instead and pass in [type] as
+  /// the first argument, followed by `props` and `children`.
+  ///
+  /// Before:
+  /// ```
+  /// YourFactoryProxy.reactComponentFactory(props, children);
+  /// ```
+  ///
+  /// After:
+  /// ```
+  /// React.createElement(YourFactoryProxy.type, props, children);
+  /// ```
+  @Deprecated('6.0.0')
+  ReactJsComponentFactory reactComponentFactory;
+
   /// The type of component created by this factory.
   get type;
 
@@ -1790,6 +1818,32 @@ ComponentRegistrar2 registerComponent2 = (
   throw new Exception('setClientConfiguration must be called before registerComponent.');
 };
 
+/// Registers [componentFactory] on client.
+///
+/// Example:
+/// ```
+/// var myFunctionComponent = registerFunctionComponent((Map props) {
+///   return ['I am a function component', ...props.children];
+/// });
+/// ```
+///
+/// Example with display name:
+/// ```
+/// var myFunctionComponent = registerFunctionComponent((Map props) {
+///   return ['I am a function component', ...props.children];
+/// }, displayName: 'myFunctionComponent');
+/// ```
+/// or with an inferred name from the Dart function
+/// ```
+/// myDartFunctionComponent(Map props) {
+///   return ['I am a function component', ...props.children];
+/// }
+/// var myFunctionComponent = registerFunctionComponent(myDartFunctionComponent);
+/// ```
+FunctionComponentRegistrar registerFunctionComponent = (DartFunctionComponent componentFactory, {String displayName}) {
+  throw new Exception('setClientConfiguration must be called before registerFunctionComponent.');
+};
+
 /// The HTML `<a>` [AnchorElement].
 var a;
 
@@ -2594,9 +2648,15 @@ _createDOMComponents(creator) {
 ///
 /// The arguments are assigned to global variables, and React DOM `Component`s are created by calling
 /// [_createDOMComponents] with [domCreator].
-void setReactConfiguration(domCreator, customRegisterComponent, {ComponentRegistrar2 customRegisterComponent2}) {
+void setReactConfiguration(
+  domCreator,
+  customRegisterComponent, {
+  ComponentRegistrar2 customRegisterComponent2,
+  FunctionComponentRegistrar customRegisterFunctionComponent,
+}) {
   registerComponent = customRegisterComponent;
   registerComponent2 = customRegisterComponent2;
+  registerFunctionComponent = customRegisterFunctionComponent;
   // HTML Elements
   _createDOMComponents(domCreator);
 }
diff --git a/lib/react.js b/lib/react.js
diff --git a/lib/react.js.map b/lib/react.js.map
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,6 +52,9 @@ <h2 class="display-5">Use Case / Test Examples</h2> @@
             <li>
               <a href="js_components/index.html"><code>JsComponents</code> Example</a>
             </li>
+            <li>
+              <a href="test/function_component_test.html"><code>Function Component</code> test</a>
+            </li>
           </ul>
         </div>
@@ Expand Down @@