Sdk: 🔥 Hot 🔁 "Refresh" Capability in DDC (DartDevCompiler)

[matanlurey]

Tracking issue for what I'm now calling _🔥 Hot 🔁 Refresh_ (not to confuse with _Hot Reload_).

One of the biggest requests from users is to have a faster edit-refresh cycle for Dart in a web (browser) environment. Until recently, this was almost impossible. With the DartDevCompiler, we incrementally compile .dart code to idiomatic ES6 .js. It should be _possible_ to reload modules that have changed and either:

• Automatically refresh the browser, but with cached assets loaded already.
• Give a "hint" to frameworks, such as AngularDart, to rebuild from the root.

_This issue exists so that packages, such as AngularDart can point at something when discussing features related to automatic refresh/module patching/anything related to a dev-experience around this._

User Experience

1. Open a web project
2. Type pub serve
3. Go to localhost:8080 in Chrome or another major browser
4. View an application, for example, that says <h1>Hello World</h1>
5. Edit main.dart, change 'Hello World' to 'Helloooooooo World'
6. By some mechanism, user indicates they want a _🔥 Hot 🔁 Refresh_
7. The screen updates to show <h1>Helloooooooo World</h1>

---

_More to come._

[tomaszkubacki]

Ok as a total dreamer I would also love to see something similar to what I've seen on last Dart Dev conference for vm: hot reloading where state was persistent between changes - I know it is not possible in ES world ...or is it?

[matanlurey]

@tomaszkubacki:

Ok as a total dreamer I would also love to see something similar to what I've seen on last Dart Dev conference for vm: hot reloading where state was persistent between changes - I know it is not possible in ES world ...or is it?

Unfortunately we are limited to:

1. What is provided by the browser at the moment (no parity with the Dart VM).
2. How frameworks are implemented (i.e. how they store and manage state).

I think we can get _some_ of the same experience as Flutter's hot reloading without waiting forever for JavaScript VM's to catch up. We'll also need to potentially change frameworks, such as AngularDart, to be able to react hot changes. This issue is tracking changes needed to get that experience.

Of course, we're happy to discuss alternatives others may have considered.

[tomaszkubacki]

@matanlurey by "some" you mean something like redux single store with state saved in localstorage implemented as AngularDart mechanism ?

[matanlurey]

I don't know about that, this issue isn't about implementation details.

[DanTup]

What is provided by the browser at the moment (no parity with the Dart VM).

Have you thought about shipping the Dart VM in the browser? :D

[JacobGood1]

Yes, I have been asking for such a feature as well.

[jmesserly]

@vsmenon -- we have a prototype of this in use on several big internal apps. Is there more work to do here? Is the "hot restart" feature available for all users and do we have good documentation on how to set it up?

[jmesserly]

@jakemac53 -- do you know if DDC "hot restart" is exposed via build runner?

[jakemac53]

Yep! It works a bit differently than internal and allows handling of reload events at the module level instead of just the application level. See https://github.com/dart-lang/build/blob/master/docs/hot_module_reloading.md.

[jmesserly]

Excellent! Then I think we can close this issue, since the feature is implemented and in use. But we should open bugs for any remaining issues/new ones that we find (e.g. https://github.com/dart-lang/sdk/issues/34596).

[fuzzybinary]

Note for others that our curious - AngularDart support of hhis is tracked as part of https://github.com/dart-lang/angular/issues/160

[jakemac53]

AngularDart does not directly support this feature, so you would need to add the top level hooks in your app to destroy the root component and re-invoke main.