Add Component Example (#2203)
* Add Component Example * chore(lint): Prettier fix * nit: improve implementation * nit: Update documentation Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Jonathan Neal
GitHub
parent
bd246f0b2d
commit
033b70a7f8
17 changed files with 253 additions and 0 deletions
18
examples/component/.gitignore
vendored
Normal file
18
examples/component/.gitignore
vendored
Normal file
|
|
@ -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
|
||||||
2
examples/component/.npmrc
Normal file
2
examples/component/.npmrc
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
## force pnpm to hoist
|
||||||
|
shamefully-hoist = true
|
||||||
6
examples/component/.stackblitzrc
Normal file
6
examples/component/.stackblitzrc
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"startCommand": "npm start",
|
||||||
|
"env": {
|
||||||
|
"ENABLE_CJS_IMPORTS": true
|
||||||
|
}
|
||||||
|
}
|
||||||
45
examples/component/README.md
Normal file
45
examples/component/README.md
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
# Astro Starter Kit: Component
|
||||||
|
|
||||||
|
```
|
||||||
|
npm init astro -- --template component
|
||||||
|
```
|
||||||
|
|
||||||
|
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/component)
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```
|
||||||
|
/
|
||||||
|
├── demo/
|
||||||
|
│ ├── public/
|
||||||
|
│ └── src/
|
||||||
|
│ └── pages/
|
||||||
|
│ └── index.astro
|
||||||
|
└── packages/
|
||||||
|
└── my-component/
|
||||||
|
├── index.js
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
This project uses **workspaces** to develop a single package, `@example/my-component`, from `packages/my-component`. It also includes a `demo` Astro site for testing and demonstrating the component.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 🧞 Commands
|
||||||
|
|
||||||
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
|:---------------- |:-------------------------------------------- |
|
||||||
|
| `npm install` | Installs dependencies |
|
||||||
|
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||||
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
| `npm run preview` | Preview your build locally, before deploying |
|
||||||
|
|
||||||
|
## 👀 Want to learn more?
|
||||||
|
|
||||||
|
Feel free to check [our documentation](https://github.com/withastro/astro) or jump into our [Discord server](https://astro.build/chat).
|
||||||
13
examples/component/astro.config.mjs
Normal file
13
examples/component/astro.config.mjs
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
// Full Astro Configuration API Documentation:
|
||||||
|
// https://docs.astro.build/reference/configuration-reference
|
||||||
|
|
||||||
|
// @type-check enabled!
|
||||||
|
// VSCode and other TypeScript-enabled text editors will provide auto-completion,
|
||||||
|
// helpful tooltips, and warnings if your exported object is invalid.
|
||||||
|
// You can disable this by removing "@ts-check" and `@type` comments below.
|
||||||
|
|
||||||
|
// @ts-check
|
||||||
|
export default /** @type {import('astro').AstroUserConfig} */ ({
|
||||||
|
// Comment out "renderers: []" to enable Astro's default component support.
|
||||||
|
renderers: [],
|
||||||
|
});
|
||||||
14
examples/component/demo/package.json
Normal file
14
examples/component/demo/package.json
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"name": "@example/my-component-demo",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"start": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"astro": "^0.21.11"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
examples/component/demo/public/favicon.ico
Normal file
BIN
examples/component/demo/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
2
examples/component/demo/public/robots.txt
Normal file
2
examples/component/demo/public/robots.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
User-agent: *
|
||||||
|
Disallow: /
|
||||||
29
examples/component/demo/src/pages/index.astro
Normal file
29
examples/component/demo/src/pages/index.astro
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
---
|
||||||
|
import * as Component from '@example/my-component'
|
||||||
|
---
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<title>Welcome to Astro</title>
|
||||||
|
<style global>
|
||||||
|
h {
|
||||||
|
display: block;
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-block: 0.67em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<Component.Heading>
|
||||||
|
Welcome to Astro
|
||||||
|
</Component.Heading>
|
||||||
|
<Component.Button>
|
||||||
|
Plain Button
|
||||||
|
</Component.Button>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
17
examples/component/package.json
Normal file
17
examples/component/package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"name": "@example/component",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"workspaces": [
|
||||||
|
"demo",
|
||||||
|
"packages/*"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"start": "astro --project-root demo dev",
|
||||||
|
"build": "astro --project-root demo build",
|
||||||
|
"serve": "astro --project-root demo preview"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"astro": "^0.21.11"
|
||||||
|
}
|
||||||
|
}
|
||||||
15
examples/component/packages/my-component/Button.astro
Normal file
15
examples/component/packages/my-component/Button.astro
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
export interface Props extends Record<any, any> {
|
||||||
|
type?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
type,
|
||||||
|
...props
|
||||||
|
} = {
|
||||||
|
...Astro.props
|
||||||
|
} as Props
|
||||||
|
|
||||||
|
props.type = type || 'button'
|
||||||
|
---
|
||||||
|
<button {...props}><slot /></button>
|
||||||
18
examples/component/packages/my-component/Heading.astro
Normal file
18
examples/component/packages/my-component/Heading.astro
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
export interface Props extends Record<any, any> {
|
||||||
|
level?: number | string
|
||||||
|
role?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
level,
|
||||||
|
role,
|
||||||
|
...props
|
||||||
|
} = {
|
||||||
|
...Astro.props
|
||||||
|
} as Props
|
||||||
|
|
||||||
|
props.role = role || 'heading'
|
||||||
|
props['aria-level'] = level || '1'
|
||||||
|
---
|
||||||
|
<h {...props}><slot /></h>
|
||||||
37
examples/component/packages/my-component/README.md
Normal file
37
examples/component/packages/my-component/README.md
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
# Example `@example/my-component`
|
||||||
|
|
||||||
|
This is an example package, exported as `@example/my-component`. It consists of two Astro components, **Button** and **Heading**.
|
||||||
|
|
||||||
|
### Button
|
||||||
|
|
||||||
|
The **Button** component generates a `<button>` with a default **type** of **button**.
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
import * as Component from '@example/my-component'
|
||||||
|
---
|
||||||
|
<Component.Button>Plain Button</Component.Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- generated html -->
|
||||||
|
<button type="button">Plain Button</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Heading
|
||||||
|
|
||||||
|
The **Heading** component generates an `<h>` tag with a default **role** of **heading** and a **level** attribute that gets written to **aria-level**.
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
import * as Component from '@example/my-component'
|
||||||
|
---
|
||||||
|
<Component.Heading>Heading</Component.Heading>
|
||||||
|
<Component.Heading level="2">Subheading</Component.Heading>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- generated html -->
|
||||||
|
<h role="heading" aria-level="1">Plain Button</h>
|
||||||
|
<h role="heading" aria-level="2">Subheading</h>
|
||||||
|
```
|
||||||
2
examples/component/packages/my-component/index.js
Normal file
2
examples/component/packages/my-component/index.js
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
export { default as Button } from './Button.astro';
|
||||||
|
export { default as Heading } from './Heading.astro';
|
||||||
22
examples/component/packages/my-component/package.json
Normal file
22
examples/component/packages/my-component/package.json
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"name": "@example/my-component",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"exports": {
|
||||||
|
".": "./index.js",
|
||||||
|
"./Button": "./Button.astro",
|
||||||
|
"./Heading": "./Heading.astro"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"index.js",
|
||||||
|
"Button.astro",
|
||||||
|
"Heading.jsx"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"astro-component",
|
||||||
|
"button",
|
||||||
|
"heading",
|
||||||
|
"example"
|
||||||
|
]
|
||||||
|
}
|
||||||
11
examples/component/sandbox.config.json
Normal file
11
examples/component/sandbox.config.json
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"infiniteLoopProtection": true,
|
||||||
|
"hardReloadOnChange": false,
|
||||||
|
"view": "browser",
|
||||||
|
"template": "node",
|
||||||
|
"container": {
|
||||||
|
"port": 3000,
|
||||||
|
"startScript": "start",
|
||||||
|
"node": "14"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -55,6 +55,8 @@
|
||||||
"packages/renderers/*",
|
"packages/renderers/*",
|
||||||
"packages/*",
|
"packages/*",
|
||||||
"examples/*",
|
"examples/*",
|
||||||
|
"examples/component/demo",
|
||||||
|
"examples/component/packages/*",
|
||||||
"scripts",
|
"scripts",
|
||||||
"www",
|
"www",
|
||||||
"docs",
|
"docs",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue