michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add Component Example (#2203)

Browse source 
* 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 2021-12-17 08:47:59 -05:00 committed by GitHub
parent bd246f0b2d
commit 033b70a7f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 253 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
examples/component/.gitignore vendored Normal file
View 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
View file

@ -0,0 +1,2 @@
## force pnpm to hoist
shamefully-hoist = true

6
examples/component/.stackblitzrc Normal file
View file

@ -0,0 +1,6 @@
{
"startCommand": "npm start",
"env": {
"ENABLE_CJS_IMPORTS": true
}
}

45
examples/component/README.md Normal file
View file

@ -0,0 +1,45 @@
# Astro Starter Kit: Component
```
npm init astro -- --template component
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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
View 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
View 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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

2
examples/component/demo/public/robots.txt Normal file
View file

@ -0,0 +1,2 @@
User-agent: *
Disallow: /

29
examples/component/demo/src/pages/index.astro Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View file

@ -0,0 +1,11 @@
{
"infiniteLoopProtection": true,
"hardReloadOnChange": false,
"view": "browser",
"template": "node",
"container": {
"port": 3000,
"startScript": "start",
"node": "14"
}
}

2
package.json
View file

@ -55,6 +55,8 @@
"packages/renderers/*",
"packages/*",
"examples/*",
"examples/component/demo",
"examples/component/packages/*",
"scripts",
"www",
"docs",