Use hmr-keep directive instead of store

packages/create-app/template-svelte-ts/README.md

@@ -36,6 +36,11 @@ Other templates indirectly recommend extensions via the README, but this file al
 
 While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
 
-**Why use an external store, instead of just using local state?**
+**What's the @hmr:keep comment?**
 
-This allows us to take full advantage of HMR. While `vite-plugin-svelte` does support an option to enable local state saving, it is not recommended, as it is an inherently difficult problem to solve without external stores. Changes to the local state definition can make it unclear what the intended HMR behavior is.
+This comment directive tells `svelte-hmr` to preserve the state of that specific variable even when `Counter.svelte` is updated. Other directives include:
+
+- `@hmr:keep-all` retains all local state for the component
+- `@hmr:reset` resets all local state for the component
+
+Note that HMR state preservation comes with a number of gotchas! You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).

packages/create-app/template-svelte-ts/src/App.svelte

@@ -7,7 +7,7 @@
   <img src={logo} alt="Svelte Logo" />
   <h1>Hello Typescript!</h1>
 
-  <Counter id="0" />
+  <Counter />
 
   <p>
     Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte

packages/create-app/template-svelte-ts/src/lib/Counter.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { getStore } from './hmr-stores'
-  export let id: string
+  // tell svelte-hmr to preserve this variable
+  // across HMR
 
-  const count = getStore(id, 0)
+  // @hmr:keep
+  let count: number = 0
   const increment = () => {
-    $count += 1
+    count += 1
   }
 </script>
 
-<button {id} on:click={increment}>
-  Clicks: {$count}
+<button on:click={increment}>
+  Clicks: {count}
 </button>
 
 <style>

packages/create-app/template-svelte/README.md

@@ -36,6 +36,11 @@ Other templates indirectly recommend extensions via the README, but this file al
 
 It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.
 
-**Why use an external store, instead of just using local state?**
+**What's the @hmr:keep comment?**
 
-This allows us to take full advantage of HMR. While `vite-plugin-svelte` does support an option to enable local state saving, it is not recommended, as it is an inherently difficult problem to solve without external stores. Changes to the local state definition can make it unclear what the intended HMR behavior is.
+This comment directive tells `svelte-hmr` to preserve the state of that specific variable even when `Counter.svelte` is updated. Other directives include:
+
+- `@hmr:keep-all` retains all local state for the component
+- `@hmr:reset` resets all local state for the component
+
+Note that HMR state preservation comes with a number of gotchas! You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).

packages/create-app/template-svelte/src/App.svelte

@@ -7,7 +7,7 @@
   <img src={logo} alt="Svelte Logo" />
   <h1>Hello world!</h1>
 
-  <Counter id="0" />
+  <Counter />
 
   <p>
     Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte

packages/create-app/template-svelte/src/lib/Counter.svelte

@@ -1,16 +1,16 @@
 <script>
-  import { getStore } from './hmr-stores'
-  /** @type { string } */
-  export let id
+  // tell svelte-hmr to preserve this variable
+  // across HMR
 
-  const count = getStore(id, 0)
+  // @hmr:keep
+  let count = 0
   const increment = () => {
-    $count += 1
+    count += 1
   }
 </script>
 
-<button {id} on:click={increment}>
-  Clicks: {$count}
+<button on:click={increment}>
+  Clicks: {count}
 </button>
 
 <style>