krokyze · krokyze · Dec 9, 2024 · Dec 9, 2024 · Dec 9, 2024 · Dec 9, 2024
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -49,7 +49,7 @@ jobs:
           cd example
           fvm config --cache-path ../.fvm/cache
           fvm flutter pub get
-          fvm flutter build web --release --web-renderer auto
+          fvm flutter build web --wasm --release
       - name: deploy to netlify
         uses: nwtgck/[email protected]
         with:

diff --git a/example/.metadata b/example/.metadata
@@ -4,7 +4,7 @@
 # This file should be version controlled and should not be manually edited.
 
 version:
-  revision: "a14f74ff3a1cbd521163c5f03d68113d50af93d3"
+  revision: "2663184aa79047d0a33a14a3b607954f8fdd8730"
   channel: "stable"
 
 project_type: app
@@ -13,11 +13,11 @@ project_type: app
 migration:
   platforms:
     - platform: root
-      create_revision: a14f74ff3a1cbd521163c5f03d68113d50af93d3
-      base_revision: a14f74ff3a1cbd521163c5f03d68113d50af93d3
+      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
+      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
     - platform: web
-      create_revision: a14f74ff3a1cbd521163c5f03d68113d50af93d3
-      base_revision: a14f74ff3a1cbd521163c5f03d68113d50af93d3
+      create_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
+      base_revision: 2663184aa79047d0a33a14a3b607954f8fdd8730
 
   # User provided section
 

diff --git a/example/web/index.html b/example/web/index.html
@@ -1,22 +1,22 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<base href="$FLUTTER_BASE_HREF" />
-
-		<meta charset="UTF-8" />
-		<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
-
-		<!-- iOS meta tags & icons -->
-		<meta name="apple-mobile-web-app-capable" content="yes" />
-		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
-		<meta name="apple-mobile-web-app-title" content="example" />
-		<link rel="apple-touch-icon" href="icons/Icon-192.png" />
-
-		<!-- Favicon -->
-		<link rel="icon" type="image/png" href="favicon.png" />
-		<link rel="manifest" href="manifest.json" />
-	</head>
-	<body>
-		<script src="flutter_bootstrap.js" async></script>
-	</body>
-</html>
+<!doctype html>
+<html>
+	<head>
+		<base href="$FLUTTER_BASE_HREF" />
+
+		<meta charset="UTF-8" />
+		<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
+
+		<!-- iOS meta tags & icons -->
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+		<meta name="apple-mobile-web-app-title" content="example" />
+		<link rel="apple-touch-icon" href="icons/Icon-192.png" />
+
+		<!-- Favicon -->
+		<link rel="icon" type="image/png" href="favicon.png" />
+		<link rel="manifest" href="manifest.json" />
+	</head>
+	<body>
+		<script src="flutter_bootstrap.js" async></script>
+	</body>
+</html>
diff --git a/lib/html/node_list_extension.dart b/lib/html/node_list_extension.dart
@@ -0,0 +1,7 @@
+import 'package:web/web.dart';
+
+extension NodeListExtension on NodeList {
+  List<Node?> toList() {
+    return List.generate(length, (index) => item(index));
+  }
+}
diff --git a/lib/html/seo_controller.dart b/lib/html/seo_controller.dart
@@ -1,6 +1,7 @@
 import 'dart:async';
