Skip to content

Commit 203659a

Browse files
btr-rmconsole-3[bot]btr-rmconsole-3[bot]
authored
Merge pull request #414 from Workiva/FED-3283-dual-support
FED-3283: React 18 js files
2 parents 7751c49 + b9965ca commit 203659a

File tree

92 files changed

+29849
-4754
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+29849
-4754
lines changed

‎.editorconfig

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
# top-most EditorConfig file
2-
root = true
3-
41
[*.dart]
52
max_line_length = 120
63

‎.github/workflows/dart_ci.yml

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ jobs:
3232
strategy:
3333
fail-fast: false
3434
matrix:
35+
react: [17, 18]
3536
sdk: [2.19.6, stable]
3637
steps:
3738
- uses: actions/checkout@v2
@@ -49,6 +50,11 @@ jobs:
4950
if [[ "$DART_VERSION" =~ ^3 ]]; then
5051
./tool/delete_dart_2_only_files.sh
5152
fi
53+
- name: Switch to React 17 Test HTML
54+
if: ${{ matrix.react == 17 }}
55+
run: |
56+
mv test/templates/html_template.html test/templates/html_template-old.html
57+
mv test/templates/html_template-react17.html test/templates/html_template.html
5258
5359
- id: install
5460
name: Install dependencies
@@ -68,12 +74,12 @@ jobs:
6874

6975
- name: Run tests (DDC)
7076
run: |
71-
dart run build_runner test --delete-conflicting-outputs -- --preset dartdevc
77+
dart run build_runner test --delete-conflicting-outputs -- --preset dartdevc --preset=react${{ matrix.react }}
7278
if: always() && steps.install.outcome == 'success'
7379
timeout-minutes: 8
7480

7581
- name: Run tests (dart2js)
7682
run: |
77-
dart run build_runner test --delete-conflicting-outputs --release -- --preset dart2js
83+
dart run build_runner test --delete-conflicting-outputs --release -- --preset dart2js --preset=react${{ matrix.react }}
7884
if: always() && steps.install.outcome == 'success'
79-
timeout-minutes: 8
85+
timeout-minutes: 8

