Merge README.md from rixo/svelte-loader#svelte-hmr

Author: non25

README.md

@@ -145,9 +145,12 @@ This should create an additional `styles.css.map` file.
 
 ### Hot Reload
 
-Hot reloading is turned off by default, you can turn it on using the `hotReload` option as shown below:
+This loader supports component-level HMR via the community supported [svelte-hmr](https://github.com/rixo/svelte-hmr) package. This package serves as a testbed and early access for Svelte HMR, while we figure out how to best include HMR support in the compiler itself (which is tricky to do without unfairly favoring any particular dev tooling). Feedback, suggestion, or help to move HMR forward is welcomed at [svelte-hmr](https://github.com/rixo/svelte-hmr/issues) (for now).
+
+Configure inside your `webpack.config.js`:
 
 ```javascript
+module.exports = {
   ...
   module: {
     rules: [
@@ -158,68 +161,73 @@ Hot reloading is turned off by default, you can turn it on using the `hotReload`
         use: {
           loader: 'svelte-loader',
           options: {
-            hotReload: true
+            // 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,
+
+            // NOTE emitCss: true is currently not supported with HMR
+            emitCss: false,
+            // Enable HMR
+            hotReload: true, // Default: false
+            // Extra HMR options
+            hotOptions: {
+              // Prevent preserving local component state
+              noPreserveState: false,
+
+              // If this string appears anywhere in your component's code, then local
+              // state won't be preserved, even when noPreserveState is false
+              noPreserveStateKey: '@!hmr',
+
+              // Prevent doing a full reload on next HMR update after fatal error
+              noReload: false,
+
+              // Try to recover after runtime errors in component init
+              optimistic: false,
+
+              // --- Advanced ---
+
+              // Prevent adding an HMR accept handler to components with
+              // accessors option to true, or to components with named exports
+              // (from <script context="module">). This have the effect of
+              // recreating the consumer of those components, instead of the
+              // component themselves, on HMR updates. This might be needed to
+              // reflect changes to accessors / named exports in the parents,
+              // depending on how you use them.
+              acceptAccessors: true,
+              acceptNamedExports: true,
+            }
           }
         }
       }
       ...
     ]
-  }
-  ...
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    ...
+  ]
+}
 ```
 
-#### Hot reload rules and caveats:
-
- - `_rerender` and `_register` are reserved method names, please don't use them in `methods:{...}`
- - Turning `dev` mode on (`dev:true`) is **not** necessary.
- - Modifying the HTML (template) part of your component will replace and re-render the changes in place. Current local state of the component will also be preserved (this can be turned off per component see [Stop preserving state](#stop-preserving-state)).
- - When modifying the `<script>` part of your component, instances will be replaced and re-rendered in place too.
-  However if your component has lifecycle methods that produce global side-effects, you might need to reload the whole page.
- - If you are using `svelte/store`, a full reload is required if you modify `store` properties
-
+You also need to add the [HotModuleReplacementPlugin](https://webpack.js.org/plugins/hot-module-replacement-plugin/). There are multiple ways to achieve this.
 
-Components will **not** be hot reloaded in the following situations:
- 1. `process.env.NODE_ENV === 'production'`
- 2. Webpack is minifying code
- 3. Webpack's `target` is `node` (i.e SSR components)
- 4. `generate` option has a value of `ssr`
+If you're using webpack-dev-server, you can just pass it the [`hot` option](https://webpack.js.org/configuration/dev-server/#devserverhot) to add the plugin automatically.
 
-#### Stop preserving state
+Otherwise, you can add it to your webpack config directly:
 
-Sometimes it might be necessary for some components to avoid state preservation on hot reload.
-
-This can be configured on a per-component basis by adding a property `noPreserveState = true` to the component's constructor using the `setup()` method. For example:
 ```js
-export default {
-  setup(comp){
-    comp.noPreserveState = true;
-  },
-  data(){return {...}},
-  oncreate(){...}
-}
-```
+const webpack = require('webpack');
 
-Or, on a global basis by adding `{noPreserveState: true}` to `hotOptions`. For example:
-```js
-{
-    test: /\.(html|svelte)$/,
-    exclude: /node_modules/,
-    use: [
-      {
-        loader: 'svelte-loader',
-        options: {
-          hotReload: true,
-          hotOptions: {
-            noPreserveState: true
-          }
-        }
-      }
-    ]
-  }
+module.exports = {
+  ...
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    ...
+  ]
+}
 ```
 
-**Please Note:** If you are using `svelte/store`, `noPreserveState` has no effect on `store` properties. Neither locally, nor globally.
-
 #### External Dependencies
 
 If you rely on any external dependencies (files required in a preprocessor for example) you might want to watch these files for changes and re-run svelte compile.