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 = () => { <>

Preact

Counter

-

{count}

+

{count.value}

+
); }; 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 ( <>

React

Counter

-

{count}

+

{count.value}

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 ( + <> +

Solid

+ +
+

Counter

+

{count.value}

+ + +
+
+ + ); +} + +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 @@

Svelte

Counter

-

{$counter}

+

{$counter.value}

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 @@

Vue

Counter

-

{{ count }}

+

{{ count.value }}

@@ -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'; + 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]);