diff options
Diffstat (limited to 'examples/framework-multiple/src')
5 files changed, 40 insertions, 3 deletions
diff --git a/examples/framework-multiple/src/components/PreactCounter.tsx b/examples/framework-multiple/src/components/PreactCounter.tsx index be4ddb6ce..bfead53da 100644 --- a/examples/framework-multiple/src/components/PreactCounter.tsx +++ b/examples/framework-multiple/src/components/PreactCounter.tsx @@ -1,4 +1,3 @@ -import { h, Fragment } from 'preact'; import { useState } from 'preact/hooks'; /** a counter written in Preact */ diff --git a/examples/framework-multiple/src/components/PreactSFC.tsx b/examples/framework-multiple/src/components/PreactSFC.tsx new file mode 100644 index 000000000..a92e258f8 --- /dev/null +++ b/examples/framework-multiple/src/components/PreactSFC.tsx @@ -0,0 +1,12 @@ +/** @jsxImportSource preact */ + +/** a counter written in Preact */ +export default function PreactSFC({ children }) { + return ( + <> + <div className="counter"> + Hello from Preact! + </div> + </> + ); +} diff --git a/examples/framework-multiple/src/components/ReactCounter.jsx b/examples/framework-multiple/src/components/ReactCounter.jsx index 06d8f2513..4b7c4bfa3 100644 --- a/examples/framework-multiple/src/components/ReactCounter.jsx +++ b/examples/framework-multiple/src/components/ReactCounter.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; /** a counter written in React */ export function Counter({ children }) { diff --git a/examples/framework-multiple/src/components/SolidCounter.tsx b/examples/framework-multiple/src/components/SolidCounter.tsx new file mode 100644 index 000000000..0ec274bb4 --- /dev/null +++ b/examples/framework-multiple/src/components/SolidCounter.tsx @@ -0,0 +1,21 @@ +import { createSignal } from "solid-js"; + +/** a counter written with Solid */ +export default function SolidCounter({ children }) { + const [count, setCount] = createSignal(0); + const add = () => setCount(count() + 1); + const subtract = () => setCount(count() - 1); + + return ( + <> + <div id="solid" class="counter"> + <button onClick={subtract}>-</button> + <pre>{count()}</pre> + <button onClick={add}>+</button> + </div> + <div class="children"> + {children} + </div> + </> + ); +} diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro index c49744b18..1128029c2 100644 --- a/examples/framework-multiple/src/pages/index.astro +++ b/examples/framework-multiple/src/pages/index.astro @@ -3,10 +3,11 @@ import { A, B as Renamed } from '../components'; import * as react from '../components/ReactCounter.jsx'; import { PreactCounter } from '../components/PreactCounter.tsx'; +import PreactSFC from '../components/PreactSFC.tsx'; +import SolidCounter from '../components/SolidCounter.tsx'; import VueCounter from '../components/VueCounter.vue'; import SvelteCounter from '../components/SvelteCounter.svelte'; - // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- @@ -45,6 +46,10 @@ import SvelteCounter from '../components/SvelteCounter.svelte'; <h1>Hello Preact!</h1> </PreactCounter> + <SolidCounter client:visible> + <h1>Hello Solid!</h1> + </SolidCounter> + <VueCounter client:visible> <h1>Hello Vue!</h1> </VueCounter> |