diff options
Diffstat (limited to 'examples/framework-multiple')
16 files changed, 55 insertions, 84 deletions
diff --git a/examples/framework-multiple/.vscode/extensions.json b/examples/framework-multiple/.vscode/extensions.json new file mode 100644 index 000000000..22a15055d --- /dev/null +++ b/examples/framework-multiple/.vscode/extensions.json @@ -0,0 +1,4 @@ +{ + "recommendations": ["astro-build.astro-vscode"], + "unwantedRecommendations": [] +} diff --git a/examples/framework-multiple/.vscode/launch.json b/examples/framework-multiple/.vscode/launch.json new file mode 100644 index 000000000..d64220976 --- /dev/null +++ b/examples/framework-multiple/.vscode/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "command": "./node_modules/.bin/astro dev", + "name": "Development server", + "request": "launch", + "type": "node-terminal" + } + ] +} diff --git a/examples/framework-multiple/astro.config.mjs b/examples/framework-multiple/astro.config.mjs index 4b50887cd..d4461d396 100644 --- a/examples/framework-multiple/astro.config.mjs +++ b/examples/framework-multiple/astro.config.mjs @@ -4,9 +4,10 @@ import react from '@astrojs/react'; import svelte from '@astrojs/svelte'; import vue from '@astrojs/vue'; import solid from '@astrojs/solid-js'; +import lit from '@astrojs/lit'; // https://astro.build/config export default defineConfig({ // Enable many frameworks to support all different kinds of components. - integrations: [preact(), react(), svelte(), vue(), solid()], + integrations: [preact(), react(), svelte(), vue(), solid(), lit()], }); diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json index b49f7c162..a4e1e2018 100644 --- a/examples/framework-multiple/package.json +++ b/examples/framework-multiple/package.json @@ -9,7 +9,6 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/lit": "^0.3.2", "@astrojs/preact": "^0.5.2", "@astrojs/react": "^0.4.2", "@astrojs/solid-js": "^0.4.1", @@ -18,8 +17,6 @@ "astro": "^1.0.0-rc.6" }, "dependencies": { - "@webcomponents/template-shadowroot": "^0.1.0", - "lit": "^2.2.5", "preact": "^10.7.3", "react": "^18.1.0", "react-dom": "^18.1.0", diff --git a/examples/framework-multiple/src/components/A.astro b/examples/framework-multiple/src/components/A.astro deleted file mode 100644 index 2b7bd482a..000000000 --- a/examples/framework-multiple/src/components/A.astro +++ /dev/null @@ -1,3 +0,0 @@ -<div class="children"> - <h1>Hello Astro (A)</h1> -</div> diff --git a/examples/framework-multiple/src/components/B.astro b/examples/framework-multiple/src/components/B.astro deleted file mode 100644 index 3640fe831..000000000 --- a/examples/framework-multiple/src/components/B.astro +++ /dev/null @@ -1,3 +0,0 @@ -<div class="children"> - <h1>Hello Astro (B)</h1> -</div> diff --git a/examples/framework-multiple/src/components/LitCounter.js b/examples/framework-multiple/src/components/LitCounter.js deleted file mode 100644 index 883a7581d..000000000 --- a/examples/framework-multiple/src/components/LitCounter.js +++ /dev/null @@ -1,33 +0,0 @@ -import { LitElement, html } from 'lit'; - -export const tagName = 'my-counter'; - -class Counter extends LitElement { - static get properties() { - return { - count: { - type: Number, - }, - }; - } - - constructor() { - super(); - this.count = 0; - } - - increment() { - this.count++; - } - - render() { - return html` - <div> - <p>Count: ${this.count}</p> - <button type="button" @click=${this.increment}>Increment</button> - </div> - `; - } -} - -customElements.define(tagName, Counter); diff --git a/examples/framework-multiple/src/components/PreactCounter.tsx b/examples/framework-multiple/src/components/PreactCounter.tsx index 261f275a1..2fb0a54b9 100644 --- a/examples/framework-multiple/src/components/PreactCounter.tsx +++ b/examples/framework-multiple/src/components/PreactCounter.tsx @@ -1,6 +1,8 @@ +/** @jsxImportSource preact */ + import { useState } from 'preact/hooks'; -/** a counter written in Preact */ +/** A counter written with Preact */ export function PreactCounter({ children }) { const [count, setCount] = useState(0); const add = () => setCount((i) => i + 1); diff --git a/examples/framework-multiple/src/components/PreactSFC.tsx b/examples/framework-multiple/src/components/PreactSFC.tsx deleted file mode 100644 index 60d0fe836..000000000 --- a/examples/framework-multiple/src/components/PreactSFC.tsx +++ /dev/null @@ -1,10 +0,0 @@ -/** @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.tsx index cdd42bee2..1cff97917 100644 --- a/examples/framework-multiple/src/components/ReactCounter.jsx +++ b/examples/framework-multiple/src/components/ReactCounter.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -/** a counter written in React */ +/** A counter written with React */ export function Counter({ children }) { const [count, setCount] = useState(0); const add = () => setCount((i) => i + 1); diff --git a/examples/framework-multiple/src/components/SolidCounter.tsx b/examples/framework-multiple/src/components/SolidCounter.tsx index b16a463d5..153feaddc 100644 --- a/examples/framework-multiple/src/components/SolidCounter.tsx +++ b/examples/framework-multiple/src/components/SolidCounter.tsx @@ -1,6 +1,8 @@ +/** @jsxImportSource solid-js */ + import { createSignal } from 'solid-js'; -/** a counter written with Solid */ +/** A counter written with Solid */ export default function SolidCounter({ children }) { const [count, setCount] = createSignal(0); const add = () => setCount(count() + 1); diff --git a/examples/framework-multiple/src/components/SvelteCounter.svelte b/examples/framework-multiple/src/components/SvelteCounter.svelte index 3cab8c43a..01e58574a 100644 --- a/examples/framework-multiple/src/components/SvelteCounter.svelte +++ b/examples/framework-multiple/src/components/SvelteCounter.svelte @@ -1,22 +1,23 @@ +<!-- @component +A counter written with Svelte +--> +<script lang="ts"> + let count = 0; -<script> - let children; - let count = 0; - - function add() { + function add() { count += 1; } - function subtract() { + function subtract() { count -= 1; } </script> <div class="counter"> - <button on:click={subtract}>-</button> - <pre>{ count }</pre> - <button on:click={add}>+</button> + <button on:click={subtract}>-</button> + <pre>{count}</pre> + <button on:click={add}>+</button> </div> <div class="counter-message"> - <slot /> + <slot /> </div> diff --git a/examples/framework-multiple/src/components/VueCounter.vue b/examples/framework-multiple/src/components/VueCounter.vue index bd801ca81..74820f7f0 100644 --- a/examples/framework-multiple/src/components/VueCounter.vue +++ b/examples/framework-multiple/src/components/VueCounter.vue @@ -1,4 +1,10 @@ <template> + <!-- + Seeing type errors on the word `class`? + This unfortunately happens because @types/react's JSX definitions leak into every file due to being declared globally. + There's currently no way to prevent this when using both Vue and React with TypeScript in the same project. + You can read more about this issue here: https://github.com/johnsoncodehk/volar/discussions/592 + --> <div class="counter"> <button @click="subtract()">-</button> <pre>{{ count }}</pre> @@ -9,7 +15,7 @@ </div> </template> -<script> +<script lang="ts"> import { ref } from 'vue'; export default { setup() { diff --git a/examples/framework-multiple/src/components/index.ts b/examples/framework-multiple/src/components/index.ts deleted file mode 100644 index 4077dcacd..000000000 --- a/examples/framework-multiple/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/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro index 6dfdc4e52..ac8996504 100644 --- a/examples/framework-multiple/src/pages/index.astro +++ b/examples/framework-multiple/src/pages/index.astro @@ -1,12 +1,13 @@ --- // Style Imports import "../styles/global.css"; + // Component Imports -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"; +// For JSX components, all the common ways of exporting (under a namespace, specific export, default export etc) are supported! +import * as react from "../components/ReactCounter"; +import { PreactCounter } from "../components/PreactCounter"; +import SolidCounter from "../components/SolidCounter"; + import VueCounter from "../components/VueCounter.vue"; import SvelteCounter from "../components/SvelteCounter.svelte"; @@ -23,29 +24,24 @@ import SvelteCounter from "../components/SvelteCounter.svelte"; <body> <main> <react.Counter client:visible> - <h1>Hello React!</h1> - <p>What's up?</p> + <h1>Hello from React!</h1> </react.Counter> <PreactCounter client:visible> - <h1>Hello Preact!</h1> + <h1>Hello from Preact!</h1> </PreactCounter> <SolidCounter client:visible> - <h1>Hello Solid!</h1> + <h1>Hello from Solid!</h1> </SolidCounter> <VueCounter client:visible> - <h1>Hello Vue!</h1> + <h1>Hello from Vue!</h1> </VueCounter> <SvelteCounter client:visible> - <h1>Hello Svelte!</h1> + <h1>Hello from Svelte!</h1> </SvelteCounter> - - <A /> - - <Renamed /> </main> </body> </html> diff --git a/examples/framework-multiple/tsconfig.json b/examples/framework-multiple/tsconfig.json index 4db6ee701..7e64c543c 100644 --- a/examples/framework-multiple/tsconfig.json +++ b/examples/framework-multiple/tsconfig.json @@ -3,6 +3,8 @@ // Enable top-level await, and other modern ESM features. "target": "ESNext", "module": "ESNext", + // Needed for TypeScript intellisense in the template inside Vue files + "jsx": "preserve", // Enable node-style module resolution, for things like npm package imports. "moduleResolution": "node", // Enable JSON imports. |