Skip to content
/ xhtm Public

XHTM − eXtended Hyperscript Tagged Markup

License

Notifications You must be signed in to change notification settings

dy/xhtm

Repository files navigation

XHTM − eXtended HTM Tagged Markup

size version stability

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.
  • Interpolated props are exposed as arrays html`<a class="a ${b} c"/>`h('a', { class: ['a ', b, ' c'] }).
  • 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.
  • No cache.

Installation & Usage

NPM

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

Generally HTM is a better choice, since it has better performance and enables caching.
But if your app doesn't render components frequently or you need HTML support, then XHTM can be a good choice.
Originally that was just minimal HTML parser implementation (~60LOC), best from 10 variants in R&D branches.

🕉️