Support flutter run --wasm and flutter drive --wasm. (#146231)

This adds support for adding the `--wasm` flag to `flutter run` and `flutter drive`
* Emits errors if you attempt to use the skwasm renderer without the `--wasm` flag
* Emits errors if you try to use `--wasm` when not using a web device
* Uses the skwasm renderer by default if you pass `--wasm` and no `--web-renderer`

Author: eyebrowsoffire

dev/bots/suite_runners/run_web_long_running_tests.dart

@@ -32,6 +32,7 @@ Future<void> webLongRunningTestsRunner(String flutterRoot) async {
         target: path.join('test_driver', 'failure.dart'),
         buildMode: buildMode,
         renderer: 'canvaskit',
+        wasm: false,
         // This test intentionally fails and prints stack traces in the browser
         // logs. To avoid confusion, silence browser output.
         silenceBrowserOutput: true,
@@ -42,6 +43,17 @@ Future<void> webLongRunningTestsRunner(String flutterRoot) async {
         driver: path.join('test_driver', 'integration_test.dart'),
         buildMode: buildMode,
         renderer: 'canvaskit',
+        wasm: false,
+        expectWriteResponseFile: true,
+        expectResponseFileContent: 'null',
+      ),
+      () => _runFlutterDriverWebTest(
+        testAppDirectory: path.join('packages', 'integration_test', 'example'),
+        target: path.join('integration_test', 'example_test.dart'),
+        driver: path.join('test_driver', 'integration_test.dart'),
+        buildMode: buildMode,
+        renderer: 'skwasm',
+        wasm: true,
         expectWriteResponseFile: true,
         expectResponseFileContent: 'null',
       ),
@@ -51,6 +63,7 @@ Future<void> webLongRunningTestsRunner(String flutterRoot) async {
         driver: path.join('test_driver', 'extended_integration_test.dart'),
         buildMode: buildMode,
         renderer: 'canvaskit',
+        wasm: false,
         expectWriteResponseFile: true,
         expectResponseFileContent: '''
 {
@@ -97,6 +110,7 @@ Future<void> webLongRunningTestsRunner(String flutterRoot) async {
     () => _runWebE2eTest('capabilities_integration_canvaskit', buildMode: 'debug', renderer: 'auto'),
     () => _runWebE2eTest('capabilities_integration_canvaskit', buildMode: 'profile', renderer: 'canvaskit'),
     () => _runWebE2eTest('capabilities_integration_html', buildMode: 'release', renderer: 'html'),
+    () => _runWebE2eTest('capabilities_integration_skwasm', buildMode: 'release', renderer: 'skwasm', wasm: true),
 
     // This test doesn't do anything interesting w.r.t. rendering, so we don't run the full build mode x renderer matrix.
     // CacheWidth and CacheHeight are only currently supported in CanvasKit mode, so we don't run the test in HTML mode.
@@ -110,6 +124,7 @@ Future<void> webLongRunningTestsRunner(String flutterRoot) async {
       target: 'test_driver/smoke_web_engine.dart',
       buildMode: 'profile',
       renderer: 'auto',
+      wasm: false,
     ),
     () => _runGalleryE2eWebTest('debug'),
     () => _runGalleryE2eWebTest('debug', canvasKit: true),
@@ -192,12 +207,14 @@ Future<void> _runWebE2eTest(
   String name, {
   required String buildMode,
   required String renderer,
+  bool wasm = false,
 }) async {
   await _runFlutterDriverWebTest(
     target: path.join('test_driver', '$name.dart'),
     buildMode: buildMode,
     renderer: renderer,
     testAppDirectory: path.join(flutterRoot, 'dev', 'integration_tests', 'web_e2e_tests'),
+    wasm: wasm,
   );
 }
 
@@ -206,6 +223,7 @@ Future<void> _runFlutterDriverWebTest({
   required String buildMode,
   required String renderer,
   required String testAppDirectory,
+  required bool wasm,
   String? driver,
   bool expectFailure = false,
   bool silenceBrowserOutput = false,
@@ -235,6 +253,7 @@ Future<void> _runFlutterDriverWebTest({
       'web-server',
       '--$buildMode',
       '--web-renderer=$renderer',
+      if (wasm) '--wasm',
     ],
     expectNonZeroExit: expectFailure,
     workingDirectory: testAppDirectory,

dev/integration_tests/non_nullable/web/flutter_bootstrap.js

@@ -0,0 +1,12 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+{{flutter_js}}
+{{flutter_build_config}}
+_flutter.loader.load({
+  config: {
+    // Use the local CanvasKit bundle instead of the CDN to reduce test flakiness.
+    canvasKitBaseUrl: "/canvaskit/",
+  },
+});

dev/integration_tests/non_nullable/web/index.html

@@ -22,16 +22,6 @@
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
-  <!-- This script installs service_worker.js to provide PWA functionality to
-       application. For more information, see:
-       https://developers.google.com/web/fundamentals/primers/service-workers -->
-  <script>
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', function () {
-        navigator.serviceWorker.register('flutter_service_worker.js');
-      });
-    }
-  </script>
-  <script src="main.dart.js" type="application/javascript"></script>
+  <script src="flutter_bootstrap.js" async></script>
 </body>
 </html>

dev/integration_tests/web_compile_tests/web/flutter_bootstrap.js

@@ -0,0 +1,12 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+{{flutter_js}}
+{{flutter_build_config}}
+_flutter.loader.load({
+  config: {
+    // Use the local CanvasKit bundle instead of the CDN to reduce test flakiness.
+    canvasKitBaseUrl: "/canvaskit/",
+  },
+});

dev/integration_tests/web_compile_tests/web/index.html

@@ -7,6 +7,6 @@
         <title>Hello, World</title>
     </head>
     <body>
-        <script src="main.dart.js"></script>
+        <script src="flutter_bootstrap.js" async></script>
     </body>
 </html>

dev/integration_tests/web_e2e_tests/test_driver/capabilities_integration_canvaskit.dart

@@ -12,5 +12,7 @@ void main() {
   testWidgets('isCanvasKit returns true in CanvasKit mode', (WidgetTester tester) async {
     await tester.pumpAndSettle();
     expect(isCanvasKit, true);
+    expect(isSkwasm, false);
+    expect(isSkiaWeb, true);
   });
 }

dev/integration_tests/web_e2e_tests/test_driver/capabilities_integration_html.dart

@@ -8,8 +8,10 @@ import 'package:integration_test/integration_test.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  testWidgets('isCanvasKit returns false in HTML mode', (WidgetTester tester) async {
+  testWidgets('capabilities are set properly in HTML mode', (WidgetTester tester) async {
     await tester.pumpAndSettle();
     expect(isCanvasKit, false);
+    expect(isSkwasm, false);
+    expect(isSkiaWeb, false);
   });
 }

dev/integration_tests/web_e2e_tests/test_driver/capabilities_integration_skwasm.dart

@@ -0,0 +1,18 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  testWidgets('capabilities are set properly in Skwasm mode', (WidgetTester tester) async {
+    await tester.pumpAndSettle();
+    expect(isCanvasKit, false);
+    expect(isSkwasm, true);
+    expect(isSkiaWeb, true);
+  });
+}

dev/integration_tests/web_e2e_tests/test_driver/capabilities_integration_skwasm_test.dart

@@ -0,0 +1,7 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:integration_test/integration_test_driver.dart' as test;
+
+Future<void> main() async => test.integrationDriver();

examples/hello_world/web/flutter_bootstrap.js

@@ -0,0 +1,12 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+{{flutter_js}}
+{{flutter_build_config}}
+_flutter.loader.load({
+  config: {
+    // Use the local CanvasKit bundle instead of the CDN to reduce test flakiness.
+    canvasKitBaseUrl: "/canvaskit/",
+  },
+});

examples/hello_world/web/index.html

@@ -7,6 +7,6 @@
         <title>Hello, World</title>
     </head>
     <body>
-        <script src="main.dart.js"></script>
+        <script src="flutter_bootstrap.js" async></script>
     </body>
 </html>

packages/flutter_tools/lib/src/commands/build_web.dart

@@ -64,7 +64,7 @@ class BuildWebCommand extends BuildSubCommand {
       help:
           'Sets the optimization level used for Dart compilation to JavaScript/Wasm.',
       defaultsTo: '${WebCompilerConfig.kDefaultOptimizationLevel}',
-      allowed: const <String>['1', '2', '3', '4'],
+      allowed: const <String>['0', '1', '2', '3', '4'],
     );
 
     //

packages/flutter_tools/lib/src/commands/run.dart

@@ -30,6 +30,7 @@ import '../runner/flutter_command_runner.dart';
 import '../tracing.dart';
 import '../vmservice.dart';
 import '../web/compile.dart';
+import '../web/web_constants.dart';
 import '../web/web_runner.dart';
 import 'daemon.dart';
 
@@ -179,7 +180,12 @@ abstract class RunCommandBase extends FlutterCommand with DeviceBasedDevelopment
         hide: !verboseHelp,
         help: 'Uninstall previous versions of the app on the device '
               'before reinstalling. Currently only supported on iOS.',
-    );
+      )
+      ..addFlag(
+        FlutterOptions.kWebWasmFlag,
+        help: 'Compile to WebAssembly rather than JavaScript.\n$kWasmMoreInfo',
+        negatable: false,
+      );
     usesWebOptions(verboseHelp: verboseHelp);
     usesTargetOption();
     usesPortOptions(verboseHelp: verboseHelp);
@@ -227,6 +233,13 @@ abstract class RunCommandBase extends FlutterCommand with DeviceBasedDevelopment
 
   String? get traceAllowlist => stringArg('trace-allowlist');
 
+  bool get useWasm => boolArg(FlutterOptions.kWebWasmFlag);
+
+  WebRendererMode get webRenderer => WebRendererMode.fromCliOption(
+    stringArg(FlutterOptions.kWebRendererFlag),
+    useWasm: useWasm
+  );
+
   /// Create a debugging options instance for the current `run` or `drive` invocation.
   @visibleForTesting
   @protected
@@ -242,10 +255,6 @@ abstract class RunCommandBase extends FlutterCommand with DeviceBasedDevelopment
     final Map<String, String> webHeaders = featureFlags.isWebEnabled
         ? extractWebHeaders()
         : const <String, String>{};
-    final String? webRendererString = stringArg('web-renderer');
-    final WebRendererMode webRenderer = (webRendererString != null)
-        ? WebRendererMode.values.byName(webRendererString)
-        : WebRendererMode.auto;
 
     if (buildInfo.mode.isRelease) {
       return DebuggingOptions.disabled(
@@ -264,6 +273,7 @@ abstract class RunCommandBase extends FlutterCommand with DeviceBasedDevelopment
         webBrowserFlags: webBrowserFlags,
         webHeaders: webHeaders,
         webRenderer: webRenderer,
+        webUseWasm: useWasm,
         enableImpeller: enableImpeller,
         enableVulkanValidation: enableVulkanValidation,
         uninstallFirst: uninstallFirst,
@@ -314,6 +324,7 @@ abstract class RunCommandBase extends FlutterCommand with DeviceBasedDevelopment
         webLaunchUrl: featureFlags.isWebEnabled ? stringArg('web-launch-url') : null,
         webHeaders: webHeaders,
         webRenderer: webRenderer,
+        webUseWasm: useWasm,
         vmserviceOutFile: stringArg('vmservice-out-file'),
         fastStart: argParser.options.containsKey('fast-start')
           && boolArg('fast-start')
@@ -630,12 +641,21 @@ class RunCommand extends RunCommandBase {
     if (devices!.any((Device device) => device is AndroidDevice)) {
       _deviceDeprecationBehavior = DeprecationBehavior.exit;
     }
+
     // Only support "web mode" with a single web device due to resident runner
     // refactoring required otherwise.
     webMode = featureFlags.isWebEnabled &&
       devices!.length == 1  &&
       await devices!.single.targetPlatform == TargetPlatform.web_javascript;
 
+    if (useWasm && !webMode) {
+      throwToolExit('--wasm is only supported on the web platform');
+    }
+
+    if (webRenderer == WebRendererMode.skwasm && !useWasm) {
+      throwToolExit('Skwasm renderer requires --wasm');
+    }
+
     final String? flavor = stringArg('flavor');
     final bool flavorsSupportedOnEveryDevice = devices!
       .every((Device device) => device.supportsFlavors);

packages/flutter_tools/lib/src/commands/test.dart

@@ -330,6 +330,11 @@ class TestCommand extends FlutterCommand with DeviceBasedDevelopmentArtifacts {
     return super.verifyThenRunCommand(commandPath);
   }
 
+  WebRendererMode get webRenderer => WebRendererMode.fromCliOption(
+    stringArg(FlutterOptions.kWebRendererFlag),
+    useWasm: useWasm
+  );
+
   @override
   Future<FlutterCommandResult> runCommand() async {
     if (!globals.fs.isFileSync('pubspec.yaml')) {
@@ -388,10 +393,6 @@ class TestCommand extends FlutterCommand with DeviceBasedDevelopmentArtifacts {
       );
     }
 
-    final String? webRendererString = stringArg('web-renderer');
-    final WebRendererMode webRenderer = (webRendererString != null)
-        ? WebRendererMode.values.byName(webRendererString)
-        : WebRendererMode.auto;
     final DebuggingOptions debuggingOptions = DebuggingOptions.enabled(
       buildInfo,
       startPaused: startPaused,
@@ -405,6 +406,7 @@ class TestCommand extends FlutterCommand with DeviceBasedDevelopmentArtifacts {
       enableImpeller: ImpellerStatus.fromBool(argResults!['enable-impeller'] as bool?),
       debugLogsDirectoryPath: debugLogsDirectoryPath,
       webRenderer: webRenderer,
+      webUseWasm: useWasm,
     );
 
     String? testAssetDirectory;
@@ -511,6 +513,10 @@ class TestCommand extends FlutterCommand with DeviceBasedDevelopmentArtifacts {
       throwToolExit('--wasm is only supported on the web platform');
     }
 
+    if (webRenderer == WebRendererMode.skwasm && !useWasm) {
+      throwToolExit('Skwasm renderer requires --wasm');
+    }
+
     Device? integrationTestDevice;
     if (_isIntegrationTest) {
       integrationTestDevice = await findTargetDevice();
@@ -589,7 +595,6 @@ class TestCommand extends FlutterCommand with DeviceBasedDevelopmentArtifacts {
         testAssetDirectory: testAssetDirectory,
         flutterProject: flutterProject,
         web: isWeb,
-        useWasm: useWasm,
         randomSeed: stringArg('test-randomize-ordering-seed'),
         reporter: stringArg('reporter'),
         fileReporter: stringArg('file-reporter'),

packages/flutter_tools/lib/src/device.dart

@@ -994,6 +994,7 @@ class DebuggingOptions {
     this.webHeaders = const <String, String>{},
     this.webLaunchUrl,
     this.webRenderer = WebRendererMode.auto,
+    this.webUseWasm = false,
     this.vmserviceOutFile,
     this.fastStart = false,
     this.nullAssertions = false,
@@ -1024,6 +1025,7 @@ class DebuggingOptions {
       this.webLaunchUrl,
       this.webHeaders = const <String, String>{},
       this.webRenderer = WebRendererMode.auto,
+      this.webUseWasm = false,
       this.cacheSkSL = false,
       this.traceAllowlist,
       this.enableImpeller = ImpellerStatus.platformDefault,
@@ -1104,6 +1106,7 @@ class DebuggingOptions {
     required this.webHeaders,
     required this.webLaunchUrl,
     required this.webRenderer,
+    required this.webUseWasm,
     required this.vmserviceOutFile,
     required this.fastStart,
     required this.nullAssertions,
@@ -1191,6 +1194,9 @@ class DebuggingOptions {
   /// Which web renderer to use for the debugging session
   final WebRendererMode webRenderer;
 
+  /// Whether to compile to webassembly
+  final bool webUseWasm;
+
   /// A file where the VM Service URL should be written after the application is started.
   final String? vmserviceOutFile;
   final bool fastStart;
@@ -1300,6 +1306,7 @@ class DebuggingOptions {
     'webLaunchUrl': webLaunchUrl,
     'webHeaders': webHeaders,
     'webRenderer': webRenderer.name,
+    'webUseWasm': webUseWasm,
     'vmserviceOutFile': vmserviceOutFile,
     'fastStart': fastStart,
     'nullAssertions': nullAssertions,
@@ -1356,6 +1363,7 @@ class DebuggingOptions {
       webHeaders: (json['webHeaders']! as Map<dynamic, dynamic>).cast<String, String>(),
       webLaunchUrl: json['webLaunchUrl'] as String?,
       webRenderer: WebRendererMode.values.byName(json['webRenderer']! as String),
+      webUseWasm: json['webUseWasm']! as bool,
       vmserviceOutFile: json['vmserviceOutFile'] as String?,
       fastStart: json['fastStart']! as bool,
       nullAssertions: json['nullAssertions']! as bool,