This is a copy of official Svelte template with added HMR support. It lives at https://github.com/rixo/svelte-template-hot.
Progress of Svelte HMR support can be tracked in this issue.
This template aims to remain as close to the official template as possible. Please refer to official docs for general usage. For HMR specific stuff, see bellow.
This HMR implementation relies on Svelte's private & non documented API. This means that it could stop working with any new version of Svelte.
To create a new project based on this template using degit:
npx degit rixo/svelte-template-hot svelte-app
cd svelte-app
npm installRun the build script a first time, in order to avoid 404 errors about missing bundle.css in the browser:
npm run buildnpm run devNavigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and... Eyeball!
HMR is supported both with Nollup or with Rollup itself with (very experimental) rollup-plugin-hot.
Nollup implements the shortest possible path from a file change to the module reload in the browser and is all in-memory. Said otherwise, it is insanely fast. Also, it has been around for some time so it is quite battle tested already.
The Rollup plugin on the other hand is still little more than a proof of concept by now, but it has better sourcemap support and error reporting.
Support for both Nollup and Rollup HMR is provided by (also pretty experimental) rollup-plugin-svelte-hot. Please report issues regarding HMR in this plugin's tracker. Or the current project might make more sense. You be the judge.
npm run dev:nollupnpm run dev:rollupThis is the default dev of official template.
npm run dev:livereloadRollup HMR is also aliased as dev so you can simply run:
npm run devYou can change the default dev script to your preferred method in the scripts section of package.json.