@joakimbeng/es6x

NOTE: This is a fork of vasiliy-lector/es6x with these differences:

• "..." is needed to mimic object spread of attributes, i.e. jsx`<div ...${attrs}></div>` instead of jsx`<div ${attrs}></div>`
• this package supports dashes, underscores and $ in both tag names and attributes

Implementation of jsx features in pure javascript without the need to transpile.

Why do you need it?

The specification es2015 introduces a new feature called tagged template literals. Support of this feature now close to 100%. This standard allow for javascript expressions to be embedded within literal strings. This conception is very close to philosophy of jsx. And you can write code for react and other virtual dom frameworks using template literals instead of jsx. This library is very useful if you are not transpiling code in development environment. Excluding transpilation can speed up development and simplify debugging without dealing with source maps. The library is very tiny. Only 2kB minified and gzipped. The library support caching on the first execution. More information you can find in introduction article.

Install and usage

npm install es6x

Create file:

// file jsx.js
import jsx from 'es6x';
import React from 'react';
jsx.setOutputMethod(React.createElement);
export default jsx;

Inside any other file:

// file FormController.js
import {Component} from 'react';
import jsx from '../../jsx';
import Input from '../../input/Input';
import Form from '../../form/Form';

const value = 'some';
const props = {
  id: 'id1',
  style: {
    paddingLeft: 10
  }
};

export default class FormController extends Component {
  handleSubmit = () => {};

  render() {
    return jsx`<${Form} onSubmit=${this.handleSubmit}>
            <${Input}
                checked
                className='input'
                value=${value}
                ...${props}
            />
        </${Form}>`;
  }
}

The render method body is equal to this jsx code:

return (
  <Form onSubmit={this.handleSubmit}>
    <Input checked className="input" value={value} {...props} />
  </Form>
);

If you use hyperscript or any other virtual dom library:

// file jsx.js
import jsx from 'es6x';
import h from 'virtual-dom/h';
jsx.setOutputMethod(h);
export default jsx;