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