grim-jsx-compiler v0.2.6

Grim-JSX

Compiling JSX to produce grim static templates

Introduction

Ever wanted to use JSX, but not a framework or library? Well, Grim-JSX is a compiler that turns JSX into static HTML.

Static HTML

This code:

const title = <h1>Hello, Grim!</h1>;

Will be compiled to:

const title = template(`<h1>Hello, Grim!</h1>`);

More Flexible

But sometimes just the static HTML is not enough.

Here is an example of an attribute that is not a just string. This code:

import styles from "./styles.module.css";

const title = <h1 class={styles.title}>Hello, Grim!</h1>;

Will be compiled to:

import styles from "./styles.module.css";

const title = template(`<h1 class="${styles.title}">Hello, Grim!</h1>`);

Refs

Setting attributes is not enough too. What if you want to get a reference to an element? That's where refs come in.

So this code:

let button;

const article = (
  <article>
    <h2>Are cats real?</h2>
    <p>Not, they're not.</p>
    <button type="button" ref={button}>
      You're serious?
    </button>
  </article>
);

Will be compiled to:

const article = (() => {
  const __$tmpl = template(
    `<article><h2>Are cats real?</h2><p>Not, they're not.</p><button type="button">You're serious?</button></article>`
  );

  button = __$tmpl.firstElementChild.nextElementSibling.nextElementSibling;
  return __$tmpl;
})();

So you can use the button reference in your code.