npm:nojsx | Skypack

README

nojsx

Write JSX like tags with valid javascript using tagged template literals.

This is a protest module against JSX. JSX breaks javascript. This does not.

Install

npm install --save nojsx

Usage

import html from 'nojsx';
import { PureComponent } from 'react';
import { render } from 'react-dom';

function AnotherThing() {
  return html`<div style="margin: 400px;">Very Nice</div>`;
}

class App extends PureComponent {
  render() {
    return html`<div>Hello. <AnotherThing></AnotherThing></div>`;
  }
}

// on window load, render
render( // eslint-disable-line
  html`<App></App>`, // eslint-disable-line
  document.getElementById('container'), // eslint-disable-line
);

Babel Transpiling Plugin

A tiny bit of JS transpiling is needed to have a seamless experience.

npm install --save babel-plugin-transform-nojsx

.babelrc

{
  "presets": [
    ...
  ],
  "plugins": [
    ...
    "transform-nojsx"
  ]
}

Before Transpiling

html`<div>Hello. <AnotherThing></AnotherThing></div>`

After Transpiling

html`<div>Hello. <AnotherThing higherComponent=${AnotherThing}></AnotherThing></div>`

It simply allows for upper-context component function / object reference.

Notes

Not tested
Not production ready
Safer transpiling to come
Try for small projects and apps
All feedback is welcome

License

MIT.

Usage no npm install needed!