Feat/support flutter widget

integration_tests/lib/custom/custom_element.dart

@@ -1,42 +1,79 @@
 import 'dart:async';
-import 'package:kraken/dom.dart';
+import 'package:kraken/dom.dart' as dom;
 import 'package:kraken/widget.dart';
-import 'package:flutter/material.dart' show TextDirection, TextStyle, Color, Image, Text, AssetImage, Widget, BuildContext hide Element;
+import 'package:waterfall_flow/waterfall_flow.dart';
+import 'package:flutter/material.dart';
+
+class WaterfallFlowWidgetElement extends WidgetElement {
+  WaterfallFlowWidgetElement(dom.EventTargetContext? context) :
+        super(context);
+
+  List<Widget> _children = [];
+
+  Widget _func (BuildContext context, int index) {
+    return _children[index];
+  }
+
+  @override
+  Widget build(BuildContext context, Map<String, dynamic> properties, List<Widget> children) {
+    _children = children;
+
+    return WaterfallFlow.builder(
+      itemBuilder: _func,
+      padding: EdgeInsets.all(5.0),
+      gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        crossAxisSpacing: 5.0,
+        mainAxisSpacing: 5.0,
+        lastChildLayoutTypeBuilder: (index) => index == children.length
+            ? LastChildLayoutType.foot
+            : LastChildLayoutType.none,
+      ),
+    );
+  }
+}
 
 class TextWidgetElement extends WidgetElement {
-  TextWidgetElement(EventTargetContext? context) :
+  TextWidgetElement(dom.EventTargetContext? context) :
         super(context);
 
   @override
-  Widget build(BuildContext context, Map<String, dynamic> properties) {
+  Widget build(BuildContext context, Map<String, dynamic> properties, List<Widget> children) {
     return Text(properties['value'] ?? '', textDirection: TextDirection.ltr, style: TextStyle(color: Color.fromARGB(255, 100, 100, 100)));
   }
 }
 
 class ImageWidgetElement extends WidgetElement {
-  ImageWidgetElement(EventTargetContext? context) :
+  ImageWidgetElement(dom.EventTargetContext? context) :
         super(context);
 
   @override
-  Widget build(BuildContext context, Map<String, dynamic> properties) {
+  Widget build(BuildContext context, Map<String, dynamic> properties, List<Widget> children) {
     return Image(image: AssetImage(properties['src']));
   }
 }
 
-void defineKrakenCustomElements() {
-  Kraken.defineCustomElement('sample-element', (EventTargetContext? context) {
-    return SampleElement(context);
-  });
-  Kraken.defineCustomElement('flutter-text', (EventTargetContext? context) {
-    return TextWidgetElement(context);
-  });
-  Kraken.defineCustomElement('flutter-asset-image', (EventTargetContext? context) {
-    return ImageWidgetElement(context);
-  });
+class ContainerWidgetElement extends WidgetElement {
+  ContainerWidgetElement(dom.EventTargetContext? context) :
+        super(context);
+
+  @override
+  Widget build(BuildContext context, Map<String, dynamic> properties, List<Widget> children) {
+    return Container(
+      width: 200,
+      height: 200,
+      decoration: const BoxDecoration(
+        border: Border( top: BorderSide( width: 5, color: Colors.red ), bottom: BorderSide( width: 5, color: Colors.red ), left: BorderSide( width: 5, color: Colors.red ), right: BorderSide( width: 5, color: Colors.red )),
+      ),
+      child: Column(
+        children: children,
+      ),
+    );
+  }
 }
 
-class SampleElement extends Element {
-  SampleElement(EventTargetContext? context)
+class SampleElement extends dom.Element {
+  SampleElement(dom.EventTargetContext? context)
       : super(context);
 
   @override
@@ -74,4 +111,20 @@ class SampleElement extends Element {
   }
 }
 
-
+void defineKrakenCustomElements() {
+  Kraken.defineCustomElement('waterfall-flow', (dom.EventTargetContext? context) {
+    return WaterfallFlowWidgetElement(context);
+  });
+  Kraken.defineCustomElement('flutter-container', (dom.EventTargetContext? context) {
+    return ContainerWidgetElement(context);
+  });
+  Kraken.defineCustomElement('sample-element', (dom.EventTargetContext? context) {
+    return SampleElement(context);
+  });
+  Kraken.defineCustomElement('flutter-text', (dom.EventTargetContext? context) {
+    return TextWidgetElement(context);
+  });
+  Kraken.defineCustomElement('flutter-asset-image', (dom.EventTargetContext? context) {
+    return ImageWidgetElement(context);
+  });
+}

integration_tests/pubspec.yaml

@@ -30,6 +30,7 @@ dependencies:
   kraken_video_player: ^2.0.0-dev.0
   kraken_websocket: ^1.0.0
   kraken_webview: ^2.0.0-dev.0
+  waterfall_flow: ^3.0.1
 
 dev_dependencies:
   flutter_test:

integration_tests/specs/dom/elements/custom-element.ts

@@ -39,6 +39,107 @@ describe('custom widget element', () => {
 
     simulateClick(20, 20);
   });
+
+  it('text node should be child of flutter container', async () => {
+    const container = document.createElement('flutter-container');
+    const text = document.createTextNode('text');
+    document.body.appendChild(container);
+    container.appendChild(text);
+    await snapshot();
+  });
+
+  it('element should be child of flutter container', async () => {
+    const container = document.createElement('flutter-container');
+    const element = document.createElement('div');
+    element.style.width = '30px';
+    element.style.height = '30px';
+    element.style.backgroundColor = 'red';
+    container.appendChild(element);
+    document.body.appendChild(container);
+    await snapshot();
+  });
+
+  it('flutter widget should be child of flutter container', async () => {
+    const container = document.createElement('flutter-container');
+    const fluttetText = document.createElement('flutter-text');
+    fluttetText.setAttribute('value', 'text');
+    container.appendChild(fluttetText);
+    document.body.appendChild(container);
+
+    await snapshot();
+  });
+
+  it('flutter widget and dom node should be child of flutter container', async () => {
+    const container = document.createElement('flutter-container');
+    document.body.appendChild(container);
+
+    const element = document.createElement('div');
+    element.style.backgroundColor = 'red';
+    element.appendChild(document.createTextNode('div element'));
+    container.appendChild(element);
+
+    const fluttetText = document.createElement('flutter-text');
+    fluttetText.setAttribute('value', 'text');
+    container.appendChild(fluttetText);
+
+    const text = document.createTextNode('text');
+    container.appendChild(text);
+
+    await snapshot();
+  });
+
+  it('flutter widget should be child of element', async () => {
+    const container = document.createElement('div');
+    container.style.width = '100px';
+    container.style.height = '100px';
+    container.style.backgroundColor = 'red';
+    const element = document.createElement('flutter-text');
+    element.setAttribute('value', 'text');
+    container.appendChild(element);
+    document.body.appendChild(container);
+
+    await snapshot();
+  });
+
+  it('flutter widget should be child of element and the element should be child of flutter widget', async () => {
+    const container = document.createElement('flutter-container');
+    document.body.appendChild(container);
+
+    const childContainer = document.createElement('div');
+    container.appendChild(childContainer);
+
+    const fluttetText = document.createElement('flutter-text');
+    fluttetText.setAttribute('value', 'text');
+    childContainer.appendChild(fluttetText);
+
+    await snapshot();
+  });
+
+  it('should work with waterfall-flow', async () => {
+    const flutterContainer = document.createElement('waterfall-flow');
+    flutterContainer.style.height = '100vh';
+    flutterContainer.style.display = 'block';
+
+    document.body.appendChild(flutterContainer);
+
+    const colors = ['red', 'yellow', 'black', 'blue', 'green'];
+
+    for (let i = 0; i < 10; i++) {
+      const div = document.createElement('div');
+      div.style.width = '100%';
+      div.style.border = `1px solid ${colors[i % colors.length]}`;
+      div.appendChild(document.createTextNode(`${i}`));
+
+      const img = document.createElement('img');
+      img.src = 'https://gw.alicdn.com/tfs/TB1CxCYq5_1gK0jSZFqXXcpaXXa-128-90.png';
+      div.appendChild(img);
+      img.style.width = '100px';
+
+      flutterContainer.appendChild(div);
+    }
+
+    await snapshot();
+  });
 });
 
 describe('custom html element', () => {

kraken/lib/src/dom/element.dart

@@ -15,6 +15,7 @@ import 'package:flutter/scheduler.dart';
 import 'package:kraken/css.dart';
 import 'package:kraken/dom.dart';
 import 'package:kraken/rendering.dart';
+import 'package:kraken/widget.dart';
 import 'package:kraken/src/dom/element_event.dart';
 import 'package:kraken/src/dom/element_view.dart';
 import 'package:meta/meta.dart';
@@ -577,7 +578,10 @@ class Element extends Node
     }
 
     if (renderer != null) {
-      _attachRenderBoxModel(parent.renderer!, renderer!, after: after);
+      // If element attach WidgetElement, render obeject should be attach to render tree when mount.
+      if (parent is! WidgetElement) {
+        _attachRenderBoxModel(parent.renderer!, renderer!, after: after);
+      }
 
       // Flush pending style before child attached.
       style.flushPendingProperties();
@@ -636,7 +640,7 @@ class Element extends Node
     RenderLayoutBox? renderLayoutBox = _renderLayoutBox;
     if (isRendererAttached) {
       // Only append child renderer when which is not attached.
-      if (!child.isRendererAttached && renderLayoutBox != null) {
+      if (!child.isRendererAttached && renderLayoutBox != null && this is! WidgetElement) {
         RenderBox? after;
         RenderLayoutBox? scrollingContentBox = renderLayoutBox.renderScrollingContent;
         if (scrollingContentBox != null) {
@@ -805,7 +809,10 @@ class Element extends Node
     _updateRenderBoxModel();
     // Attach renderBoxModel to parent if change from `display: none` to other values.
     if (!isRendererAttached && parentElement != null && parentElement!.isRendererAttached) {
-      _addToContainingBlock(after: previousSibling?.renderer);
+      // If element attach WidgetElement, render obeject should be attach to render tree when mount.
+      if (parentNode is! WidgetElement) {
+        _addToContainingBlock(after: previousSibling?.renderer);
+      }
       ensureChildAttached();
     }
   }

kraken/lib/src/dom/node.dart

@@ -6,6 +6,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 import 'package:kraken/dom.dart';
 import 'package:meta/meta.dart';
+import 'package:kraken/widget.dart';
 
 enum NodeType {
   ELEMENT_NODE,
@@ -71,6 +72,8 @@ abstract class LifecycleCallbacks {
 }
 
 abstract class Node extends EventTarget implements RenderObjectNode, LifecycleCallbacks {
+  KrakenElementToFlutterElementAdaptor? flutterElement;
+  KrakenElementToWidgetAdaptor? flutterWidget;
   List<Node> childNodes = [];
   /// The Node.parentNode read-only property returns the parent of the specified node in the DOM tree.
   Node? parentNode;

kraken/lib/src/launcher/controller.dart

@@ -10,6 +10,7 @@ import 'dart:io';
 import 'dart:typed_data';
 import 'dart:ui' as ui;
 
+import 'package:flutter/widgets.dart' show RenderObjectElement;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/scheduler.dart';
@@ -24,6 +25,7 @@ import 'package:kraken/rendering.dart';
 import 'package:kraken/widget.dart';
 import 'package:kraken/src/dom/element_registry.dart' as element_registry;
 
+
 import 'bundle.dart';
 
 const int WINDOW_ID = -1;
@@ -769,6 +771,8 @@ class KrakenController {
 
   UriParser? uriParser;
 
+  late RenderObjectElement rootFlutterElement;
+
   static KrakenController? getControllerOfJSContextId(int? contextId) {
     if (!_controllerMap.containsKey(contextId)) {
       return null;
@@ -820,22 +824,25 @@ class KrakenController {
 
   final GestureListener? _gestureListener;
 
-  KrakenController(String? name, double viewportWidth, double viewportHeight,
-      {bool showPerformanceOverlay = false,
-      enableDebug = false,
-      Color? background,
-      GestureListener? gestureListener,
-      KrakenNavigationDelegate? navigationDelegate,
-      KrakenMethodChannel? methodChannel,
-      this.widgetDelegate,
-      this.bundle,
-      this.onLoad,
-      this.onLoadError,
-      this.onJSError,
-      this.httpClientInterceptor,
-      this.devToolsService,
-      this.uriParser})
-      : _name = name,
+  KrakenController(
+    String? name,
+    double viewportWidth,
+    double viewportHeight, {
+    bool showPerformanceOverlay = false,
+    enableDebug = false,
+    Color? background,
+    GestureListener? gestureListener,
+    KrakenNavigationDelegate? navigationDelegate,
+    KrakenMethodChannel? methodChannel,
+    this.widgetDelegate,
+    this.bundle,
+    this.onLoad,
+    this.onLoadError,
+    this.onJSError,
+    this.httpClientInterceptor,
+    this.devToolsService,
+    this.uriParser,
+  })  : _name = name,
         _gestureListener = gestureListener {
     if (kProfileMode) {
       PerformanceTiming.instance().mark(PERF_CONTROLLER_PROPERTY_INIT);

kraken/lib/src/rendering/flow.dart

@@ -542,8 +542,11 @@ class RenderFlowLayout extends RenderLayoutBox {
         childConstraints = child.getConstraints();
       } else if (child is RenderTextBox) {
         childConstraints = child.getConstraints();
-      } else {
+      } else if (child is RenderPositionPlaceholder) {
         childConstraints = BoxConstraints();
+      } else {
+        // Custom element.
+        childConstraints = constraints;
       }
 
       // Whether child need to layout
@@ -629,8 +632,12 @@ class RenderFlowLayout extends RenderLayoutBox {
       runMainAxisExtent += childMainAxisExtent;
 
       /// Calculate baseline extent of layout box
-      RenderStyle childRenderStyle = _getChildRenderStyle(child)!;
-      VerticalAlign verticalAlign = childRenderStyle.verticalAlign;
+      RenderStyle? childRenderStyle = _getChildRenderStyle(child);
+      VerticalAlign verticalAlign = VerticalAlign.baseline;
+      if (childRenderStyle != null) {
+        verticalAlign = childRenderStyle.verticalAlign;
+      }
+
 
       bool isLineHeightValid = _isLineHeightValid(child);