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>

docs/src/pages/getting-started.md

@@ -30,7 +30,9 @@ npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
 
 ### Online Playgrounds
 
-If you're interested in playing around with Astro in the browser, you can use an online code editor like Stackblitz, CodeSandbox, Gitpod, or GitHub Codespaces. Click the "Open in Stackblitz" link in any of the examples in our [examples library](https://github.com/snowpackjs/astro/tree/main/examples). Or, [click here](https://stackblitz.com/fork/astro) to start a new project in [Stackblitz](https://stackblitz.com/fork/astro).
+If you're interested in playing around with Astro in the browser, you can instantly spin up a new Astro project with our UI at [astro.new](https://astro.new/).
+
+You can try Astro in online code editors like Stackblitz, CodeSandbox, Gitpod, and GitHub Codespaces. Click the "Open in Stackblitz" link in any of the examples in our [examples library](https://github.com/snowpackjs/astro/tree/main/examples). Or, [click here](https://stackblitz.com/fork/astro) to start a new project in [Stackblitz](https://stackblitz.com/fork/astro).
 
 ## Learn Astro
 

examples/with-nanostores/package.json

@@ -9,7 +9,10 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "nanostores": "^0.3.3"
+    "@nanostores/preact": "^0.1.2",
+    "@nanostores/react": "^0.1.2",
+    "@nanostores/vue": "^0.4.1",
+    "nanostores": "^0.5.6"
   },
   "devDependencies": {
     "@astrojs/renderer-solid": "^0.2.0",

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';

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';

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>

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';

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 };

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 };

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 };