Patch: Example Nanostores Update (#1955)

* Mention astro.new in docs (#1935)

* Fix - Deprecated nanostores functions

createStore and getValue is deprecated in nanostores,
changed it to atom and atom.get()

* fix: change code to nanostores non-deprecated functions

Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com>

7 files changed, 42 insertions, 46 deletions

diff --git a/examples/with-nanostores/src/components/AdminsPreact.jsx b/examples/with-nanostores/src/components/AdminsPreact.jsx
index 93fecd878..9869bd955 100644
--- a/examples/with-nanostores/src/components/AdminsPreact.jsx
+++ b/examples/with-nanostores/src/components/AdminsPreact.jsx
@@ -1,5 +1,5 @@
 import { h, Fragment } from 'preact';
-import { useStore } from 'nanostores/preact';
+import { useStore } from '@nanostores/preact';
 
 import { admins } from '../store/admins.js';
 import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
diff --git a/examples/with-nanostores/src/components/AdminsReact.jsx b/examples/with-nanostores/src/components/AdminsReact.jsx
index a03df1f47..670ea1b1d 100644
--- a/examples/with-nanostores/src/components/AdminsReact.jsx
+++ b/examples/with-nanostores/src/components/AdminsReact.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useStore } from 'nanostores/react';
+import { useStore } from '@nanostores/react';
 
 import { admins } from '../store/admins.js';
 import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
diff --git a/examples/with-nanostores/src/components/AdminsSvelte.svelte b/examples/with-nanostores/src/components/AdminsSvelte.svelte
index a98444b4f..c6125b53e 100644
--- a/examples/with-nanostores/src/components/AdminsSvelte.svelte
+++ b/examples/with-nanostores/src/components/AdminsSvelte.svelte
@@ -1,10 +1,8 @@
 <script>
-  import { getValue } from 'nanostores'
-
   import { users } from '../store/users.js';
   import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
 
-  const list = getValue(users).filter(user => user.isAdmin);
+  const list = users.get().filter((user) => user.isAdmin);
 </script>
 
 <h1>Svelte</h1>
diff --git a/examples/with-nanostores/src/components/AdminsVue.vue b/examples/with-nanostores/src/components/AdminsVue.vue
index 1846c4d21..dbf50cca9 100644
--- a/examples/with-nanostores/src/components/AdminsVue.vue
+++ b/examples/with-nanostores/src/components/AdminsVue.vue
@@ -1,21 +1,23 @@
 <template>
-  <h1>Vue</h1>
-  <ul>
-    <li v-for="user in list" :key="user.name">
-      {{ JSON.stringify(user, null, 2) }}
-    </li>
-  </ul>
   <div>
-    <h3>Counter</h3>
-    <p>{{ count }}</p>
-    <button @click="decreaseCounter">-1</button>
-    <button @click="increaseCounter">+1</button>
+    <h1>Vue</h1>
+    <ul>
+      <li v-for="user in list" :key="user.name">
+        {{ JSON.stringify(user, null, 2) }}
+      </li>
+    </ul>
+    <div>
+      <h3>Counter</h3>
+      <p>{{ count }}</p>
+      <button @click="decreaseCounter">-1</button>
+      <button @click="increaseCounter">+1</button>
+    </div>
+    <br />
   </div>
-  <br />
 </template>
 
 <script>
-import { useStore } from 'nanostores/vue';
+import { useStore } from '@nanostores/vue';
 
 import { admins } from '../store/admins.js';
 import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
diff --git a/examples/with-nanostores/src/store/admins.js b/examples/with-nanostores/src/store/admins.js
index 91215470b..8a4a6f4d2 100644
--- a/examples/with-nanostores/src/store/admins.js
+++ b/examples/with-nanostores/src/store/admins.js
@@ -1,7 +1,7 @@
-import { createDerived } from 'nanostores';
+import { computed } from 'nanostores';
 
 import { users } from './users.js';
 
-const admins = createDerived(users, (list) => list.filter((user) => user.isAdmin));
+const admins = computed(users, (list) => list.filter((user) => user.isAdmin));
 
 export { admins };
diff --git a/examples/with-nanostores/src/store/counter.js b/examples/with-nanostores/src/store/counter.js
index a57d8e2c3..993f1cc3b 100644
--- a/examples/with-nanostores/src/store/counter.js
+++ b/examples/with-nanostores/src/store/counter.js
@@ -1,15 +1,13 @@
-import { createStore, getValue } from 'nanostores';
+import { atom } from 'nanostores';
 
-const counter = createStore(() => {
-  counter.set(0);
-});
+const counter = atom(0);
 
 function increaseCounter() {
-  counter.set(getValue(counter) + 1);
+  counter.set(counter.get() + 1);
 }
 
 function decreaseCounter() {
-  counter.set(getValue(counter) - 1);
+  counter.set(counter.get() - 1);
 }
 
 export { counter, increaseCounter, decreaseCounter };
diff --git a/examples/with-nanostores/src/store/users.js b/examples/with-nanostores/src/store/users.js
index 719f75cd1..db1cd662b 100644
--- a/examples/with-nanostores/src/store/users.js
+++ b/examples/with-nanostores/src/store/users.js
@@ -1,27 +1,25 @@
-import { createStore, getValue } from 'nanostores';
+import { atom } from 'nanostores';
 
-const users = createStore(() => {
-  users.set([
-    {
-      name: 'Imanadmin',
-      age: 2,
-      isAdmin: true,
-    },
-    {
-      name: 'Imnotadmin',
-      age: 35,
-      isAdmin: false,
-    },
-    {
-      name: 'Wowsomuchadmin',
-      age: 3634,
-      isAdmin: true,
-    },
-  ]);
-});
+const users = atom([
+  {
+    name: 'Imanadmin',
+    age: 2,
+    isAdmin: true,
+  },
+  {
+    name: 'Imnotadmin',
+    age: 35,
+    isAdmin: false,
+  },
+  {
+    name: 'Wowsomuchadmin',
+    age: 3634,
+    isAdmin: true,
+  },
+]);
 
 const addUser = function addUser(user) {
-  users.set([...getValue(users), user]);
+  users.set([...users.get(), user]);
 };
 
 export { users, addUser };