Merge remote-tracking branch 'origin/master' into react-18-2-0

Author: greglittlefield-wf

.github/workflows/dart_ci.yml

@@ -10,22 +10,46 @@ on:
       - '**'
 
 jobs:
+  # Run as a separate job outside the Dart SDK matrix below,
+  # since we can only emit a single SBOM.
+  create-sbom-release-asset:
+    name: Create SBOM Release Asset
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dart-lang/setup-dart@v1
+        with:
+          sdk: 2.19.6 # This version doesn't matter so long as it resolves.
+      - run: dart pub get
+      - name: Publish SBOM to Release Assets
+        uses: anchore/sbom-action@v0
+        with:
+          path: ./
+          format: cyclonedx-json
+
   build:
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix:
-        # Can't run on `stable` (Dart 3) until we're fully null-safe.
-        sdk: [2.18.7, 2.19.6]
+        sdk: [2.19.6, stable]
     steps:
       - uses: actions/checkout@v2
-      - uses: dart-lang/setup-dart@v1
+      - id: setup-dart
+        uses: dart-lang/setup-dart@v1
         with:
           sdk: ${{ matrix.sdk }}
 
       - name: Print Dart SDK version
         run: dart --version
 
+      - name: Delete Dart-2-only files when running on Dart 3
+        run: |
+          DART_VERSION="${{ steps.setup-dart.outputs.dart-version }}"
+          if [[ "$DART_VERSION" =~ ^3 ]]; then
+            ./tool/delete_dart_2_only_files.sh
+          fi
+
       - id: install
         name: Install dependencies
         run: dart pub get
@@ -36,28 +60,20 @@ jobs:
 
       - name: Verify formatting
         run: dart run dart_dev format --check
-        if: ${{ matrix.sdk == '2.18.7' }}
+        if: ${{ matrix.sdk == '2.19.6' }}
 
       - name: Analyze project source
         run: dart analyze
         if: always() && steps.install.outcome == 'success'
 
       - name: Run tests (DDC)
         run: |
-          if [ ${{ matrix.sdk }} = '2.13.4' ]; then 
-            dart run build_runner test --delete-conflicting-outputs -- --preset dartdevc-legacy
-          else 
-            dart run build_runner test --delete-conflicting-outputs -- --preset dartdevc
-          fi
+          dart run build_runner test --delete-conflicting-outputs -- --preset dartdevc
         if: always() && steps.install.outcome == 'success'
-        timeout-minutes: 5
+        timeout-minutes: 8
 
       - name: Run tests (dart2js)
         run: |
-          if [ ${{ matrix.sdk }} = '2.13.4' ]; then
-            dart run build_runner test --delete-conflicting-outputs --release -- --preset dart2js-legacy
-          else 
-            dart run build_runner test --delete-conflicting-outputs --release -- --preset dart2js
-          fi
+          dart run build_runner test --delete-conflicting-outputs --release -- --preset dart2js
         if: always() && steps.install.outcome == 'success'
-        timeout-minutes: 5
+        timeout-minutes: 8

CHANGELOG.md

