generator-custom-element-ts
Start a new custom element using Typescript, extending HTMLElement
.
- Define a Typescript class extending HTMLElement.
- Optionally import scss styles or inline within HTML template.
- es module build.
- Basic dev server (no live reload)
Install
Yeoman is a pre-requisite so make sure its installed first.
npm i -g yo
Install the generator
npm i -g generator-custom-element-ts
Usage
$ yo custom-element-ts # This will set the element's tag name and the name of the project's root directory. ? Name of element: new-element ? Select package manager ❯ npm yarn
Name is verified using validate-element-name
? Name of element: New-Element>> Custom element names must not contain uppercase ASCII characters. ? Name of element: new>> Custom element names must contain a hyphen. Example: unicorn-cake
What You Get
Template
.├── README.md├── index.html├── package.json├── rollup.config.js├── src│ ├── index.ts│ ├── index.scss│ └── scss.d.ts└── tsconfig.json
Scripts
Run name
with either npm run
or yarn
.
name | command |
---|---|
build |
./node_modules/.bin/rollup -c ./rollup.config.js |
start |
./node_modules/.bin/serve |