Melody with React/Inferno: Refs

Box.js

import { createComponent } from 'melody-component';
import template from './template.twig';

export default createComponent({
  componentDidMount() {
    this.refs.button.addEventListener('click', this.handleClick);
  },
  componentWillUnmount() {
    this.refs.button.removeEventListener('click', this.handleClick);
  }
  template: template
});

melody-component.js

import { createClass } from 'react';

export default function createComponent(definition) {
  const { template, ...rest } = definition;
  if (!template) throw new Error('Please provide a template.');
  return createClass({
    ...rest,
    render() {
      return template(this.props);
    }
  });
}

template.twig

<div class="box">
  <button ref="button">Click me</button>
</div>

template.twig.jsx

// Compiled twig template
export default function(props) {
  return (
    <div className="box">
      <button ref="button">Click me</button>
    </div>
  );
}