Overview

Hot Module Replacement (HMR) is a feature provided by webpack. It makes it possible to replace modules in a bundled application while the application is running.

Integrating HMR within NativeScript will improve the development experience by:

• reducing the time to apply the updates when changing files;
• preserving the application state between reloads.

Design

Implementation details and motivation of the feature can be found in its design document.

Tasks

NativeScript 5.0

• Demo applications.
  • JavaScript https://github.com/NativeScript/js-ns-hmr
  • Angular https://github.com/NativeScript/ng-ns-hmr
• {N}-webpack Integrate the HotModuleReplacement plugin with nativescript-dev-webpack.
• {N}-webpack Template for HMR runtime and logic that triggers the hot update on change.
• {N}-webpack Loaders for invoking reloadPage on changes in JS/TS-only applications.
• {N}-webpack Add Vue template. feat: add Vue bundling support nativescript-dev-webpack#676
• {N}-CLI Flag for enabling HMR.
• {N}-CLI Sync the backup files and restart the application when the hot update fails.
• {N}-CLI Integrate with tns preview.
• Integrate with NativeScript Playground.
• {N}-Angular Modify the bootstrap API to allow for dynamic module refetching.
• {N}-Angular Application logic for bootstrapping on changes.
• {N}-Angular Research the Angular compiler API for ways to improve the application reload logic in NativeScript Angular application.
• [5.4] Livesync tests.
• Benchmark tests.
• [5.4, all flavors] Provide a guide on persisting the application state between reloads.
• Documentation.
  • Update the {N}-webpack article.
  • Mention the hmr flag in the {N}-CLI section.

After NativeScript 5.0

The possible improvements are explained in the design doc.

• [5.2] {N}-webpack Loaders for dynamically inserting the reload logic in NativeScript Angular applications: feat: support HMR in Angular apps nativescript-dev-webpack#788
• {N}-Vue Avoid unexpected navigation on a script change: HMR support for script changes in NativeScript-Vue applications nativescript-vue/nativescript-vue#388
• {N}-Vue Apply deletion of styles: HMR does not apply deletion of styles nativescript-vue/nativescript-vue#425
• {N}-Vue HMR stops listening on changes: NS and Vue --hmr stops listening to changes nativescript-cli#3927
• {N}-CLI Research ways to sync updates without FS
• {N}-modules Apply styles at runtime
  • [5.2 - all flavors] Application styles - app.(css|scss): [HMR] Apply changes in application styles at runtime #6645
  • [5.4 - JS/TS only] Page styles - main-page.(css|scss), etc.: [HMR] Apply changes in page styles at runtime #6953
• [5.4 - JS/TS only] {N}-modules Apply new UI at runtime
• [5.4 - JS/TS only] {N}-modules Improve the reload strategy when the root view is not Page, but TabView, SideDrawer, etc.
• {N}-modules Come up with a reload strategy for custom components.
• {N}-Angular Research ways to preserve the last route between reloads.
• {N}-modules/{N}-Angular Research ways to preserve the navigation history between reloads.

Known issues

• {N}-modules Currently if you add a new -page.css, -page.xml or -page.ts/js file it won't be accepted as it will trigger an update in the ./ sync recursive... item in the bundle which is not being accepted, so this will make the CLI restart the app to apply the change
• [5.2] nativescript-dev-sass Changes in app.scss are not applied in Angular applications
• {N}-Angular Changes in plugin do NOT apply in angular projects:
  [HMR] Changes in plugin do NOT apply in angular projects nativescript-dev-webpack#914

Contributing

HMR provides us with so many possibilities!
If you want to work on a task from the list, tell us and we will do our best to help you!
If you have another great idea on how to make HMR even cooler, share it in the comments!

Discussion

Please, don't report problems here. Instead, open a new issue and link it to this one.
Let's use this discussion for suggestions and improvement ideas. We would love to hear from you!

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.