https://github.com/willmartian/create-wc

A super simple code generator for web components.
https://github.com/willmartian/create-wc

cli codegen customelements generator webcomponents

Last synced: 3 days ago
JSON representation

A super simple code generator for web components.

• Host: GitHub
• URL: https://github.com/willmartian/create-wc
• Owner: willmartian
• Created: 2022-08-24T21:55:27.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-25T02:32:01.000Z (about 2 years ago)
• Last Synced: 2024-10-13T00:14:34.887Z (about 1 month ago)
• Topics: cli, codegen, customelements, generator, webcomponents
• Language: JavaScript
• Homepage:
• Size: 15.6 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# create-wc

A super simple code generator for web components.

## Usage

Supply the HTML API for the web component in quotes: 

`npm init wc ""`

or

`npx create-wc ""`

Multiple arguments can be passed to generate multiple components:

`npm init wc "" ""`

## 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 "" --lib=lit.ts`

```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`
Hello, world!
`;

  }

}


```