FED-3273 SPIKE - do not merge: React 18 dual versions

[greglittlefield-wf]

Motivation

We wanted to spike out updating the existing RTL JS assets be compatible with both React 17 and 18, to make the migration to React 18 easier.

With that in place, we wouldn't have to worry about dual-JS files or separate release lines, or coordinating them with the react-dart version used when testing.

This is just a spike branch; not for merging.

Solution

• Spike out solution that bundles both 17- and 18-compatible versions of RTL into the existing JS file, and loads the correct one conditionally based on window.React.version
• Add test to validate current React version
• Add example used to do help debug during development

Testing steps

• Verify React 18 branch this PR is based on has passing CI: React 18 #81
• Verify CI passes and react_version_test.dart test run
  • When using React 17: fd02c66
  • When using React 18: dac2b64

[greglittlefield-wf]

From 94435ac

Add ESM version of current React-17-compatible RTL bundle

Derived from building master (3.0.2) with the following changes:

diff --git a/js_src/rollup.config.js b/js_src/rollup.config.js
index 38448f5d..e8432dfc 100644
--- a/js_src/rollup.config.js
+++ b/js_src/rollup.config.js
@@ -68 +68 @@ export default (commandFlags) => {
-        format: 'umd',
+        format: 'esm',

I added this to prove out pulling in both, as opposed to updating this NPM package to pull in and build two versions of the same package. For the real implementation we could try to do that, or just stick with this since we probably won't need to update the 17-compatible assets until they're eventually removed.

I originally tried with the UMD, but it was kind of gross since it assigned to the global, so I went with an ESM build to make the bundling simpler/cleaner.

[sydneyjodon-wk]

I'm +10 on the approach and also pulled this into unify_ui to check that it loaded the React 17 files and it did!

• Verify React 18 branch this PR is based on has passing CI: #81
• Verify CI passes and react_version_test.dart test run
  • When using React 17: fd02c66
  • When using React 18: dac2b64

might be good to get some 👀 from @kealjones-wk or @aaronlademann-wf as well!

[aaronlademann-wf]

LGTM

[kealjones-wk]

Since react is an external/global i think you could quite literally do like

import React from 'react';

const reactVersion = React.version;

and it should under the hood convert that to a window.React.version call.