mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
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
|
||||
```
|
||||
|
||||
[](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
|
||||
|
||||
|
|
@ -14,34 +15,19 @@ 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
|
||||
├── index.ts
|
||||
├── src
|
||||
│ └── MyComponent.astro
|
||||
├── tsconfig.json
|
||||
├── 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
|
||||
|
||||
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 |
|
||||
| `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).
|
||||
| `npm link` | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components
|
||||
| `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)
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "astro --root demo dev",
|
||||
"build": "astro --root demo build",
|
||||
"serve": "astro --root demo preview"
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./index.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"files": [
|
||||
"src",
|
||||
"index.ts"
|
||||
],
|
||||
"keywords": [
|
||||
"astro-component"
|
||||
],
|
||||
"scripts": {},
|
||||
"devDependencies": {
|
||||
"astro": "^1.1.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"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:
|
||||
specifiers:
|
||||
astro: ^1.1.7
|
||||
dependencies:
|
||||
astro: link:../../packages/astro
|
||||
|
||||
examples/component/demo:
|
||||
specifiers:
|
||||
'@example/my-component': workspace:*
|
||||
astro: ^1.1.7
|
||||
devDependencies:
|
||||
'@example/my-component': link:../packages/my-component
|
||||
astro: link:../../../packages/astro
|
||||
|
||||
examples/component/packages/my-component:
|
||||
specifiers: {}
|
||||
astro: link:../../packages/astro
|
||||
|
||||
examples/docs:
|
||||
specifiers:
|
||||
|
|
|
|||
Loading…
Reference in a new issue