Workiva · rmconsole7-wk · Oct 7, 2024 · Sep 10, 2024 · Sep 10, 2024 · Sep 10, 2024
diff --git a/example/suspense/index.html b/example/suspense/index.html
@@ -16,23 +16,56 @@
 
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
-  <meta charset="utf-8">
-  <title>over_react Suspense example</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
+    <meta charset="utf-8" />
+    <title>over_react Suspense example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 
-  <!-- javascript -->
+    <!-- javascript -->
+  </head>
+  <body>
+    <div id="content"></div>
 
-</head>
-<body>
-<div id="content"></div>
-
-<script src="packages/react/react_prod.js"></script>
-<script src="packages/react/react_dom_prod.js"></script>
-
-<script type="application/javascript" defer src="main.dart.js"></script>
-</body>
+    <script src="packages/react/react_prod.js"></script>
+    <script src="packages/react/react_dom_prod.js"></script>
+    <script>
+      const defaultMessageContext = React.createContext('default context value');
+      window.TestJsComponent = React.forwardRef(function (props, ref) {
+        const {
+          buttonProps = {},
+          listOfProps = [],
+          inputRef,
+          buttonComponent = 'button',
+          inputComponent = 'input',
+          component = 'span',
+          children,
+          messageContext = defaultMessageContext,
+          ...rest
+        } = props;
+        let message = React.useContext(messageContext);
+        if (typeof message !== 'string') {
+          // Work around react-dart always wrapping values in an object (FED-467)
+          // whose value is under a property `Symbol('react-dart.context')`.
+          // Since it's a local symbol, we can't construct a matching symbol, so we find the matching one.
+          const symbol = Object.getOwnPropertySymbols(message).find((s) =>
+            s.description.includes('react-dart.context')
+          );
+          message = message[symbol];
+        }
+        return React.createElement(
+          'div',
+          {},
+          React.createElement(buttonComponent, buttonProps),
+          React.createElement('li', listOfProps[0]),
+          React.createElement(inputComponent, { type: 'text', ref: inputRef }),
+          React.createElement(component, { ...rest, ref }, children),
+          React.createElement('div', { role: 'alert' }, message)
+        );
+      });
+    </script>
+    <script type="application/javascript" defer src="main.dart.js"></script>
+  </body>
 </html>
diff --git a/example/suspense/lazy.dart b/example/suspense/lazy.dart
diff --git a/example/suspense/main.dart b/example/suspense/main.dart
@@ -14,21 +14,69 @@
 
 import 'dart:html';
 
+import 'package:js/js.dart';
+import 'package:over_react/js_component.dart';
 import 'package:over_react/over_react.dart';
+import 'package:react/react_client/component_factory.dart';
+import 'package:react/react_client/react_interop.dart' hide lazy;
 import 'package:react/react_dom.dart' as react_dom;
 import 'counter_component.dart' deferred as lazy_component;
-import 'lazy.dart';
 import 'third_party_file.dart';
 
