svelte-hmr provides the core logic and utilities for implementing Hot Module Replacement (HMR) in Svelte 3 and 4 applications. It is not an end-user bundler plugin itself, but rather a foundational package leveraged by bundler-specific plugins (e.g., for Rollup, Webpack, Vite) to enable seamless development experiences. The package is currently stable at version `0.16.0` and receives updates as Svelte itself evolves or HMR patterns improve, typically releasing patch and minor versions on an as-needed basis rather than a strict schedule. Key differentiators include its bundler-agnostic design, robust state preservation mechanisms (both component and local variable state), and intelligent CSS injection capabilities, offering a consistent HMR experience across different build tools without needing full page reloads.
npm install svelte-hmrVerified import paths — ran on the pinned version, not inferred.
This Svelte component demonstrates state preservation using `@hmr:keep-all` comments, a feature provided by `svelte-hmr` and enabled via a bundler plugin for a seamless HMR development experience.
Migrate from `noPreserveState` to `preserveLocalState` in your bundler plugin's HMR options, or use `@hmr:reset` in your Svelte components if you explicitly want to disable state preservation.
If you relied on the previous behavior of attempting to render the next component version after a crash, explicitly set `optimistic: true` in your bundler plugin's HMR options (e.g., `hmrOptions: { optimistic: true }`). Otherwise, ensure your code handles runtime errors gracefully.Instead of direct imports, configure HMR through your chosen bundler's Svelte plugin. Refer to your bundler plugin's documentation for enabling and configuring Svelte HMR.
Ensure HMR directives are placed at the beginning of the `<script>` tag (e.g., `// @hmr:keep-all`) or as the first line in your component's markup (e.g., `<!-- @hmr:keep-all -->`). Check the `svelte-hmr` documentation or your bundler plugin's guide for exact placement rules.
Upgrade `svelte-hmr` to `0.15.2` or higher to ensure compatibility and correct functioning with Svelte 4 applications.
`svelte-hmr` is an underlying dependency for bundler plugins that enable HMR for Svelte. Its features are controlled via your bundler plugin's configuration (e.g., `svelte({ hot: true })` in Vite) or specific HMR comments within Svelte components. Direct imports are generally not required for application developers.Ensure your bundler's Svelte plugin has HMR explicitly enabled (e.g., `hot: true` or similar option). Check the browser console for JavaScript runtime errors that might cause `svelte-hmr` to trigger a full reload. Consider setting `hmrOptions: { optimistic: true }` in your bundler plugin config to allow `svelte-hmr` to attempt recovery from some errors, though this might mask underlying issues.Enable `preserveLocalState: true` in your bundler plugin's HMR options (e.g., `hmrOptions: { preserveLocalState: true }`). Alternatively, use HMR directives within your Svelte components like `<!-- @hmr:keep-all -->` at the top of the component file, or `let myVar = 0; // @hmr:keep` for specific variables.