Adding Solid to with-nanostores example (#2079)

examples/with-nanostores/package.json

@@ -10,9 +10,10 @@
   },
   "dependencies": {
     "@nanostores/preact": "^0.1.2",
-    "@nanostores/react": "^0.1.2",
+    "@nanostores/react": "^0.1.5",
     "@nanostores/vue": "^0.4.1",
-    "nanostores": "^0.5.6"
+    "nanostores": "^0.5.7",
+    "solid-nanostores": "0.0.6"
   },
   "devDependencies": {
     "@astrojs/renderer-solid": "^0.2.1",

examples/with-nanostores/src/components/AdminsPreact.jsx

@@ -12,16 +12,17 @@ const AdminsPreact = () => {
     <>
       <h1>Preact</h1>
       <ul>
-        {list.map((user) => (
-          <li key={user.name}>{JSON.stringify(user, null, 2)}</li>
+        {list.map((admin) => (
+          <li key={admin.id}>{JSON.stringify(admin, null, 2)}</li>
         ))}
       </ul>
       <div>
         <h3>Counter</h3>
-        <p>{count}</p>
+        <p>{count.value}</p>
         <button onClick={decreaseCounter}>-1</button>
         <button onClick={increaseCounter}>+1</button>
       </div>
+      <br />
     </>
   );
 };

examples/with-nanostores/src/components/AdminsReact.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useStore } from '@nanostores/react';
 
 import { admins } from '../store/admins.js';
@@ -7,17 +7,18 @@ import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
 const AdminsReact = () => {
   const list = useStore(admins);
   const count = useStore(counter);
+  
   return (
     <>
       <h1>React</h1>
       <ul>
-        {list.map((user) => (
-          <li key={user.name}>{JSON.stringify(user, null, 2)}</li>
+        {list.map((admin) => (
+          <li key={admin.id}>{JSON.stringify(admin, null, 2)}</li>
         ))}
       </ul>
       <div>
         <h3>Counter</h3>
-        <p>{count}</p>
+        <p>{count.value}</p>
         <button onClick={decreaseCounter}>-1</button>
         <button onClick={increaseCounter}>+1</button>
       </div>

examples/with-nanostores/src/components/AdminsSolid.jsx

@@ -0,0 +1,30 @@
+import { createSignal } from 'solid-js';
+import { useStore } from 'solid-nanostores';
+
+import { admins } from '../store/admins.js';
+import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
+
+const AdminsSolid = () => {
+  const list = useStore(admins);
+  const count = useStore(counter);
+
+  return (
+    <>
+      <h1>Solid</h1>
+      <ul>
+        {list.map((admin) => (
+          <li key={admin.id}>{JSON.stringify(admin, null, 2)}</li>
+        ))}
+      </ul>
+      <div>
+        <h3>Counter</h3>
+        <p>{count.value}</p>
+        <button onClick={decreaseCounter}>-1</button>
+        <button onClick={increaseCounter}>+1</button>
+      </div>
+      <br />
+    </>
+  );
+}
+
+export default AdminsSolid;

examples/with-nanostores/src/components/AdminsSvelte.svelte

@@ -1,19 +1,17 @@
 <script>
-  import { users } from '../store/users.js';
+  import { admins } from '../store/admins.js';
   import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
-
-  const list = users.get().filter((user) => user.isAdmin);
 </script>
 
 <h1>Svelte</h1>
 <ul>
-  {#each list as user}
-    <li>{JSON.stringify(user, null, 2)}</li>
+  {#each $admins as admin}
+    <li>{JSON.stringify(admin, null, 2)}</li>
   {/each}
 </ul>
 <div>
   <h3>Counter</h3>
-  <p>{$counter}</p>
+  <p>{$counter.value}</p>
   <button on:click={decreaseCounter}>-1</button>
   <button on:click={increaseCounter}>+1</button>
 </div>

examples/with-nanostores/src/components/AdminsVue.vue

@@ -2,13 +2,13 @@
   <div>
     <h1>Vue</h1>
     <ul>
-      <li v-for="user in list" :key="user.name">
-        {{ JSON.stringify(user, null, 2) }}
+      <li v-for="admin in list" :key="admin.id">
+        {{ JSON.stringify(admin, null, 2) }}
       </li>
     </ul>
     <div>
       <h3>Counter</h3>
-      <p>{{ count }}</p>
+      <p>{{ count.value }}</p>
       <button @click="decreaseCounter">-1</button>
       <button @click="increaseCounter">+1</button>
     </div>
@@ -26,6 +26,7 @@ export default {
   setup() {
     const list = useStore(admins);
     const count = useStore(counter);
+    
     return { list, count, increaseCounter, decreaseCounter };
   },
 };

examples/with-nanostores/src/pages/index.astro

@@ -4,6 +4,7 @@ import AdminsReact from '../components/AdminsReact.jsx';
 import AdminsSvelte from '../components/AdminsSvelte.svelte';
 import AdminsVue from '../components/AdminsVue.vue';
 import AdminsPreact from '../components/AdminsPreact.jsx';
+import AdminsSolid from '../components/AdminsSolid.jsx';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
@@ -41,6 +42,7 @@ import AdminsPreact from '../components/AdminsPreact.jsx';
         <AdminsSvelte client:load />
         <AdminsVue client:load />
         <AdminsPreact client:load />
+        <AdminsSolid client:load />
     </main>
 </body>
 </html>

examples/with-nanostores/src/store/counter.js

@@ -1,13 +1,15 @@
 import { atom } from 'nanostores';
 
-const counter = atom(0);
+const initialValue = { value: 0 };
+
+const counter = atom(initialValue);
 
 function increaseCounter() {
-  counter.set(counter.get() + 1);
+  counter.set({ value: counter.get().value + 1 });
 }
 
 function decreaseCounter() {
-  counter.set(counter.get() - 1);
+  counter.set({ value: counter.get().value - 1 });
 }
 
 export { counter, increaseCounter, decreaseCounter };

examples/with-nanostores/src/store/users.js

@@ -1,22 +1,27 @@
 import { atom } from 'nanostores';
 
-const users = atom([
+const initialValue = [
   {
-    name: 'Imanadmin',
-    age: 2,
+    id: 1,
+    name: 'User Admin',
+    age: 28,
     isAdmin: true,
   },
   {
-    name: 'Imnotadmin',
+    id: 2,
+    name: 'NOT Admin',
     age: 35,
     isAdmin: false,
   },
   {
-    name: 'Wowsomuchadmin',
-    age: 3634,
+    id: 3,
+    name: 'Another Admin',
+    age: 46,
     isAdmin: true,
   },
-]);
+]
+
+const users = atom(initialValue);
 
 const addUser = function addUser(user) {
   users.set([...users.get(), user]);