# 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](#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. ```svelte ``` #### preserveAllLocalStateKey Type: `string`
Default: `'@hmr:keep-all'` Force preservation of all local variables of this component. ```svelte ``` #### preserveLocalStateKey Type: `string`
Default: `'@hmr:keep'` Force preservation of a given local variable in this component. ```svelte ``` #### 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 ``` ## Svelte HMR tools ### Vite The [official Svelte plugin for Vite][vite-plugin-svelte] has HMR support. ### Webpack The [official loader for Webpack][svelte-loader] 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][svelte-native-template] already includes HMR support. ## License [ISC](LICENSE) [vite-plugin-svelte]: https://www.npmjs.com/package/@sveltejs/vite-plugin-svelte [svelte-loader]: https://github.com/sveltejs/svelte-loader [rollup-plugin-hot]: https://github.com/rixo/rollup-plugin-hot [rollup-plugin-svelte-hot]: https://github.com/rixo/rollup-plugin-svelte-hot [rollup-plugin-svelte]: https://github.com/rollup/rollup-plugin-svelte [svelte-template-hot]: https://github.com/rixo/svelte-template-hot [svelte-template]: https://github.com/sveltejs/template [svelte-native-template]: https://github.com/halfnelson/svelte-native-template [svelte-loader-hot]: https://github.com/rixo/svelte-loader-hot [svelte-template-webpack-hot]: https://github.com/rixo/svelte-template-webpack-hot

c	File Name	Size	files	T	Date
zip	lib/	16187	2	---	2025-04-22 22:59:17
zip	runtime/	44397	9	---	2025-04-22 22:59:17
-	LICENSE	759		%	2025-04-22 22:59:17
-	README.md	12617		md	2025-04-22 22:59:17
-	index.js	350		js	2025-04-22 22:59:17
-	package.json	1107		json	2025-04-22 22:59:17

🌲 / websites html fedi campfire node_modules svelte-hmr

control-panel