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

chore: update component template (#4540)

Browse source 
Co-authored-by: Nate Moore <nate@astro.build>
This commit is contained in:
Dan Jutan 2022-09-07 18:16:54 -04:00 committed by GitHub
parent f165353e7a
commit d6adb67ae4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 45 additions and 238 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
examples/component/.gitignore vendored
View file

@ -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

2
examples/component/.npmrc
View file

@ -1,2 +0,0 @@
# Expose Astro dependencies for `pnpm` users
shamefully-hoist=true

6
examples/component/.stackblitzrc
View file

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

38
examples/component/README.md
View file

@ -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
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/component)
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](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)

10
examples/component/demo/astro.config.mjs
View file

@ -1,10 +0,0 @@
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({
vite: {
ssr: {
noExternal: ['@example/my-component'],
},
},
});

16
examples/component/demo/package.json
View file

@ -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"
}
}

13
examples/component/demo/public/favicon.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 873 B

25
examples/component/demo/src/pages/index.astro
View file

@ -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
View 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;

21
examples/component/package.json
View file

@ -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"
}
}

13
examples/component/packages/my-component/Button.astro
View file

@ -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>

15
examples/component/packages/my-component/Heading.astro
View file

@ -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>

37
examples/component/packages/my-component/README.md
View file

@ -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>
```

2
examples/component/packages/my-component/index.js
View file

@ -1,2 +0,0 @@
export { default as Button } from './Button.astro';
export { default as Heading } from './Heading.astro';

22
examples/component/packages/my-component/package.json
View file

@ -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"
]
}

3
examples/component/pnpm-workspace.yaml
View file

@ -1,3 +0,0 @@
packages:
- 'packages/**/*'
- 'demo'

11
examples/component/sandbox.config.json
View file

@ -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
View 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
View file

@ -0,0 +1,3 @@
{
"extends": "astro/tsconfigs/base"
}

13
pnpm-lock.yaml
View file

@ -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: