Output .js files as ES6 modules. #52023

eyebrowsoffire · 2024-04-10T17:39:32Z

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

ditman

I don't think we need window.flutterCanvasKitLoaded, but that might be a change for another time. LGTM!

ditman · 2024-07-01T17:13:35Z

lib/web_ui/flutter_js/src/canvaskit_loader.js

-      } catch (e) {
-        reject(e);
-      }
+    const canvasKitModule = await import(canvasKitUrl);


This is beautiful!

lib/web_ui/flutter_js/src/canvaskit_loader.js

ditman · 2024-07-01T17:23:01Z

DEPS

@@ -277,7 +277,7 @@ allowed_hosts = [
 ]

 deps = {
-  'src': 'https://github.com/flutter/buildroot.git' + '@' + '9a4ba8138aed94000ac5070590a21030008903bb',
+  'src': 'https://github.com/flutter/buildroot.git' + '@' + 'ef1bb419537f7bb16d4b7df0ed7a5e6f57a8d1fe',


(This file is conflicting)

Yes, that's because the buildroot thing hasn't actually landed yet. Once we are good to go to land everything, I'll actually land the buildroot one first, and then update this and there won't be a conflict.

lib/web_ui/flutter_js/src/canvaskit_loader.js

lib/web_ui/flutter_js/src/skwasm_loader.js

ditman · 2024-07-01T17:36:48Z

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

-  return js_util.promiseToFuture<CanvasKit>(
-          _CanvasKitInit(options).toObjectShallow);
+extension CanvasKitModuleExtension on CanvasKitModule {
+  @JS('default')


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

Buildroot changes needed for flutter/engine#52023

auto-submit · 2024-07-01T23:12:32Z

A reason for requesting a revert of flutter/engine/52023 could
not be found or the reason was not properly formatted. Begin a comment with 'Reason for revert:' to tell the bot why
this issue is being reverted.

eyebrowsoffire · 2024-07-01T23:15:35Z

Reason for revert: Causing issues in engine -> framework roll flutter/flutter#151139

This reverts commit 91856e7.

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

…151150) flutter/engine@3456fee...fc5bc14 2024-07-01 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Output .js files as ES6 modules. (#52023)" (flutter/engine#53674) 2024-07-01 skia-flutter-autoroll@skia.org Roll Dart SDK from 21c08743ee4a to c23e58143793 (1 revision) (flutter/engine#53670) 2024-07-01 skia-flutter-autoroll@skia.org Roll Skia from ae2b97d74812 to 8375bdc6e191 (3 revisions) (flutter/engine#53669) 2024-07-01 jacksongardner@google.com Output .js files as ES6 modules. (flutter/engine#52023) 2024-07-01 skia-flutter-autoroll@skia.org Roll Skia from a62bf018429c to ae2b97d74812 (3 revisions) (flutter/engine#53668) 2024-07-01 fmil@google.com [icu] Ignores the dir `flutter/third_party/icu/patches` (flutter/engine#53667) 2024-07-01 jonahwilliams@google.com [Impeller] track the sizes of all outstanding MTLTexture allocations and report per frame in MB, matching Vulkan implementation. (flutter/engine#53618) 2024-07-01 skia-flutter-autoroll@skia.org Roll Dart SDK from 338c6d4fd9c5 to 21c08743ee4a (1 revision) (flutter/engine#53666) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-engine-flutter-autoroll Please CC jimgraham@google.com,rmistry@google.com,zra@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…lutter#151150) flutter/engine@3456fee...fc5bc14 2024-07-01 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Output .js files as ES6 modules. (flutter#52023)" (flutter/engine#53674) 2024-07-01 skia-flutter-autoroll@skia.org Roll Dart SDK from 21c08743ee4a to c23e58143793 (1 revision) (flutter/engine#53670) 2024-07-01 skia-flutter-autoroll@skia.org Roll Skia from ae2b97d74812 to 8375bdc6e191 (3 revisions) (flutter/engine#53669) 2024-07-01 jacksongardner@google.com Output .js files as ES6 modules. (flutter/engine#52023) 2024-07-01 skia-flutter-autoroll@skia.org Roll Skia from a62bf018429c to ae2b97d74812 (3 revisions) (flutter/engine#53668) 2024-07-01 fmil@google.com [icu] Ignores the dir `flutter/third_party/icu/patches` (flutter/engine#53667) 2024-07-01 jonahwilliams@google.com [Impeller] track the sizes of all outstanding MTLTexture allocations and report per frame in MB, matching Vulkan implementation. (flutter/engine#53618) 2024-07-01 skia-flutter-autoroll@skia.org Roll Dart SDK from 338c6d4fd9c5 to 21c08743ee4a (1 revision) (flutter/engine#53666) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-engine-flutter-autoroll Please CC jimgraham@google.com,rmistry@google.com,zra@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

This is an attempt to reland #52023. The issue previously is that if it was not specified by the user, the default CanvasKit base URL did not have a leading slash, which does not work when doing dynamic imports.

This reverts commit c5c0c54.

…#53709) Reverts: #53688 Initiated by: jiahaog Reason for reverting: canvaskit.js cannot be loaded in an internal end to end test - see b/350885206 Original PR Author: eyebrowsoffire Reviewed By: {ditman} This change reverts the following previous change: This is an attempt to reland #52023. The issue previously is that if it was not specified by the user, the default CanvasKit base URL did not have a leading slash, which does not work when doing dynamic imports.

…lutter#151150) flutter/engine@3456fee...fc5bc14 2024-07-01 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Output .js files as ES6 modules. (flutter#52023)" (flutter/engine#53674) 2024-07-01 skia-flutter-autoroll@skia.org Roll Dart SDK from 21c08743ee4a to c23e58143793 (1 revision) (flutter/engine#53670) 2024-07-01 skia-flutter-autoroll@skia.org Roll Skia from ae2b97d74812 to 8375bdc6e191 (3 revisions) (flutter/engine#53669) 2024-07-01 jacksongardner@google.com Output .js files as ES6 modules. (flutter/engine#52023) 2024-07-01 skia-flutter-autoroll@skia.org Roll Skia from a62bf018429c to ae2b97d74812 (3 revisions) (flutter/engine#53668) 2024-07-01 fmil@google.com [icu] Ignores the dir `flutter/third_party/icu/patches` (flutter/engine#53667) 2024-07-01 jonahwilliams@google.com [Impeller] track the sizes of all outstanding MTLTexture allocations and report per frame in MB, matching Vulkan implementation. (flutter/engine#53618) 2024-07-01 skia-flutter-autoroll@skia.org Roll Dart SDK from 338c6d4fd9c5 to 21c08743ee4a (1 revision) (flutter/engine#53666) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-engine-flutter-autoroll Please CC jimgraham@google.com,rmistry@google.com,zra@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

Second attempt to reland #52023 Fixes since the previous reland attempt: * We need to pass the skwasm main JS URI when loading the module so that it can pass that along to the worker. Since the worker uses the workaround to allow a cross script worker, it has trouble locating the main JS URI in relation to itself in a way that actually works for dynamic imports, so passing it along fixes that issue. * Some of the Google3 tests relied on the relative default canvaskit path. Dynamic module imports seems to not handle relative paths the way we expect, so we do our own URL resolution using the URL constructor before passing it into the dynamic import API. Also cleaned up some of the other relative pathing stuff that we do around the base URI. in flutter.js

…er#53718) Second attempt to reland flutter#52023 Fixes since the previous reland attempt: * We need to pass the skwasm main JS URI when loading the module so that it can pass that along to the worker. Since the worker uses the workaround to allow a cross script worker, it has trouble locating the main JS URI in relation to itself in a way that actually works for dynamic imports, so passing it along fixes that issue. * Some of the Google3 tests relied on the relative default canvaskit path. Dynamic module imports seems to not handle relative paths the way we expect, so we do our own URL resolution using the URL constructor before passing it into the dynamic import API. Also cleaned up some of the other relative pathing stuff that we do around the base URI. in flutter.js

…54446) This pull request is created by [automatic cherry pick workflow](https://github.com/flutter/flutter/blob/main/docs/releases/Flutter-Cherrypick-Process.md#automatically-creates-a-cherry-pick-request) Please fill in the form below, and a flutter domain expert will evaluate this cherry pick request. ### Issue Link: What is the link to the issue this cherry-pick is addressing? - flutter/flutter#152953 - flutter/flutter#152844 ### Changelog Description: Fixes the loading of CanvasKit in a way that avoids app crashes and timeout issues. ### Impact Description: When CanvasKit is downloaded from the network (not cached), there's a high likelihood that the app crashes and displays a blank screen. ### Workaround: If the browser cache is enabled, users can refresh the page to get CanvasKit from cache and avoid the issue. ### Risk: What is the risk level of this cherry-pick? ### Test Coverage: Are you confident that your fix is well-tested by automated tests? ### Validation Steps: - Run a sample flutter app using `--web-renderer=canvaskit`. - In Chrome's Network tab, check the `Disable cache` checkbox. - Reload the app a few times and make sure it's working and there are no errors in the console.

eyebrowsoffire added 2 commits April 10, 2024 10:36

Output .js files as ES6 modules.

2adf221

Change loading logic to use dynamic imports instead.

8d2232f

github-actions bot added the platform-web Code specifically for the web engine label Apr 10, 2024

eyebrowsoffire added 7 commits April 10, 2024 15:10

CanvasKitInit isn't in the global scope anymore.

8e21445

Merge branch 'main' into wasm_es6

691ca5b

Fix buildroot hash.

fb88f55

Merge branch 'main' into wasm_es6

e68289e

Use trusted script URLs when dynamically importing.

b6e339d

Fix createTrustedScriptUrl.

911e738

Remove unintentionally added newline.

777d955

eyebrowsoffire marked this pull request as ready for review June 28, 2024 19:00

eyebrowsoffire requested a review from ditman June 28, 2024 19:03

eyebrowsoffire mentioned this pull request Jun 28, 2024

{WEB (CanvasKit)} CanvasKit renderer never starts application. flutter/flutter#149565

Closed

ditman approved these changes Jul 1, 2024

View reviewed changes

Change as per David's comment.

312e676

eyebrowsoffire mentioned this pull request Jul 1, 2024

Output .js files from wasm modules as ES6 modules. flutter/buildroot#844

Merged

auto-submit bot pushed a commit to flutter/buildroot that referenced this pull request Jul 1, 2024

Output .js files from wasm modules as ES6 modules. (#844)

6c01dbc

Buildroot changes needed for flutter/engine#52023

Merge branch 'main' into wasm_es6

32aa1d3

eyebrowsoffire added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 1, 2024

auto-submit bot merged commit 91856e7 into flutter:main Jul 1, 2024
33 checks passed

eyebrowsoffire mentioned this pull request Jul 1, 2024

[web] integration_test and driver tests are flaky in CanvasKit + debug mode flutter/flutter#147731

Closed

engine-flutter-autoroll mentioned this pull request Jul 1, 2024

Roll Flutter Engine from 3456fee1a6b9 to ac5d60ed2eaa (6 revisions) flutter/flutter#151139

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jul 1, 2024

91856e74d Output .js files as ES6 modules. (flutter/engine#52023)

7896892

eyebrowsoffire added the revert Label used to revert changes in a closed and merged pull request. label Jul 1, 2024

auto-submit bot removed the revert Label used to revert changes in a closed and merged pull request. label Jul 1, 2024

eyebrowsoffire added the revert Label used to revert changes in a closed and merged pull request. label Jul 1, 2024

auto-submit bot pushed a commit that referenced this pull request Jul 1, 2024

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

214b2b0

This reverts commit 91856e7.

auto-submit bot mentioned this pull request Jul 1, 2024

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

Merged

auto-submit bot removed the revert Label used to revert changes in a closed and merged pull request. label Jul 1, 2024

engine-flutter-autoroll mentioned this pull request Jul 1, 2024

Roll Flutter Engine from 3456fee1a6b9 to 8aa03626e179 (7 revisions) flutter/flutter#151148

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jul 1, 2024

91856e74d Output .js files as ES6 modules. (flutter/engine#52023)

6001708

engine-flutter-autoroll mentioned this pull request Jul 2, 2024

Roll Flutter Engine from 3456fee1a6b9 to fc5bc14e6091 (8 revisions) flutter/flutter#151150

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jul 2, 2024

91856e74d Output .js files as ES6 modules. (flutter/engine#52023)

0499c5a

eyebrowsoffire added a commit to eyebrowsoffire/engine that referenced this pull request Jul 2, 2024

Reland "Output .js files as ES6 modules. (flutter#52023)"

74cf10b

eyebrowsoffire mentioned this pull request Jul 2, 2024

Reland "Output .js files as ES6 modules. (#52023)" #53688

Merged

auto-submit bot pushed a commit that referenced this pull request Jul 3, 2024

Revert "Reland "Output .js files as ES6 modules. (#52023)" (#53688)"

672103a

This reverts commit c5c0c54.

auto-submit bot mentioned this pull request Jul 3, 2024

Reverts "Reland "Output .js files as ES6 modules. (#52023)" (#53688)" #53709

Merged

eyebrowsoffire added a commit to eyebrowsoffire/engine that referenced this pull request Jul 3, 2024

Reland (x2) "Output .js files as ES6 modules. (flutter#52023)"

01e806b

eyebrowsoffire mentioned this pull request Jul 3, 2024

Reland (x2) "Output .js files as ES6 modules. (flutter#52023)" #53718

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Output .js files as ES6 modules. #52023

Output .js files as ES6 modules. #52023

eyebrowsoffire commented Apr 10, 2024 •

edited

Loading

ditman left a comment

ditman Jul 1, 2024

ditman Jul 1, 2024

eyebrowsoffire Jul 1, 2024

ditman Jul 1, 2024

auto-submit bot commented Jul 1, 2024

eyebrowsoffire commented Jul 1, 2024

Output .js files as ES6 modules. #52023

Output .js files as ES6 modules. #52023

Conversation

eyebrowsoffire commented Apr 10, 2024 • edited Loading

ditman left a comment

Choose a reason for hiding this comment

ditman Jul 1, 2024

Choose a reason for hiding this comment

ditman Jul 1, 2024

Choose a reason for hiding this comment

eyebrowsoffire Jul 1, 2024

Choose a reason for hiding this comment

ditman Jul 1, 2024

Choose a reason for hiding this comment

auto-submit bot commented Jul 1, 2024

eyebrowsoffire commented Jul 1, 2024

eyebrowsoffire commented Apr 10, 2024 •

edited

Loading