Merge remote-tracking branch 'origin/master' into react-18-rc-test

Author: greglittlefield-wf

.github/workflows/dart_ci.yml

@@ -15,7 +15,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        sdk: [2.13.4, stable, beta]
+        # Can't run on `beta` (Dart 3) until we're fully null-safe.
+        sdk: [2.18.7, stable]
     steps:
       - uses: actions/checkout@v2
       - uses: dart-lang/setup-dart@v1
@@ -35,7 +36,7 @@ jobs:
 
       - name: Verify formatting
         run: dart format --output=none --line-length=120 --set-exit-if-changed .
-        if: ${{ matrix.sdk == '2.13.4' }}
+        if: ${{ matrix.sdk == '2.18.7' }}
 
       - name: Analyze project source
         run: dart analyze

CHANGELOG.md

@@ -1,7 +1,19 @@
-## [6.1.6](https://github.com/cleandart/react-dart/compare/6.1.5...6.1.6)##
+## [6.2.0](https://github.com/cleandart/react-dart/compare/6.1.8...6.2.0)
+- [#357] Export Suspense component
+- [#354] Raise analyzer minimum & unpin meta
+- [#355] Pin mockito 5
+- [#356] Unpin mockito, fix CI
+
+## [6.1.8](https://github.com/cleandart/react-dart/compare/6.1.7...6.1.8)
+- [#350] Return `jsUndefined` instead of `null` when children prop is empty
+
+## [6.1.7](https://github.com/cleandart/react-dart/compare/6.1.6...6.1.7)
+- [#344] Fix identityHashCode error when forwarding props containing JSX children
+
+## [6.1.6](https://github.com/cleandart/react-dart/compare/6.1.5...6.1.6)
 - [#336] Publish JS bundles to Workiva CDN
 
-## [6.1.5](https://github.com/cleandart/react-dart/compare/6.1.4...6.1.5)##
+## [6.1.5](https://github.com/cleandart/react-dart/compare/6.1.4...6.1.5)
 - [#333] Remove old, unused file from bin/
 
 ## [6.1.4](https://github.com/cleandart/react-dart/compare/6.1.3...6.1.4)
@@ -51,16 +63,16 @@ The underlying `.js` files provided by this package are now ReactJS version `17.
 
 ## [5.7.1](https://github.com/cleandart/react-dart/compare/5.7.0...5.7.1)
 
-- [#289] Update most deprecations that were slated for removal in v6.0.0 to be slated for removal in v7.0.0 instead. To keep the migration to v6.0.0 as easy as possible, only APIs that are known to be completely unused will be removed in v6.0.0. Therefore, most APIs that were marked for removal in v6.0.0 will remain until the v7.0.0 release. This PR updated deprecation annotations to reflect this. 
-- [#287] Deprecate `SyntheticEvent.isFormEvent`. Because form events do not exist as their own type in ReactJS, this helper will be removed in v6.0.0. Instead, check for the expected [form event types](https://reactjs.org/docs/events.html#form-events).  
+- [#289] Update most deprecations that were slated for removal in v6.0.0 to be slated for removal in v7.0.0 instead. To keep the migration to v6.0.0 as easy as possible, only APIs that are known to be completely unused will be removed in v6.0.0. Therefore, most APIs that were marked for removal in v6.0.0 will remain until the v7.0.0 release. This PR updated deprecation annotations to reflect this.
+- [#287] Deprecate `SyntheticEvent.isFormEvent`. Because form events do not exist as their own type in ReactJS, this helper will be removed in v6.0.0. Instead, check for the expected [form event types](https://reactjs.org/docs/events.html#form-events).
 
 ## [5.7.0](https://github.com/cleandart/react-dart/compare/5.6.1...5.7.0)
 
-- [#282] Add `SyntheticEvent` helpers that eliminate the need to use synthetic event class constructors. Additionally, added utilities to assist in type checking events without manually using the `is` keyword. 
+- [#282] Add `SyntheticEvent` helpers that eliminate the need to use synthetic event class constructors. Additionally, added utilities to assist in type checking events without manually using the `is` keyword.
 
 ## [5.6.1](https://github.com/cleandart/react-dart/compare/5.6.0...5.6.1)
 
-- [#280] Update React dev JS files to include a [workaround](https://github.com/dart-lang/sdk/issues/43193) to a DDC bug when using Chrome 86+ (fixed in Dart 2.9.3) 
+- [#280] Update React dev JS files to include a [workaround](https://github.com/dart-lang/sdk/issues/43193) to a DDC bug when using Chrome 86+ (fixed in Dart 2.9.3)
 
 ## [5.6.0](https://github.com/cleandart/react-dart/compare/5.5.1...5.6.0)
 
@@ -81,8 +93,8 @@ __New Features__
 
 - 🎉 🎉 🎉 __Support for function components, memo and hooks!!!__ 🎉 🎉 🎉
 
-    Sooooo much work from so many amazing people made this possible, but to summarize: 
-    
+    Sooooo much work from so many amazing people made this possible, but to summarize:
+
     - [#221] Add support for function components
     - [#252] Add support for `memo` higher order component
     - Hooks, hooks, and more hooks!
@@ -98,41 +110,41 @@ __New Features__
         - [#246] useDebugValue
 
     <p><br>It works like this...</p>
-    
+
     Define the component:
     ```dart
     import 'package:react/react.dart' as react;
-    
+
     final SomeWidget = react.registerFunctionComponent(_SomeWidget, displayName: 'SomeWidget');
-    
+
     _SomeWidget(Map props) {
       // You can use hooks in here, too!
-      
+
       return react.div({}, [
         // Some children...
       ]);
     }
     ```
-    
+
     Render the component _(exact same consumer API as a class-based component)_:
     ```dart
     import 'package:react/react_dom.dart' as react_dom;
     import 'some_widget.dart'; // Where your component is defined
-    
+
     main() {
       final root = react_dom.createRoot(querySelector('#idOfSomeNodeInTheDom'));
       final renderedWidget = SomeWidget({
         // put some props here
       }, [
         // put some children here!
       ]);
-    
+
       root.render(renderedWidget);
     }
     ```
-    
+
     > Check out all the [function component and hooks examples](https://github.com/cleandart/react-dart/blob/c9a1211d5d77a9e354b864e99ef8f52b60eeff85/example/test/function_component_test.dart) for more information!
-        
+
 __Fixes / Updates__
 - [#253] Deprecate `setClientConfiguration`.
     - It is no longer necessary - and can be removed from your implementations
@@ -142,7 +154,7 @@ __Fixes / Updates__
 
 __New Features__
 - [#244] Add support for [HTML Composition events](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent)
-- [#263] Add support for [`SyntheticEvent.persist()`](https://reactjs.org/docs/events.html#event-pooling) 
+- [#263] Add support for [`SyntheticEvent.persist()`](https://reactjs.org/docs/events.html#event-pooling)
 
 __Fixes / Updates__
 - [#261] Stop errors thrown within the call stack of `Component.render()` from being swallowed

Dockerfile

@@ -1,4 +1,6 @@
-FROM google/dart:2.13
+FROM drydock-prod.workiva.net/workiva/dart2_base_image:1 as dart2
+
+RUN dart --version
 
 WORKDIR /build
 COPY pubspec.yaml .

example/README.md

@@ -1,6 +1,6 @@
 # Serving / Viewing React Dart Examples
 
-1. Run `pub get` in your terminal. 
+1. Run `dart pub get` in your terminal. 
 2. Run `webdev serve example`.
 2. Open Chrome.
 3. Navigate to <http://localhost:8080>

example/index.html

@@ -58,6 +58,9 @@ <h2 class="display-5">Use Case / Test Examples</h2>
         <li>
           <a href="test/function_component_test.html"><code>Function Component</code> test</a>
         </li>
+        <li>
+          <a href="suspense/index.html"><code>Suspense</code> Example</a>
+        </li>
       </ul>
 
     </div>

example/suspense/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Suspense - react-dart Examples</title>
+    <style>
+        #content {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <em>See Dart source for more info</em>
+
+    <div id="content"></div>
+
+    <script src="packages/react/react.js"></script>
+    <script src="packages/react/react_dom.js"></script>
+
+    <!-- Where the JS React components are declared. -->
+    <script defer src="suspense.dart.js"></script>
+
+</body>
+</html>

example/suspense/simple_component.dart

@@ -0,0 +1,31 @@
+import 'package:react/hooks.dart';
+import 'package:react/react.dart' as react;
+
+var SimpleComponent = react.registerFunctionComponent(SimpleFunctionComponent, displayName: 'simple');
+
+SimpleFunctionComponent(Map props) {
+  final count = useState(1);
+  final evenOdd = useState('even');
+
+  useEffect(() {
+    if (count.value % 2 == 0) {
+      print('count changed to ' + count.value.toString());
+      evenOdd.set('even');
+    } else {
+      print('count changed to ' + count.value.toString());
+      evenOdd.set('odd');
+    }
+    return () {
+      print('count is changing... do some cleanup if you need to');
+    };
+
+    /// This dependency prevents the effect from running every time [evenOdd.value] changes.
+  }, [count.value]);
+
+  return react.div({}, [
+    react.button({'onClick': (_) => count.set(1), 'key': 'ust1'}, ['Reset']),
+    react.button({'onClick': (_) => count.setWithUpdater((prev) => prev + 1), 'key': 'ust2'}, ['+']),
+    react.br({'key': 'ust3'}),
+    react.p({'key': 'ust4'}, ['${count.value} is ${evenOdd.value}']),
+  ]);
+}

example/suspense/suspense.dart

@@ -0,0 +1,54 @@
+@JS()
+library js_components;
+
+import 'dart:html';
+import 'dart:js_util';
+
+import 'package:js/js.dart';
+import 'package:react/react.dart' as react;
+import 'package:react/react_client.dart';
+import 'package:react/react_client/react_interop.dart';
+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(
+        allowInterop(
+          () => futureToPromise(
+            // React.lazy only supports "default exports" from a module.
+            // This `{default: yourExport}` workaround can be found in the React.lazy RFC comments.
+            // See: https://github.com/reactjs/rfcs/pull/64#issuecomment-431507924
+            (() async => jsify({'default': (await factory()).type}))(),
+          ),
+        ),
+      ),
+    );
+
+main() {
+  var content = wrapper({});
+
+  react_dom.render(content, querySelector('#content'));
+}
+
+final lazyComponent = lazy(() async {
+  await simple.loadLibrary();
+  await Future.delayed(Duration(seconds: 5));
+  return simple.SimpleComponent;
+});
+
+var wrapper = react.registerFunctionComponent(WrapperComponent, displayName: 'wrapper');
+
+WrapperComponent(Map props) {
+  return react.div({
+    'id': 'lazy-wrapper'
+  }, [
+    react.Suspense({'fallback': 'Loading...'}, [lazyComponent({})])
+  ]);
+}

lib/react.dart

@@ -65,6 +65,38 @@ typedef ReactDartFunctionComponentFactoryProxy FunctionComponentRegistrar(DartFu
 /// See: <https://reactjs.org/docs/fragments.html>
 var Fragment = ReactJsComponentFactoryProxy(React.Fragment);
 
+/// [Suspense] lets you display a fallback UI until its children have finished loading.
+///
+/// Like [react.Fragment], [Suspense] does not render any visible UI.
+/// It lets you specify a loading indicator in case some components in
+/// the tree below it are not yet ready to render.
+/// [Suspense] currently works with:
+/// - Components that use React.lazy
+///   - (dynamic imports, not currently implemented in dart)
+///
+/// Example Usage:
+/// ```
+/// render() {
+///   return react.div({}, [
+///     Header({}),
+///     react.Suspense({'fallback': LoadingIndicator({})}, [
+///       LazyBodyComponent({}),
+///       NotALazyComponent({})
+///     ]),
+///     Footer({}),
+///   ]);
+/// }
+/// ```
+///
+/// In the above example, [Suspense] will display the `LoadingIndicator` until
+/// `LazyBodyComponent` is loaded. It will not display for `Header` or `Footer`.
+///
+/// However, any "lazy" descendant components in `LazyBodyComponent` and
+/// `NotALazyComponent` will trigger the closest ancestor [Suspense].
+///
+/// See: <https://react.dev/reference/react/Suspense>
+var Suspense = ReactJsComponentFactoryProxy(React.Suspense);
+
 /// StrictMode is a tool for highlighting potential problems in an application.
 ///
 /// StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

lib/react_client/js_interop_helpers.dart

@@ -10,19 +10,32 @@ import "package:js/js.dart";
 
 import 'js_backed_map.dart';
 
-/// Like [identityHashCode], but uses a different hash for JS objects to work around an issue where
-/// [identityHashCode] adds an unwanted `$identityHash` property on JS objects (https://github.com/dart-lang/sdk/issues/47595).
-int _jsObjectFriendlyIdentityHashCode(Object object) =>
-    object is JsMap ? _jsObjectHashCode(object) : identityHashCode(object);
+/// Like [identityHashCode], but uses a different hash for JS objects to work around:
+/// - an issue where [identityHashCode] adds an unwanted `$identityHash` property on JS objects: https://github.com/dart-lang/sdk/issues/47595
+/// - an issue where [identityHashCode] throws for frozen objects: https://github.com/dart-lang/sdk/issues/36354
+int _jsObjectFriendlyIdentityHashCode(Object object) {
+  // Try detecting JS objects so we don't add properties to them.
+  // Workaround for https://github.com/dart-lang/sdk/issues/47595
+  if (object is JsMap) return _anonymousJsObjectOrFrozenObjectHashCode(object);
 
-/// A hashCode implementation for JS objects.
+  // If this fails, then most likely the object is a frozen JS object, such as  props object or a variadic JSX children Array.
+  // Note that props objects are typically handled by the above is JsMap case, though.
+  // Fall back to a safe implementation.
+  try {
+    return identityHashCode(object);
+  } catch (_) {
+    return _anonymousJsObjectOrFrozenObjectHashCode(object);
+  }
+}
+
+/// A hashCode implementation for anonymous JS objects or frozen objects.
 ///
 /// Even though the current implementation of returning the same hash code for all values is low-quality
 /// since all JS objects will collide, it is valid since it always returns the same value for the same object.
 ///
-/// We also don't expect many JS objects to be passed into [jsifyAndAllowInterop], so the quality of this hash code
-/// is not of much concern.
-int _jsObjectHashCode(JsMap jsObject) => 0;
+/// We also don't expect many JS objects or frozen objects to be passed into [jsifyAndAllowInterop],
+/// so the quality of this hash code is not of much concern.
+int _anonymousJsObjectOrFrozenObjectHashCode(Object _) => 0;
 
 // The following code is adapted from `package:js` in the dart-lang/sdk repo:
 // https://github.com/dart-lang/sdk/blob/2.2.0/sdk/lib/js_util/dart2js/js_util_dart2js.dart#L27