diff options
Diffstat (limited to '')
9 files changed, 69 insertions, 28 deletions
diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json index 2806735d1..17f56716b 100644 --- a/examples/with-nanostores/package.json +++ b/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", 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 }; }, }; diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro index 264aa4389..1a579f0f8 100644 --- a/examples/with-nanostores/src/pages/index.astro +++ b/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> diff --git a/examples/with-nanostores/src/store/counter.js b/examples/with-nanostores/src/store/counter.js index 993f1cc3b..42e82fff2 100644 --- a/examples/with-nanostores/src/store/counter.js +++ b/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 }; diff --git a/examples/with-nanostores/src/store/users.js b/examples/with-nanostores/src/store/users.js index db1cd662b..1bed88daf 100644 --- a/examples/with-nanostores/src/store/users.js +++ b/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]); |