get lazy prop conversion tests going

Workiva · Sep 16, 2024 · 6b6fd4c · 6b6fd4c
1 parent 131ceb9
commit 6b6fd4c
Show file tree

Hide file tree

Showing 3 changed files with 760 additions and 357 deletions.
diff --git a/lib/src/util/lazy.dart b/lib/src/util/lazy.dart
@@ -14,43 +14,45 @@
 
 library over_react.lazy;
 
-import 'dart:html';
-
 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}) {
+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 '
+    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
+  // 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();
-              // 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!;
-    return factory().componentFactory!;
-  }, useJsFactoryProxy: useJsFactoryProxy);
+    // 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;