diff options
| author |  Matthew Phillips <matthew@skypack.dev>
| 2022-09-21 15:21:21 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-09-21 15:21:21 -0400 |
| commit | 5e46be54683592773e6dfc2d33825493886114b0 (patch) | |
| tree | 6a9ed635e986ae12037f13c47afe47c260f3bdf2 /examples/framework-preact/src | |
| parent | baae1b3fd10cf0a74e880c0e0552ba8d58f24453 (diff) | |
| download | astro-5e46be54683592773e6dfc2d33825493886114b0.tar.gz astro-5e46be54683592773e6dfc2d33825493886114b0.tar.zst astro-5e46be54683592773e6dfc2d33825493886114b0.zip | |
Support shared signals in Preact islands (#4763)
* Support signals in Preact islands
* Add a changeset
* Only add signals if we need them
* Refactor signal logic into its own module
* Keep track of the signals used
Diffstat (limited to 'examples/framework-preact/src')
| -rw-r--r-- | examples/framework-preact/src/components/Counter.tsx | 8 | ||||
| -rw-r--r-- | examples/framework-preact/src/pages/index.astro | 12 |
2 files changed, 13 insertions, 7 deletions
diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx index 61a9f9d5a..c2b065e3c 100644 --- a/examples/framework-preact/src/components/Counter.tsx +++ b/examples/framework-preact/src/components/Counter.tsx @@ -1,11 +1,9 @@ import { h, Fragment } from 'preact'; -import { useState } from 'preact/hooks'; import './Counter.css'; -export default function Counter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); +export default function Counter({ children, count }) { + const add = () => count.value++ + const subtract = () => count.value--; return ( <> diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro index a6565f6c1..b37295d7b 100644 --- a/examples/framework-preact/src/pages/index.astro +++ b/examples/framework-preact/src/pages/index.astro @@ -2,8 +2,12 @@ // Component Imports import Counter from '../components/Counter'; +import { signal } from '@preact/signals'; + // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ + +const count = signal(0); --- <html lang="en"> @@ -25,8 +29,12 @@ import Counter from '../components/Counter'; </head> <body> <main> - <Counter client:visible> - <h1>Hello, Preact!</h1> + <Counter count={count} client:visible> + <h1>Hello, Preact 1!</h1> + </Counter> + + <Counter count={count} client:visible> + <h1>Hello, Preact 2!</h1> </Counter> </main> </body> |