diff options
Diffstat (limited to 'examples/framework-preact/src')
5 files changed, 87 insertions, 0 deletions
diff --git a/examples/framework-preact/src/components/Counter.css b/examples/framework-preact/src/components/Counter.css new file mode 100644 index 000000000..656b19d42 --- /dev/null +++ b/examples/framework-preact/src/components/Counter.css @@ -0,0 +1,7 @@ +.counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; +} diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx new file mode 100644 index 000000000..a63bf0cd7 --- /dev/null +++ b/examples/framework-preact/src/components/Counter.tsx @@ -0,0 +1,30 @@ +import type { ComponentChildren } from 'preact'; +import type { Signal } from '@preact/signals'; +import { lazy, Suspense } from 'preact/compat'; +import './Counter.css'; + +const Message = lazy(async () => import('./Message')); +const Fallback = () => <p>Loading...</p>; + +type Props = { + children: ComponentChildren; + count: Signal<number>; +}; + +export default function Counter({ children, count }: Props) { + const add = () => count.value++; + const subtract = () => count.value--; + + return ( + <> + <div class="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <Suspense fallback={Fallback}> + <Message>{children}</Message> + </Suspense> + </> + ); +} diff --git a/examples/framework-preact/src/components/Message.css b/examples/framework-preact/src/components/Message.css new file mode 100644 index 000000000..71ffc2c31 --- /dev/null +++ b/examples/framework-preact/src/components/Message.css @@ -0,0 +1,3 @@ +.message { + text-align: center; +} diff --git a/examples/framework-preact/src/components/Message.tsx b/examples/framework-preact/src/components/Message.tsx new file mode 100644 index 000000000..58b798c14 --- /dev/null +++ b/examples/framework-preact/src/components/Message.tsx @@ -0,0 +1,6 @@ +import type { ComponentChildren } from 'preact'; +import './Message.css'; + +export default function Message({ children }: { children: ComponentChildren }) { + return <div class="message">{children}</div>; +} diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro new file mode 100644 index 000000000..639fed70c --- /dev/null +++ b/examples/framework-preact/src/pages/index.astro @@ -0,0 +1,41 @@ +--- +// Component Imports +import Counter from '../components/Counter'; + +import { signal } from '@preact/signals'; + +// Full Astro Component Syntax: +// https://docs.astro.build/basics/astro-components/ + +const count = signal(0); +--- + +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <meta name="generator" content={Astro.generator} /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> + </head> + <body> + <main> + <Counter count={count} client:visible> + <h1>Hello, Preact 1!</h1> + </Counter> + + <Counter count={count} client:visible> + <h1>Hello, Preact 2!</h1> + </Counter> + </main> + </body> +</html> |