JSX.js

'use strict';

import { Component, ComponentRegistry } from 'metal-component';
import IncrementalDomRenderer from 'metal-incremental-dom';

export default EnhanceJSX = ComposedComponent => {
    JSX.register(ComposedComponent);
    
    class EnhancedComponent extends Component {
      render() {
        <ComposedComponent />
      }
    };
    
    EnhancedComponent.STATE = ComposedComponent.STATE; // or just Object.assign(...)?
    
    return EnhancedComponent;
  }
};

/**
 * Allows components to use JSX templates to render their contents. Usage
 * example:
 *
 * class MyComp extends Component {
 *   jsx() {
 *     <div class="my-comp">Hello World</div>;
 *   }
 * }
 * JSX.register(MyComp);
 */
class JSX extends IncrementalDomRenderer {
	/**
	 * @inheritDoc
	 */
	constructor(comp) {
		super(comp);
		this.fn_ = comp.render && comp.render.bind(comp);
	}

	/**
	 * Overrides the default method from `IncrementalDomRenderer` so the
	 * component's JSX template can be used for rendering.
	 * @override
	 */
	renderIncDom() {
		if (this.fn_) {
			this.fn_();
		} else {
			super.renderIncDom();
		}
	}

	/**
	 * Registers the given component constructor to use JSX templates.
	 * @param {!Function} componentCtor
	 */
	static register(componentCtor) {
		componentCtor.RENDERER = JSX;
		ComponentRegistry.register(componentCtor);
	}
}

export JSX;

Modal.js

'use strict';

import EnhanceJSX from 'metal-jsx'; // Not married to the name of this...

class Modal  {
	hide() {
		this.visible = false;
	}

	render() {
		var buttons = this.footerButtons.map((button) => {
			return <button type="button" class="btn btn-primary">{button.label}</button>
		});

		return <div class="modal">
			<div class="modal-dialog">
				<div class="modal-content">
					<header class="modal-header">
						<button type="button" class="close" data-onclick={this.hide.bind(this)} aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title">{this.header}</h4>
					</header>
					<section class="modal-body">{this.body}</section>
					<footer class="modal-footer">{buttons}</footer>
				</div>
			</div>
		</div>;
	}
}

Modal.STATE = {
	body: {
		value: 'Some Body'
	},
	footerButtons: {
		value: [
			{
				label: 'OK'
			}
		]
	},
	header: {
		value: 'Some Header'
	}
};

export default EnhanceJSX(Modal);