Refactor flutter.js to do dart2wasm bootstrapping and CanvasKit/Skwasm preloading. #49037

eyebrowsoffire · 2023-12-14T17:45:59Z

This PR makes some major revisions to our flutter.js bootstrapper.

Modularize flutter.js into multiple files to make it a little simpler to manage from source code. They are still bundled into a single .js file by esbuild.
Added a types.d.ts file which contains declarations of the types of some of the objects used in the flutter.js API
Deprecated the old FlutterLoader.loadEntrypoint API and added a new function simply called FlutterLoader.load, which has a few more capabilities:
- A build tool can inject a build config, that may describe multiple builds that FlutterLoader.load can attempt to use. It will use the first one that is compatible with the browser environment and the user's configuration.
- It can also load wasm flutter apps.
- It also pre-loads and instantiates CanvasKit (and Skwasm) as necessary depending on the build configuration.
- FlutterLoader.load also immediately takes a flutter configuration object. If an onEntrypointLoaded callback is not provided by the user, it just does the expected thing and initializes the engine and immediately starts the app, passing the configuration along as needed.
flutter.js has the engine hash built into it now, which allows it to ascertain the correct CDN URLs for both CanvasKit and Skwasm.

yjbanov · 2023-12-21T18:48:52Z

lib/web_ui/flutter_js/BUILD.gn

+    "// Use of this source code is governed by a BSD-style license that can be",
+    "// found in the LICENSE file.",
+    "",
+    "export const engineRevision = \"$engine_version\";",


This scares me for a couple of reasons:

The output of web build rules depends on every byte in the engine codebase. For example, changing a README file will result in altering the git revision and invalidating the build.

Git revision does not fully describe the engine revision. You can have local source changes while the git revision is the same.

This probably invalidates one of the core principles of a build system, but I'm failing to name one, maybe hermeticity.

Yeah this is an interesting one, I get your concerns. Could we maybe have a GVC and chat about the subtleties here at some point if you have a moment?

We had some discussion in a GVC. I think I mostly agree that it would be better to leave the engine revision out of flutter.js and instead have the tool inject the engine hash as part of the build config.

lib/web_ui/flutter_js/src/browser_environment.js

ditman

Mostly nitpicks, I think only createWasmInstantiator needs a little bit more love.

lib/web_ui/flutter_js/src/browser_environment.js

lib/web_ui/flutter_js/src/canvaskit_loader.js

lib/web_ui/flutter_js/src/instantiate_wasm.js

lib/web_ui/flutter_js/src/loader.js

lib/web_ui/flutter_js/src/skwasm_loader.js

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

ditman

Thanks for this, this is a fantastic improvement! (All my comments are minor/questions, feel free to disregard!)

ditman · 2024-01-04T21:18:18Z

lib/web_ui/flutter_js/sources.gni

+  "src/service_worker_loader.js",
+  "src/skwasm_loader.js",
+  "src/trusted_types.js",
+


Suggested change

Remove extra line?

lib/web_ui/flutter_js/src/browser_environment.js

ditman · 2024-01-04T22:17:46Z

lib/web_ui/flutter_js/src/canvaskit_loader.js

+      baseUrl = `${baseUrl}/chromium/`;
+    }
+    let canvasKitUrl = `${baseUrl}canvaskit.js`;
+    if (deps.flutterTT.policy) {


QQ: how do we decide what goes in deps vs what is passed as a parameter to the function?

For example, the browserEnvironment looks like something that could be a dep too, and not need its own specific positional parameter in the loadCanvasKit function?

I guess it's mostly arbitrary. The browser environment just logically felt like something different than a "dependency" so I have it as a separate thing. Perhaps I don't even need the browserEnvironment to be passed as a parameter anymore now that it's just a global variable vended by the browser_environment.js module...

now that it's just a global variable vended by the browser_environment.js module

I thought the same, but also if you grab it from deps (or the parameter) it's easy(er) to mock for testing maybe?

ditman · 2024-01-04T22:50:24Z

lib/web_ui/flutter_js/src/types.d.ts

+  jsSupportRuntimePath: string;
+}
+
+export type ApplicationBuild = JSApplicationBuild | WasmApplicationBuild;


