string-dom

Create HTML strings using JSX (or functions).

About

string-dom is a function that creates an HTML string.

• It is made to work with JSX, but renders it to a string, instead of to DOM.
• With string-dom, JSX becomes an HTML templating language that can be used separately of React.

Install

$ npm i string-dom --save

Usage

import sd from 'string-dom'

/** @jsx sd */

// with JSX
// note the comment above, and see the link below
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#custom
document.body.innerHTML += (
  <div class="wrapper">
    <h1 class="heading" data-heading="data-heading">Heading Text</h1>
    <p class="heading-sub" data-subheading="data-subheading">Subheading Text</p>
    <p>An element without attributes.</p>
  </div>
)

// without JSX
document.body.innerHTML += (
  sd('div', { class: 'wrapper' },
    sd('h1', { class: 'heading', 'data-heading': 'data-heading' }, 'Heading Text'),
    sd('p', { class: 'heading-sub', 'data-subheading': 'data-subheading' }, 'Subheading Text'),
    sd('p', 'An element without attributes.')
  )
)

Both the above generate the following HTML (as a string), then add it to the body:

<div class="wrapper">
  <h1 class="heading" data-heading="data-heading">Heading Text</h1>
  <p class="heading-sub" data-subheading="data-subheading">Subheading Text</p>
  <p>An element without attributes.</p>
</div>

Prior Art

• ejsx
• hyperscript
• vhtml

Linting

License

MIT. © 2017 Michael Cavalea