diffHTML Web Component

web-component.js

import { html } from 'diffhtml';
import { WebComponent } from 'diffhtml-components';

class CocktailEditor extends WebComponent(['recipe']) {
  render() {
    return html`${this.state.markup}`;
  }

  constructor() {
    super();
    this.fetchRecipe(this.props.recipe);
  }

  componentWillReceiveProps(nextProps) {
    this.fetchRecipe(nextProps.recipe);
  }

  fetchRecipe(recipe) {
    return CocktailEditor.importRecipe(recipe).then(ev => {
      this.setState({ markup: html(ev.target.response) });
    });
  }

  static importRecipe(href) {
    return new Promise((onload, onerror) => {
      const xhr = Object.assign(new XMLHttpRequest(), { onload, onerror });
      xhr.open('GET', href);
      xhr.send();
    });
  }
}

customElements.define('cocktail-editor', CocktailEditor);