‎README.md

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Dart wrapper for [React JS](https://reactjs.org/)
22

33
[![Pub](https://img.shields.io/pub/v/react.svg)](https://pub.dev/packages/react)
4-
![ReactJS v17.0.1](https://img.shields.io/badge/React_JS-v17.0.1-green.svg)
4+
![ReactJS v18.2.0](https://img.shields.io/badge/React_JS-18.2.0-green.svg)
55
[![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)
66
[![React Dart API Docs](https://img.shields.io/badge/api_docs-react-blue.svg)](https://pub.dev/documentation/react/latest/)
77

@@ -40,12 +40,29 @@ If you are not familiar with the ReactJS library, read this [react tutorial](htt
4040

4141
#### HTML
4242

43-
In a `.html` file, include the native javascript `react` and `react_dom` libraries
43+
In a `.html` file, include the javascript libraries
4444
_(provided with this library for compatibility reasons)_ within your `.html` file,
4545
and also add an element with an `id` to mount your React component.
4646

47-
Lastly, add the `.js` file that Dart will generate. The file will be the name of the `.dart` file that
48-
contains your `main` entrypoint, with `.js` at the end.
47+
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.
48+
49+
##### React 18
50+
| Mode | Library | JS File Name |
51+
|-------------|------------------|---------------------------------------------|
52+
| Development | React & ReactDOM | packages/react/js/react.dev.js |
53+
| Production | React & ReactDOM | packages/react/js/react.min.js |
54+
55+
##### React 17 (Deprecated)
56+
| Mode | Library | JS File Name |
57+
|-------------|------------------|---------------------------------------------|
58+
| Development | React | packages/react/react.js |
59+
| Development | ReactDOM | packages/react/react_dom.js |
60+
| Production | React & ReactDOM | packages/react/react_with_react_dom_prod.js |
61+
| Production | React | packages/react/react_prod.js |
62+
| Production | ReactDOM | packages/react/react_dom_prod.js |
63+
64+
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.
65+
4966

5067
```html
5168
<html>
@@ -55,15 +72,14 @@ contains your `main` entrypoint, with `.js` at the end.
5572
<body>
5673
<div id="react_mount_point">Here will be react content</div>
5774
58-
<script src="packages/react/react.js"></script>
59-
<script src="packages/react/react_dom.js"></script>
75+
<script src="packages/react/js/react.dev.js"></script>
6076
<script defer src="your_dart_file_name.dart.js"></script>
6177
</body>
6278
</html>
6379
```
6480

65-
> __Note:__ When serving your application in production, use `packages/react/react_with_react_dom_prod.js`
66-
file instead of the un-minified `react.js` / `react_dom.js` files shown in the example above.
81+
> __Note:__ When serving your application in production, use `packages/react/js/react.min.js`
82+
file instead of the un-minified `react.dev.js` shown in the example above.
6783

6884
#### Dart App
6985

@@ -386,15 +402,15 @@ void main() {
386402
387403
## Contributing
388404
389-
Format using
405+
Format using
390406
```bash
391407
dart format -l 120 .
392408
```
393409
394-
While we'd like to adhere to the recommended line length of 80, it's too short for much of the code
410+
While we'd like to adhere to the recommended line length of 80, it's too short for much of the code
395411
repo written before a formatter was use, causing excessive wrapping and code that's hard to read.
396412
397-
So, we use a line length of 120 instead.
413+
So, we use a line length of 120 instead.
398414
399415
### Running Tests
400416

‎build.yaml

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
targets:
22
$default:
33
builders:
4-
mockito:mockBuilder:
5-
# Scope only to files declaring mocks, for performance.
6-
generate_for:
7-
- test/mockito.dart
4+
test_html_builder:
5+
options:
6+
templates:
7+
"test/templates/html_template.html":
8+
- "test/**_test.dart"
89
build_web_compilers|entrypoint:
910
# These are globs for the entrypoints you want to compile.
1011
generate_for:

‎dart_test.yaml

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,21 @@ platforms:
88
concurrency: 1
99

1010
presets:
11-
dart2js-legacy:
11+
dart2js:
1212
exclude_tags: no-dart2js
1313

14-
dartdevc-legacy:
14+
dartdevc:
1515
exclude_tags: no-dartdevc
1616

17-
dart2js:
18-
exclude_tags: "no-dart2js || no-sdk-2-14-plus"
17+
react18:
18+
exclude_tags: react-17
1919

20-
dartdevc:
21-
exclude_tags: "no-dartdevc || no-sdk-2-14-plus"
20+
react17:
21+
exclude_tags: react-18
2222

2323
tags:
2424
# Variadic children tests of >5 children that fail in Dart 2.7 for an unknown reason, seemingly an SDK bug.
2525
# These tests pass in later Dart SDKs, so we ignore them when running in 2.7.
2626
"dart-2-7-dart2js-variadic-issues":
27-
27+
"react-17":
28+
"react-18":

‎example/geocodes/geocodes.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,8 @@
3232
<div class="container" id="content"></div>
3333

3434
<!-- Load React, your application code and Dart -->
35-
<script src="packages/react/react.js"></script>
36-
<script src="packages/react/react_dom.js"></script>
35+
<script src="packages/react/js/react.dev.js"></script>
3736
<script defer src="geocodes.dart.js"></script>
38-
37+
3938
</body>
4039
</html>

‎example/js_components/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@
1616

1717
<div id="content"></div>
1818

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

‎example/suspense/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@
1616

1717
<div id="content"></div>
1818

19-
<script src="packages/react/react.js"></script>
20-
<script src="packages/react/react_dom.js"></script>
19+
<script src="packages/react/js/react.dev.js"></script>
2120

2221
<!-- Where the JS React components are declared. -->
2322
<script defer src="suspense.dart.js"></script>

‎example/test/call_and_nosuchmethod_test.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@
1212
<body>
1313
<div id="content" class="container"></div>
1414

15-
<script src="packages/react/react.js"></script>
16-
<script src="packages/react/react_dom.js"></script>
15+
<script src="packages/react/js/react.dev.js"></script>
1716
<script defer src="call_and_nosuchmethod_test.dart.js"></script>
1817
<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
19-
18+
2019
</body>
2120
</html>

‎example/test/context_test.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
</head>
1111
<body>
1212
<div id="content" class="container"></div>
13-
<script src="packages/react/react.js"></script>
14-
<script src="packages/react/react_dom.js"></script>
13+
<script src="packages/react/js/react.dev.js"></script>
1514
<script src="context_test.dart.js"></script>
1615
</body>
1716
</html>

‎example/test/error_boundary_test.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
</head>
1111
<body>
1212
<div id="content" class="container"></div>
13-
<script src="packages/react/react.js"></script>
14-
<script src="packages/react/react_dom.js"></script>
13+
<script src="packages/react/js/react.dev.js"></script>
1514
<script src="error_boundary_test.dart.js"></script>
1615
</body>
1716
</html>

‎example/test/false_and_null_test.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
</head>
1111
<body>
1212
<div id="content" class="container"></div>
13-
<script src="packages/react/react.js"></script>
14-
<script src="packages/react/react_dom.js"></script>
13+
<script src="packages/react/js/react.dev.js"></script>
1514
<script type="application/dart" src="false_and_null_test.dart"></script>
1615
<script src="packages/browser/dart.js"></script>
1716
</body>

‎example/test/function_component_test.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
</head>
1111
<body>
1212
<div id="content" class="container"></div>
13-
<script src="packages/react/react.js"></script>
14-
<script src="packages/react/react_dom.js"></script>
13+
<script src="packages/react/js/react.dev.js"></script>
1514
<script src="function_component_test.dart.js"></script>
1615
</body>
1716
</html>

‎example/test/get_dom_node_test.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@
1212
<body>
1313
<div id="content" class="container"></div>
1414

15-
<script src="packages/react/react.js"></script>
16-
<script src="packages/react/react_dom.js"></script>
15+
<script src="packages/react/js/react.dev.js"></script>
1716
<script defer src="get_dom_node_test.dart.js"></script>
1817
<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
19-
18+
2019
</body>
2120
</html>

‎example/test/order_test.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@
1212
<body>
1313
<div id="content" class="container"></div>
1414

15-
<script src="packages/react/react.js"></script>
16-
<script src="packages/react/react_dom.js"></script>
15+
<script src="packages/react/js/react.dev.js"></script>
1716
<script defer src="order_test.dart.js"></script>
1817
<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
19-
18+
2019
</body>
2120
</html>

‎example/test/react_test.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,9 @@
1717
<body>
1818
<!-- Generated by react_server_test.dart to check if react "infect" DOM by it's own syntetic DOM. -->
1919
<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>
20-
</div>
20+
</div>
2121

22-
<script src="packages/react/react.js"></script>
23-
<script src="packages/react/react_dom.js"></script>
22+
<script src="packages/react/js/react.dev.js"></script>
2423
<script defer src="react_test.dart.js"></script>
2524
<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
2625

‎example/test/react_test_components.dart

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -327,8 +327,8 @@ class _NewContextProviderComponent extends react.Component2 {
327327

328328
final newContextRefComponentProps = {
329329
'key': 'ref2',
330-
'ref': (ref) {
331-
componentRef = ref as _NewContextRefComponent;
330+
'ref': (_NewContextRefComponent? ref) {
331+
componentRef = ref;
332332
}
333333
};
334334

@@ -442,9 +442,9 @@ class _Component2TestComponent extends react.Component2 with react.TypedSnapshot
442442
@override
443443
getSnapshotBeforeUpdate(nextProps, prevState) {
444444
if ((prevState['items'] as List).length > (state['items'] as List).length) {
445-
return 'removed ' + (prevState['items'].last as List).toString();
445+
return 'removed ' + prevState['items'].last.toString();
446446
} else {
447-
return 'added ' + (state['items'].last as List).toString();
447+
return 'added ' + state['items'].last.toString();
448448
}
449449
}
450450

‎example/test/ref_test.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@
1212
<body>
1313
<div id="content" class="container"></div>
1414

15-
<script src="packages/react/react.js"></script>
16-
<script src="packages/react/react_dom.js"></script>
15+
<script src="packages/react/js/react.dev.js"></script>
1716
<script defer src="ref_test.dart.js"></script>
1817
<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
19-
18+
2019
</body>
2120
</html>

‎example/test/speed_test.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@
1212
<body>
1313
<div id="content" class="container"></div>
1414

15-
<script src="packages/react/react.js"></script>
16-
<script src="packages/react/react_dom.js"></script>
15+
<script src="packages/react/js/react.dev.js"></script>
1716
<script defer src="speed_test.dart.js"></script>
1817
<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
19-
18+
2019
</body>
2120
</html>

‎example/test/unmount_test.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,9 @@
1919
<div id="content"></div>
2020
</div>
2121

22-
<script src="packages/react/react.js"></script>
23-
<script src="packages/react/react_dom.js"></script>
22+
<script src="packages/react/js/react.dev.js"></script>
2423
<script defer src="unmount_test.dart.js"></script>
2524
<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
26-
25+
2726
</body>
2827
</html>

‎js_src/dart_env_dev.js

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎js_src/dart_env_dev.mjs

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

‎js_src/dart_env_prod.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)