FED-3283: React 18 js files

.editorconfig

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

.github/workflows/dart_ci.yml

@@ -32,6 +32,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
+        react: [17, 18]
         sdk: [2.19.6, stable]
     steps:
       - uses: actions/checkout@v2
@@ -49,6 +50,11 @@ jobs:
           if [[ "$DART_VERSION" =~ ^3 ]]; then
             ./tool/delete_dart_2_only_files.sh
           fi
+      - name: Switch to React 17 Test HTML
+        if: ${{ matrix.react == 17 }}
+        run: |
+          mv test/templates/html_template.html test/templates/html_template-old.html
+          mv test/templates/html_template-react17.html test/templates/html_template.html
 
       - id: install
         name: Install dependencies
@@ -68,12 +74,12 @@ jobs:
 
       - name: Run tests (DDC)
         run: |
-          dart run build_runner test --delete-conflicting-outputs -- --preset dartdevc
+          dart run build_runner test --delete-conflicting-outputs -- --preset dartdevc --preset=react${{ matrix.react }}
         if: always() && steps.install.outcome == 'success'
         timeout-minutes: 8
 
       - name: Run tests (dart2js)
         run: |
-          dart run build_runner test --delete-conflicting-outputs --release -- --preset dart2js
+          dart run build_runner test --delete-conflicting-outputs --release -- --preset dart2js --preset=react${{ matrix.react }}
         if: always() && steps.install.outcome == 'success'
