diff options
Diffstat (limited to 'examples')
18 files changed, 323 insertions, 20 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> diff --git a/examples/framework-preact/README.md b/examples/framework-preact/README.md index c22362325..5302fa9db 100644 --- a/examples/framework-preact/README.md +++ b/examples/framework-preact/README.md @@ -1,11 +1,38 @@ # Using Preact with Astro -``` +This example showcases Astro's built-in support for [Preact](https://www.preactjs.com/). + +## Installation + +### Automatic + +Bootstrap your Astro project with this template! + +```shell npm init astro -- --template framework-preact ``` -This example showcases Astro's built-in support for [Preact](https://preactjs.com/). +### Manual + +To use Preact components in your Astro project: + +1. Install `@astrojs/renderer-preact` + + ```shell + npm i @astrojs/renderer-preact + ``` + +2. Add `"@astrojs/renderer-preact"` to your `renderers` in `astro.config.mjs`. + + ```js + export default { + renderers: [ + "@astrojs/renderer-preact", + // optionally, others... + ] + } + ``` -No configuration is needed to enable Preact support—just start writing Preact components in `src/components`. +## Usage -> **Note**: If used, components _must_ include the JSX factory (ex. `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. +Write your Preact components as `.jsx` or `.tsx` files in your project. diff --git a/examples/framework-react/README.md b/examples/framework-react/README.md index dd82a447f..3701554be 100644 --- a/examples/framework-react/README.md +++ b/examples/framework-react/README.md @@ -1,11 +1,38 @@ # Using React with Astro -``` +This example showcases Astro's built-in support for [React](https://reactjs.org/). + +## Installation + +### Automatic + +Bootstrap your Astro project with this template! + +```shell npm init astro -- --template framework-react ``` -This example showcases Astro's built-in support for [React](https://reactjs.org/). +### Manual + +To use React components in your Astro project: + +1. Install `@astrojs/renderer-react` + + ```shell + npm i @astrojs/renderer-react + ``` + +2. Add `"@astrojs/renderer-react"` to your `renderers` in `astro.config.mjs`. + + ```js + export default { + renderers: [ + "@astrojs/renderer-react", + // optionally, others... + ] + } + ``` -No configuration is needed to enable React support—just start writing React components in `src/components`. +## Usage -> **Note**: If used, components _must_ include the JSX factory (ex. `import React from "react"`). 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. +Write your React components as `.jsx` or `.tsx` files in your project. diff --git a/examples/framework-solid/.gitignore b/examples/framework-solid/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/framework-solid/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/framework-solid/.npmrc b/examples/framework-solid/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/framework-solid/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true
\ No newline at end of file diff --git a/examples/framework-solid/README.md b/examples/framework-solid/README.md new file mode 100644 index 000000000..e7afc1b84 --- /dev/null +++ b/examples/framework-solid/README.md @@ -0,0 +1,38 @@ +# Using Solid with Astro + +This example showcases Astro's built-in support for [Solid](https://www.solidjs.com/). + +## Installation + +### Automatic + +Bootstrap your Astro project with this template! + +```shell +npm init astro --template framework-solid +``` + +### Manual + +To use Solid components in your Astro project: + +1. Install `@astrojs/renderer-solid` + + ```shell + npm i @astrojs/renderer-solid + ``` + +2. Add `"@astrojs/renderer-solid"` to your `renderers` in `astro.config.mjs`. + + ```js + export default { + renderers: [ + "@astrojs/renderer-solid", + // optionally, others... + ] + } + ``` + +## Usage + +Write your Solid components as `.jsx` or `.tsx` files in your project. diff --git a/examples/framework-solid/astro.config.mjs b/examples/framework-solid/astro.config.mjs new file mode 100644 index 000000000..d19e07745 --- /dev/null +++ b/examples/framework-solid/astro.config.mjs @@ -0,0 +1,17 @@ +export default { + // projectRoot: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project. + // pages: './src/pages', // Path to Astro components, pages, and data + // dist: './dist', // When running `astro build`, path to final static output + // public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. + buildOptions: { + // site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. + // sitemap: true, // Generate sitemap (set to "false" to disable) + }, + devOptions: { + // 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-solid' + ] +}; diff --git a/examples/framework-solid/package.json b/examples/framework-solid/package.json new file mode 100644 index 000000000..bd65ab03d --- /dev/null +++ b/examples/framework-solid/package.json @@ -0,0 +1,16 @@ +{ + "name": "@example/framework-solid", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.18.0-next.1", + "@astrojs/renderer-solid": "0.0.1" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/framework-solid/src/components/Counter.tsx b/examples/framework-solid/src/components/Counter.tsx new file mode 100644 index 000000000..78944a11e --- /dev/null +++ b/examples/framework-solid/src/components/Counter.tsx @@ -0,0 +1,21 @@ +import { createSignal } from "solid-js"; + +/** */ +export default function SolidCounter({ children }) { + const [count, setCount] = createSignal(0); + const add = () => setCount(count() + 1); + const subtract = () => setCount(count() - 1); + + return ( + <> + <div class="counter"> + <button onClick={subtract}>-</button> + <pre>{count()}</pre> + <button onClick={add}>+</button> + </div> + <div class="children"> + {children} + </div> + </> + ); +} diff --git a/examples/framework-solid/src/pages/index.astro b/examples/framework-solid/src/pages/index.astro new file mode 100644 index 000000000..2c279a7af --- /dev/null +++ b/examples/framework-solid/src/pages/index.astro @@ -0,0 +1,38 @@ +--- +import Counter from '../components/Counter.tsx'; +--- + +<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> + <Counter client:visible> + <h1>Hello Solid!</h1> + </Counter> + </main> + </body> +</html> diff --git a/examples/framework-svelte/README.md b/examples/framework-svelte/README.md index 465863f72..deaf1da76 100644 --- a/examples/framework-svelte/README.md +++ b/examples/framework-svelte/README.md @@ -1,9 +1,38 @@ # Using Svelte with Astro -``` +This example showcases Astro's built-in support for [Svelte](https://svelte.dev/). + +## Installation + +### Automatic + +Bootstrap your Astro project with this template! + +```shell npm init astro -- --template framework-svelte ``` -This example showcases Astro's built-in support for [Svelte](https://svelte.dev/). +### Manual + +To use Svelte components in your Astro project: + +1. Install `@astrojs/renderer-svelte` + + ```shell + npm i @astrojs/renderer-svelte + ``` + +2. Add `"@astrojs/renderer-svelte"` to your `renderers` in `astro.config.mjs`. + + ```js + export default { + renderers: [ + "@astrojs/renderer-svelte", + // optionally, others... + ] + } + ``` + +## Usage -No configuration is needed to enable Svelte support—just start writing Svelte components in `src/components`. +Write your Svelte components as `.svelte` files in your project. diff --git a/examples/framework-vue/README.md b/examples/framework-vue/README.md index c5818e51f..2c6240f01 100644 --- a/examples/framework-vue/README.md +++ b/examples/framework-vue/README.md @@ -1,9 +1,38 @@ # Using Vue with Astro -``` +This example showcases Astro's built-in support for [Vue](https://v3.vuejs.org/). + +## Installation + +### Automatic + +Bootstrap your Astro project with this template! + +```shell npm init astro -- --template framework-vue ``` -This example showcases Astro's built-in support for [Vue (`v3.x`)](https://v3.vuejs.org/). +### Manual + +To use Vue components in your Astro project: + +1. Install `@astrojs/renderer-vue` + + ```shell + npm i @astrojs/renderer-vue + ``` + +2. Add `"@astrojs/renderer-vue"` to your `renderers` in `astro.config.mjs`. + + ```js + export default { + renderers: [ + "@astrojs/renderer-vue", + // optionally, others... + ] + } + ``` + +## Usage -No configuration is needed to enable Vue support—just start writing Vue components in `src/components`. +Write your Vue components as `.vue` files in your project. |