[dev_compiler] Add hot reload ability to dartdevc

[michaellee8]

Currently, it is not possible to perform hot reloading when development flutter web apps. My idea is to implement the Dart VM's method replacing based hot reload by modifying dartdevc to generate one-off javascript patches that will inject the new methods using the prototype chain. It has been discussed a litle bit in flutter/flutter#53041 (comment). I plan to contribute it but currently I am not sure about the internals of dev_compiler so I will need some guidance.

[michaellee8]

@vsmenon I have opened an issue here.

[nshahan]

Off the top of my head, the current support for hot restart essentially:

• loads a new version of a Javascript module for all of the dart libraries that were rebuilt because of an edit in the IDE.
• resets some global state in various caches in the dart runtime module.
• calls an optional hook provided by the embedding bootstrap.
• calls the entry point main method to restart the app.

My idea is to implement the Dart VM's method replacing based hot reload by modifying dartdevc to generate one-off javascript patches that will inject the new methods using the prototype chain.

I'd like to understand more about your idea. The code in to be replaced should already be part of the modules that get reloaded. Are you trying to reduce the amount of code that gets recompiled and loaded by the compiler when there during the hot reload? It's not clear to me that is an immediate issue.

When I think about supporting hot reload in DDC I find the largest hurdle will be identifying the values in the dart runtime library that need to be reset or updated. These are the values used to provide the dart language semantics and performance improvements while running in Javascript (Dart type representations, values in caches, etc.) Some of these values are captured by closures so they are very hard to invalidate or update without restarting the application. We need to restructure the representation so it can easily be updated or invalidated for a hot reload. If stale values are lingering around after a hot reload the code could be incorrect and lead to very confusing errors. This is already true for the hot restart support. Some examples of confusing bugs we have fixed:
#37259
dart-lang/dart-pad#1912

One of the first steps I'd like to take is to identify the cases we should be supporting. I believe there are some existing tests for hot reload already. We should build some infrastructure to start running them with an application compiled by DDC to help guide our work.

cc @Markzipan @sigmundch @annagrin

[michaellee8]

@nshahan My idea is to basicaly implement the way that hot reloading works in Dart VM (https://github.com/dart-lang/sdk/wiki/Hot-reload), by replacing the javascript functions in runtime. I believe variables do not have to be modified right?

[nshahan]

OK as I understand you would like to replace methods, either top level or attached to the prototypes of classes. If that is all we do I think it might be possible to avoid the problems that appear when we replace the entire classes.

To give you some background, there are two code paths in dev_compiler.

• ProgramCompiler is used to compile an entire module (one or more Dart libraries) to Javascript. This gets used for the initial compile.
• ExpressionCompiler is used to compile a single Dart expression to Javascript. This gets used to populate the values seen in the debugger and if you type an expression in the debug console. The ExpressionCompiler relies on a full compile by the ProgramCompiler already being done so that it can generate Javascript code that is compatible with the previously compiled Javascript program.

Both take a Component from the Common Front End (CFE) as the input for compilation. This is Dart source code that has already been built into a tree where each node represents some part of the original Dart program.

I'd imagine that we would want to create something similar to the ExpressionCompiler that can compile entire methods compatible with a Javascript program that has already been compiled. Then we would also need some infrastructure to pick out all of the changed code, identify to what class/library/module it belongs to, and somehow add or replace the existing methods in the program running in the browser.

[annagrin]

Flutter request for stateful hot reload: flutter/flutter#53041

[kaljitism]

@michaellee8 @nshahan any update or progress on this??

[sigmundch]

Sorry I missed this issue in the issue tracker.

It's part of the Dart web team plans to dive into hot reload support this year. It's a long road ahead and we are just getting started, so we don't have much to share at this time. We're be tracking our efforts in #54934.

Given the overlap, I'll close this issue as a duplicate