React 18.2.0

.editorconfig

@@ -1,6 +1,3 @@
-# top-most EditorConfig file
-root = true
-
 [*.dart]
 max_line_length = 120
 

CHANGELOG.md

@@ -255,13 +255,14 @@ __New Features__
     import 'some_widget.dart'; // Where your component is defined
 
     main() {
+      final root = react_dom.createRoot(querySelector('#idOfSomeNodeInTheDom'));
       final renderedWidget = SomeWidget({
         // put some props here
       }, [
         // put some children here!
       ]);
 
-      react_dom.render(renderedWidget, querySelector('#idOfSomeNodeInTheDom'));
+      root.render(renderedWidget);
     }
     ```
 

README.md

@@ -1,7 +1,7 @@
 # Dart wrapper for [React JS](https://reactjs.org/)
 
 [![Pub](https://img.shields.io/pub/v/react.svg)](https://pub.dev/packages/react)
-![ReactJS v17.0.1](https://img.shields.io/badge/React_JS-v17.0.1-green.svg)
+![ReactJS v18.0.0](https://img.shields.io/badge/React_JS-v18.0.0-green.svg)
 [![Dart CI](https://github.com/Workiva/react-dart/workflows/Dart%20CI/badge.svg?branch=master)](https://github.com/Workiva/react-dart/actions?query=workflow%3A%22Dart+CI%22+branch%3Amaster)
 [![React Dart API Docs](https://img.shields.io/badge/api_docs-react-blue.svg)](https://pub.dev/documentation/react/latest/)
 
@@ -81,7 +81,8 @@ main() {
   var component = div({}, "Hello world!");
 
   // Render it into the mount node we created in our .html file.
-  react_dom.render(component, querySelector('#react_mount_point'));
+  final root = react_dom.createRoot(querySelector('#react_mount_point'));
+  root.render(component);
 }
 ```
 
@@ -141,7 +142,8 @@ var aButton = button({"onClick": (SyntheticMouseEvent event) => print(event)});
     import 'cool_widget.dart';
 
     main() {
-      react_dom.render(CoolWidget({}), querySelector('#react_mount_point'));
+      final root = react_dom.createRoot(querySelector('#react_mount_point'));
+      root.render(CoolWidget({}));
     }
     ```
 
@@ -173,7 +175,8 @@ import 'package:react/react_dom.dart' as react_dom;
 import 'cool_widget.dart';
 
 main() {
-  react_dom.render(CoolWidget({"text": "Something"}), querySelector('#react_mount_point'));
+  final root = react_dom.createRoot(querySelector('#react_mount_point'));
+  root.render(CoolWidget({"text": "Something"}));
 }
 ```
 
@@ -221,13 +224,13 @@ import 'package:react/react_dom.dart' as react_dom;
 import 'cool_widget.dart';
 
 void main() {
-  react_dom.render(
+  final root = react_dom.createRoot(querySelector('#react_mount_point'));
+  root.render(
     myComponent(
         headline: "My custom headline",
         text: "My custom text",
         counter: 3,
-    ),
-    querySelector('#react_mount_point')
+    )
   );
 }
 ```
@@ -375,7 +378,7 @@ void main() {
     expect(spanNode.text, equals('testing...'));
 
     // Click the button and trigger the onClick event
-    react_test_utils.Simulate.click(buttonNode);
+    react_dom.ReactTestUtils.act(buttonNode.click);
 
     // Span text should change to 'success'
     expect(spanNode.text, equals('success'));
@@ -404,8 +407,6 @@ So, we use a line length of 120 instead.
 dart run build_runner test --release -- --preset dart2js
 ```
 
