Interop w/ React

[tbranyen]

Some ideas around React and diffHTML:

export const Component = (props) => (
  <Diff innerHTML={html`
    <h1 class="html-attributes">Can even use React props! ${props.message}</h1>
  `} />
);

// Use in JSX.
<Component message="Cool" />

import React from 'react';
import { outerHTML, innerHTML, html, release } from 'diffhtml';

class Diff extends React.Component {
  applyHTMLToElement(node, nextProps) {
    const { innerHTML, outerHTML } = Object.assign({}, this.props, nextProps);

    if (node && innerHTML) {
      innerHTML(node, contents);
    }
    else if (node && outerHTML) {
      outerHTML(node, contents);
    }
    else if (!node) {
      release(this.node);
    }

    this.node = node;
  }

  componentWillReceiveProps(nextProps) {
    this.applyHTMLToElement(this.node, nextProps);
  }

  render() {
    return (
      <div ref={this.applyHTMLToElement} />
    );
  }
}

[tbranyen]

Better ideas are forthcoming.