From 23b7756d6b7b9cc094b97442123fffa08c6420e8 Mon Sep 17 00:00:00 2001
From: Agustin Mulet <31162600+agustinmulet@users.noreply.github.com>
Date: Mon, 13 Dec 2021 15:37:06 -0300
Subject: Adding Solid to with-nanostores example (#2079)

---
 .../src/components/AdminsPreact.jsx                |  7 ++---
 .../with-nanostores/src/components/AdminsReact.jsx |  9 ++++---
 .../with-nanostores/src/components/AdminsSolid.jsx | 30 ++++++++++++++++++++++
 .../src/components/AdminsSvelte.svelte             | 10 +++-----
 .../with-nanostores/src/components/AdminsVue.vue   |  7 ++---
 5 files changed, 47 insertions(+), 16 deletions(-)
 create mode 100644 examples/with-nanostores/src/components/AdminsSolid.jsx

(limited to 'examples/with-nanostores/src/components')

diff --git a/examples/with-nanostores/src/components/AdminsPreact.jsx b/examples/with-nanostores/src/components/AdminsPreact.jsx
index 9869bd955..327d82846 100644
--- a/examples/with-nanostores/src/components/AdminsPreact.jsx
+++ b/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 />
     </>
   );
 };
diff --git a/examples/with-nanostores/src/components/AdminsReact.jsx b/examples/with-nanostores/src/components/AdminsReact.jsx
index 670ea1b1d..5168c6b45 100644
--- a/examples/with-nanostores/src/components/AdminsReact.jsx
+++ b/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>
diff --git a/examples/with-nanostores/src/components/AdminsSolid.jsx b/examples/with-nanostores/src/components/AdminsSolid.jsx
new file mode 100644
index 000000000..c5b234a40
--- /dev/null
+++ b/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;
diff --git a/examples/with-nanostores/src/components/AdminsSvelte.svelte b/examples/with-nanostores/src/components/AdminsSvelte.svelte
index c6125b53e..bae3fbef8 100644
--- a/examples/with-nanostores/src/components/AdminsSvelte.svelte
+++ b/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>
diff --git a/examples/with-nanostores/src/components/AdminsVue.vue b/examples/with-nanostores/src/components/AdminsVue.vue
index dbf50cca9..72f0c573d 100644
--- a/examples/with-nanostores/src/components/AdminsVue.vue
+++ b/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 };
   },
 };
-- 
cgit v1.2.3