Reverts "Output .js files as ES6 modules. (#52023)" (#53674)
Reverts: flutter/engine#52023
Initiated by: eyebrowsoffire
Reason for reverting: Causing issues in engine -> framework roll https://github.com/flutter/flutter/pull/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 (https://github.com/flutter/flutter/issues/149565) with DDC's module loading system, which itself uses require.js.
This is probably also the fix for https://github.com/flutter/flutter/issues/147731diff --git a/DEPS b/DEPS
index 21a61f8..3e8f6e4 100644
--- a/DEPS
+++ b/DEPS
@@ -277,7 +277,7 @@
]
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',
diff --git a/lib/web_ui/flutter_js/src/canvaskit_loader.js b/lib/web_ui/flutter_js/src/canvaskit_loader.js
index 4c8e91c..64dc673 100644
--- a/lib/web_ui/flutter_js/src/canvaskit_loader.js
+++ b/lib/web_ui/flutter_js/src/canvaskit_loader.js
@@ -6,11 +6,11 @@
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 @@
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;
}
diff --git a/lib/web_ui/flutter_js/src/skwasm_loader.js b/lib/web_ui/flutter_js/src/skwasm_loader.js
index 01b4fe3..241f4e8 100644
--- a/lib/web_ui/flutter_js/src/skwasm_loader.js
+++ b/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);
});
}
diff --git a/lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart b/lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart
index 2e6e8df..c41da41 100644
--- a/lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart
+++ b/lib/web_ui/lib/src/engine/canvaskit/canvaskit_api.dart
@@ -259,13 +259,12 @@
);
}
-@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 @@
/// 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 @@
/// 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 @@
///
/// 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;
}
diff --git a/lib/web_ui/lib/src/engine/dom.dart b/lib/web_ui/lib/src/engine/dom.dart
index 14bde5e..32d100d 100644
--- a/lib/web_ui/lib/src/engine/dom.dart
+++ b/lib/web_ui/lib/src/engine/dom.dart
@@ -3407,16 +3407,16 @@
/// 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();
diff --git a/lib/web_ui/test/canvaskit/initialization/does_not_mock_module_exports_test.dart b/lib/web_ui/test/canvaskit/initialization/does_not_mock_module_exports_test.dart
index 96e0c8a..b6676f2 100644
--- a/lib/web_ui/test/canvaskit/initialization/does_not_mock_module_exports_test.dart
+++ b/lib/web_ui/test/canvaskit/initialization/does_not_mock_module_exports_test.dart
@@ -18,6 +18,13 @@
// 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'),
