create-wc

0.0.2 • Public • Published

create-wc

A super simple code generator for web components.

Usage

Supply the HTML API for the web component in quotes:

npm init wc "<my-component foo='bar'>"

or

npx create-wc "<my-component hi='mom'>"

Multiple arguments can be passed to generate multiple components:

npm init wc "<comp-one>" "<comp-two>"

Templates

The template can be changed by specifying the --lib flag with one of the following options. The options will persist, so you only need to supply it once.

To be implemented:

  • [ ] Vanilla JavaScript
  • [ ] Vanilla TypeScript
  • [ ] LitElement JavaScript
  • [x] LitElement TypeScript: --lib=lit.ts
  • [ ] Stencil JavaScript
  • [ ] Stencil TypeScript

Ex: npm init wc "<hello-world foo='bar'>" --lib=lit.ts

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('hello-world')
export class HelloWorld extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  foo = 'bar';

  render() {
    return html`<p>Hello, world!</p>`;
  }
}

Package Sidebar

Install

npm i create-wc

Weekly Downloads

0

Version

0.0.2

License

MIT

Unpacked Size

6.14 kB

Total Files

7

Last publish

Collaborators

  • willmartian