Skip to content

Latest commit

 

History

History
67 lines (49 loc) · 1.94 KB

README.md

File metadata and controls

67 lines (49 loc) · 1.94 KB

hyposcript

npm version test coverage npm bundle size

Hyper minimal hyperscript for server rendering.

npm i hyposcript

Usage

Hyposcript has essentially the same API as hyperscript or React.createElement, so it should feel familiar.

The difference is: no DOM, only strings.

const { h } = require('hyposcript')

h('button', { class: 'btn' }, 'Click me!')

// => <button class="btn">Click me!</button>

JSX

To use with JSX you'll need to transpile or use a runtime.

For example, if you're using babel, your config should probably look something link this:

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "h",
        "pragmaFrag": "h"
      }
    ]
  ]
}

Benchmarks

Since hyposcript is basically just concatenating strings, benchmark comparisons with hyperscript or react are not really fair. And though vhtml and hyposcript are essentially the same, hyposcript does not escape HTML strings for you (be safe out there). Even so, there's a simple benchmark here for general reference. These were run on an 2.4 GHz 8-Core Intel Core i9 MacBook Pro.

hyperscript      x 27,932 ops/sec ±2.08% (89 runs sampled)
react            x 43,261 ops/sec ±0.63% (94 runs sampled)
vhtml            x 168,688 ops/sec ±0.67% (91 runs sampled)
hyposcript       x 444,603 ops/sec ±1.07% (89 runs sampled)

License

MIT License © Sure Thing