Adds full prop syntax support for Snabbdom JSX
NPM
$ npm i snabbdom snabbdom-transform-jsx-props
Import the transform
function from this package and use it on Snabbdom JSX.
The below JSX example results in an identical virtual node structure.
Before:
import { jsx } from "snabbdom"
const node = (
<div props={{ className: "my-component" }} hook={{ insert: fn }}>
<h1 dataset={{ fooHeading: true }}>Hello world</h1>
<p attrs={{ "aria-hidden": "true" }}>And good day</p>
<a
attrs={{ href: "#", style: "color: blue" }}
props={{ tabIndex: 0 }}
on={{ click: fn }}
>
Try me!
</a>
</div>
)
After:
import { jsx } from "snabbdom"
import { transform } from "snabbdom-transform-jsx-props"
const node = transform(
<div className="my-component" hook-insert={fn}>
<h1 data-foo-heading={true}>Hello world</h1>
<p aria-hidden="true">And good day</p>
<a href="#" attr-style="color: blue" tabIndex="0" on-click={fn}></a>
</div>
)
Any prop can be used at the top level.
Declare a Snabbdom module prop without using the object syntax.
Prop pattern | Module | Example |
---|---|---|
hook- |
Hooks | hook-insert={fn} |
on- |
Event handlers | on-click={fn} |
data- |
Dataset | data-foo-bar={value} |
attr- |
Attributes | attr-role={value} |
prop- |
Properties | prop-dir={value} |
Worth noting is that you can set any prop, HTML attribute, or dom property to either the attributes or properties module by prefixing the name with attr-
and prop-
, respectively.
These are alternate names for common props.
Prop pattern | Alias for | Example |
---|---|---|
className |
className={value} |
|
class-name |
className |
class-name={value} |
tabIndex |
tabIndex={value} |
|
tabindex |
tabIndex |
tabIndex={value} |
tab-index |
tabIndex |
tab-index={value} |
By default, Snabbdom jsx
pragma won't apply any prop unless you explicitly declare it in a module object.
While functional, this module-driven prop signature is awkward for JSX as most developers expect props to be written somewhat like HTML.
This package uses jest-bench for comparing implementations.