add child helpers

tekartik · Feb 21, 2025 · b9a8006 · b9a8006
1 parent 87c4ad7
commit b9a8006
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 0 deletions.
diff --git a/lib/src/html.dart b/lib/src/html.dart
@@ -259,6 +259,8 @@ abstract class HtmlProvider {
 
   Element createElementTag(String tag);
   Element createElementHtml(String html, {bool? noValidate});
+  List<Node> createNodesHtml(String html, {bool? noValidate});
+  List<Element> createElementsHtml(String html, {bool? noValidate});
   Text createTextNode(String text);
 
   // wrap a native document
@@ -279,3 +281,52 @@ abstract class HtmlProvider {
   // get the native element
   Object unwrapNode(Node node);
 }
+
+extension TekartikHtmlNodeExt on Node {
+  /// Append a text node
+  Text appendText(String text) {
+    var textNode = htmlProvider.createTextNode(text);
+    appendChild(textNode);
+    return textNode;
+  }
+
+  /// Apppend a lf
+  void appendLf() {
+    appendText('\n');
+  }
+
+  /// create a new element and append it
+  Element appendElementTag(String tag) {
+    var element = htmlProvider.createElementTag(tag);
+    appendChild(element);
+    return element;
+  }
+
+  Element appendElementHtml(String html, {bool? noValidate}) {
+    var element = htmlProvider.createElementHtml(html, noValidate: noValidate);
+    appendChild(element);
+    return element;
+  }
+
+  /// Trim inner nodes
+  List<Element> appendElementsHtml(String html, {bool? noValidate}) {
+    var elements =
+        htmlProvider.createElementsHtml(html, noValidate: noValidate);
+    appendChildren(elements);
+    return elements;
+  }
+
+  /// Trim inner nodes
+  List<Node> appendChildren(List<Node> children) {
+    for (var element in children) {
+      appendChild(element);
+    }
+    return children;
+  }
+
+  /// Append nodes as is
+  List<Node> appendNodesHtml(String html, {bool? noValidate}) {
+    var nodes = htmlProvider.createNodesHtml(html, noValidate: noValidate);
+    return appendChildren(nodes);
+  }
+}
diff --git a/lib/src/html5lib/html_html5lib.dart b/lib/src/html5lib/html_html5lib.dart
@@ -579,6 +579,25 @@ class _HtmlProviderHtml5Lib extends HtmlProvider
     return _ElementHtml5lib.from(html5lib.Element.html(html))!;
   }
 
+  @override
+  List<Node> createNodesHtml(String html, {bool? noValidate}) {
+    // noValidate is implicit when using html5 lib
+    return _createParentDivElement(html, noValidate: noValidate).childNodes;
+  }
+
+  @override
+  List<Element> createElementsHtml(String html, {bool? noValidate}) {
+    // noValidate is implicit when using html5 lib
+    return _createParentDivElement(html, noValidate: noValidate)
+        .children
+        .toList();
+  }
+
+  Element _createParentDivElement(String html, {bool? noValidate}) {
+    // noValidate is implicit when using html5 lib
+    return createElementHtml('<div>$html</div>', noValidate: noValidate);
+  }
+
   @override
   String get name => providerHtml5LibName;
 

diff --git a/lib/src/web/html_web.dart b/lib/src/web/html_web.dart
@@ -414,6 +414,26 @@ class _HtmlProviderWeb implements HtmlProviderWeb {
     });
   }
 
+  @override
+  List<Node> createNodesHtml(String html, {bool? noValidate}) {
+    // noValidate is implicit when using html5 lib
+    var div = _createParentDivHtml(html, noValidate: noValidate);
+    return div.childNodes;
+  }
+
+  Element _createParentDivHtml(String html, {bool? noValidate}) {
+    // noValidate is implicit when using html5 lib
+    var div = createElementHtml('<div>$html</div>', noValidate: noValidate);
+    return div;
+  }
+
+  @override
+  List<Element> createElementsHtml(String html, {bool? noValidate}) {
+    // noValidate is implicit when using html5 lib
+    var div = _createParentDivHtml(html, noValidate: noValidate);
+    return div.children.toList();
+  }
+
   @override
   Element createElementTag(String tag) =>
       _Element(web.window.document.createElement(tag));

diff --git a/test/element_test.dart b/test/element_test.dart
@@ -135,6 +135,45 @@ void testMain(HtmlProvider html) {
         expect(element.children.length, 2);
       }
     });
+    test('noscript', () {
+      final element = html.createElementHtml('<noscript></noscript>');
+      expect(element.tagName, 'noscript');
+    });
+    test('meta', () {
+      final element = html.createElementHtml('<meta charset="utf-8">');
+      expect(element.tagName, 'meta');
+    });
+    test('link', () {
+      final element = html.createElementHtml(
+          '<link rel="icon" href="https://via.placeholder.com/70x70">');
+      expect(element.tagName, 'link');
+    });
+    test('multi', () {
+      final nodes = html.createNodesHtml(
+          '\n<link rel="icon" href="https://via.placeholder.com/70x70">\n'
+          '<meta charset="utf-8">'
+          '<noscript></noscript>\n');
+      expect(nodes.length, 6);
+      var elements = html.createElementsHtml(
+          '\n<link rel="icon" href="https://via.placeholder.com/70x70">\n'
+          '<meta charset="utf-8">'
+          '<noscript></noscript>\n');
+      expect(elements.length, 3);
+    });
+    test('extension', () {
+      var ul = html.createElementTag('ul');
+      for (var text in ['monday', 'tuesday', 'wednesday']) {
+        var li = html.createElementTag('li');
+        li.text = text;
+        ul.append(li);
+        ul.appendLf();
+      }
+      expect(ul.outerHtml, '''
+<ul><li>monday</li>
+<li>tuesday</li>
+<li>wednesday</li>
+</ul>''');
+    });
     test('custom_no_validate', () {
       final element = html.createElementHtml(
           '<div><div class="--dtk-include" title="some/path/1"></div><meta property="dtk-include" content="some/path/2" /></div>',