From 4c93f8356ffa3e6e237af6d781b41ba32bd4c6ff Mon Sep 17 00:00:00 2001 From: Pavel Mazhnik Date: Sat, 2 Mar 2024 11:26:48 +0300 Subject: [PATCH] [ng-flutter] migrate to pkg:web (#2173) --- .../ng-flutter/flutter/lib/main.dart | 2 +- .../flutter/lib/src/js_interop.dart | 3 +- .../flutter/lib/src/js_interop/dom.dart | 56 ------------------- .../flutter/lib/src/js_interop/helper.dart | 13 +++-- web_embedding/ng-flutter/flutter/pubspec.yaml | 4 +- 5 files changed, 14 insertions(+), 64 deletions(-) delete mode 100644 web_embedding/ng-flutter/flutter/lib/src/js_interop/dom.dart diff --git a/web_embedding/ng-flutter/flutter/lib/main.dart b/web_embedding/ng-flutter/flutter/lib/main.dart index 09a121b99..76a610c87 100644 --- a/web_embedding/ng-flutter/flutter/lib/main.dart +++ b/web_embedding/ng-flutter/flutter/lib/main.dart @@ -35,7 +35,7 @@ class _MyAppState extends State { 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); diff --git a/web_embedding/ng-flutter/flutter/lib/src/js_interop.dart b/web_embedding/ng-flutter/flutter/lib/src/js_interop.dart index 23a00c2a7..e4f9b14f0 100644 --- a/web_embedding/ng-flutter/flutter/lib/src/js_interop.dart +++ b/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; diff --git a/web_embedding/ng-flutter/flutter/lib/src/js_interop/dom.dart b/web_embedding/ng-flutter/flutter/lib/src/js_interop/dom.dart deleted file mode 100644 index cbdb42667..000000000 --- a/web_embedding/ng-flutter/flutter/lib/src/js_interop/dom.dart +++ /dev/null @@ -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, { - '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; diff --git a/web_embedding/ng-flutter/flutter/lib/src/js_interop/helper.dart b/web_embedding/ng-flutter/flutter/lib/src/js_interop/helper.dart index d20a1f2e5..cb36bced7 100644 --- a/web_embedding/ng-flutter/flutter/lib/src/js_interop/helper.dart +++ b/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)); } diff --git a/web_embedding/ng-flutter/flutter/pubspec.yaml b/web_embedding/ng-flutter/flutter/pubspec.yaml index ce1193741..5bc5293dd 100644 --- a/web_embedding/ng-flutter/flutter/pubspec.yaml +++ b/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: