diff options
Diffstat (limited to 'examples')
9 files changed, 30 insertions, 13 deletions
diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json index 6bc2c12e4..2dbbf7d89 100644 --- a/examples/framework-multiple/package.json +++ b/examples/framework-multiple/package.json @@ -16,6 +16,8 @@ "@astrojs/solid-js": "^4.0.1", "@astrojs/svelte": "^5.2.0", "@astrojs/vue": "^4.0.8", + "@types/react": "^18.2.37", + "@types/react-dom": "^18.2.15", "astro": "^4.5.2", "preact": "^10.19.2", "react": "^18.2.0", diff --git a/examples/framework-multiple/src/components/preact/PreactCounter.tsx b/examples/framework-multiple/src/components/preact/PreactCounter.tsx index 2fb0a54b9..5ad164cc2 100644 --- a/examples/framework-multiple/src/components/preact/PreactCounter.tsx +++ b/examples/framework-multiple/src/components/preact/PreactCounter.tsx @@ -1,9 +1,10 @@ /** @jsxImportSource preact */ import { useState } from 'preact/hooks'; +import type { ComponentChildren } from 'preact'; /** A counter written with Preact */ -export function PreactCounter({ children }) { +export function PreactCounter({ children }: { children?: ComponentChildren }) { const [count, setCount] = useState(0); const add = () => setCount((i) => i + 1); const subtract = () => setCount((i) => i - 1); diff --git a/examples/framework-multiple/src/components/react/ReactCounter.tsx b/examples/framework-multiple/src/components/react/ReactCounter.tsx index 1cff97917..84681035d 100644 --- a/examples/framework-multiple/src/components/react/ReactCounter.tsx +++ b/examples/framework-multiple/src/components/react/ReactCounter.tsx @@ -1,7 +1,9 @@ -import { useState } from 'react'; +/** @jsxImportSource react */ + +import { useState, type ReactNode } from 'react'; /** A counter written with React */ -export function Counter({ children }) { +export function Counter({ children }: { children?: ReactNode }) { const [count, setCount] = useState(0); const add = () => setCount((i) => i + 1); const subtract = () => setCount((i) => i - 1); diff --git a/examples/framework-multiple/src/components/solid/SolidCounter.tsx b/examples/framework-multiple/src/components/solid/SolidCounter.tsx index 153feaddc..cb9219608 100644 --- a/examples/framework-multiple/src/components/solid/SolidCounter.tsx +++ b/examples/framework-multiple/src/components/solid/SolidCounter.tsx @@ -1,9 +1,9 @@ /** @jsxImportSource solid-js */ -import { createSignal } from 'solid-js'; +import { createSignal, type JSX } from 'solid-js'; /** A counter written with Solid */ -export default function SolidCounter({ children }) { +export default function SolidCounter(props: { children?: JSX.Element }) { const [count, setCount] = createSignal(0); const add = () => setCount(count() + 1); const subtract = () => setCount(count() - 1); @@ -15,7 +15,7 @@ export default function SolidCounter({ children }) { <pre>{count()}</pre> <button onClick={add}>+</button> </div> - <div class="counter-message">{children}</div> + <div class="counter-message">{props.children}</div> </> ); } diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx index f7db88c6d..a63bf0cd7 100644 --- a/examples/framework-preact/src/components/Counter.tsx +++ b/examples/framework-preact/src/components/Counter.tsx @@ -1,11 +1,17 @@ -import { h, Fragment } from 'preact'; +import type { ComponentChildren } from 'preact'; +import type { Signal } from '@preact/signals'; import { lazy, Suspense } from 'preact/compat'; import './Counter.css'; const Message = lazy(async () => import('./Message')); const Fallback = () => <p>Loading...</p>; -export default function Counter({ children, count }) { +type Props = { + children: ComponentChildren; + count: Signal<number>; +}; + +export default function Counter({ children, count }: Props) { const add = () => count.value++; const subtract = () => count.value--; diff --git a/examples/framework-preact/src/components/Message.tsx b/examples/framework-preact/src/components/Message.tsx index 2ae48d04b..58b798c14 100644 --- a/examples/framework-preact/src/components/Message.tsx +++ b/examples/framework-preact/src/components/Message.tsx @@ -1,5 +1,6 @@ +import type { ComponentChildren } from 'preact'; import './Message.css'; -export default function Message({ children }) { +export default function Message({ children }: { children: ComponentChildren }) { return <div class="message">{children}</div>; } diff --git a/examples/framework-solid/src/components/Counter.tsx b/examples/framework-solid/src/components/Counter.tsx index e0c3cba62..d6f941999 100644 --- a/examples/framework-solid/src/components/Counter.tsx +++ b/examples/framework-solid/src/components/Counter.tsx @@ -1,7 +1,7 @@ -import { createSignal } from 'solid-js'; +import { createSignal, type JSX } from 'solid-js'; import './Counter.css'; -export default function Counter(props) { +export default function Counter(props: { children?: JSX.Element }) { const [count, setCount] = createSignal(0); const add = () => setCount(count() + 1); const subtract = () => setCount(count() - 1); diff --git a/examples/with-nanostores/src/cartStore.ts b/examples/with-nanostores/src/cartStore.ts index 00270180a..a57a6ce87 100644 --- a/examples/with-nanostores/src/cartStore.ts +++ b/examples/with-nanostores/src/cartStore.ts @@ -13,7 +13,7 @@ export type CartItemDisplayInfo = Pick<CartItem, 'id' | 'name' | 'imageSrc'>; export const cartItems = map<Record<string, CartItem>>({}); -export function addCartItem({ id, name, imageSrc }: CartItem) { +export function addCartItem({ id, name, imageSrc }: CartItemDisplayInfo) { const existingEntry = cartItems.get()[id]; if (existingEntry) { cartItems.setKey(id, { diff --git a/examples/with-nanostores/tsconfig.json b/examples/with-nanostores/tsconfig.json index d78f81ec4..bdd1b5a88 100644 --- a/examples/with-nanostores/tsconfig.json +++ b/examples/with-nanostores/tsconfig.json @@ -1,3 +1,8 @@ { - "extends": "astro/tsconfigs/base" + "extends": "astro/tsconfigs/base", + "compilerOptions": { + // Preact specific settings + "jsx": "react-jsx", + "jsxImportSource": "preact" + } } |