Skip to content

[flutter_tools] Enable hot reload on the web #169174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: master
Choose a base branch
from

Conversation

nshahan
Copy link
Contributor

@nshahan nshahan commented May 20, 2025

[flutter_tools] Enable hot reload on the web

Update the defaults so hot reload is enabled on web development builds
by default. This enables the use of a new module representation in the
compiled JavaScript. Passing --no-web-experimental-hot-reload will
disable the ability to hot reload and return to the AMD JavaScript
module representation.

nshahan added 8 commits May 20, 2025 11:18
Update the defaults so hot reload is enabled on web development builds
by default. This enables the use of a new module representation in the
compiled JavaScript. Passing `--no-web-experimental-hot-reload` will
disable the ability to hot reload and return to the AMD JavaScript
module representation.
@github-actions github-actions bot added the tool Affects the "flutter" command-line tool. See also t: labels. label May 20, 2025
@nshahan nshahan changed the title Enable hot reload [flutter_tools] Enable hot reload on the web May 20, 2025
@CodiumAI-Agent
Copy link

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Inconsistent Flags

The extraFrontEndOptions list is built locally for hot reload flags but the initial kernel build still uses buildInfo.extraFrontEndOptions, causing a mismatch where hot reload flags might not be applied on the initial compile.

final List<String> extraFrontEndOptions = <String>[
  ...buildInfo.extraFrontEndOptions,
  if (buildInfo.webEnableHotReload)
  // These flags are only valid to be passed when compiling with DDC.
  ...<String>['--dartdevc-canary', '--dartdevc-module-format=ddc'],
];

generator = ResidentCompiler(
  globals.artifacts!.getHostArtifact(HostArtifact.flutterWebSdk).path,
  buildMode: buildInfo.mode,
  trackWidgetCreation: buildInfo.trackWidgetCreation,
  fileSystemRoots: buildInfo.fileSystemRoots,
  // Override the filesystem scheme so that the frontend_server can find
  // the generated entrypoint code.
  fileSystemScheme: 'org-dartlang-app',
  initializeFromDill:
      buildInfo.initializeFromDill ??
      getDefaultCachedKernelPath(
        trackWidgetCreation: buildInfo.trackWidgetCreation,
        dartDefines: buildInfo.dartDefines,
        extraFrontEndOptions: buildInfo.extraFrontEndOptions,
      ),
  assumeInitializeFromDillUpToDate: buildInfo.assumeInitializeFromDillUpToDate,
  targetModel: TargetModel.dartdevc,
  frontendServerStarterPath: buildInfo.frontendServerStarterPath,
  extraFrontEndOptions: extraFrontEndOptions,
  platformDill: globals.fs.file(platformDillPath).absolute.uri.toString(),
Exception Messages

The error messages reference FlutterOptions.kExtraFrontEndOptions; ensure this constant exists and matches the intended flag name to avoid runtime or compile errors.

DdcModuleFormat get ddcModuleFormat {
  final DdcModuleFormat moduleFormat =
      webEnableHotReload ? DdcModuleFormat.ddc : DdcModuleFormat.amd;
  final DdcModuleFormat? parsedFormat =
      _ddcModuleFormatAndCanaryFeaturesFromFrontEndArgs(extraFrontEndOptions).ddcModuleFormat;
  if (parsedFormat != null && moduleFormat != parsedFormat) {
    throw Exception(
      'Unsupported option combination:\n'
      '${FlutterOptions.kWebExperimentalHotReload}: $webEnableHotReload\n'
      '${FlutterOptions.kExtraFrontEndOptions}: --dartdevc-module-format=${parsedFormat.name}',
Hot Reload Support

Removed extraFrontEndOptions in the web widget preview, which may disable hot reload support for previews; verify intended behavior and update preview scaffold options if needed.

null,
treeShakeIcons: false,
// Provide the DTD connection information directly to the preview scaffold.
// This could, in theory, be provided via a follow up call to a service extension
// registered by the preview scaffold, but there's some uncertainty around how service
// extensions will work with Flutter web embedded in VSCode without a Chrome debugger
// connection.
dartDefines: <String>['$kWidgetPreviewDtdUriEnvVar=${_dtdService.dtdUri}'],
packageConfigPath: widgetPreviewScaffoldProject.packageConfig.path,
packageConfig: PackageConfig.parseBytes(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
tool Affects the "flutter" command-line tool. See also t: labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy