XHTM − eXtended HTM Tagged Markup

XHTM is alternative implementation of HTM without HTM-specific limitations. Low-level machinery is rejected in favor of readability and better HTML support.

Differences from HTM

• Self-closing tags support htm`<input><br>` → [h('input'), h('br')].
• HTML directives <!doctype>, <?xml?> etc. support #91.
• Optionally closed tags support <p>foo<p>bar → <p>foo</p><p>bar</p> #91.
• Multi-part props join to string, falsy fields turn empty html`<a class="a ${0} ${false}"/>` → h('a', { class: 'a 0 ' }); single-field values stay raw html`<a items=${[1]}/>` → h('a', { items: [1] }).
• Calculated tag names #109 support.
• Ignoring null-like arguments (customizable) #129.
• Spaces formatting closer to HTML; elements with preserved formatting (#23).
• No integrations exported, no babel compilers.

Installation & Usage

npm i xhtm

xhtm is by default fully compatible with htm and can be used as drop-in replacement.

import htm from 'xhtm'
import { render, h } from 'preact'

html = htm.bind(h)

render(html`
  <h1>Hello World!</h1>
  <p>Some paragraph<br>
  <p>Another paragraph
`, document.getElementById('app'))

For htm manual, refer to htm docs.

Justification

XHTM caches parsed templates: repeated renders are faster than HTM, first-time parse is slower. HTM is smaller; XHTM supports real HTML (self-closing, optional-close tags, directives).
Originally that was just minimal HTML parser implementation (~60LOC), best from 10 variants in R&D branches.

🕉️