diff --git a/examples/component/.gitignore b/examples/component/.gitignore deleted file mode 100644 index 02f6e50b49..0000000000 --- a/examples/component/.gitignore +++ /dev/null @@ -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 diff --git a/examples/component/.npmrc b/examples/component/.npmrc deleted file mode 100644 index ef83021af3..0000000000 --- a/examples/component/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ -# Expose Astro dependencies for `pnpm` users -shamefully-hoist=true diff --git a/examples/component/.stackblitzrc b/examples/component/.stackblitzrc deleted file mode 100644 index 43798ecff8..0000000000 --- a/examples/component/.stackblitzrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "startCommand": "npm start", - "env": { - "ENABLE_CJS_IMPORTS": true - } -} \ No newline at end of file diff --git a/examples/component/README.md b/examples/component/README.md index 8cd73e343e..2023a749ed 100644 --- a/examples/component/README.md +++ b/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/ -│ ├── 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) diff --git a/examples/component/demo/astro.config.mjs b/examples/component/demo/astro.config.mjs deleted file mode 100644 index 2d73a28076..0000000000 --- a/examples/component/demo/astro.config.mjs +++ /dev/null @@ -1,10 +0,0 @@ -import { defineConfig } from 'astro/config'; - -// https://astro.build/config -export default defineConfig({ - vite: { - ssr: { - noExternal: ['@example/my-component'], - }, - }, -}); diff --git a/examples/component/demo/package.json b/examples/component/demo/package.json deleted file mode 100644 index 02a897a7a6..0000000000 --- a/examples/component/demo/package.json +++ /dev/null @@ -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" - } -} diff --git a/examples/component/demo/public/favicon.svg b/examples/component/demo/public/favicon.svg deleted file mode 100644 index 0f39062978..0000000000 --- a/examples/component/demo/public/favicon.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - diff --git a/examples/component/demo/src/pages/index.astro b/examples/component/demo/src/pages/index.astro deleted file mode 100644 index f0704e56b6..0000000000 --- a/examples/component/demo/src/pages/index.astro +++ /dev/null @@ -1,25 +0,0 @@ ---- -import * as Component from '@example/my-component'; ---- - - - - - - - Welcome to Astro - - - - - Welcome to Astro - Plain Button - - diff --git a/examples/component/index.ts b/examples/component/index.ts new file mode 100644 index 0000000000..0e2e94fb2f --- /dev/null +++ b/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; diff --git a/examples/component/package.json b/examples/component/package.json index 96d1b5c5c3..599282c35f 100644 --- a/examples/component/package.json +++ b/examples/component/package.json @@ -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" } } diff --git a/examples/component/packages/my-component/Button.astro b/examples/component/packages/my-component/Button.astro deleted file mode 100644 index 87943fa280..0000000000 --- a/examples/component/packages/my-component/Button.astro +++ /dev/null @@ -1,13 +0,0 @@ ---- -export interface Props extends Record { - type?: string; -} - -const { type, ...props } = { - ...Astro.props, -}; - -props.type = type || 'button'; ---- - - diff --git a/examples/component/packages/my-component/Heading.astro b/examples/component/packages/my-component/Heading.astro deleted file mode 100644 index 75e4aa4e00..0000000000 --- a/examples/component/packages/my-component/Heading.astro +++ /dev/null @@ -1,15 +0,0 @@ ---- -export interface Props extends Record { - level?: number | string; - role?: string; -} - -const { level, role, ...props } = { - ...Astro.props, -}; - -props.role = role || 'heading'; -props['aria-level'] = level || '1'; ---- - - diff --git a/examples/component/packages/my-component/README.md b/examples/component/packages/my-component/README.md deleted file mode 100644 index 41a53a6f05..0000000000 --- a/examples/component/packages/my-component/README.md +++ /dev/null @@ -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 ` -``` - -### Heading - -The **Heading** component generates an `` 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' ---- -Heading -Subheading -``` - -```html - -Plain Button -Subheading -``` diff --git a/examples/component/packages/my-component/index.js b/examples/component/packages/my-component/index.js deleted file mode 100644 index 603a81a962..0000000000 --- a/examples/component/packages/my-component/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as Button } from './Button.astro'; -export { default as Heading } from './Heading.astro'; diff --git a/examples/component/packages/my-component/package.json b/examples/component/packages/my-component/package.json deleted file mode 100644 index 47212b5583..0000000000 --- a/examples/component/packages/my-component/package.json +++ /dev/null @@ -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" - ] -} diff --git a/examples/component/pnpm-workspace.yaml b/examples/component/pnpm-workspace.yaml deleted file mode 100644 index 22fd6807ea..0000000000 --- a/examples/component/pnpm-workspace.yaml +++ /dev/null @@ -1,3 +0,0 @@ -packages: - - 'packages/**/*' - - 'demo' diff --git a/examples/component/sandbox.config.json b/examples/component/sandbox.config.json deleted file mode 100644 index 9178af77d7..0000000000 --- a/examples/component/sandbox.config.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "infiniteLoopProtection": true, - "hardReloadOnChange": false, - "view": "browser", - "template": "node", - "container": { - "port": 3000, - "startScript": "start", - "node": "14" - } -} diff --git a/examples/component/src/MyComponent.astro b/examples/component/src/MyComponent.astro new file mode 100644 index 0000000000..96f9ecddac --- /dev/null +++ b/examples/component/src/MyComponent.astro @@ -0,0 +1,8 @@ +--- +// Write your component code in this file! +export interface Props { + prefix?: string +} +--- + +
{Astro.props.prefix} My special component
diff --git a/examples/component/tsconfig.json b/examples/component/tsconfig.json new file mode 100644 index 0000000000..d78f81ec4e --- /dev/null +++ b/examples/component/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "astro/tsconfigs/base" +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f2e7f3f05a..349a731dc8 100644 --- a/pnpm-lock.yaml +++ b/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 - - examples/component/packages/my-component: - specifiers: {} + astro: link:../../packages/astro examples/docs: specifiers: