diff options
Diffstat (limited to 'examples/framework-multiple')
7 files changed, 47 insertions, 6 deletions
diff --git a/examples/framework-multiple/README.md b/examples/framework-multiple/README.md index 0556e54af..559e90bc9 100644 --- a/examples/framework-multiple/README.md +++ b/examples/framework-multiple/README.md @@ -7,5 +7,3 @@ npm init astro -- --template framework-multiple This example showcases Astro's built-in support for multiple frameworks ([React](https://reactjs.org), [Preact](https://preactjs.com), [Svelte](https://svelte.dev), and [Vue (`v3.x`)](https://v3.vuejs.org/)). No configuration is needed to enable these frameworks—just start writing components in `src/components`. - -> **Note**: If used, components _must_ include a JSX factory (ex. `import React from "react"`, `import { h } from "preact"`). Astro is unable to determine which framework is used without having the [JSX factory](https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript#what-is-a-jsx-factory) in scope. diff --git a/examples/framework-multiple/astro.config.mjs b/examples/framework-multiple/astro.config.mjs index ce25e5aff..88ceb4f4f 100644 --- a/examples/framework-multiple/astro.config.mjs +++ b/examples/framework-multiple/astro.config.mjs @@ -11,5 +11,11 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'], + renderers: [ + '@astrojs/renderer-preact', + '@astrojs/renderer-react', + '@astrojs/renderer-svelte', + '@astrojs/renderer-vue', + '@astrojs/renderer-solid', + ] }; 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> |