Merge pull request #265 from cleandart/5.5.0-wip

Release react 5.5.0

Author: aaronlademann-wf

CHANGELOG.md

@@ -1,3 +1,65 @@
+## [5.5.0](https://github.com/cleandart/react-dart/compare/5.4.0...5.5.0)
+
+__New Features__
+
+- 🎉 🎉 🎉 __Support for function components, memo and hooks!!!__ 🎉 🎉 🎉
+
+    Sooooo much work from so many amazing people made this possible, but to summarize: 
+    
+    - [#221] Add support for function components
+    - [#252] Add support for `memo` higher order component
+    - Hooks, hooks, and more hooks!
+        - [#223] useState
+        - [#233] useCallback
+        - [#237] useContext
+        - [#227] useEffect
+        - [#248] useLayoutEffect
+        - [#232] useReducer
+        - [#245] useRef
+        - [#250] useMemo
+        - [#247] useImperativeHandle
+        - [#246] useDebugValue
+
+    <p><br>It works like this...</p>
+    
+    Define the component:
+    ```dart
+    import 'package:react/react.dart' as react;
+    
+    final SomeWidget = react.registerFunctionComponent(_SomeWidget, displayName: 'SomeWidget');
+    
+    _SomeWidget(Map props) {
+      // You can use hooks in here, too!
+      
+      return react.div({}, [
+        // Some children...
+      ]);
+    }
+    ```
+    
+    Render the component _(exact same consumer API as a class-based component)_:
+    ```dart
+    import 'package:react/react_dom.dart' as react_dom;
+    import 'some_widget.dart'; // Where your component is defined
+    
+    main() {
+      final renderedWidget = SomeWidget({
+        // put some props here
+      }, [
+        // put some children here!
+      ]);
+    
+      react_dom.render(renderedWidget, querySelector('#idOfSomeNodeInTheDom'));
+    }
+    ```
+    
+    > Check out all the [function component and hooks examples](https://github.com/cleandart/react-dart/blob/c9a1211d5d77a9e354b864e99ef8f52b60eeff85/example/test/function_component_test.dart) for more information!
+        
+__Fixes / Updates__
+- [#253] Deprecate `setClientConfiguration`.
+    - It is no longer necessary - and can be removed from your implementations
+- [#273] Make `JsBackedMap.values` compatible with MSIE 11
+
 ## [5.4.0](https://github.com/cleandart/react-dart/compare/5.3.0...5.4.0)
 
 __New Features__

README.md

@@ -71,14 +71,10 @@ in the `main` entrypoint of your Dart application.
 ```dart
 import 'dart:html';
 
-import 'package:react/react_client.dart' as react_client;
 import 'package:react/react.dart';
 import 'package:react/react_dom.dart' as react_dom;
 
 main() {
-  // This should be called once at the beginning of the application.
-  react_client.setClientConfiguration();
-
   // Something to render... in this case a simple <div> with no props, and a string as its children.
   var component = div({}, "Hello world!");
 
@@ -137,16 +133,12 @@ var aButton = button({"onClick": (SyntheticMouseEvent event) => print(event)});
 
     import 'dart:html';
 
-    import 'package:react/react_client.dart' as react_client;
     import 'package:react/react.dart';
     import 'package:react/react_dom.dart' as react_dom;
 
     import 'cool_widget.dart';
 
     main() {
-      // This should be called once at the beginning of the application.
-      react_client.setClientConfiguration();
-
       react_dom.render(CoolWidget({}), querySelector('#react_mount_point'));
     }
     ```
@@ -173,16 +165,12 @@ var CoolWidget = registerComponent(() => new CoolWidgetComponent());
 
 import 'dart:html';
 
-import 'package:react/react_client.dart' as react_client;
 import 'package:react/react.dart';
 import 'package:react/react_dom.dart' as react_dom;
 
 import 'cool_widget.dart';
 
 main() {
-  // This should be called once at the beginning of the application.
-  react_client.setClientConfiguration();
-
   react_dom.render(CoolWidget({"text": "Something"}), querySelector('#react_mount_point'));
 }
 ```
@@ -225,16 +213,12 @@ class CoolWidgetComponent extends Component2 {
 
 import 'dart:html';
 
-import 'package:react/react_client.dart' as react_client;
 import 'package:react/react.dart';
 import 'package:react/react_dom.dart' as react_dom;
 
 import 'cool_widget.dart';
 
 void main() {
-  // This should be called once at the beginning of the application.
-  react_client.setClientConfiguration();
-
   react_dom.render(
     myComponent(
         headline: "My custom headline",
@@ -352,7 +336,6 @@ Here is an example of how to use React React.addons.TestUtils. within a Dart tes
 ```dart
 import 'package:test/test.dart';
 import 'package:react/react.dart' as react;
-import 'package:react/react_client.dart' as react_client;
 import 'package:react/react_dom.dart' as react_dom;
 import 'package:react/react_test_utils.dart' as react_test_utils;
 
@@ -372,8 +355,6 @@ class MyTestComponent extends react.Component2 {
 var myTestComponent = react.registerComponent(() => new MyTestComponent());
 
 void main() {
-  react_client.setClientConfiguration();
-
   test('should click button and set span text to "success"', () {
     var component = react_test_utils.renderIntoDocument(myTestComponent({}));
 

dart_test.yaml

@@ -10,3 +10,6 @@ presets:
 
   dartdevc:
     exclude_tags: no-dartdevc
+
+tags:
+  "fails-on-241":

example/geocodes/geocodes.dart

@@ -5,7 +5,6 @@ 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';
 
 /**
  * Hello,
@@ -331,6 +330,5 @@ var geocodesApp = react.registerComponent(() => new _GeocodesApp());
 ///
 /// Select the root of the app and the place in the DOM where it should be mounted.
 void main() {
-  setClientConfiguration();
   react_dom.render(geocodesApp({}), querySelector('#content'));
 }

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>

example/js_components/js_components.dart

@@ -10,8 +10,6 @@ import 'package:react/react_client/react_interop.dart';
 import 'package:react/react_dom.dart' as react_dom;
 
 main() {
-  setClientConfiguration();
-
   var content = IndexComponent({});
 
   react_dom.render(content, querySelector('#content'));

example/test/call_and_nosuchmethod_test.dart

@@ -3,7 +3,6 @@ import "dart:html";
 
 import "package:react/react_dom.dart" as react_dom;
 import "package:react/react.dart" as react;
-import "package:react/react_client.dart";
 
 class _CustomComponent extends react.Component {
   render() {
@@ -14,8 +13,6 @@ class _CustomComponent extends react.Component {
 var customComponent = react.registerComponent(() => new _CustomComponent());
 
 void main() {
-  setClientConfiguration();
-
   react_dom.render(
       react.div({}, [
         react.div({'key': 'noChildren'}),

example/test/context_test.dart

@@ -2,13 +2,10 @@ 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();
-
   react_dom.render(
       react.div({}, [
         react.h1({}, ['React Legacy Context API']),

example/test/false_and_null_test.dart

@@ -3,7 +3,6 @@ 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';
 
 class _Component extends react.Component {
   render() {
@@ -18,8 +17,6 @@ class _Component extends react.Component {
 var component = react.registerComponent(() => new _Component());
 
 void main() {
-  setClientConfiguration();
-
   var content = react.div({}, [
     react.p({}, 'Testing a dynamic return value of "null"...'),
     component({'returnValue': null, 'key': 0}),