-final LazyCounter = lazy(() async {
-  await lazy_component.loadLibrary();
+part 'main.over_react.g.dart';
+
+@Props(keyNamespace: '')
+mixin TestJsProps on UiProps {
+  @Accessor(key: 'buttonProps')
+  JsMap? _$raw$buttonProps;
+
+  Map? get buttonProps => unjsifyMapProp(_$raw$buttonProps);
+  set buttonProps(Map? value) => _$raw$buttonProps = jsifyMapProp(value);
+
+  @Accessor(key: 'listOfProps')
+  List<dynamic>? _$raw$listOfProps;
+
+  List<Map?>? get listOfProps => unjsifyMapListProp(_$raw$listOfProps);
+  set listOfProps(List<Map?>? value) => _$raw$listOfProps = jsifyMapListProp(value);
+
+  @Accessor(key: 'inputRef')
+  dynamic _$raw$inputRef;
+
+  dynamic get inputRef => unjsifyRefProp(_$raw$inputRef);
+  set inputRef(dynamic value) => _$raw$inputRef = jsifyRefProp(value);
+
+  @Accessor(key: 'messageContext')
+  ReactContext? _$raw$messageContext;
+
+  Context<String?>? get messageContext => unjsifyContextProp(_$raw$messageContext);
+  set messageContext(Context<String?>? value) => _$raw$messageContext = jsifyContextProp(value);
+
+  dynamic /*ElementType*/ component;
+  dynamic /*ElementType*/ inputComponent;
+  dynamic /*ElementType*/ buttonComponent;
+}
+
+@JS('TestJsComponent')
+external ReactClass get _TestJs;
+
+UiFactory<TestJsProps> TestJs = uiJsComponent(
+  ReactJsComponentFactoryProxy(_TestJs),
+  _$TestJsConfig, // ignore: undefined_identifier
+);
+
+UiFactory<TestJsProps> LazyTestJs = lazy(() async => TestJs,
+_$TestJsConfig, // ignore: undefined_identifier
+);
+
+UiFactory<CounterPropsMixin> LazyCounter = lazy(() async {
   await Future.delayed(Duration(seconds: 5));
+  await lazy_component.loadLibrary();
   return lazy_component.Counter;
 },
-    UiFactoryConfig(
-      propsFactory: PropsFactory.fromUiFactory(CounterPropsMapView),
-      displayName: 'This does nothing...',
-    ));
+UiFactoryConfig(
+  propsFactory: PropsFactory.fromUiFactory(CounterPropsMapView)
+  )
+);
 
 void main() {
   react_dom.render(
@@ -38,7 +86,7 @@ void main() {
             'I am a fallback UI that will show while we load the lazy component! The load time is artificially inflated to last an additional 5 seconds just to prove it\'s working!',
           )
         )(
-          (LazyCounter()..initialCount = 2)(
+          (LazyTestJs())(
             (Dom.div()..id = 'Heyyy!')(),
           ),
         ),

diff --git a/lib/over_react.dart b/lib/over_react.dart
@@ -101,6 +101,7 @@ export 'src/util/guid_util.dart';
 export 'src/util/hoc.dart';
 export 'src/util/handler_chain_util.dart';
 export 'src/util/key_constants.dart';
+export 'src/util/lazy.dart';
 export 'src/util/map_util.dart';
 export 'src/util/memo.dart';
 export 'src/util/pretty_print.dart';

diff --git a/lib/src/util/lazy.dart b/lib/src/util/lazy.dart
@@ -0,0 +1,71 @@
+// Copyright 2020 Workiva Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+library over_react.lazy;
+
+import 'package:over_react/over_react.dart';
+import 'package:react/react.dart' as react;
+
+UiFactory<TProps> lazy<TProps extends UiProps>(
+    Future<UiFactory<TProps>> Function() loadComponent, /* UiFactoryConfig<TProps> */ dynamic _config,
+    {bool useJsFactoryProxy = false}) {
+  ArgumentError.checkNotNull(_config, '_config');
+
+  if (_config is! UiFactoryConfig<TProps>) {
+    throw ArgumentError('_config should be a UiFactoryConfig<TProps>. Make sure you are '
+        r'using either the generated factory config (i.e. _$FooConfig) or manually '
+        'declaring your config correctly.');
+  }
+  // ignore: invalid_use_of_protected_member
+  final propsFactory = _config.propsFactory;
+  ArgumentError.checkNotNull(propsFactory, '_config.propsFactory');
+  propsFactory!;
+
+  final lazyFactoryProxy = react.lazy(() async {
+    final factory = await loadComponent();
+    // By using a wrapper uiForwardRef it ensures that we have a matching factory proxy type given to react-dart's lazy,
+    // a `ReactDartWrappedComponentFactoryProxy`. This is necessary to have consistent prop conversions since we don't
+    // have access to the original factory proxy outside of this async block.
+    final wrapper = uiForwardRef<TProps>(
+      (props, ref) {
+        final builder = factory()
+          ..addProps(props)
+          ..ref = ref;
+        return props.children == null || (props.children != null && props.children?.isEmpty != false)
+            ? builder()
+            : builder(props.children);
+      },
+      UiFactoryConfig(
+        propsFactory: PropsFactory.fromUiFactory(factory),
+        displayName: 'Lazy${_config.displayName}',
+      ),
+    );
+    return wrapper().componentFactory!;
+  });
+
+  TProps _uiFactory([Map? props]) {
+    TProps builder;
+    if (props == null) {
+      builder = propsFactory.jsMap(JsBackedMap());
+    } else if (props is JsBackedMap) {
+      builder = propsFactory.jsMap(props);
+    } else {
+      builder = propsFactory.map(props);
+    }
+
+    return builder..componentFactory = lazyFactoryProxy;
+  }
+
+  return _uiFactory;
+}
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -48,3 +48,9 @@ workiva:
   core_checks:
     version: 1
     react_boilerplate: disabled
+
+dependency_overrides:
+  react:
+    git:
+      url: https://github.com/Workiva/react-dart.git
+      ref: FED-3114-lazy