From c43bd536f3c0beccb1e736969ae0589e21dcb9d9 Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sun, 17 Jan 2021 08:31:34 +0200
Subject: [PATCH 1/3] Fix hotOptions to match reality

https://github.com/rixo/svelte-hmr/releases/tag/v0.12.0-0
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 83403f9e..08c2e5b8 100644
--- a/README.md
+++ b/README.md
@@ -217,7 +217,7 @@ module.exports = {
             // Extra HMR options
             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

From d51187fac40697810445dec1cc93652b7fad46f4 Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sun, 17 Jan 2021 08:36:59 +0200
Subject: [PATCH 2/3] Add note about hotOptions defaults

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 08c2e5b8..7ded6b82 100644
--- a/README.md
+++ b/README.md
@@ -214,7 +214,8 @@ module.exports = {
             emitCss: false,
             // Enable HMR only for dev mode
             hotReload: true, // Default: false
-            // Extra HMR options
+            // Extra HMR options, the defaults are completely fine
+            // You can safely omit hotOptions altogether
             hotOptions: {
               // Prevent preserving local component state
               preserveLocalState: false,

From 9c230562ec3aa6c4be880ad0cf9051a3c57bc2db Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sun, 17 Jan 2021 08:40:04 +0200
Subject: [PATCH 3/3] Adjust configs to match real world scenario

---
 README.md | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 7ded6b82..0816b0a0 100644
--- a/README.md
+++ b/README.md
@@ -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: [
@@ -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: {
@@ -204,16 +209,14 @@ 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
+            hotReload: !prod, // Default: false
             // Extra HMR options, the defaults are completely fine
             // You can safely omit hotOptions altogether
             hotOptions: {