@aaronshaf/totes

React-like web components. Powered by lit-html.

Usage no npm install needed!

<script type="module">
  import aaronshafTotes from 'https://cdn.skypack.dev/@aaronshaf/totes';
</script>

README

totes

React-like web components. Powered by lit-html.

Supports:

  • setState
  • render
  • componentDidMount
  • shouldComponentUpdate
  • getSnapshotBeforeUpdate
  • component[Did]Unmount
  • componentDidUpdate
  • getDerivedStateFromProps
  • this.props.children

Quick start (copy and paste)

<script type="module">
  import { html, Component } from "https://unpkg.com/@aaronshaf/totes@1/index.js";

  class HelloWorld extends Component {
    render() {
      return html`<div>Hello, ${this.props.name}</div>`;
    }
  }

  customElements.define("hello-world", HelloWorld);
</script>

<hello-world name="Aaron"></hello-world>

That's it. No build steps.️ 🎵

Example: setState and event handlers

export default class BasicExample extends Component {
  static get observedAttributes() {
    return ["message"];
  }

  constructor() {
    super();
    this.state = {
      name: "Aaron",
      toggled: false
    };
  }

  handleInput(event) {
    this.setState({ name: event.target.value || "Aaron" });
  }

  handleClick() {
    this.setState({ toggled: this.state.toggled === false });
  }

  render() {
    return html`<div>
      <div>
        <input
          type="text"
          value="Aaron"
          @input=${this.handleInput}
        />
      </div>

      <p>${this.props.message} ${this.state.name}</p>

      <button @click=${this.handleClick}>
        ${this.state.toggled ? "On" : "Off"}
      </button>
    </div>`;
  }
}

customElements.define("basic-example", BasicExample);
<basic-example message="Hello"></basic-example>

Install from npm

yarn add @aaronshaf/totes --prod

Try it on Glitch

totes-example

Supported browsers

  • Chrome (without polyfill)
  • Firefox
  • Safari
  • Edge

Custom elements / Shadow DOM polyfill

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

Dev

git clone https://github.com/aaronshaf/totes.git

yarn global add serve

serve

See also