diff options
Diffstat (limited to 'examples/with-nanostores/src/components')
5 files changed, 47 insertions, 16 deletions
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 }; }, }; |