From 1ec3f28b638d1d505e51ce48a1b4abe99df5d73a Mon Sep 17 00:00:00 2001
From: Withered Flowers <withered-flowers@users.noreply.github.com>
Date: Mon, 22 Nov 2021 00:31:42 +0700
Subject: [PATCH] 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             |  4 +-
 examples/with-nanostores/package.json         |  5 ++-
 .../src/components/AdminsPreact.jsx           |  2 +-
 .../src/components/AdminsReact.jsx            |  2 +-
 .../src/components/AdminsSvelte.svelte        |  4 +-
 .../src/components/AdminsVue.vue              | 26 ++++++------
 examples/with-nanostores/src/store/admins.js  |  4 +-
 examples/with-nanostores/src/store/counter.js | 10 ++---
 examples/with-nanostores/src/store/users.js   | 40 +++++++++----------
 9 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/docs/src/pages/getting-started.md b/docs/src/pages/getting-started.md
index 861093d3f..06f8e0937 100644
--- a/docs/src/pages/getting-started.md
+++ b/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
 
diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json
index 5a02f61f4..aa64e3044 100644
--- a/examples/with-nanostores/package.json
+++ b/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",
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 };