[ng-flutter] migrate to pkg:web (#2173)

web_embedding/ng-flutter/flutter/lib/main.dart

@@ -35,7 +35,7 @@ class _MyAppState extends State<MyApp> {
       counter: _counter,
       text: _text,
     );
-    final export = createDartExport(_state);
+    final export = createJSInteropWrapper(_state);
 
     // Emit this through the root object of the flutter app :)
     broadcastAppEvent('flutter-initialized', export);

web_embedding/ng-flutter/flutter/lib/src/js_interop.dart

@@ -4,5 +4,4 @@ library;
 export 'js_interop/counter_state_manager.dart';
 export 'js_interop/helper.dart' show broadcastAppEvent;
 
-// Replace with createJSInteropWrapper when updating to Dart 3.3.
-export 'dart:js_util' show createDartExport;
+export 'dart:js_interop' show createJSInteropWrapper;

web_embedding/ng-flutter/flutter/lib/src/js_interop/dom.dart

@@ -1,56 +0,0 @@
-/// This is a little bit of JS-interop code so this Flutter app can dispatch
-/// a custom JS event (to be deprecated by package:web)
-library;
-
-import 'dart:js_interop';
-
-@JS('CustomEvent')
-@staticInterop
-class DomCustomEvent {
-  external factory DomCustomEvent.withType(JSString type);
-  external factory DomCustomEvent.withOptions(JSString type, JSAny options);
-  factory DomCustomEvent._(String type, [Object? options]) {
-    if (options != null) {
-      return DomCustomEvent.withOptions(type.toJS, options.jsify()!);
-    }
-    return DomCustomEvent.withType(type.toJS);
-  }
-}
-
-dispatchCustomEvent(DomElement target, String type, Object data) {
-  final DomCustomEvent event = DomCustomEvent._(type, <String, Object>{
-    'bubbles': true,
-    'composed': true,
-    'detail': data,
-  });
-
-  target.dispatchEvent(event);
-}
-
-@JS()
-@staticInterop
-class DomEventTarget {}
-
-extension DomEventTargetExtension on DomEventTarget {
-  @JS('dispatchEvent')
-  external JSBoolean _dispatchEvent(DomCustomEvent event);
-  bool dispatchEvent(DomCustomEvent event) => _dispatchEvent(event).toDart;
-}
-
-@JS()
-@staticInterop
-class DomElement extends DomEventTarget {}
-
-extension DomElementExtension on DomElement {
-  @JS('querySelector')
-  external DomElement? _querySelector(JSString selectors);
-  DomElement? querySelector(String selectors) => _querySelector(selectors.toJS);
-}
-
-@JS()
-@staticInterop
-class DomDocument extends DomElement {}
-
-@JS()
-@staticInterop
-external DomDocument get document;

web_embedding/ng-flutter/flutter/lib/src/js_interop/helper.dart

@@ -1,10 +1,15 @@
-import 'dom.dart' as dom;
+import 'dart:js_interop';
+import 'package:web/web.dart';
 
 /// Locates the root of the flutter app (for now, the first element that has
 /// a flt-renderer tag), and dispatches a JS event named [name] with [data].
-void broadcastAppEvent(String name, Object data) {
-  final dom.DomElement? root = dom.document.querySelector('[flt-renderer]');
+void broadcastAppEvent(String name, JSObject data) {
+  final HTMLElement? root = document.querySelector('[flt-renderer]') as HTMLElement?;
   assert(root != null, 'Flutter root element cannot be found!');
 
-  dom.dispatchCustomEvent(root!, name, data);
+  final eventDetails = CustomEventInit(detail: data);
+  eventDetails.bubbles = true;
+  eventDetails.composed = true;
+
+  root!.dispatchEvent(CustomEvent(name, eventDetails));
 }

web_embedding/ng-flutter/flutter/pubspec.yaml

@@ -4,11 +4,13 @@ publish_to: 'none'
 version: 1.0.0
 
 environment:
-  sdk: ^3.2.0
+  sdk: ^3.3.0
+  flutter: ">=3.19.0"
 
 dependencies:
   flutter:
     sdk: flutter
+  web: ^0.5.0
 
 dev_dependencies:
   flutter_test: