diff options
Diffstat (limited to 'examples/component')
| -rw-r--r-- | examples/component/.gitignore | 24 | ||||
| -rw-r--r-- | examples/component/README.md | 35 | ||||
| -rw-r--r-- | examples/component/index.ts | 6 | ||||
| -rw-r--r-- | examples/component/package.json | 23 | ||||
| -rw-r--r-- | examples/component/src/MyComponent.astro | 8 | ||||
| -rw-r--r-- | examples/component/tsconfig.json | 8 |
6 files changed, 104 insertions, 0 deletions
diff --git a/examples/component/.gitignore b/examples/component/.gitignore new file mode 100644 index 000000000..16d54bb13 --- /dev/null +++ b/examples/component/.gitignore @@ -0,0 +1,24 @@ +# build output +dist/ +# generated types +.astro/ + +# 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 + +# jetbrains setting folder +.idea/ diff --git a/examples/component/README.md b/examples/component/README.md new file mode 100644 index 000000000..f51958529 --- /dev/null +++ b/examples/component/README.md @@ -0,0 +1,35 @@ +# 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. + +```sh +npm create astro@latest -- --template component +``` + +[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages) +[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages) +[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json) + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +```text +/ +├── index.ts +├── src +│ └── MyComponent.astro +├── tsconfig.json +├── package.json +``` + +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 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/index.ts b/examples/component/index.ts new file mode 100644 index 000000000..0e2e94fb2 --- /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 new file mode 100644 index 000000000..f00586e00 --- /dev/null +++ b/examples/component/package.json @@ -0,0 +1,23 @@ +{ + "name": "@example/component", + "private": true, + "version": "0.0.1", + "type": "module", + "exports": { + ".": "./index.ts" + }, + "files": [ + "src", + "index.ts" + ], + "keywords": [ + "astro-component" + ], + "scripts": {}, + "devDependencies": { + "astro": "^5.2.5" + }, + "peerDependencies": { + "astro": "^4.0.0 || ^5.0.0" + } +} diff --git a/examples/component/src/MyComponent.astro b/examples/component/src/MyComponent.astro new file mode 100644 index 000000000..2a3ebcea5 --- /dev/null +++ b/examples/component/src/MyComponent.astro @@ -0,0 +1,8 @@ +--- +// Write your component code in this file! +interface Props { + prefix?: string; +} +--- + +<div>{Astro.props.prefix} My special component</div> diff --git a/examples/component/tsconfig.json b/examples/component/tsconfig.json new file mode 100644 index 000000000..f85ec795b --- /dev/null +++ b/examples/component/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"], + "compilerOptions": { + "jsx": "preserve" + } +} |