chore: update component template (#4540)

Co-authored-by: Nate Moore <nate@astro.build>

examples/component/.gitignore

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

examples/component/.npmrc

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

examples/component/.stackblitzrc

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

examples/component/README.md

@@ -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/
+├── 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
-
 All commands are run from the root of the project, from a terminal:
 
 | 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).

examples/component/demo/astro.config.mjs

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

examples/component/demo/package.json

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

examples/component/demo/public/favicon.svg

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

examples/component/demo/src/pages/index.astro

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

examples/component/index.ts

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

examples/component/package.json

@@ -1,13 +1,22 @@
 {
   "name": "@example/component",
   "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"
   }
 }

examples/component/packages/my-component/Button.astro

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

examples/component/packages/my-component/Heading.astro

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

examples/component/packages/my-component/README.md

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

examples/component/packages/my-component/index.js

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

examples/component/packages/my-component/package.json

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

examples/component/pnpm-workspace.yaml

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

examples/component/sandbox.config.json

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

examples/component/src/MyComponent.astro

@@ -0,0 +1,8 @@
+---
+// Write your component code in this file!
+export interface Props {
+	prefix?: string
+}
+---
+
+<div>{Astro.props.prefix} My special component</div>

examples/component/tsconfig.json

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

pnpm-lock.yaml

@@ -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
-      astro: link:../../../packages/astro
-
-  examples/component/packages/my-component:
-    specifiers: {}
 
   examples/docs:
     specifiers: