59 lines
2.3 KiB
Markdown
59 lines
2.3 KiB
Markdown
# create-wcb
|
|
|
|
> [!Note] Work in progress CLI for wcb development.
|
|
> Currently, it scaffolds a new web component project
|
|
> with our CEM Analyzer Plugin already configured
|
|
|
|
Scaffold a publishable [web-component-base](https://webcomponent.io) (wcb)
|
|
custom element:
|
|
|
|
```sh
|
|
npm create wcb@latest
|
|
# or: npm create wcb@latest my-button
|
|
# or: pnpm create wcb / yarn create wcb / bun create wcb
|
|
```
|
|
|
|
## What you get
|
|
|
|
- A custom element built on wcb's `static props` convention, written in
|
|
TypeScript — the class, tag, and file names are stamped from your project
|
|
name (`my-button` → `MyButton` / `<my-button>`), so there are no rename-me
|
|
TODOs
|
|
- A Vite setup patterned on the
|
|
[`ayo-run/web-component`](https://github.com/ayo-run/web-component)
|
|
template: `npm run dev` serves the demo page, `npm run build:lib` produces
|
|
ESM + UMD bundles and `.d.ts` types in `dist/`, with `web-component-base`
|
|
external as a peerDependency
|
|
- `custom-elements.json` generation set up end to end:
|
|
- `custom-elements-manifest.config.mjs` configured with
|
|
[`web-component-base/cem-plugin`](https://webcomponent.io/cem-plugin/), so
|
|
every `static props` key becomes a typed attribute + field in the manifest
|
|
- an `analyze` script (`npm run analyze`) running
|
|
`@custom-elements-manifest/analyzer`
|
|
- the `customElements` field set in `package.json`, which is how Storybook,
|
|
editors, and other tooling discover the manifest
|
|
- the manifest ships inside the published package: `prepack` rebuilds
|
|
`dist/` and regenerates `custom-elements.json`, and both are in `files`
|
|
|
|
The manifest is one shared `custom-elements.json` per package — the file every
|
|
tool expects — regenerated on demand and gitignored in the repo.
|
|
|
|
## Options
|
|
|
|
```sh
|
|
npm create wcb@latest [directory]
|
|
```
|
|
|
|
Prompts for a directory when omitted; `.` scaffolds into the current (empty)
|
|
directory. Refuses to write into a non-empty directory. A hyphen-less name
|
|
gets an `-element` suffix on the tag (`button` → `<button-element>`), since
|
|
custom element tag names require a hyphen.
|
|
|
|
Prefer starting from GitHub instead of the terminal? The
|
|
[`ayo-run/web-component`](https://github.com/ayo-run/web-component) template
|
|
repository serves the same purpose via "Use this template".
|
|
|
|
---
|
|
|
|
Part of the [wcb](https://github.com/ayo-run/wcb) project · MIT ·
|
|
[Ayo Ayco](https://ayo.ayco.io)
|