-> NOTE: When using Dart SDK < 2.14.0, use `--preset dart2js-legacy` instead.
-
 #### Dart Dev Compiler ("DDC")
 
 ```bash

build.yaml

@@ -1,6 +1,25 @@
 targets:
   $default:
     builders:
+      test_html_builder:
+        options:
+          templates:
+            "test/js_builds/templates/js_dev.html":
+              - "test/js_builds/js_dev_test.dart"
+            "test/js_builds/templates/js_dev_with_addons.html":
+              - "test/js_builds/js_dev_with_addons_test.dart"
+            "test/js_builds/templates/js_prod_combined.html":
+              - "test/js_builds/js_prod_combined_test.dart"
+            "test/js_builds/templates/js_prod.html":
+              - "test/js_builds/js_prod_test.dart"
+            "test/factory/_factory_test_template.html":
+              - "test/factory/**_test.dart"
+            "test/lifecycle/_react_lifecycle_test_template.html":
+              - "test/lifecycle/**_test.dart"
+            "test/react_client/_react_client_test_template.html":
+              - "test/react_client/**_test.dart"
+            "test/_react_test_template.html":
+              - "test/*_test.dart"
       mockito:mockBuilder:
         # Scope only to files declaring mocks, for performance.
         generate_for:

dart_test.yaml

@@ -8,17 +8,11 @@ platforms:
 concurrency: 1
 
 presets:
-  dart2js-legacy:
-    exclude_tags: no-dart2js
-
-  dartdevc-legacy:
-    exclude_tags: no-dartdevc
-
   dart2js:
-    exclude_tags: "no-dart2js || no-sdk-2-14-plus"
+    exclude_tags: no-dart2js
 
   dartdevc:
-    exclude_tags: "no-dartdevc || no-sdk-2-14-plus"
+    exclude_tags: no-dartdevc
 
 tags:
   # Variadic children tests of >5 children that fail in Dart 2.7 for an unknown reason, seemingly an SDK bug.

example/geocodes/geocodes.dart

@@ -1,4 +1,3 @@
-// ignore_for_file: deprecated_member_use_from_same_package
 import 'dart:async';
 import 'dart:convert';
 import 'dart:html';
@@ -26,7 +25,7 @@ import 'package:react/react_dom.dart' as react_dom;
 /// This is the first custom `Component`.
 ///
 /// It is just an HTML `<tr>` element displaying a single API response to the user.
-class _GeocodesResultItem extends react.Component {
+class _GeocodesResultItem extends react.Component2 {
   /// The only function you must implement in the custom component is [render].
   ///
   /// Every `Component` has a map of properties called `props`. It can be specified during creation.
@@ -46,11 +45,11 @@ class _GeocodesResultItem extends react.Component {
 /// shortly.
 ///
 /// This is the only correct way to create a `Component`. Do not use the constructor!
-var geocodesResultItem = react.registerComponent(() => _GeocodesResultItem());
+var GeocodesResultItem = react.registerComponent2(() => _GeocodesResultItem());
 
 /// In this component we'll build an HTML `<table>` element full of the `<tr>` elements generated by
 /// [_GeocodesResultItem]
-class _GeocodesResultList extends react.Component {
+class _GeocodesResultList extends react.Component2 {
   @override
   render() {
     // Built-in HTML DOM components also have props - which correspond to HTML element attributes.
@@ -81,7 +80,7 @@ class _GeocodesResultList extends react.Component {
           // The second argument contains the body of the component (as you have already seen).
           //
           // It can be a String, a Component or an Iterable.
-          props['data'].map((item) => geocodesResultItem({
+          props['data'].map((item) => GeocodesResultItem({
                 'key': item['formatted_address'],
                 'lat': item['geometry']['location']['lat'],
                 'lng': item['geometry']['location']['lng'],
@@ -93,7 +92,7 @@ class _GeocodesResultList extends react.Component {
   }
 }
 
-var geocodesResultList = react.registerComponent(() => _GeocodesResultList());
+var GeocodesResultList = react.registerComponent2(() => _GeocodesResultList());
 
 /// In this `Component` we'll build a search form.
 ///
@@ -102,11 +101,11 @@ var geocodesResultList = react.registerComponent(() => _GeocodesResultList());
 /// > The functions can be `Component` parameters _(handy for callbacks)_
 ///
 /// > The DOM [Element]s can be accessed using `ref`s.
-class _GeocodesForm extends react.Component {
-  var searchInputInstance;
+class _GeocodesForm extends react.Component2 {
+  final searchInputRef = react.createRef<InputElement>();
 
   @override
-  getInitialState() => {
+  get initialState => {
         'value': '',
       };
 
@@ -134,7 +133,7 @@ class _GeocodesForm extends react.Component {
           'value': state['value'],
           'onChange': handleChange,
           // Input is referenced to access it's value
-          'ref': (searchInputInstance) => this.searchInputInstance = searchInputInstance,
+          'ref': searchInputRef,
         }),
         react.span({
           'key': 'spacer',
@@ -156,7 +155,7 @@ class _GeocodesForm extends react.Component {
   /// Handle form submission via `props.onSubmit`
   onFormSubmit(react.SyntheticEvent event) {
     event.preventDefault();
-    final inputElement = react_dom.findDOMNode(searchInputInstance);
+    final inputElement = searchInputRef.current!;
     // The input's value is accessed.
     final address = inputElement.value;
     inputElement.value = '';
@@ -165,10 +164,10 @@ class _GeocodesForm extends react.Component {
   }
 }
 
-var geocodesForm = react.registerComponent(() => _GeocodesForm());
+var GeocodesForm = react.registerComponent2(() => _GeocodesForm());
 
 /// Renders an HTML `<li>` to be used as a child within the [_GeocodesHistoryList].
-class _GeocodesHistoryItem extends react.Component {
+class _GeocodesHistoryItem extends react.Component2 {
   reload(e) {
     props['reloader'](props['query']);
   }
@@ -187,12 +186,12 @@ class _GeocodesHistoryItem extends react.Component {
   }
 }
 
-var geocodesHistoryItem = react.registerComponent(() => _GeocodesHistoryItem());
+var GeocodesHistoryItem = react.registerComponent2(() => _GeocodesHistoryItem());
 
 /// Renders the "history list"
 ///
 /// NOTE: It just passes the callback from the parent.
-class _GeocodesHistoryList extends react.Component {
+class _GeocodesHistoryList extends react.Component2 {
   @override
   render() {
     return react.div({}, [
@@ -201,7 +200,7 @@ class _GeocodesHistoryList extends react.Component {
         {
           'key': 'list',
         },
-        List.from((props['data'] as Map).keys.map((key) => geocodesHistoryItem({
+        List.from((props['data'] as Map).keys.map((key) => GeocodesHistoryItem({
               'key': key,
               'query': props['data'][key]['query'],
               'status': props['data'][key]['status'],
@@ -212,7 +211,7 @@ class _GeocodesHistoryList extends react.Component {
   }
 }
 
-var geocodesHistoryList = react.registerComponent(() => _GeocodesHistoryList());
+var GeocodesHistoryList = react.registerComponent2(() => _GeocodesHistoryList());
 
 /// The root `Component` of our application.
 ///
@@ -232,9 +231,9 @@ var geocodesHistoryList = react.registerComponent(() => _GeocodesHistoryList());
 ///
 /// When the request is sent, it has `pending` status in the history. This changes to `OK` or `error` when the answer
 /// _(or timeout)_ comes. If the new request is sent meanwhile, the old one is cancelled.
-class _GeocodesApp extends react.Component {
+class _GeocodesApp extends react.Component2 {
   @override
-  getInitialState() => {
+  get initialState => {
         'shown_addresses': [], // Data from last query.
         'history': {} // Map of past queries.
       };
@@ -302,17 +301,17 @@ class _GeocodesApp extends react.Component {
   render() {
     return react.div({}, [
       react.h1({'key': '1'}, 'Geocode resolver'),
-      geocodesResultList({
+      GeocodesResultList({
         'key': '2',
         // The state values are passed to the children as the properties.
         'data': state['shown_addresses']
       }),
-      geocodesForm({
+      GeocodesForm({
         'key': '3',
         // `newQuery` is the final callback of the button click.
         'submitter': newQuery
       }),
-      geocodesHistoryList({
+      GeocodesHistoryList({
         'key': '4',
         'data': state['history'],
         // `newQuery` is the final callback of the button click.
@@ -322,11 +321,12 @@ class _GeocodesApp extends react.Component {
   }
 }
 
-var geocodesApp = react.registerComponent(() => _GeocodesApp());
+var GeocodesApp = react.registerComponent2(() => _GeocodesApp());
 
 /// And finally, a few magic commands to wire it all up!
 ///
 /// Select the root of the app and the place in the DOM where it should be mounted.
 void main() {
-  react_dom.render(geocodesApp({}), querySelector('#content'));
+  final root = react_dom.createRoot(querySelector('#content')!);
+  root.render(GeocodesApp({}));
 }

example/js_components/js_components.dart

@@ -6,13 +6,15 @@ import 'dart:html';
 import 'package:js/js.dart';
 import 'package:react/react.dart' as react;
 import 'package:react/react_client.dart';
-import 'package:react/react_client/react_interop.dart';
+import 'package:react/react_client/react_interop.dart' show ReactClass;
 import 'package:react/react_dom.dart' as react_dom;
 
 main() {
   final content = IndexComponent({});
 
-  react_dom.render(content, querySelector('#content'));
+  final root = react_dom.createRoot(querySelector('#content')!);
+
+  root.render(react.StrictMode({}, content));
 }
 
 var IndexComponent = react.registerComponent2(() => _IndexComponent());
@@ -104,7 +106,7 @@ final SimpleCustom = ReactJsComponentFactoryProxy(_SimpleCustomComponent);
 
 /// JS interop wrapper class for the component,
 /// allowing us to interact with component instances
-/// made available via refs or [react_dom.render] calls.
+/// made available via refs or render calls.
 ///
 /// This is optional, as you won't always need to access the component's API.
 @JS('_SimpleCustomComponent')

example/suspense/suspense.dart

@@ -12,7 +12,7 @@ import './simple_component.dart' deferred as simple;
 main() {
   final content = wrapper({});
 
-  react_dom.render(content, querySelector('#content'));
+  react_dom.render(content, querySelector('#content')!);
 }
 
 final lazyComponent = react.lazy(() async {