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
- {list.map((user) => (
- - {JSON.stringify(user, null, 2)}
+ {list.map((admin) => (
+ - {JSON.stringify(admin, null, 2)}
))}
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
- {list.map((user) => (
- - {JSON.stringify(user, null, 2)}
+ {list.map((admin) => (
+ - {JSON.stringify(admin, null, 2)}
))}
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
+
+ {list.map((admin) => (
+ - {JSON.stringify(admin, null, 2)}
+ ))}
+
+
+
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
- {#each list as user}
- - {JSON.stringify(user, null, 2)}
+ {#each $admins as admin}
+ - {JSON.stringify(admin, null, 2)}
{/each}
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
- -
- {{ JSON.stringify(user, null, 2) }}
+
-
+ {{ JSON.stringify(admin, null, 2) }}
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';
+