Workiva · matthewnitschke-wk · Jun 14, 2023 · Jun 15, 2023 · Jun 15, 2023 · Jun 15, 2023
diff --git a/dist/react_with_react_dom.esm.js b/dist/react_with_react_dom.esm.js
diff --git a/example/esm_loader/index.html b/example/esm_loader/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>ESM module import example</title>
+</head>
+<body>
+<div id="main"></div>
+
+<script type="module">
+  window._esmDynamicImport = function(moduleName) {
+    return import(moduleName);
+  }
+</script>
+
+<!-- Serve compiled output. -->
+<script defer src="main.dart.js"></script>
+</body>
+</html>
diff --git a/example/esm_loader/main.dart b/example/esm_loader/main.dart
@@ -0,0 +1,12 @@
+import 'dart:html';
+
+import 'package:react/react_dom.dart' as react_dom;
+import 'package:react/react.dart' as react;
+import 'package:react/react_client/react_interop.dart';
+
+void main() async {
+  await reactModuleLoader.initJsModuleFromAsyncImport();
+
+  final content = react.span({}, 'This was rendered with react-dart loaded from Dart as an ESM module 🎉');
+  react_dom.render(content, querySelector('#main'));
+}
diff --git a/example/suspense/suspense.dart b/example/suspense/suspense.dart
@@ -12,14 +12,12 @@ import 'package:react/react_dom.dart' as react_dom;
 import 'package:react/src/js_interop_util.dart';
 import './simple_component.dart' deferred as simple;
 
