A clone of the default Sapper template, with added support for HMR. Only available for Webpack currently. (Rollup support for Sapper is pretty hard, and not very high on my priority list.)
Svelte HMR is still quite experimental. Not ready for production. (But you won't ship your HMR, right?)
degit is a scaffolding tool that lets you create a directory from a branch in a repository. Use either the rollup or webpack branch in sapper-template:
# for webpack npx degit "rixo/sapper-template-hot#webpack" my-app
However you get the code, you can install dependencies and run the project in development mode with:
cd my-app npm install # or yarn npm run dev
Open up localhost:3000 and start clicking around.
Consult sapper.svelte.dev for help getting started.
This project intends to stick to the official template as much as possible, so refer to its docs for all details about the template itself.
Add HMR to your existing Sapper project# replace svelte-loader with fork with HMR support npm install -D rixo/svelte-loader
Adapt your webpack.config.js (considering you started from the official template):
const hot = dev && process.env.HOT != 0
module.exports = {
client: {
...
module: {
rules: [
{
test: /\.(svelte|html)$/,
use: {
// change svelte-loader to svelte-loader-hot
loader: 'svelte-loader-hot',
options: {
dev, // NOTE dev mode is required for HMR
hydratable: true,
hotReload: hot,
hotOptions: {
// optimistic will try to recover from runtime errors during
// component init (instead of doing a full reload)
optimistic: true,
},
},
},
},
],
},
...
plugins: [
// pending https://github.com/sveltejs/svelte/issues/3632
hot && new webpack.HotModuleReplacementPlugin(),
...
].filter(Boolean),
},
...
}
HMR is not officially supported by Svelte (yet?), so please report issues & feedback about HMR in this project's issue tracker.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4