diff --git a/.editorconfig b/.editorconfig index d1f5de84..2b41f143 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,6 +1,3 @@ -# top-most EditorConfig file -root = true - [*.dart] max_line_length = 120 diff --git a/.github/workflows/dart_ci.yml b/.github/workflows/dart_ci.yml index f39be8ce..edc04154 100644 --- a/.github/workflows/dart_ci.yml +++ b/.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 \ No newline at end of file + timeout-minutes: 8 diff --git a/README.md b/README.md index c35ed6cb..43ef9294 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Dart wrapper for [React JS](https://reactjs.org/) [](https://pub.dev/packages/react) - + [](https://github.com/Workiva/react-dart/actions?query=workflow%3A%22Dart+CI%22+branch%3Amaster) [](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 @@ -55,15 +72,14 @@ contains your `main` entrypoint, with `.js` at the end.