Skip to content

Commit

Permalink
Fix hotOptions documentation in readme (#162)
Browse files Browse the repository at this point in the history
  • Loading branch information
non25 committed Jan 17, 2021
1 parent 5dcecb0 commit f9bff07
Showing 1 changed file with 14 additions and 10 deletions.
24 changes: 14 additions & 10 deletions README.md
Expand Up @@ -64,9 +64,9 @@ If your Svelte components contain `<style>` tags, by default the compiler will a
A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to the mix to output the css to a separate file.

```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';
...
module: {
rules: [
Expand Down Expand Up @@ -191,6 +191,11 @@ This loader supports component-level HMR via the community supported [svelte-hmr
Configure inside your `webpack.config.js`:

```javascript
// It is recommended to adjust svelte options dynamically, by using
// environment variables
const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = {
...
module: {
Expand All @@ -204,20 +209,19 @@ module.exports = {
options: {
compilerOptions: {
// NOTE Svelte's dev mode MUST be enabled for HMR to work
// -- in a real config, you'd probably set it to false for prod build,
// based on a env variable or so
dev: true,
dev: !prod, // Default: false
},

// NOTE emitCss: true is currently not supported with HMR
// Enable it for production to output separate css file
emitCss: false,
emitCss: prod, // Default: false
// Enable HMR only for dev mode
hotReload: true, // Default: false
// Extra HMR options
hotReload: !prod, // Default: false
// Extra HMR options, the defaults are completely fine
// You can safely omit hotOptions altogether
hotOptions: {
// Prevent preserving local component state
noPreserveState: false,
preserveLocalState: false,

// If this string appears anywhere in your component's code, then local
// state won't be preserved, even when noPreserveState is false
Expand Down

0 comments on commit f9bff07

Please sign in to comment.