Component

Crab's essential ES2015 class. Every class which is a crab's component must extend this class.

Component has React like (Work in Progress) API.

class NewComponent extends Component {
  // Polymer way of registering Components
  static get is() {
    return 'new-component'
  }

  constructor() {
    super()

    this.state = {
      value: 1
    }
  }

  // or stage-0 transform
  state = {
    value: 1
  }

  // consider reRendering
  // if returns true, component will reRender, otherwise no reRender will happen
  shouldComponentUpdate(oldState, oldAttributes) {
    return true;
  }

  componentDidMount() {
    console.log('Component mounted')

    this.reRender() // makes component rerender
    this.forceRender() // forces component reRender if shouldComponentUpdate returns false
  }

  componentDidUnmount() {
    console.log('Component unmounted')
  }

  // can be renamed to anything, you just need to specify that name in markup click="name"
  handleClick() {
    this.setState({
      value: 1
    })

    // or

    this.setState(state => ({
      value: state.value + 1
    }))
  }

  render() {
    return `
      Component content which is rendered into Component's Shadow DOM
    `
  }
}