generator-custom-element-ts

1.2.4 • Public • Published

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 (Use arrow keys)
❯ 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

Package Sidebar

Install

npm i generator-custom-element-ts

Weekly Downloads

3

Version

1.2.4

License

MIT

Unpacked Size

2.47 kB

Total Files

2

Last publish

Collaborators

  • bgoodman