chore: update component template (#4540)
Co-authored-by: Nate Moore <nate@astro.build>
This commit is contained in:
Dan Jutan
GitHub
parent
f165353e7a
commit
d6adb67ae4
20 changed files with 45 additions and 238 deletions
19
examples/component/.gitignore
vendored
19
examples/component/.gitignore
vendored
|
|
@ -1,19 +0,0 @@
|
||||||
# build output
|
|
||||||
dist/
|
|
||||||
|
|
||||||
# dependencies
|
|
||||||
node_modules/
|
|
||||||
|
|
||||||
# logs
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
|
|
||||||
|
|
||||||
# environment variables
|
|
||||||
.env
|
|
||||||
.env.production
|
|
||||||
|
|
||||||
# macOS-specific files
|
|
||||||
.DS_Store
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
# Expose Astro dependencies for `pnpm` users
|
|
||||||
shamefully-hoist=true
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"startCommand": "npm start",
|
|
||||||
"env": {
|
|
||||||
"ENABLE_CJS_IMPORTS": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
# Astro Starter Kit: Component
|
# Astro Starter Kit: Component Package
|
||||||
|
|
||||||
|
This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
|
||||||
|
|
||||||
```
|
```
|
||||||
npm init astro -- --template component
|
npm init astro -- --template component
|
||||||
```
|
```
|
||||||
|
|
||||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/component)
|
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
|
||||||
|
|
||||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
|
||||||
|
|
||||||
## 🚀 Project Structure
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
|
@ -14,34 +15,19 @@ Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
```
|
```
|
||||||
/
|
/
|
||||||
├── demo/
|
├── index.ts
|
||||||
│ ├── public/
|
├── src
|
||||||
│ └── src/
|
│ └── MyComponent.astro
|
||||||
│ └── pages/
|
├── tsconfig.json
|
||||||
│ └── index.astro
|
├── package.json
|
||||||
└── 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.
|
The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 🧞 Commands
|
## 🧞 Commands
|
||||||
|
|
||||||
All commands are run from the root of the project, from a terminal:
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
| Command | Action |
|
| Command | Action |
|
||||||
| :--------------------- | :----------------------------------------------- |
|
| :--------------------- | :----------------------------------------------- |
|
||||||
| `npm install` | Installs dependencies |
|
| `npm link` | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components
|
||||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser)
|
||||||
| `npm run build` | Build your production site to `./dist/` |
|
|
||||||
| `npm run preview` | Preview your build locally, before deploying |
|
|
||||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
|
||||||
| `npm run astro --help` | Get help using the Astro CLI |
|
|
||||||
|
|
||||||
## 👀 Want to learn more?
|
|
||||||
|
|
||||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import { defineConfig } from 'astro/config';
|
|
||||||
|
|
||||||
// https://astro.build/config
|
|
||||||
export default defineConfig({
|
|
||||||
vite: {
|
|
||||||
ssr: {
|
|
||||||
noExternal: ['@example/my-component'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@example/my-component-demo",
|
|
||||||
"version": "0.0.1",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"dev": "astro dev",
|
|
||||||
"start": "astro dev",
|
|
||||||
"build": "astro build",
|
|
||||||
"preview": "astro preview",
|
|
||||||
"astro": "astro"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@example/my-component": "workspace:*",
|
|
||||||
"astro": "^1.1.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
|
|
||||||
<path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
|
|
||||||
<path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop stop-color="#000"/>
|
|
||||||
<stop offset="1" stop-color="#000" stop-opacity="0"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<style>
|
|
||||||
@media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
|
|
||||||
</style>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 873 B |
|
|
@ -1,25 +0,0 @@
|
||||||
---
|
|
||||||
import * as Component from '@example/my-component';
|
|
||||||
---
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<title>Welcome to Astro</title>
|
|
||||||
<style is: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>
|
|
||||||
6
examples/component/index.ts
Normal file
6
examples/component/index.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
// Do not write code directly here, instead use the `src` folder!
|
||||||
|
// Then, use this file to export everything you want your user to access.
|
||||||
|
|
||||||
|
import MyComponent from './src/MyComponent.astro';
|
||||||
|
|
||||||
|
export default MyComponent;
|
||||||
|
|
@ -1,13 +1,22 @@
|
||||||
{
|
{
|
||||||
"name": "@example/component",
|
"name": "@example/component",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"private": true,
|
"type": "module",
|
||||||
"scripts": {
|
"exports": {
|
||||||
"start": "astro --root demo dev",
|
".": "./index.ts"
|
||||||
"build": "astro --root demo build",
|
|
||||||
"serve": "astro --root demo preview"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"files": [
|
||||||
|
"src",
|
||||||
|
"index.ts"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"astro-component"
|
||||||
|
],
|
||||||
|
"scripts": {},
|
||||||
|
"devDependencies": {
|
||||||
|
"astro": "^1.1.7"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
"astro": "^1.1.7"
|
"astro": "^1.1.7"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
---
|
|
||||||
export interface Props extends Record<any, any> {
|
|
||||||
type?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { type, ...props } = {
|
|
||||||
...Astro.props,
|
|
||||||
};
|
|
||||||
|
|
||||||
props.type = type || 'button';
|
|
||||||
---
|
|
||||||
|
|
||||||
<button {...props}><slot /></button>
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
---
|
|
||||||
export interface Props extends Record<any, any> {
|
|
||||||
level?: number | string;
|
|
||||||
role?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { level, role, ...props } = {
|
|
||||||
...Astro.props,
|
|
||||||
};
|
|
||||||
|
|
||||||
props.role = role || 'heading';
|
|
||||||
props['aria-level'] = level || '1';
|
|
||||||
---
|
|
||||||
|
|
||||||
<h {...props}><slot /></h>
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
# 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>
|
|
||||||
```
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
export { default as Button } from './Button.astro';
|
|
||||||
export { default as Heading } from './Heading.astro';
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
{
|
|
||||||
"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"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
packages:
|
|
||||||
- 'packages/**/*'
|
|
||||||
- 'demo'
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
{
|
|
||||||
"infiniteLoopProtection": true,
|
|
||||||
"hardReloadOnChange": false,
|
|
||||||
"view": "browser",
|
|
||||||
"template": "node",
|
|
||||||
"container": {
|
|
||||||
"port": 3000,
|
|
||||||
"startScript": "start",
|
|
||||||
"node": "14"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
8
examples/component/src/MyComponent.astro
Normal file
8
examples/component/src/MyComponent.astro
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
---
|
||||||
|
// Write your component code in this file!
|
||||||
|
export interface Props {
|
||||||
|
prefix?: string
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<div>{Astro.props.prefix} My special component</div>
|
||||||
3
examples/component/tsconfig.json
Normal file
3
examples/component/tsconfig.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/base"
|
||||||
|
}
|
||||||
|
|
@ -75,19 +75,8 @@ importers:
|
||||||
examples/component:
|
examples/component:
|
||||||
specifiers:
|
specifiers:
|
||||||
astro: ^1.1.7
|
astro: ^1.1.7
|
||||||
dependencies:
|
|
||||||
astro: link:../../packages/astro
|
|
||||||
|
|
||||||
examples/component/demo:
|
|
||||||
specifiers:
|
|
||||||
'@example/my-component': workspace:*
|
|
||||||
astro: ^1.1.7
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@example/my-component': link:../packages/my-component
|
astro: link:../../packages/astro
|
||||||
astro: link:../../../packages/astro
|
|
||||||
|
|
||||||
examples/component/packages/my-component:
|
|
||||||
specifiers: {}
|
|
||||||
|
|
||||||
examples/docs:
|
examples/docs:
|
||||||
specifiers:
|
specifiers:
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue