snabbdom-transform-jsx-props

♻ snabbdom-transform-jsx-props

Adds full prop syntax support for Snabbdom JSX

• 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.