string-dom

Create HTML strings using JSX (or functions).

Install

$ npm i string-dom --save

About

string-dom is a function that creates an HTML string. It is meant to work with JSX, but does not create DOM (regular or virtual). It effectively turns JSX into an HTML templating language that can be used separately of React.

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

• hyperscript
• vhtml

Linting

License

MIT. © 2017 Michael Cavalea