@aaronshaf/totes

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

• html-router - drop-in router
• dem - download ECMAScript modules