Do you need this union? Wouldn't it be equivalent that interface ApplicationBuildBase is called interface ApplicationBuild?

A union like this is super useful in TS. An interface basically has open polymorphism, but a union has closed polymorphism. This basically means that if you're using the union (ApplicationBuild), you can actually differentiate based on the compileTarget field, and the compiler will actually refine the type in the the subsequent branches. This won't happen when using the interface (and in fact, the compileTarget field doesn't exist on the interface, so you couldn't check for it). Example:

const build: ApplicationBuild = //something; // build is an ApplicationBuild type if (build.compileTarget === "dart2wasm") { // build is actually a WasmApplicationBuild in this branch, so I can access fields specific to WasmApplicationBuild console.log(build.mainWasmPath); } else { // the compiler can even tell that the only remaining possible values are of type JSApplicationBuild console.log(build.mainJsPath); }

lib/web_ui/test/fallbacks/fallbacks_test.dart

…sKit/Skwasm preloading. (flutter/engine#49037)

…141228) flutter/engine@941f268...5b9d213 2024-01-10 [email protected] Refactor flutter.js to do dart2wasm bootstrapping and CanvasKit/Skwasm preloading. (flutter/engine#49037) 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 [email protected],[email protected],[email protected] 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

bdero · 2024-01-11T23:52:59Z

FYI @eyebrowsoffire, this patch regressed a couple of size benchmarks: https://flutter-flutter-perf.skia.org/e/?keys=Xe5ab9093da633e5f5a62ea9d8f4fa9f6&selected=commit%3D38703%26name%3D%252Carch%253Dintel%252Cbranch%253Dmaster%252Cconfig%253Ddefault%252Cdevice_type%253Dnone%252Cdevice_version%253Dnone%252Chost_type%253Dlinux%252Csub_result%253Dhello_world_flutter_js_uncompressed_bytes%252Ctest%253Dweb_size__compile_test%252C&xbaroffset=38703

In particular, hello_world_flutter_js_uncompressed_bytes doubled. I'm not intimately familiar with these, so not sure if this is expected behavior or not.

eyebrowsoffire · 2024-01-12T00:10:27Z

@bdero Definitely expected. Thanks for the heads up though!

rafaelbenedetti1 · 2024-05-31T17:13:40Z

I'm having a problem after update my flutter version to 3.22, I modify the index.html to new mode of app initialization. My application have some textfields, and after upgrade the number keyboard doesn't work, because the six and four keys moves the cursor to right and left and not show the number on field, how can i resolve this?

eyebrowsoffire · 2024-05-31T17:36:27Z

@rafaelbenedetti1 Could you file a separate issue with a minimum reproducible case?

rafaelbenedetti1 · 2024-05-31T17:57:30Z

@eyebrowsoffire where can i create?

eyebrowsoffire · 2024-05-31T20:22:54Z

@rafaelbenedetti1 https://github.com/flutter/flutter/issues/new/choose

rafaelbenedetti1 · 2024-06-13T11:39:24Z

@eyebrowsoffire flutter/flutter#150191 here

eyebrowsoffire added 8 commits December 13, 2023 16:31

Modularize flutter.js source.

d7c1388

Started new load function.

b25b444

More flutter js loader stuff.

766079d

Some tests running (but hard coded currently).

4157dd5

dart2wasm and dart2js both working (although no skwasm yet).

43f3c6f

Many tests are working.

94d8dfa

Remove hack.

4267ee2

Fix browsers without Trusted Types.

0103f5e

github-actions bot added the platform-web Code specifically for the web engine label Dec 14, 2023

eyebrowsoffire added 10 commits December 14, 2023 10:08

Update licenses golden.

9abd044

Remove old test harnesses.

1898e0e

Inject engine revision into flutter.js.

406cd6b

Don't copy nonexistent bootstrap scripts anymore.

7142f19

Remove skwasm_stub tests. No longer pertinent.

770a89d

Adjust builder json.

111fdd9

Allow for multiple compile configs.

c249d05

Add test for build fallbacks.

06b27a5

Add some additional types and JSDoc comments.

77f2673

Add nonce support.

d603f40

eyebrowsoffire mentioned this pull request Dec 18, 2023

Presubmit test against flutter.js dual bootstrapper. flutter/flutter#140341

Closed

eyebrowsoffire added 8 commits December 18, 2023 13:48

Fix service worker's reference to baseUri.

c66b062

Fix licenses.

f41f51c

Set trusted types policy properly on service worker loader.

1a19c9c

Expect a trailing slash at the end of the canvaskit base url.

180608d

Make sure skwasm works when hosted via CDN.

1ff4217

Optimize loading waterfall for CanvasKit and Skwasm.

1a4a0a6

Fix whitespace.

30349fa

Remove log messages and add newline at the end of file.

cec8c2c

eyebrowsoffire requested a review from ditman December 21, 2023 17:54

eyebrowsoffire marked this pull request as ready for review December 21, 2023 17:54

eyebrowsoffire changed the title ~~[WIP] Refactor flutter.js to do dart2wasm bootstrapping and CanvasKit/Skwasm preloading.~~ Refactor flutter.js to do dart2wasm bootstrapping and CanvasKit/Skwasm preloading. Dec 21, 2023

Fixed licenses golden.

8df86a5

yjbanov reviewed Dec 21, 2023

View reviewed changes

lib/web_ui/flutter_js/src/browser_environment.js Outdated Show resolved Hide resolved

yjbanov reviewed Dec 21, 2023

View reviewed changes

lib/web_ui/flutter_js/src/browser_environment.js Show resolved Hide resolved

eyebrowsoffire added 2 commits December 21, 2023 11:41

Fix some indentation and formatting on JS files.

d3ebe8e

Addressed another of Yegor's comments.

b077685

ditman reviewed Dec 22, 2023

View reviewed changes

eyebrowsoffire added 4 commits January 2, 2024 11:31

Addressed some PR comments.

7d45ef2

Fix formatting issue.

cc79b91

Merge branch 'main' into flutter_js_modular

b43df31

Fix analysis error.

a8954be

eyebrowsoffire requested a review from mdebbar January 3, 2024 22:00

More JS equality stuff.

63ead1a

ditman approved these changes Jan 4, 2024

View reviewed changes

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

auto-submit bot merged commit 5b9d213 into flutter:main Jan 10, 2024

engine-flutter-autoroll mentioned this pull request Jan 10, 2024

Roll Flutter Engine from 941f268fc8bb to 5b9d2132b7cd (1 revision) flutter/flutter#141228

Merged

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

5b9d2132b Refactor flutter.js to do dart2wasm bootstrapping and Canva…

7ec391e

…sKit/Skwasm preloading. (flutter/engine#49037)

Refactor flutter.js to do dart2wasm bootstrapping and CanvasKit/Skwasm preloading. #49037

Refactor flutter.js to do dart2wasm bootstrapping and CanvasKit/Skwasm preloading. #49037

Uh oh!

Conversation

eyebrowsoffire commented Dec 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ditman left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ditman left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bdero commented Jan 11, 2024

Uh oh!

eyebrowsoffire commented Jan 12, 2024

Uh oh!

rafaelbenedetti1 commented May 31, 2024

Uh oh!

eyebrowsoffire commented May 31, 2024

Uh oh!

rafaelbenedetti1 commented May 31, 2024

Uh oh!

eyebrowsoffire commented May 31, 2024

Uh oh!

rafaelbenedetti1 commented Jun 13, 2024

Uh oh!

Uh oh!

eyebrowsoffire commented Dec 14, 2023 •

edited

Loading