HMR/live-reload support

[shirakaba]

Live reload

The minimal bash script livereload.sh seems to do the trick for live reload, simply by killing the app and relaunching it upon any Webpack hot update; I'm not sure we need anything more than that. It remains to be seen whether it works on non-bash CLIs, like that of Windows.

I initially had some other thoughts about how we could implement it (https://github.com/remy/nodemon/ and https://github.com/napcs/node-livereload, though both may not be quite what we need).

I suppose the disadvantage of my approach of killing the app altogether is that your debugger would keep detaching. That might be par for the course for live reload implementations, however – not too sure.

Current implementation

In our Webpack config, we inject a globally-available variable into the runtime context: __HMR_MODE__. This variable accepts the values "live-reload" | "hmr" | "none".

The only place we accept hot updates is in the entrypoint file, app.ts. Depending on the value of __HMR_MODE__, we do the following upon detecting a hot update in that file (which may have bubbled up from another file):

• "live-reload": Sends a special exit signal (64), so that the app will be relaunched if running via livereload.sh.
• "hmr": Applies the hot update without exiting the app (not yet implemented – see "HMR" section below).
• "none": The app remains alive, but doesn't apply the update.
• undefined: Behaves as "none".

We'd then instruct users to run the app by defining their npm run start script as ./livereload.sh node_modules/.bin/qode ./dist/index.js.

livereload.sh simply runs the given command (in this case, node_modules/.bin/qode ./dist/index.js) in a loop until it receives an appropriate exit signal like SIGTERM. If it receives our custom exit signal 64 (which we emit upon receiving a hot update when __HMR_MODE__ is set to "live-reload", then we terminate the process and execute it again. In other words, we relaunch the app. The Ctrl+C signal will still kill the app as normal, and all console logs from the process are still captured and shown in the terminal.

Extra reading

Some of this reading may be relevant for HMR. I looked into how Live Reload was implemented (under the name "LiveSync") in NativeScript:

• A webpack loader prepends this HMR script to each script file (this may be more complicated in .svelte files as they go through pre-processing, but then again we could just let the hot update bubble up to app.ts which is simply a TypeScript file): https://github.com/NativeScript/NativeScript/blob/1f790edc8032fd36bde4b7a24e4d1c1c4b4dea49/packages/webpack/bundle-config-loader.ts#L26-L46
• Something calls application.livesync() upon the hot update and that does all this state tear-down: https://github.com/NativeScript/NativeScript/blob/1f790edc8032fd36bde4b7a24e4d1c1c4b4dea49/packages/core/application/application-common.ts#L62-L81
• How the iOS Application class handles LiveSyncs: https://github.com/NativeScript/NativeScript/blob/2243660080ce6877d68a3f32fd64625f86023f77/packages/core/application/index.ios.ts#L287-L343
• Dimitar Tachev explains what webpack-dev-server and webpack-dev-middleware are: Proposal: Use webpack-dev-server instead of watch mode NativeScript/nativescript-dev-webpack#1027 (comment)
• Some more cryptic code on how Angular supports HMR/LiveSync in NativeScript: https://github.com/NativeScript/NativeScript/blob/020ad4da37f551e934cd6054ca983ab5083a4042/packages/webpack/transformers/ns-support-hmr-ng.ts#L82-L103
• How Frame navigation components handle LiveSync: https://github.com/NativeScript/NativeScript/blob/020ad4da37f551e934cd6054ca983ab5083a4042/packages/core/ui/frame/frame-common.ts#L598-L663
• How generic View components handle LiveSync: https://github.com/NativeScript/NativeScript/blob/020ad4da37f551e934cd6054ca983ab5083a4042/packages/core/ui/core/view/view-common.ts#L157-L214
• When the application is notified that livesync is in progress, it kicks off the HMR update by
  calling the hot.js module from nativescript-dev-webpack: https://github.com/NativeScript/nativescript-dev-webpack/blob/master/hot.js

HMR

This is far tougher to solve. HMR is experimental even in Svelte for Web, and Rixo (who developed it) said that supporting HMR for Svelte Native required bespoke work. So this is not something we can get "for free" just by setting things up right.

Extra reading

• Svelte's hot loader plugin for Rollup https://github.com/rixo/rollup-plugin-svelte-hot. The webpack one is called svelte-loader-hot.
• Svelte Native's Webpack config: https://github.com/halfnelson/svelte-native-template/blob/dcc048c247394a3acbc11e70b6a559696219675c/svelte-native.webpack.config.js#L8-L25, which inherits the largely irrelevant NativeScript common Webpack config: https://github.com/NativeScript/NativeScript/blob/master/packages/webpack/templates/webpack.javascript.js