diff options
Diffstat (limited to 'examples/with-multiple-frameworks/src')
8 files changed, 0 insertions, 154 deletions
diff --git a/examples/with-multiple-frameworks/src/components/A.astro b/examples/with-multiple-frameworks/src/components/A.astro deleted file mode 100644 index 702a4be35..000000000 --- a/examples/with-multiple-frameworks/src/components/A.astro +++ /dev/null @@ -1,3 +0,0 @@ -<div class="children"> - <h1>Hello Astro (A)</h1> -</div> diff --git a/examples/with-multiple-frameworks/src/components/B.astro b/examples/with-multiple-frameworks/src/components/B.astro deleted file mode 100644 index 9022cb372..000000000 --- a/examples/with-multiple-frameworks/src/components/B.astro +++ /dev/null @@ -1,3 +0,0 @@ -<div class="children"> - <h1>Hello Astro (B)</h1> -</div> diff --git a/examples/with-multiple-frameworks/src/components/PreactCounter.tsx b/examples/with-multiple-frameworks/src/components/PreactCounter.tsx deleted file mode 100644 index be4ddb6ce..000000000 --- a/examples/with-multiple-frameworks/src/components/PreactCounter.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { h, Fragment } from 'preact'; -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); - - return ( - <> - <div className="counter"> - <button onClick={subtract}>-</button> - <pre>{count}</pre> - <button onClick={add}>+</button> - </div> - <div className="children">{children}</div> - </> - ); -} diff --git a/examples/with-multiple-frameworks/src/components/ReactCounter.jsx b/examples/with-multiple-frameworks/src/components/ReactCounter.jsx deleted file mode 100644 index 06d8f2513..000000000 --- a/examples/with-multiple-frameworks/src/components/ReactCounter.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { 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); - - return ( - <> - <div className="counter"> - <button onClick={subtract}>-</button> - <pre>{count}</pre> - <button onClick={add}>+</button> - </div> - <div className="children">{children}</div> - </> - ); -} diff --git a/examples/with-multiple-frameworks/src/components/SvelteCounter.svelte b/examples/with-multiple-frameworks/src/components/SvelteCounter.svelte deleted file mode 100644 index 8d6b3f5e1..000000000 --- a/examples/with-multiple-frameworks/src/components/SvelteCounter.svelte +++ /dev/null @@ -1,22 +0,0 @@ - -<script> - let children; - let count = 0; - - function add() { - count += 1; - } - - function subtract() { - count -= 1; - } -</script> - -<div class="counter"> - <button on:click={subtract}>-</button> - <pre>{ count }</pre> - <button on:click={add}>+</button> -</div> -<div class="children"> - <slot /> -</div> diff --git a/examples/with-multiple-frameworks/src/components/VueCounter.vue b/examples/with-multiple-frameworks/src/components/VueCounter.vue deleted file mode 100644 index 8179fb1d9..000000000 --- a/examples/with-multiple-frameworks/src/components/VueCounter.vue +++ /dev/null @@ -1,27 +0,0 @@ -<template> - <div class="counter"> - <button @click="subtract()">-</button> - <pre>{{ count }}</pre> - <button @click="add()">+</button> - </div> - <div class="children"> - <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; - - return { - count, - add, - subtract - } - } -} -</script> diff --git a/examples/with-multiple-frameworks/src/components/index.ts b/examples/with-multiple-frameworks/src/components/index.ts deleted file mode 100644 index 4077dcacd..000000000 --- a/examples/with-multiple-frameworks/src/components/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as A } from './A.astro'; -export { default as B } from './B.astro'; diff --git a/examples/with-multiple-frameworks/src/pages/index.astro b/examples/with-multiple-frameworks/src/pages/index.astro deleted file mode 100644 index 3fbef72e0..000000000 --- a/examples/with-multiple-frameworks/src/pages/index.astro +++ /dev/null @@ -1,58 +0,0 @@ ---- -import { A, B as Renamed } from '../components'; -import * as react from '../components/ReactCounter.jsx'; -import { PreactCounter } from '../components/PreactCounter.tsx'; -import VueCounter from '../components/VueCounter.vue'; -import SvelteCounter from '../components/SvelteCounter.svelte'; ---- - -<html> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> - <style> - :global(:root) { - font-family: system-ui; - padding: 2em 0; - } - :global(.counter) { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - place-items: center; - font-size: 2em; - margin-top: 2em; - } - :global(.children) { - display: grid; - place-items: center; - margin-bottom: 2em; - } - </style> - </head> - <body> - <main> - - <react.Counter:visible> - <h1>Hello React!</h1> - <p>What's up?</p> - </react.Counter:visible> - - <PreactCounter:visible> - <h1>Hello Preact!</h1> - </PreactCounter:visible> - - <VueCounter:visible> - <h1>Hello Vue!</h1> - </VueCounter:visible> - - <SvelteCounter:visible> - <h1>Hello Svelte!</h1> - </SvelteCounter:visible> - - <A /> - - <Renamed /> - - </main> - </body> -</html> |