-        timeout-minutes: 8
+        timeout-minutes: 8

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.2.0](https://img.shields.io/badge/React_JS-18.2.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/)
 
@@ -40,12 +40,29 @@ If you are not familiar with the ReactJS library, read this [react tutorial](htt
 
 #### HTML
 
-In a `.html` file, include the native javascript `react` and `react_dom` libraries
+In a `.html` file, include the javascript libraries
 _(provided with this library for compatibility reasons)_ within your `.html` file,
 and also add an element with an `id` to mount your React component.
 
-Lastly, add the `.js` file that Dart will generate. The file will be the name of the `.dart` file that
-contains your `main` entrypoint, with `.js` at the end.
+This library is in the process of migrating to React 18, but while this is happening it will continue to support both React 17 and React 18. The React 17 js files are deprecated but available to ease migration and will be removed at some point in a future major version.
+
+##### React 18
+| Mode        | Library          | JS File Name                                |
+|-------------|------------------|---------------------------------------------|
+| Development | React & ReactDOM | packages/react/js/react.dev.js              |
+| Production  | React & ReactDOM | packages/react/js/react.min.js              |
+
+##### React 17 (Deprecated)
+| Mode        | Library          | JS File Name                                |
+|-------------|------------------|---------------------------------------------|
+| Development | React            | packages/react/react.js                     |
+| Development | ReactDOM         | packages/react/react_dom.js                 |
+| Production  | React & ReactDOM | packages/react/react_with_react_dom_prod.js |
+| Production  | React            | packages/react/react_prod.js                |
+| Production  | ReactDOM         | packages/react/react_dom_prod.js            |
+
+Lastly, add the `.js` file that Dart will generate. The file will be the name of the `.dart` file that contains your `main` entrypoint, with `.js` at the end.
+
 
 ```html
 <html>
@@ -55,15 +72,14 @@ contains your `main` entrypoint, with `.js` at the end.
   <body>
     <div id="react_mount_point">Here will be react content</div>
 
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
     <script defer src="your_dart_file_name.dart.js"></script>
   </body>
 </html>
 ```
 
-> __Note:__ When serving your application in production, use `packages/react/react_with_react_dom_prod.js`
-  file instead of the un-minified `react.js` / `react_dom.js` files shown in the example above.
+> __Note:__ When serving your application in production, use `packages/react/js/react.min.js`
+  file instead of the un-minified `react.dev.js` shown in the example above.
 
 #### Dart App
 
@@ -386,15 +402,15 @@ void main() {
 
 ## Contributing
 
-Format using 
+Format using
 ```bash
 dart format -l 120 .
 ```
 
-While we'd like to adhere to the recommended line length of 80, it's too short for much of the code 
+While we'd like to adhere to the recommended line length of 80, it's too short for much of the code
 repo written before a formatter was use, causing excessive wrapping and code that's hard to read.
 
-So, we use a line length of 120 instead. 
+So, we use a line length of 120 instead.
 
 ### Running Tests
 

build.yaml

@@ -1,10 +1,11 @@
 targets:
   $default:
     builders:
-      mockito:mockBuilder:
-        # Scope only to files declaring mocks, for performance.
-        generate_for:
-          - test/mockito.dart
+      test_html_builder:
+        options:
+          templates:
+            "test/templates/html_template.html":
+              - "test/**_test.dart"
       build_web_compilers|entrypoint:
         # These are globs for the entrypoints you want to compile.
         generate_for:

dart_test.yaml

@@ -8,20 +8,21 @@ platforms:
 concurrency: 1
 
 presets:
-  dart2js-legacy:
+  dart2js:
     exclude_tags: no-dart2js
 
-  dartdevc-legacy:
+  dartdevc:
     exclude_tags: no-dartdevc
 
-  dart2js:
-    exclude_tags: "no-dart2js || no-sdk-2-14-plus"
+  react18:
+    exclude_tags: react-17
 
-  dartdevc:
-    exclude_tags: "no-dartdevc || no-sdk-2-14-plus"
+  react17:
+    exclude_tags: react-18
 
 tags:
   # Variadic children tests of >5 children that fail in Dart 2.7 for an unknown reason, seemingly an SDK bug.
   # These tests pass in later Dart SDKs, so we ignore them when running in 2.7.
   "dart-2-7-dart2js-variadic-issues":
-
+  "react-17":
+  "react-18":

example/geocodes/geocodes.html

@@ -32,9 +32,8 @@
     <div class="container" id="content"></div>
 
     <!-- Load React, your application code and Dart -->
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
     <script defer src="geocodes.dart.js"></script>
-    
+
   </body>
 </html>

example/js_components/index.html

@@ -16,8 +16,7 @@
 
     <div id="content"></div>
 
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
     <script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

example/suspense/index.html

@@ -16,8 +16,7 @@
 
     <div id="content"></div>
 
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
 
     <!-- Where the JS React components are declared. -->
     <script defer src="suspense.dart.js"></script>

example/test/call_and_nosuchmethod_test.html

@@ -12,10 +12,9 @@
   <body>
     <div id="content" class="container"></div>
 
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
     <script defer src="call_and_nosuchmethod_test.dart.js"></script>
     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
-    
+
   </body>
 </html>

example/test/context_test.html

@@ -10,8 +10,7 @@
   </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="packages/react/js/react.dev.js"></script>
     <script src="context_test.dart.js"></script>
   </body>
 </html>

example/test/error_boundary_test.html

@@ -10,8 +10,7 @@
   </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="packages/react/js/react.dev.js"></script>
     <script src="error_boundary_test.dart.js"></script>
   </body>
 </html>

example/test/false_and_null_test.html

@@ -10,8 +10,7 @@
   </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="packages/react/js/react.dev.js"></script>
     <script type="application/dart" src="false_and_null_test.dart"></script>
     <script src="packages/browser/dart.js"></script>
   </body>

example/test/function_component_test.html

@@ -10,8 +10,7 @@
   </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="packages/react/js/react.dev.js"></script>
     <script src="function_component_test.dart.js"></script>
   </body>
 </html>

example/test/get_dom_node_test.html

@@ -12,10 +12,9 @@
   <body>
     <div id="content" class="container"></div>
 
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
     <script defer src="get_dom_node_test.dart.js"></script>
     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
-    
+
   </body>
 </html>

example/test/order_test.html

@@ -12,10 +12,9 @@
   <body>
     <div id="content" class="container"></div>
 
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
     <script defer src="order_test.dart.js"></script>
     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
-    
+
   </body>
 </html>

example/test/react_test.html

@@ -17,10 +17,9 @@
   <body>
       <!--  Generated by react_server_test.dart to check if react "infect" DOM by it's own syntetic DOM. -->
     <div id="content" class="container"><div data-reactid=".r[1xv2o]" data-react-checksum="-1756372316"><div data-reactid=".r[1xv2o].0"><input value="World" data-reactid=".r[1xv2o].0.0"><span data-reactid=".r[1xv2o].0.1"><span data-reactid=".r[1xv2o].0.1.0">Hello World!</span></span></div><div data-reactid=".r[1xv2o].1"><button data-reactid=".r[1xv2o].1.0">addItem</button><ul data-reactid=".r[1xv2o].1.1"><li data-reactid=".r[1xv2o].1.1.$0">0</li><li data-reactid=".r[1xv2o].1.1.$1">1</li><li data-reactid=".r[1xv2o].1.1.$2">2</li><li data-reactid=".r[1xv2o].1.1.$3">3</li></ul></div><div data-reactid=".r[1xv2o].2"><label class="not-striked" data-reactid=".r[1xv2o].2.0">do the dishes</label><input type="checkbox" value="false" data-reactid=".r[1xv2o].2.1"></div></div>
-</div>
+    </div>
 
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
     <script defer src="react_test.dart.js"></script>
     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
 

example/test/react_test_components.dart

@@ -327,8 +327,8 @@ class _NewContextProviderComponent extends react.Component2 {
 
     final newContextRefComponentProps = {
       'key': 'ref2',
-      'ref': (ref) {
-        componentRef = ref as _NewContextRefComponent;
+      'ref': (_NewContextRefComponent? ref) {
+        componentRef = ref;
       }
     };
 
@@ -442,9 +442,9 @@ class _Component2TestComponent extends react.Component2 with react.TypedSnapshot
   @override
   getSnapshotBeforeUpdate(nextProps, prevState) {
     if ((prevState['items'] as List).length > (state['items'] as List).length) {
-      return 'removed ' + (prevState['items'].last as List).toString();
+      return 'removed ' + prevState['items'].last.toString();
     } else {
-      return 'added ' + (state['items'].last as List).toString();
+      return 'added ' + state['items'].last.toString();
     }
   }
 

example/test/ref_test.html

@@ -12,10 +12,9 @@
   <body>
     <div id="content" class="container"></div>
 
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
     <script defer src="ref_test.dart.js"></script>
     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
-    
+
   </body>
 </html>

example/test/speed_test.html

@@ -12,10 +12,9 @@
   <body>
     <div id="content" class="container"></div>
 
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
     <script defer src="speed_test.dart.js"></script>
     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
-    
+
   </body>
 </html>

example/test/unmount_test.html

@@ -19,10 +19,9 @@
       <div id="content"></div>
     </div>
 
-    <script src="packages/react/react.js"></script>
-    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react/js/react.dev.js"></script>
     <script defer src="unmount_test.dart.js"></script>
     <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
-    
+
   </body>
 </html>

js_src/dart_env_dev.mjs

@@ -0,0 +1,12 @@
+// Intercept console.error calls and silence warnings for each react_dom.render call,
+// until at the very least createRoot is made available in react-dart and RTL.
+const oldConsoleError = console.error;
+console.error = function() {
+  const firstArg = arguments[0];
+  // Use startsWith instead of indexOf as a small optimization for when large strings are logged.
+  if (typeof firstArg === 'string' && firstArg.startsWith('Warning: ReactDOM.render is no longer supported in React 18.')) {
+    // Suppress the error.
+  } else {
+    oldConsoleError.apply(console, arguments);
+  }
+}