[web] Remove dependency on dart:js. (flutter#34211)

Author: joshualitt

lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart

@@ -13,7 +13,7 @@
 library canvaskit_api;
 
 import 'dart:async';
-import 'dart:js' as js;
+import 'dart:js_util' as js_util;
 import 'dart:typed_data';
 
 import 'package:js/js.dart';
@@ -2275,7 +2275,7 @@ abstract class Collector {
 class ProductionCollector implements Collector {
   ProductionCollector() {
     _skObjectFinalizationRegistry =
-        SkObjectFinalizationRegistry(js.allowInterop((SkDeletable deletable) {
+        SkObjectFinalizationRegistry(allowInterop((SkDeletable deletable) {
       // This is called when GC decides to collect the wrapper object and
       // notify us, which may happen after the object is already deleted
       // explicitly, e.g. when its ref count drops to zero. When that happens
@@ -2530,6 +2530,28 @@ extension SkPartialImageInfoExtension on SkPartialImageInfo {
   external int get width;
 }
 
+/// Helper interop methods for [patchCanvasKitModule].
+@JS()
+external set _flutterWebCachedModule(Object? module);
+
+@JS()
+external Object? get _flutterWebCachedModule;
+
+@JS()
+external set _flutterWebCachedExports(Object? exports);
+
+@JS()
+external Object? get _flutterWebCachedExports;
+
+@JS('Object')
+external Object get objectConstructor;
+
+@JS()
+external Object? get exports;
+
+@JS()
+external Object? get module;
+
 /// Monkey-patch the top-level `module` and `exports` objects so that
 /// CanvasKit doesn't attempt to register itself as an anonymous module.
 ///
@@ -2553,40 +2575,39 @@ extension SkPartialImageInfoExtension on SkPartialImageInfo {
 void patchCanvasKitModule(DomHTMLScriptElement canvasKitScript) {
   // First check if `exports` and `module` are already defined. If so, then
   // CommonJS is being used, and we shouldn't have any problems.
-  final js.JsFunction objectConstructor = js.context['Object'] as js.JsFunction;
-  if (js.context['exports'] == null) {
-    final js.JsObject exportsAccessor = js.JsObject.jsify(<String, dynamic>{
+  if (exports == null) {
+    final Object? exportsAccessor = js_util.jsify(<String, dynamic>{
       'get': allowInterop(() {
         if (domDocument.currentScript == canvasKitScript) {
-          return js.JsObject(objectConstructor);
+          return objectConstructor;
         } else {
-          return js.context['_flutterWebCachedExports'];
+          return _flutterWebCachedExports;
         }
       }),
       'set': allowInterop((dynamic value) {
-        js.context['_flutterWebCachedExports'] = value;
+        _flutterWebCachedExports = value;
       }),
       'configurable': true,
     });
-    objectConstructor.callMethod(
-        'defineProperty', <dynamic>[js.context, 'exports', exportsAccessor]);
+    js_util.callMethod(objectConstructor,
+        'defineProperty', <dynamic>[domWindow, 'exports', exportsAccessor]);
   }
-  if (js.context['module'] == null) {
-    final js.JsObject moduleAccessor = js.JsObject.jsify(<String, dynamic>{
+  if (module == null) {
+    final Object? moduleAccessor = js_util.jsify(<String, dynamic>{
       'get': allowInterop(() {
         if (domDocument.currentScript == canvasKitScript) {
-          return js.JsObject(objectConstructor);
+          return objectConstructor;
         } else {
-          return js.context['_flutterWebCachedModule'];
+          return _flutterWebCachedModule;
         }
       }),
       'set': allowInterop((dynamic value) {
-        js.context['_flutterWebCachedModule'] = value;
+        _flutterWebCachedModule = value;
       }),
       'configurable': true,
     });
-    objectConstructor.callMethod(
-        'defineProperty', <dynamic>[js.context, 'module', moduleAccessor]);
+    js_util.callMethod(objectConstructor,
+        'defineProperty', <dynamic>[domWindow, 'module', moduleAccessor]);
   }
   domDocument.head!.appendChild(canvasKitScript);
 }

lib/web_ui/lib/src/engine/navigation/url_strategy.dart

@@ -4,7 +4,6 @@
 
 import 'dart:async';
 
-import 'package:js/js.dart' as js;
 import 'package:ui/ui.dart' as ui;
 
 import '../dom.dart';
@@ -159,7 +158,7 @@ class CustomUrlStrategy extends UrlStrategy {
 
   @override
   ui.VoidCallback addPopStateListener(DomEventListener fn) =>
-      delegate.addPopStateListener(js.allowInterop(fn));
+      delegate.addPopStateListener(allowInterop(fn));
 
   @override
   String getPath() => delegate.getPath();

lib/web_ui/lib/src/engine/safe_browser_api.dart

@@ -12,7 +12,6 @@
 library browser_api;
 
 import 'dart:async';
-import 'dart:js' as js;
 import 'dart:js_util' as js_util;
 import 'dart:math' as math;
 import 'dart:typed_data';
@@ -25,12 +24,14 @@ import 'dom.dart';
 import 'platform_dispatcher.dart';
 import 'vector_math.dart';
 
+export 'package:js/js.dart' show allowInterop;
+
 /// Creates JavaScript object populated with [properties].
 ///
 /// This is equivalent to writing `{}` in plain JavaScript.
 Object createPlainJsObject([Map<String, Object?>? properties]) {
   if (properties != null) {
-    return js.JsObject.jsify(properties);
+    return js_util.jsify(properties);
   } else {
     return js_util.newObject<Object>();
   }
@@ -70,11 +71,6 @@ T setJsProperty<T>(Object object, String name, T value) {
   return js_util.setProperty<T>(object, name, value);
 }
 
-/// Wraps function [f] to be callable from JavaScript.
-F allowInterop<F extends Function>(F f) {
-  return js.allowInterop<F>(f);
-}
-
 /// Converts a JavaScript `Promise` into Dart [Future].
 Future<T> promiseToFuture<T>(Object jsPromise) {
   return js_util.promiseToFuture<T>(jsPromise);

lib/web_ui/test/engine/profiler_test.dart

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:js' as js;
 import 'dart:js_util' as js_util;
 
 import 'package:test/bootstrap/browser.dart';
@@ -162,7 +161,7 @@ void jsOnBenchmark(dynamic listener) {
     domWindow,
     '_flutter_internal_on_benchmark',
     listener is Function
-      ? js.allowInterop(listener)
+      ? allowInterop(listener)
       : listener,
   );
 }

lib/web_ui/test/initialization_test.dart

@@ -2,33 +2,39 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:js' as js;
-
+import 'package:js/js.dart';
+import 'package:js/js_util.dart' as js_util;
 import 'package:test/bootstrap/browser.dart';
 import 'package:test/test.dart';
 import 'package:ui/src/engine.dart' as engine;
 import 'package:ui/ui.dart' as ui;
 
+@JS('_flutter')
+external set loader(Object? loader);
+
+@JS('_flutter.loader.didCreateEngineInitializer')
+external set didCreateEngineInitializer(Object? callback);
+
 void main() {
   // Prepare _flutter.loader.didCreateEngineInitializer, so it's ready in the page ASAP.
-  js.context['_flutter'] = js.JsObject.jsify(<String, Object>{
+  loader = js_util.jsify(<String, Object>{
     'loader': <String, Object>{
-      'didCreateEngineInitializer': js.allowInterop(() { print('not mocked'); }),
+      'didCreateEngineInitializer': allowInterop(() { print('not mocked'); }),
     },
   });
   internalBootstrapBrowserTest(() => testMain);
 }
 
 void testMain() {
   test('webOnlyWarmupEngine calls _flutter.loader.didCreateEngineInitializer callback', () async {
-    js.JsObject? engineInitializer;
+    Object? engineInitializer;
 
-    void didCreateEngineInitializerMock (js.JsObject obj) {
+    void didCreateEngineInitializerMock(Object? obj) {
       engineInitializer = obj;
     }
 
     // Prepare the DOM for: _flutter.loader.didCreateEngineInitializer
-    js.context['_flutter']['loader']['didCreateEngineInitializer'] = js.allowInterop(didCreateEngineInitializerMock);
+    didCreateEngineInitializer = allowInterop(didCreateEngineInitializerMock);
 
     // Reset the engine
     engine.debugResetEngineInitializationState();
@@ -40,12 +46,12 @@ void testMain() {
 
     // Check that the object we captured is actually a loader
     expect(engineInitializer, isNotNull);
-    expect(engineInitializer!.hasProperty('initializeEngine'), isTrue, reason: 'Missing FlutterEngineInitializer method: initializeEngine.');
-    expect(engineInitializer!.hasProperty('autoStart'), isTrue, reason: 'Missing FlutterEngineInitializer method: autoStart.');
+    expect(js_util.hasProperty(engineInitializer!, 'initializeEngine'), isTrue, reason: 'Missing FlutterEngineInitializer method: initializeEngine.');
+    expect(js_util.hasProperty(engineInitializer!, 'autoStart'), isTrue, reason: 'Missing FlutterEngineInitializer method: autoStart.');
   });
 
   test('webOnlyWarmupEngine does auto-start when _flutter.loader.didCreateEngineInitializer does not exist', () async {
-    js.context['_flutter']['loader'] = null;
+    loader = null;
 
     bool pluginsRegistered = false;
     bool appRan = false;

web_sdk/sdk_rewriter.dart

@@ -42,7 +42,6 @@ import 'dart:async';
 import 'dart:collection';
 import 'dart:convert' hide Codec;
 import 'dart:developer' as developer;
-import 'dart:js' as js;
 import 'dart:js_util' as js_util;
 import 'dart:_js_annotations';
 import 'dart:math' as math;

web_sdk/test/js_access_test.dart

@@ -16,7 +16,6 @@ import 'package:test/test.dart';
 
 // Libraries that allow making arbitrary calls to JavaScript.
 const List<String> _jsAccessLibraries = <String>[
-  'dart:js',
   'dart:js_util',
   'package:js',
 ];

web_sdk/test/sdk_rewriter_test.dart

@@ -30,7 +30,6 @@ import 'dart:async';
 import 'dart:collection';
 import 'dart:convert' hide Codec;
 import 'dart:developer' as developer;
-import 'dart:js' as js;
 import 'dart:js_util' as js_util;
 import 'dart:_js_annotations';
 import 'dart:math' as math;