chanters v1.0.1

Chanters

Chanters is a JavaScript library for creating browser supported re-usable web components.

Install via npm

npm install chanters

Usage

import Chanters from "chanters";
import { html } from "chanters/utils";

class CustomElement extends Chanters {
  static get properties() {
    return {
      hello: "world"
    };
  }
  
  static get template() {
    return html`
      <style>
        @import "path/to/cssfile";
      </style>
      <div class="footer">
        <label>{{hello}}</label>
        <input type="text" value="{{hello}}" />
      </div>
    `;
  }
}

customElements.define("custom-element", CustomElement);

Adding Events

import Chanters from "chanters";
import { html } from "chanters/utils";

class CustomElement extends Chanters {
  static get properties() {
    return {
      counter: 0
    };
  }
  
  handleClick() {
    this.counter++;
  }
  
  static get template() {
    return html`
      <style>
        @import "path/to/cssfile";
      </style>
      <div class="footer">
        <label>{{counter}}</label>
        <button on-click="{{handleClick}}">increment counter</button>
      </div>
    `;
  }
}

customElements.define("custom-element", CustomElement);

If one want to pass arguments to handle click function then use this syntax instead

<button on-click="{{handleClick(arg1, arg2)}}">increment counter</button>

Repeating templates

import Chanters from "chanters";
import { html } from "chanters/utils";

class CustomElement extends Chanters {
  static get properties() {
    return {
      arr: [1,2,3,4]
    };
  }
  
  static get template() {
    return html`
      <style>
        @import "path/to/cssfile";
      </style>
      <div class="footer">
        <template repeat items="arr" key="item">
            <label>{{item}}</label>
        </template>
      </div>
    `;
  }
}

customElements.define("custom-element", CustomElement);

If Condition

import Chanters from "chanters";
import { html } from "chanters/utils";

class CustomElement extends Chanters {
  static get properties() {
    return {
      counter:0
    };
  }
  
  
  handleClick() {
    this.counter++;
  }
  
  static get template() {
    return html`
      <style>
        @import "path/to/cssfile";
      </style>
      <div class="footer">
        counter = {{counter}}
        <button on-click="{{handleClick}}">increment counter</button>
        <template if="{{counter}} === 4">
            <label>counter value is 4</label>
        </template>
      </div>
    `;
  }
}

customElements.define("custom-element", CustomElement);

Slot:

is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

import Chanters from "chanters";
import { html } from "chanters/utils";

class CustomElement extends Chanters {
  static get properties() {
    return {};
  }
  
 
  
  static get template() {
    return html`
      <style>
        @import "path/to/cssfile";
      </style>
      <div class="footer">
        <slot name="ex-xyz"></slot>
      </div>
    `;
  }
}

customElements.define("custom-element", CustomElement);

<custom-element>
    <label slot="ex-xyz">slot usage</label>
</custom-element>