-// ignore: avoid_web_libraries_in_flutter
-import 'dart:html';
+import 'dart:js_interop';
+import 'package:seo/html/node_list_extension.dart';
+import 'package:web/web.dart';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
@@ -43,38 +44,6 @@ class SeoController extends StatefulWidget {
 }
 
 class _SeoControllerState extends State<SeoController> {
-  final _headValidator = NodeValidatorBuilder()
-    ..allowHtml5(uriPolicy: _AllowAllUriPolicy())
-    ..allowCustomElement(
-      'meta',
-      attributes: ['name', 'http-equiv', 'content', 'flt-seo'],
-    )
-    ..allowCustomElement(
-      'link',
-      attributes: [
-        'title',
-        'rel',
-        'type',
-        'hreflang',
-        'href',
-        'media',
-        'flt-seo'
-      ],
-    );
-
-  final _bodyValidator = NodeValidatorBuilder()
-    ..allowHtml5(uriPolicy: _AllowAllUriPolicy())
-    ..allowCustomElement('div', attributes: ['flt-seo'])
-    ..allowCustomElement('noscript')
-    ..allowCustomElement('h1', attributes: ['style'])
-    ..allowCustomElement('h2', attributes: ['style'])
-    ..allowCustomElement('h3', attributes: ['style'])
-    ..allowCustomElement('h4', attributes: ['style'])
-    ..allowCustomElement('h5', attributes: ['style'])
-    ..allowCustomElement('h6', attributes: ['style'])
-    ..allowCustomElement('p', attributes: ['style'])
-    ..allowCustomElement('a', attributes: ['rel']);
-
   StreamSubscription? _subscription;
   int? _headHash;
   int? _bodyHash;
@@ -129,13 +98,15 @@ class _SeoControllerState extends State<SeoController> {
     if (_headHash == hash) return;
     _headHash = hash;
 
-    head.children
-        .removeWhere((element) => element.attributes.containsKey('flt-seo'));
+    head
+        .querySelectorAll('[flt-seo]')
+        .toList()
+        .nonNulls
+        .forEach((node) => head.removeChild(node));
 
-    head.insertAdjacentHtml(
+    head.insertAdjacentHTML(
       'beforeEnd',
-      html.head,
-      validator: _headValidator,
+      html.head.toJS,
     );
   }
 
@@ -147,13 +118,15 @@ class _SeoControllerState extends State<SeoController> {
     if (_bodyHash == hash) return;
     _bodyHash = hash;
 
-    body.children
-        .removeWhere((element) => element.attributes.containsKey('flt-seo'));
+    body
+        .querySelectorAll('[flt-seo]')
+        .toList()
+        .nonNulls
+        .forEach((node) => body.removeChild(node));
 
-    body.insertAdjacentHtml(
+    body.insertAdjacentHTML(
       'afterBegin',
-      '<div flt-seo>${html.body}</div>',
-      validator: _bodyValidator,
+      '<div flt-seo>${html.body}</div>'.toJS,
     );
   }
 
@@ -173,11 +146,6 @@ class _SeoControllerState extends State<SeoController> {
   }
 }
 
-class _AllowAllUriPolicy implements UriPolicy {
-  @override
-  bool allowsUri(String uri) => true;
-}
-
 class _InheritedSeoTreeWidget extends InheritedWidget {
   final SeoTree tree;
 

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -11,6 +11,7 @@ dependencies:
   flutter:
     sdk: flutter
   rxdart: ">=0.27.5 <0.29.0"
+  web: ^1.1.0
 
 dev_dependencies:
   flutter_lints: ^5.0.0

diff --git a/test/base.dart b/test/base.dart
@@ -1,21 +1,24 @@
-// ignore: avoid_web_libraries_in_flutter
-import 'dart:html';
+import 'package:seo/html/node_list_extension.dart';
+import 'package:web/web.dart';
 import 'dart:ui';
 
-import 'package:collection/collection.dart';
-
 const largeScreenSize = Size(1024, 2048 * 128);
 
 const debounceTime = Duration(milliseconds: 250);
 
-String? get headHtml => document.head?.children
-    .where((element) => element.attributes.containsKey('flt-seo'))
-    .map((element) => element.outerHtml)
+String? get headHtml => document.head
+    ?.querySelectorAll('[flt-seo]')
+    .toList()
+    .whereType<Element>()
+    .map((node) => node.outerHTML.toString())
     .join('\n');
 
-String? get bodyHtml => document.body?.children
-    .firstWhereOrNull((element) => element.attributes.containsKey('flt-seo'))
-    ?.innerHtml;
+String? get bodyHtml => document.body
+    ?.querySelectorAll('[flt-seo]')
+    .toList()
+    .whereType<Element>()
+    .map((node) => node.innerHTML.toString())
+    .firstOrNull;
 
 Duration measure<T>(T Function() measure) {
   final stopwatch = Stopwatch()..start();

diff --git a/test/semantics_tree_test.dart b/test/semantics_tree_test.dart
@@ -53,7 +53,7 @@ void main() {
 
     expect(
       bodyHtml,
-      '<div><noscript><img src="$src" alt="$alt" height="$height" width="$width"></noscript></div>',
+      '<div><noscript><img src="$src" alt="$alt" height="$height" width="$width"/></noscript></div>',
     );
   });
 
@@ -86,7 +86,7 @@ void main() {
 
     expect(
       bodyHtml,
-      '<div><div><a href="$href"><p>$anchor</p></a><noscript><img src="$src" alt="$alt" height="$height" width="$width"></noscript><p style="color:black;">$text</p></div></div>',
+      '<div><div><a href="$href"><p>$anchor</p></a><noscript><img src="$src" alt="$alt" height="$height" width="$width"/></noscript><p style="color:black;">$text</p></div></div>',
     );
   });
 

diff --git a/test/widget_tree_test.dart b/test/widget_tree_test.dart
@@ -54,7 +54,7 @@ void main() {
 
     expect(
       bodyHtml,
-      '<div><noscript><img src="$src" alt="$alt" height="$height" width="$width"></noscript></div>',
+      '<div><noscript><img src="$src" alt="$alt" height="$height" width="$width"/></noscript></div>',
     );
   });
 
@@ -101,7 +101,7 @@ void main() {
 
     expect(
       bodyHtml,
-      '<div><div><a href="$href"><p>$anchor</p></a><noscript><img src="$src" alt="$alt" height="$height" width="$width"></noscript><p style="color:black;">$text</p></div></div>',
+      '<div><div><a href="$href"><p>$anchor</p></a><noscript><img src="$src" alt="$alt" height="$height" width="$width"/></noscript><p style="color:black;">$text</p></div></div>',
     );
   });