kocisov / crab

import { Component, defineComponents, render } from '@kocisov/crab'

export default class Header extends Component {
  // or Polymer like => static get is()
  static get componentName() {
    return 'header-component'
  }

  state = {
    id: 'Some string...',
  }

  changeState() {
    this.setState({
      id: uuid.v4(),
    })
  }

  render() {
    return `
      <div class="flex-right">
        Hello ${this.state.id}
      </li>
    `
  }
}

defineComponents([Header, SmallButon], { crabug: true })

render(
  `
    <header-component onClick="changeState"></header-component>
  `,
  `
    body {
      margin: 0;
    }
  `,
  document.getElementById('root'),
)

// webpack with babel
import { Component, defineComponents, render } from '@kocisov/crab'

// ...

render(
  `
    <view-layout></view-layout>
  `,
  document.getElementById('root'),
)