diff options
Diffstat (limited to 'examples/framework-multiple/src')
9 files changed, 108 insertions, 109 deletions
diff --git a/examples/framework-multiple/src/components/A.astro b/examples/framework-multiple/src/components/A.astro index 702a4be35..2b7bd482a 100644 --- a/examples/framework-multiple/src/components/A.astro +++ b/examples/framework-multiple/src/components/A.astro @@ -1,3 +1,3 @@ <div class="children"> - <h1>Hello Astro (A)</h1> + <h1>Hello Astro (A)</h1> </div> diff --git a/examples/framework-multiple/src/components/B.astro b/examples/framework-multiple/src/components/B.astro index 9022cb372..3640fe831 100644 --- a/examples/framework-multiple/src/components/B.astro +++ b/examples/framework-multiple/src/components/B.astro @@ -1,3 +1,3 @@ <div class="children"> - <h1>Hello Astro (B)</h1> + <h1>Hello Astro (B)</h1> </div> diff --git a/examples/framework-multiple/src/components/PreactCounter.tsx b/examples/framework-multiple/src/components/PreactCounter.tsx index 9c9bf73a1..261f275a1 100644 --- a/examples/framework-multiple/src/components/PreactCounter.tsx +++ b/examples/framework-multiple/src/components/PreactCounter.tsx @@ -2,18 +2,18 @@ import { useState } from 'preact/hooks'; /** a counter written in Preact */ export function PreactCounter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); - return ( - <> - <div class="counter"> - <button onClick={subtract}>-</button> - <pre>{count}</pre> - <button onClick={add}>+</button> - </div> - <div class="counter-message">{children}</div> - </> - ); + return ( + <> + <div class="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div class="counter-message">{children}</div> + </> + ); } diff --git a/examples/framework-multiple/src/components/PreactSFC.tsx b/examples/framework-multiple/src/components/PreactSFC.tsx index 3638caebd..60d0fe836 100644 --- a/examples/framework-multiple/src/components/PreactSFC.tsx +++ b/examples/framework-multiple/src/components/PreactSFC.tsx @@ -2,9 +2,9 @@ /** a counter written in Preact */ export default function PreactSFC({ children }) { - return ( - <> - <div className="counter">Hello from Preact!</div> - </> - ); + 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 eca3cd2f7..cdd42bee2 100644 --- a/examples/framework-multiple/src/components/ReactCounter.jsx +++ b/examples/framework-multiple/src/components/ReactCounter.jsx @@ -2,18 +2,18 @@ import { useState } from 'react'; /** a counter written in React */ export function Counter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); - return ( - <> - <div className="counter"> - <button onClick={subtract}>-</button> - <pre>{count}</pre> - <button onClick={add}>+</button> - </div> - <div className="counter-message">{children}</div> - </> - ); + return ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div className="counter-message">{children}</div> + </> + ); } diff --git a/examples/framework-multiple/src/components/SolidCounter.tsx b/examples/framework-multiple/src/components/SolidCounter.tsx index 63fe5cb11..b16a463d5 100644 --- a/examples/framework-multiple/src/components/SolidCounter.tsx +++ b/examples/framework-multiple/src/components/SolidCounter.tsx @@ -2,18 +2,18 @@ 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); + 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="counter-message">{children}</div> - </> - ); + return ( + <> + <div id="solid" class="counter"> + <button onClick={subtract}>-</button> + <pre>{count()}</pre> + <button onClick={add}>+</button> + </div> + <div class="counter-message">{children}</div> + </> + ); } diff --git a/examples/framework-multiple/src/components/VueCounter.vue b/examples/framework-multiple/src/components/VueCounter.vue index 6c04c401a..bd801ca81 100644 --- a/examples/framework-multiple/src/components/VueCounter.vue +++ b/examples/framework-multiple/src/components/VueCounter.vue @@ -1,27 +1,27 @@ <template> - <div class="counter"> - <button @click="subtract()">-</button> - <pre>{{ count }}</pre> - <button @click="add()">+</button> - </div> - <div class="counter-message"> - <slot /> - </div> + <div class="counter"> + <button @click="subtract()">-</button> + <pre>{{ count }}</pre> + <button @click="add()">+</button> + </div> + <div class="counter-message"> + <slot /> + </div> </template> <script> import { ref } from 'vue'; export default { - setup() { - const count = ref(0); - const add = () => (count.value = count.value + 1); - const subtract = () => (count.value = count.value - 1); + setup() { + const count = ref(0); + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); - return { - count, - add, - subtract, - }; - }, + return { + count, + add, + subtract, + }; + }, }; </script> diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro index e27a5466d..3864b6430 100644 --- a/examples/framework-multiple/src/pages/index.astro +++ b/examples/framework-multiple/src/pages/index.astro @@ -11,41 +11,40 @@ import SvelteCounter from '../components/SvelteCounter.svelte'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width"> - <link rel="icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')}> - </head> - <body> - <main> - - <react.Counter client:visible> - <h1>Hello React!</h1> - <p>What's up?</p> - </react.Counter> - - <PreactCounter client:visible> - <h1>Hello Preact!</h1> - </PreactCounter> - - <SolidCounter client:visible> - <h1>Hello Solid!</h1> - </SolidCounter> - - <VueCounter client:visible> - <h1>Hello Vue!</h1> - </VueCounter> - - <SvelteCounter client:visible> - <h1>Hello Svelte!</h1> - </SvelteCounter> - - <A /> - - <Renamed /> - - </main> - </body> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')} /> + </head> + <body> + <main> + <react.Counter client:visible> + <h1>Hello React!</h1> + <p>What's up?</p> + </react.Counter> + + <PreactCounter client:visible> + <h1>Hello Preact!</h1> + </PreactCounter> + + <SolidCounter client:visible> + <h1>Hello Solid!</h1> + </SolidCounter> + + <VueCounter client:visible> + <h1>Hello Vue!</h1> + </VueCounter> + + <SvelteCounter client:visible> + <h1>Hello Svelte!</h1> + </SvelteCounter> + + <A /> + + <Renamed /> + </main> + </body> </html> diff --git a/examples/framework-multiple/src/styles/global.css b/examples/framework-multiple/src/styles/global.css index 5997a5afd..4912b4c39 100644 --- a/examples/framework-multiple/src/styles/global.css +++ b/examples/framework-multiple/src/styles/global.css @@ -1,21 +1,21 @@ html, body { - font-family: system-ui; - margin: 0; + font-family: system-ui; + margin: 0; } body { - padding: 2rem; + padding: 2rem; } .counter { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; } .counter-message { - text-align: center; + text-align: center; } |