Reverts "Output .js files as ES6 modules. (#52023)" (#53674)

Reverts: #52023
Initiated by: eyebrowsoffire
Reason for reverting: Causing issues in engine -> framework roll flutter/flutter#151139
Original PR Author: eyebrowsoffire

Reviewed By: {ditman}

This change reverts the following previous change:
This changes CanvasKit and Skwasm to be compiled and loaded as ES6 modules instead of as vanilla script tags. Currently, the emscripten JS files try to register themselves with require.js or AMD module loading systems. We suspect this is causing issues (flutter/flutter#149565) with DDC's module loading system, which itself uses require.js.

This is probably also the fix for flutter/flutter#147731

Author: auto-submit[bot]

DEPS

@@ -277,7 +277,7 @@ allowed_hosts = [
 ]
 
 deps = {
-  'src': 'https://github.com/flutter/buildroot.git' + '@' + '6c01dbca494b78e32f9e4aa704514faabfba74e8',
+  'src': 'https://github.com/flutter/buildroot.git' + '@' + '8c2d66fa4e6298894425f5bdd0591bc5b1154c53',
 
   'src/flutter/third_party/depot_tools':
   Var('chromium_git') + '/chromium/tools/depot_tools.git' + '@' + '580b4ff3f5cd0dcaa2eacda28cefe0f45320e8f7',

lib/web_ui/flutter_js/src/canvaskit_loader.js

@@ -6,11 +6,11 @@ import { createWasmInstantiator } from "./instantiate_wasm.js";
 import { joinPathSegments } from "./utils.js";
 
 export const loadCanvasKit = (deps, config, browserEnvironment, canvasKitBaseUrl) => {
-  window.flutterCanvasKitLoaded = (async () => {
-    if (window.flutterCanvasKit) {
-      // The user has set this global variable ahead of time, so we just return that.
-      return window.flutterCanvasKit;
-    }
+  if (window.flutterCanvasKit) {
+    // The user has set this global variable ahead of time, so we just return that.
+    return Promise.resolve(window.flutterCanvasKit);
+  }
+  window.flutterCanvasKitLoaded = new Promise((resolve, reject) => {
     const supportsChromiumCanvasKit = browserEnvironment.hasChromiumBreakIterators && browserEnvironment.hasImageCodecs;
     if (!supportsChromiumCanvasKit && config.canvasKitVariant == "chromium") {
       throw "Chromium CanvasKit variant specifically requested, but unsupported in this browser";
@@ -25,11 +25,24 @@ export const loadCanvasKit = (deps, config, browserEnvironment, canvasKitBaseUrl
       canvasKitUrl = deps.flutterTT.policy.createScriptURL(canvasKitUrl);
     }
     const wasmInstantiator = createWasmInstantiator(joinPathSegments(baseUrl, "canvaskit.wasm"));
-    const canvasKitModule = await import(canvasKitUrl);
-    window.flutterCanvasKit = await canvasKitModule.default({
-      instantiateWasm: wasmInstantiator,
+    const script = document.createElement("script");
+    script.src = canvasKitUrl;
+    if (config.nonce) {
+      script.nonce = config.nonce;
+    }
+    script.addEventListener("load", async () => {
+      try {
+        const canvasKit = await CanvasKitInit({
+          instantiateWasm: wasmInstantiator,
+        });
+        window.flutterCanvasKit = canvasKit;
+        resolve(canvasKit);  
+      } catch (e) {
+        reject(e);
+      }
     });
-    return window.flutterCanvasKit;
-  })();
+    script.addEventListener("error", reject);
+    document.head.appendChild(script);
+  });
   return window.flutterCanvasKitLoaded;
 }

lib/web_ui/flutter_js/src/skwasm_loader.js

@@ -5,28 +5,43 @@
 import { createWasmInstantiator } from "./instantiate_wasm.js";
 import { joinPathSegments } from "./utils.js";
 
-export const loadSkwasm = async (deps, config, browserEnvironment, baseUrl) => {
-  let skwasmUrl = joinPathSegments(baseUrl, "skwasm.js");
-  if (deps.flutterTT.policy) {
-    skwasmUrl = deps.flutterTT.policy.createScriptURL(skwasmUrl);
-  }
-  const wasmInstantiator = createWasmInstantiator(joinPathSegments(baseUrl, "skwasm.wasm"));
-  const skwasm = await import(skwasmUrl);
-  return await skwasm.default({
-    instantiateWasm: wasmInstantiator,
-    locateFile: (fileName, scriptDirectory) => {
-      // When hosted via a CDN or some other url that is not the same
-      // origin as the main script of the page, we will fail to create
-      // a web worker with the .worker.js script. This workaround will
-      // make sure that the worker JS can be loaded regardless of where
-      // it is hosted.
-      const url = scriptDirectory + fileName;
-      if (url.endsWith('.worker.js')) {
-        return URL.createObjectURL(new Blob(
-          [`importScripts('${url}');`],
-          { 'type': 'application/javascript' }));
-      }
-      return url;
+export const loadSkwasm = (deps, config, browserEnvironment, baseUrl) => {
+  return new Promise((resolve, reject) => {
+    let skwasmUrl = joinPathSegments(baseUrl, "skwasm.js");
+    if (deps.flutterTT.policy) {
+      skwasmUrl = deps.flutterTT.policy.createScriptURL(skwasmUrl);
+    }
+    const wasmInstantiator = createWasmInstantiator(joinPathSegments(baseUrl, "skwasm.wasm"));
+    const script = document.createElement("script");
+    script.src = skwasmUrl;
+    if (config.nonce) {
+      script.nonce = config.nonce;
     }
+    script.addEventListener("load", async () => {
+      try {
+        const skwasmInstance = await skwasm({
+          instantiateWasm: wasmInstantiator,
+          locateFile: (fileName, scriptDirectory) => {
+            // When hosted via a CDN or some other url that is not the same
+            // origin as the main script of the page, we will fail to create
+            // a web worker with the .worker.js script. This workaround will
+            // make sure that the worker JS can be loaded regardless of where
+            // it is hosted.
+            const url = scriptDirectory + fileName;
+            if (url.endsWith(".worker.js")) {
+              return URL.createObjectURL(new Blob(
+                [`importScripts("${url}");`],
+                { "type": "application/javascript" }));
+            }
+            return url;
+          }
+        });
+        resolve(skwasmInstance);
+      } catch (e) {
+        reject(e);
+      }
+    });
+    script.addEventListener("error", reject);
+    document.head.appendChild(script);
   });
 }

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

@@ -259,13 +259,12 @@ extension CanvasKitExtension on CanvasKit {
   );
 }
 
-@JS()
-@staticInterop
-class CanvasKitModule {}
+@JS('window.CanvasKitInit')
+external JSAny _CanvasKitInit(CanvasKitInitOptions options);
 
-extension CanvasKitModuleExtension on CanvasKitModule {
-  @JS('default')
-  external JSPromise<JSAny> defaultExport(CanvasKitInitOptions options);
+Future<CanvasKit> CanvasKitInit(CanvasKitInitOptions options) {
+  return js_util.promiseToFuture<CanvasKit>(
+          _CanvasKitInit(options).toObjectShallow);
 }
 
 typedef LocateFileCallback = String Function(String file, String unusedBase);
@@ -3662,11 +3661,11 @@ String canvasKitWasmModuleUrl(String file, String canvasKitBase) =>
 /// Downloads the CanvasKit JavaScript, then calls `CanvasKitInit` to download
 /// and intialize the CanvasKit wasm.
 Future<CanvasKit> downloadCanvasKit() async {
-  final CanvasKitModule canvasKitModule = await _downloadOneOf(_canvasKitJsUrls);
+  await _downloadOneOf(_canvasKitJsUrls);
 
-  final CanvasKit canvasKit = (await canvasKitModule.defaultExport(CanvasKitInitOptions(
+  final CanvasKit canvasKit = await CanvasKitInit(CanvasKitInitOptions(
     locateFile: createLocateFileCallback(canvasKitWasmModuleUrl),
-  )).toDart) as CanvasKit;
+  ));
 
   if (canvasKit.ParagraphBuilder.RequiresClientICU() && !browserSupportsCanvaskitChromium) {
     throw Exception(
@@ -3682,12 +3681,10 @@ Future<CanvasKit> downloadCanvasKit() async {
 /// downloads it.
 ///
 /// If none of the URLs can be downloaded, throws an [Exception].
-Future<CanvasKitModule> _downloadOneOf(Iterable<String> urls) async {
+Future<void> _downloadOneOf(Iterable<String> urls) async {
   for (final String url in urls) {
-    try {
-      return await _downloadCanvasKitJs(url);
-    } catch (_) {
-      continue;
+    if (await _downloadCanvasKitJs(url)) {
+      return;
     }
   }
 
@@ -3701,7 +3698,32 @@ Future<CanvasKitModule> _downloadOneOf(Iterable<String> urls) async {
 ///
 /// Returns a [Future] that completes with `true` if the CanvasKit JavaScript
 /// file was successfully downloaded, or `false` if it failed.
-Future<CanvasKitModule> _downloadCanvasKitJs(String url) async {
-  final JSAny scriptUrl = createTrustedScriptUrl(url);
-  return (await importModule(scriptUrl).toDart) as CanvasKitModule;
+Future<bool> _downloadCanvasKitJs(String url) {
+  final DomHTMLScriptElement canvasKitScript =
+      createDomHTMLScriptElement(configuration.nonce);
+  canvasKitScript.src = createTrustedScriptUrl(url);
+
+  final Completer<bool> canvasKitLoadCompleter = Completer<bool>();
+
+  late final DomEventListener loadCallback;
+  late final DomEventListener errorCallback;
+
+  void loadEventHandler(DomEvent _) {
+    canvasKitScript.remove();
+    canvasKitLoadCompleter.complete(true);
+  }
+  void errorEventHandler(DomEvent errorEvent) {
+    canvasKitScript.remove();
+    canvasKitLoadCompleter.complete(false);
+  }
+
+  loadCallback = createDomEventListener(loadEventHandler);
+  errorCallback = createDomEventListener(errorEventHandler);
+
+  canvasKitScript.addEventListener('load', loadCallback);
+  canvasKitScript.addEventListener('error', errorCallback);
+
+  domDocument.head!.appendChild(canvasKitScript);
+
+  return canvasKitLoadCompleter.future;
 }

lib/web_ui/lib/src/engine/dom.dart

@@ -3407,16 +3407,16 @@ final DomTrustedTypePolicy _ttPolicy = domWindow.trustedTypes!.createPolicy(
 
 /// Converts a String `url` into a [DomTrustedScriptURL] object when the
 /// Trusted Types API is available, else returns the unmodified `url`.
-JSAny createTrustedScriptUrl(String url) {
+Object createTrustedScriptUrl(String url) {
   if (domWindow.trustedTypes != null) {
     // Pass `url` through Flutter Engine's TrustedType policy.
     final DomTrustedScriptURL trustedUrl = _ttPolicy.createScriptURL(url);
 
     assert(trustedUrl.url != '', 'URL: $url rejected by TrustedTypePolicy');
 
-    return trustedUrl as JSAny;
+    return trustedUrl;
   }
-  return url.toJS;
+  return url;
 }
 
 DomMessageChannel createDomMessageChannel() => DomMessageChannel();

lib/web_ui/test/canvaskit/initialization/does_not_mock_module_exports_test.dart

@@ -18,6 +18,13 @@ void testMain() {
       // Initialize CanvasKit...
       await bootstrapAndRunApp();
 
+      // CanvasKitInit should be defined...
+      expect(
+        js_util.hasProperty(domWindow, 'CanvasKitInit'),
+        isTrue,
+        reason: 'CanvasKitInit should be defined on Window',
+      );
+
       // window.exports and window.module should be undefined!
       expect(
         js_util.hasProperty(domWindow, 'exports'),