-@JS('React.lazy')
-external ReactClass jsLazy(Promise Function() factory);
 
 // Only intended for testing purposes, Please do not copy/paste this into repo.
 // This will most likely be added to the PUBLIC api in the future,
 // but needs more testing and Typing decisions to be made first.
 ReactJsComponentFactoryProxy lazy(Future<ReactComponentFactoryProxy> factory()) => ReactJsComponentFactoryProxy(
-      jsLazy(
+      React.lazy(
         allowInterop(
           () => futureToPromise(
             // React.lazy only supports "default exports" from a module.

diff --git a/js_src/_dart_helpers.js b/js_src/_dart_helpers.js
@@ -1,3 +1,5 @@
+import {React} from './react';
+
 /**
  * react-dart JS interop helpers (used by react_client.dart and react_client/js_interop_helpers.dart)
  */
@@ -7,20 +9,20 @@ const _reactDartSymbolPrefix = 'react-dart.';
 
 /// A global symbol to identify javascript objects owned by react-dart context,
 /// in order to jsify and unjsify context objects correctly.
-const _reactDartContextSymbol = Symbol(_reactDartSymbolPrefix + 'context');
+const reactDartContextSymbol = Symbol(_reactDartSymbolPrefix + 'context');
 
 /// A JS side function to allow Dart to throw an error from JS in order to catch it Dart side.
 /// Used within Component2 error boundry methods to dartify the error argument.
 /// See: https://github.com/dart-lang/sdk/issues/36363
-function _throwErrorFromJS(error) {
+function throwErrorFromJS(error) {
   throw error;
 }
 
 /// A JS variable that can be used with Fart interop in order to force returning a
 /// JavaScript `null`. This prevents dart2js from possibly converting Dart `null` into `undefined`.
-const _jsNull = null;
+const jsNull = null;
 
-function _createReactDartComponentClass(dartInteropStatics, componentStatics, jsConfig) {
+function createReactDartComponentClass(dartInteropStatics, componentStatics, jsConfig) {
   class ReactDartComponent extends React.Component {
     constructor(props, context) {
       super(props, context);
@@ -93,7 +95,7 @@ function _createReactDartComponentClass(dartInteropStatics, componentStatics, js
   return ReactDartComponent;
 }
 
-function _createReactDartComponentClass2(dartInteropStatics, componentStatics, jsConfig) {
+function createReactDartComponentClass2(dartInteropStatics, componentStatics, jsConfig) {
   class ReactDartComponent2 extends React.Component {
     constructor(props, context) {
       super(props, context);
@@ -166,16 +168,16 @@ function _createReactDartComponentClass2(dartInteropStatics, componentStatics, j
   return ReactDartComponent2;
 }
 
-function _markChildValidated(child) {
+function markChildValidated(child) {
   const store = child._store;
   if (store) store.validated = true;
 }
 
-export default {
-  _reactDartContextSymbol,
-  _createReactDartComponentClass,
-  _createReactDartComponentClass2,
-  _markChildValidated,
-  _throwErrorFromJS,
-  _jsNull,
+export {
+  reactDartContextSymbol,
+  createReactDartComponentClass,
+  createReactDartComponentClass2,
+  markChildValidated,
+  throwErrorFromJS,
+  jsNull,
 };
diff --git a/js_src/dart_env_dev.js b/js_src/dart_env_dev.js
@@ -1,5 +1,3 @@
-React.__isDevelopment = true;
-
 if (typeof window.MemoryInfo == "undefined") {
   if (typeof window.performance.memory != "undefined") {
     window.MemoryInfo = function () {};

diff --git a/js_src/dart_env_prod.js b/js_src/dart_env_prod.js
@@ -1 +0,0 @@
-React.__isDevelopment = false;

diff --git a/js_src/react.index.js b/js_src/react.index.js
@@ -0,0 +1,33 @@
+// React 16 Polyfill requirements: https://reactjs.org/docs/javascript-environment-requirements.html
+import 'core-js/es/map';
+import 'core-js/es/set';
+
+// Know required Polyfill's for dart side usage
+import 'core-js/stable/reflect/delete-property';
+import 'core-js/stable/object/assign';
+
+// Used by dart_env_dev.js
+import 'core-js/stable/string/starts-with';
+
+// IE 11 polyfill
+// Source: https://github.com/webcomponents/webcomponents-platform/issues/2
+if (!('baseURI' in Node.prototype)) {
+  Object.defineProperty(Node.prototype, 'baseURI', {
+    get: function() {
+      const base = (this.ownerDocument || this).querySelector('base');
+      return (base || window.location).href;
+    },
+    configurable: true,
+    enumerable: true
+  });
+}
+
+import * as reactExports from './react';
+// Custom dart side methods
+import * as dartHelpers from './_dart_helpers';
+
+window.ReactDart ??= {};
+Object.assign(window.ReactDart, {
+  ...reactExports,
+  dartHelpers
+});
diff --git a/js_src/react.js b/js_src/react.js
@@ -1,44 +1,17 @@
-// React 16 Polyfill requirements: https://reactjs.org/docs/javascript-environment-requirements.html
-import 'core-js/es/map';
-import 'core-js/es/set';
-
-// Know required Polyfill's for dart side usage
-import 'core-js/stable/reflect/delete-property';
-import 'core-js/stable/object/assign';
-
-// Used by dart_env_dev.js
-import 'core-js/stable/string/starts-with';
-
 // Additional polyfills are included by core-js based on 'usage' and browser requirements
 
-// Custom dart side methods
-import DartHelpers from './_dart_helpers';
-
 const React = require('react');
 const PropTypes = require('prop-types');
 const CreateReactClass = require('create-react-class');
 
-window.React = React;
-Object.assign(window, DartHelpers);
-
 React.createClass = CreateReactClass; // TODO: Remove this once over_react_test doesnt rely on createClass.
 React.PropTypes = PropTypes; // Only needed to support legacy context until we update. lol jk we need it for prop validation now.
 
 if (process.env.NODE_ENV == 'production') {
-    require('./dart_env_prod');
+  React.__isDevelopment = false;
+  require('./dart_env_prod');
 } else {
-    require('./dart_env_dev');
-}
-
-// IE 11 polyfill
-// Source: https://github.com/webcomponents/webcomponents-platform/issues/2
-if (!('baseURI' in Node.prototype)) {
-  Object.defineProperty(Node.prototype, 'baseURI', {
-    get: function() {
-      const base = (this.ownerDocument || this).querySelector('base');
-      return (base || window.location).href;
-    },
-    configurable: true,
-    enumerable: true
-  });
+  React.__isDevelopment = true;
+  require('./dart_env_dev');
 }
+export { React };
diff --git a/js_src/react_dom.index.js b/js_src/react_dom.index.js
@@ -0,0 +1,8 @@
+import * as reactDomExports from './react_dom';
+
+window.ReactDart ??= {};
+Object.assign(window.ReactDart, reactDomExports);
+
+if (process.env.NODE_ENV == 'development') {
+    require('./react_dom_dev');
+}
diff --git a/js_src/react_dom.js b/js_src/react_dom.js
@@ -1,9 +1,7 @@
 const ReactRedux = require('react-redux');
 const ReactDOM = require('react-dom');
 
-window.ReactDOM = ReactDOM;
-window.ReactRedux = ReactRedux;
-
-if (process.env.NODE_ENV == 'development') {
-    require('./react_dom_dev');
-}
+export {
+  ReactDOM,
+  ReactRedux,
+};
diff --git a/js_src/react_with_react_dom.esm.js b/js_src/react_with_react_dom.esm.js
@@ -0,0 +1,3 @@
+export { React } from './react';
+export { ReactDOM, ReactRedux } from './react_dom';
+export * as helpers from './_dart_helpers';