React components?

How do you handle React components (=function calls)? You could either have a registry for component names or do this:

class EchoComponent {
    ···
}
let comp = jsx`<${EchoComponent} />`;
React.renderComponent(comp, document.body);

[tbranyen]

@rauschma inspired by your comment: https://github.com/tbranyen/diffhtml/tree/master/packages/diffhtml-components#examples

[niksy]

For anyone looking for a “workaround” for this, I’ve managed to create a proof of concept. Basically, it uses function which returns another function in which we check first letter of tag element. If it’s uppercase, we treat it as component and evaluate that string to variable declaration.

This obviously only works if method is in scope and eval has access to defined variable. Maybe it could be made to work regardless of scope? It seems like this could be properly processed with hyperxify - if first letter is uppercased, don’t stringify tag name and just return original value.

Edit: it seems like proposal on processing has already been implemented in fork of hyperxify; maybe this could be somehow merged to original project?

function r ( h ) {
	return function ( tagName, attrs, children ) {
		if ( tagName[0].toLowerCase() !== tagName[0] ) {
			tagName = eval(tagName);
		}
		return h(tagName, attrs, children);
	}
}

const React = require('react');
const ReactDOM = require('react-dom');
const hyperx = require('hyperx');
const hx = hyperx(r(React.createElement));
const Slider = require('react-slider');

module.exports = React.createClass({
	render() {
		return hx`
			<div className='controls__toolbar__volume__slider'>
				<Slider value="${this.props.volume} withBars="${true}" />
			</div>`
		;
	}
});

Or example of a more complex implementation:

function r ( h ) {
	return function ( tagName, attrs, children ) {
		if ( tagName[0].toLowerCase() !== tagName[0] ) {
			tagName = eval(tagName);
		}
		return h(tagName, attrs, children);
	}
}

const React = require('react');
const ReactDOM = require('react-dom');
const hyperx = require('hyperx');
const hx = hyperx(r(React.createElement));

const Wrap = React.createClass({
	render: function () {
		return hx`<b>${this.props.children}</b>`;
	}
});

const Input = ( props ) => {
	return hx`<input type="text" defaultValue="${props.value}" class="${props.value}" onChange=${props.onChange} />`;
};

const App = React.createClass({
	getInitialState: function () {
		return {
			text: ''
		};
	},
	render: function () {
		return hx`
			<div>
				<span class="bar">
					<Wrap>${['foo','bar'].map(( value, index ) => {
						return hx`<Input value=${value} key="${index}" onChange=${this.handleChange} />`;
					})}
					</Wrap>
				</span>
				<b>${this.state.text}</b>
			</div>
		`;
	},
	handleChange: function ( ev ) {
		this.setState({
			text: ev.target.value
		});
	}
});
  
ReactDOM.render(React.createElement(App), document.querySelector('body'));