A minimalist composable component inspired by React

npm install hxoht/tonic

const Tonic = require('tonic')

class ChildComponent extends Tonic {
  //
  // A constructor is not required.
  //
  constructor (props) {
    super(props)

    //
    // One way of adding styles (check the render function
    // for how it's used). Since it's just a string it could
    // be read-in from a separate file at compile-time.
    //
    this.stylesheet = `
      <style>
        div {
          display: inline-block;
          border: 1px dotted #666;
          height: 100px;
          width: 100px;
          line-height: 90px;
        }
      </style>
    `
  }

  //
  // You can listen to any dom event by creating a method with
  // the corresponding name. The method will receive the plain
  // old Javascript event object.
  //
  mouseover (e) {
    e.target.style.backgroundColor = someRandomColor
  }

  mouseout (e) {
    e.target.style.backgroundColor = '#fff'
  }

  //
  // The render function should return a string. This could
  // come from an external file or it can be a string of html.
  //
  render () {
    return `
      <div class="child">
        Child ${this.props.value}
      </div>
    `
  }
}