• Install
• Usage
• Supported props
  • Module shorthands
  • Aliased shorthands
• Why
• Performance

Install

NPM

$ npm i snabbdom snabbdom-transform-jsx-props

Usage

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>
)

API

Any prop can be used at the top level.

Module shorthands

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.

Aliased shorthands

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} |

Why

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.

Performance

This package uses jest-bench for comparing implementations.