Merge pull request #414 from Workiva/FED-3283-dual-support

FED-3283: React 18 js files

Author: btr-rmconsole-3[bot]

.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>