@@ -1,3 +1,20 @@
+## 7.2.0
+- Add Dart wrapper for React [lazy](https://react.dev/reference/react/lazy)
+
+## 7.1.3
+- Internal release tooling changes
+
+## 7.1.2
+- Internal release tooling changes
+
+## 7.1.1
+- Internal release tooling changes
+- Tests - switch from mockito to mocktail
+
+## 7.1.0
+
+Add a new `ReactNode` type, which aliases `Object?` to mimic [the React JS Typescript type](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts#L214).
+
 ## 7.0.1
 
 Breaking change - fix nullability/typings for `ReactDom.findDomNode` and `ReactDom.render` from `package:react/react_client/react_interop.dart`:

Dockerfile

@@ -4,6 +4,9 @@ platforms:
   - chrome
   - vm
 
+# Work around process handing after tests finish: https://github.com/dart-lang/build/issues/3765
+concurrency: 1
+
 presets:
   dart2js-legacy:
     exclude_tags: no-dart2js

dart_test.yaml

@@ -1,55 +1,39 @@
 @JS()
-library js_components;
+library example.suspense.suspense;
 
 import 'dart:html';
-import 'dart:js_util';
 
 import 'package:js/js.dart';
+import 'package:react/hooks.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> Function() 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() {
   final content = wrapper({});
 
   react_dom.render(content, querySelector('#content')!);
 }
 
-final lazyComponent = lazy(() async {
-  await simple.loadLibrary();
+final lazyComponent = react.lazy(() async {
   await Future.delayed(Duration(seconds: 5));
+  await simple.loadLibrary();
+
   return simple.SimpleComponent;
 });
 
 var wrapper = react.registerFunctionComponent(WrapperComponent, displayName: 'wrapper');
 
 WrapperComponent(Map props) {
+  final showComponent = useState(false);
   return react.div({
     'id': 'lazy-wrapper'
   }, [
-    react.Suspense({'fallback': 'Loading...'}, [lazyComponent({})])
+    react.button({
+      'onClick': (_) {
+        showComponent.set(!showComponent.value);
+      }
+    }, 'Toggle component'),
+    react.Suspense({'fallback': 'Loading...'}, showComponent.value ? lazyComponent({}) : null)
   ]);
 }

example/suspense/suspense.dart

@@ -129,7 +129,8 @@ class _ClockComponent extends react.Component {
 
   @override
   render() {
-    return react.span({'onClick': (event) => print('Hello World!')},
+    return react.span(
+        {'onClick': (event) => print('Hello World!')},
 //        { 'onClick': (event, [domid = null]) => print("Hello World!") },
         ['Seconds elapsed: ', "${state['secondsElapsed']}"]);
   }

example/test/react_test_components.dart

@@ -22,16 +22,16 @@ export 'package:react/src/context.dart';
 export 'package:react/src/prop_validator.dart';
 export 'package:react/src/react_client/event_helpers.dart';
 export 'package:react/react_client/react_interop.dart' show forwardRef2, createRef, memo2;
+export 'package:react/src/react_client/lazy.dart' show lazy;
 export 'package:react/src/react_client/synthetic_event_wrappers.dart' hide NonNativeDataTransfer;
 export 'package:react/src/react_client/synthetic_data_transfer.dart' show SyntheticDataTransfer;
-export 'package:react/src/react_client/event_helpers.dart';
 
 /// A React component declared using a function that takes in [props] and returns rendered output.
 ///
 /// See <https://reactjs.org/docs/components-and-props.html#function-and-class-components>.
 ///
 /// [props] is typed as [JsBackedMap] so that dart2js can optimize props accesses.
-typedef DartFunctionComponent = dynamic Function(JsBackedMap props);
+typedef DartFunctionComponent = /*ReactNode*/ dynamic Function(JsBackedMap props);
 
 /// The callback to a React forwardRef component. See [forwardRef2] for more details.
 ///
@@ -40,7 +40,7 @@ typedef DartFunctionComponent = dynamic Function(JsBackedMap props);
 /// In the current JS implementation, the ref argument to [React.forwardRef] is usually a JsRef object no matter the input ref type,
 /// but according to React the ref argument can be any ref type: https://github.com/facebook/flow/blob/master@%7B2020-09-08%7D/lib/react.js#L305
 /// and not just a ref object, so we type [ref] as dynamic here.
-typedef DartForwardRefFunctionComponent = dynamic Function(JsBackedMap props, dynamic ref);
+typedef DartForwardRefFunctionComponent = /*ReactNode*/ dynamic Function(JsBackedMap props, dynamic ref);
 
 typedef ComponentFactory<T extends Component> = T Function();
 
@@ -543,12 +543,10 @@ abstract class Component {
 
   /// __Required.__
   ///
-  /// When called, it should examine [props] and [state] and return a single child `Element`. This child `Element` can
-  /// be either a virtual representation of a native DOM component (such as `DivElement`) or another composite
-  /// `Component` that you've defined yourself.
+  /// When called, it should examine [props] and [state] and return a [ReactNode].
   ///
-  /// See: <https://reactjs.org/docs/react-component.html#render>
-  dynamic render();
+  /// See: <https://legacy.reactjs.org/docs/react-component.html#render>
+  /*ReactNode*/ dynamic render();
 }
 
 /// Top-level ReactJS [Component class](https://reactjs.org/docs/react-component.html)
@@ -933,13 +931,7 @@ abstract class Component2 implements Component {
   /// See: <https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes>
   Map<String, PropValidator<Never>> get propTypes => {};
 
-  /// Examines [props] and [state] and returns one of the following types:
-  ///
-  /// * [ReactElement] (renders a single DOM `Element`)
-  /// * [Fragment] (renders multiple elements)
-  /// * [ReactPortal] (renders children into a different DOM subtree)
-  /// * `String` / `num` (renders text nodes in the DOM)
-  /// * `bool` / `null` (renders nothing)
+  /// Examines [props] and [state] and returns a [ReactNode].
   ///
   /// This method is __required__ for class components.
   ///
@@ -950,9 +942,9 @@ abstract class Component2 implements Component {
   /// If you need to interact with the browser / DOM apis, perform your work in [componentDidMount]
   /// or the other lifecycle methods instead. Keeping `render` pure makes components easier to think about.
   ///
-  /// See: <https://reactjs.org/docs/react-component.html#render>
+  /// See: <https://legacy.reactjs.org/docs/react-component.html#render>
   @override
-  dynamic render();
+  /*ReactNode*/ dynamic render();
 
   // ******************************************************************************************************************
   //

lib/react.dart

@@ -20,7 +20,7 @@ export 'package:react/react_client/component_factory.dart'
         JsBackedMapComponentFactoryMixin;
 export 'package:react/react_client/zone.dart' show componentZone;
 export 'package:react/src/react_client/chain_refs.dart' show chainRefs, chainRefList;
-export 'package:react/src/typedefs.dart' show JsFunctionComponent;
+export 'package:react/src/typedefs.dart' show JsFunctionComponent, ReactNode;
 
 /// Method used to initialize the React environment.
 ///

lib/react_client.dart

@@ -22,7 +22,7 @@ export 'package:react/src/react_client/factory_util.dart' show generateJsProps;
 /// Currently only involves converting a top-level non-[List] [Iterable] to
 /// a non-growable [List], but this may be updated in the future to support
 /// advanced nesting and other kinds of children.
-dynamic listifyChildren(dynamic children) {
+ReactNode listifyChildren(ReactNode children) {
   if (React.isValidElement(children)) {
     // Short-circuit if we're dealing with a ReactElement to avoid the dart2js
     // interceptor lookup involved in Dart type-checking.
@@ -63,7 +63,7 @@ Map unconvertJsProps(/* ReactElement|ReactComponent */ instance) {
 /// Shared component factory proxy [build] method for components that utilize [JsBackedMap]s.
 mixin JsBackedMapComponentFactoryMixin on ReactComponentFactoryProxy {
   @override
-  ReactElement build(Map props, [List childrenArgs = const []]) {
+  ReactElement build(Map props, [List<ReactNode> childrenArgs = const []]) {
     final children = generateChildren(childrenArgs, shouldAlwaysBeList: true);
     final convertedProps = generateExtendedJsProps(props);
     return React.createElement(type, convertedProps, children);
@@ -89,7 +89,7 @@ class ReactDartComponentFactoryProxy<TComponent extends Component> extends React
   ReactClass get type => reactClass;
 
   @override
-  ReactElement build(Map props, [List childrenArgs = const []]) {
+  ReactElement build(Map props, [List<ReactNode> childrenArgs = const []]) {
     var children = convertArgsToChildren(childrenArgs);
     children = listifyChildren(children);
 
@@ -98,7 +98,7 @@ class ReactDartComponentFactoryProxy<TComponent extends Component> extends React
 
   /// Returns a JavaScript version of the specified [props], preprocessed for consumption by ReactJS and prepared for
   /// consumption by the `react` library internals.
-  static InteropProps generateExtendedJsProps(Map props, dynamic children, {Map? defaultProps}) {
+  static InteropProps generateExtendedJsProps(Map props, ReactNode children, {Map? defaultProps}) {
     if (children == null) {
       children = [];
     } else if (children is! Iterable) {
@@ -212,8 +212,8 @@ class ReactJsContextComponentFactoryProxy extends ReactJsComponentFactoryProxy {
         super(jsClass, shouldConvertDomProps: shouldConvertDomProps);
 
   @override
-  ReactElement build(Map props, [List childrenArgs = const []]) {
-    dynamic children = generateChildren(childrenArgs);
+  ReactElement build(Map props, [List<ReactNode> childrenArgs = const []]) {
+    var children = generateChildren(childrenArgs);
 
     if (isConsumer) {
       if (children is Function) {
@@ -271,7 +271,7 @@ class ReactJsComponentFactoryProxy extends ReactComponentFactoryProxy {
   }
 
   @override
-  ReactElement build(Map props, [List childrenArgs = const []]) {
+  ReactElement build(Map props, [List<ReactNode> childrenArgs = const []]) {
     final children = generateChildren(childrenArgs, shouldAlwaysBeList: alwaysReturnChildrenAsList);
     final convertedProps =
         generateJsProps(props, convertCallbackRefValue: false, additionalRefPropKeys: _additionalRefPropKeys);
@@ -292,7 +292,7 @@ class ReactDomComponentFactoryProxy extends ReactComponentFactoryProxy {
   String get type => name;
 
   @override
-  ReactElement build(Map props, [List childrenArgs = const []]) {
+  ReactElement build(Map props, [List<ReactNode> childrenArgs = const []]) {
     final children = generateChildren(childrenArgs);
     final convertedProps = generateJsProps(props, convertCallbackRefValue: false, wrapWithJsify: true);
     return React.createElement(type, convertedProps, children);