svelte-hmr

HMR commons for Svelte 3.

This packages provides shared dependencies for implementing Svelte HMR in any bundler plugins.

If you want to use HMR in your Svelte project, what you need is a HMR enabled plugin for your bundler (e.g. Rollup or Webpack). You'll find a list of available tools at the end of this doc.

On the other hand, if you are really developing a plugin... Sorry, no docs for now! Drop me a line, I'd be happy to help!

Features

• update Svelte components in place

• preservation of component state, including local state (i.e. let vars in your components)

• inject CSS instead of doing a full replace when only the component's CSS has changed, with compatible HMR APIs (rollup-plugin-hot, Nollup, and Snowpack for now)

Options

Those are the HMR options that are implemented by svelte-hmr itself, and so should be supported by any plugin listed bellow (especially if they include a link pointing to this section). How to pass those options is specific to each plugins, so refer to their specific docs on this point.

noReload

Type: bool
Default: false

By default, svelte-hmr will trigger a full browser reload when it detects an error that will prevent subsequent HMR updates to be applied correctly. Set this to true to prevent automatic reloads. Note that Svelte Native does not execute in a browser, and so this option has no effect there.

noPreserveState

Deprecated: removed and default changed from version 0.12. Use preserveLocalState instead.

preserveLocalState

Type: bool
Default: false

Enable preservation of local state for all variables in all components.

noPreserveStateKey

Type: string
Default: '@hmr:reset' (also accepts legacy '@!hmr')

Force disable preservation of local state for this component.

This flag has priority over all other settings of state preservation. If it is present, all the state of the component will be reset on the next update, regardless of the value of all the other state preservation settings.

preserveAllLocalStateKey

Type: string
Default: '@hmr:keep-all'

Force preservation of all local variables of this component.

preserveLocalStateKey

Type: string
Default: '@hmr:keep'

Force preservation of a given local variable in this component.

optimistic

Type: bool
Default: false

When false, runtime errors during component init (i.e. when your `

{x}

If you replace let x = 1 by let x = 10 and save, the previous value of x will be preserved. That is, x will be 2 and not 10. The restoration of previous state happens after the init code of the component has run, so the value will not be 11 either, despite the x++ that is still here.

If you want this behaviour for all the state of all your components, you can enable it by setting the preserveLocalState option to true.

If you then want to disable it for just one particular file, or just temporarily, you can turn it off by adding a // @hmr:reset comment somewhere in your component.

On the contrary, if you keep the default preserveLocalState to false, you can enable preservation of all the local state of a given component by adding the following comment: // @hmr:keep-all. You can also preserve only the state of some specific variables, by annotating them with: // @hmr:keep.

For example:

Svelte HMR tools

Vite

The official Svelte plugin for Vite has HMR support.

Webpack

The official loader for Webpack now has HMR support.

Rollup

Rollup does not natively support HMR, so we recommend using Vite. However, if you'd like to add HMR support to Rollup, the best way to get started is to refer to svelte-template-hot, which demonstrates usage of both rollup-plugin-hot and rollup-plugin-svelte-hot.

Svelte Native

The official Svelte Native template already includes HMR support.

License

ISC