will yield a virtual node with { sel: 'div#foo.bar.baz' }

$3

An attribute starting with aria- will be passed to the attributes module.

`tsx

// { attrs: { 'aria-label': 'Send' } }
`

$3

An attribute starting with data- will be passed to the dataset module. Note that the data- prefix will be removed and dashes will be converted to camel case.

`tsx



// { dataset: { fooBar: 'baz' } }
`

$3

The is attribute can be used when you want to instantiate your customized built-in elements.

`tsx



// { is: 'custom-element' }
`

$3

An attribute starting with on will passed to the event listeners module.

`tsx
onclick={(e) => {
console.log(e);
}}
/>
// { on: { click: f } }
`

$3

The list, the role, and the popoverTarget attributes will be passed to the attributes module.
Note that the attribute names will be lowercased.

`tsx


// { attrs: { role: 'button' } }

// { attrs: { list: 'options' } }


// { attrs: { popovertarget: 'popover' } }
`

$3

The $hook attribute is treated as hooks.

`tsx
$hook={{
insert(vnode) {
console.log(vnode);
},
}}
/>
// { hook: { insert: f } }
`

For the sake of backward compatibility, hook (without the dollar sign) also behaves the same. However it is deprecated and will be removed in the future.

$3

The $key attribute is treated as a key.

`tsx



// { key: 'foo' }
`

For the sake of backward compatibility, key (without the dollar sign) also behaves the same. However it is deprecated and will be removed in the future.

$3

Attributes of and its descendant elements are passed to the attributes module.

$3

In Snabbdom, different functionalities are delegated to separate modules. Values can be passed to them via attributes starting with $.

#### $attrs (the attributes module)

`tsx



// { attrs: { class: 'foo' } }
`

#### $class (the class module)

`tsx



// { class: { foo: true } }
`

#### $dataset (the dataset module)

`tsx



// { dataset: { foo: 'bar' } }
`

#### $on (the event listeners module)

`tsx
$on={{
click: (e) => {
console.log(e);
},
}}
/>
// { on: { click: f } }
`

#### $props (the props module)

`tsx



// { props: { className: 'foo' } }
`

#### $style (the style module)

`tsx



// { style: { opacity: '0', delayed: { opacity: '1' }, remove: { opacity: '0' } } }
`

#### Aliases

For the sake of backward compatibility, the following aliases are also defined. However they are deprecated and will be removed in the future.

| Attribute | Alias(es) |
| ---------- | ----------------- |
| $attrs | attrs |
| $class | class |
| $dataset | data, dataset |
| $on | on |
| $props | props |
| $style | style |

$3

Just like built-in modules, you can pass an arbitrary value to your custom modules via an attribute starting with $. For example, the expression

will yield { custom: { foo: 'bar' } }.

#### Note for TypeScript users

Unlike built-in modules, we have no assumptions on what kind of values should be passed to custom modules. You have to augment jsx.CustomModules interface so that it will typecheck.

`ts
declare module '@herp-inc/snabbdom-jsx/jsx-runtime' {
namespace jsx {
interface CustomModules {
// Add your custom modules here
custom: {
foo: string;
};
}
}
}
`

Components

A JSX component can be defined with a function with the signature of (props: Props) => Snabbdom.VNodeChildElement.

`tsx
import type Snabbdom from '@herp-inc/snabbdom-jsx';

type Props = {
children: Snabbdom.Node;
name: string;
};

const Component: Snabbdom.Component = ({ children, name }) => (


Hello, {name}!

{children}

);

const vnode = ;
`

Caveats

- boolean, null, and undefined values are not be filtered out of the tree but rendered as comment nodes (for the sake of correct diffing)
- snabbdom-pragma-style MODULE-PROPERTY notation is not supported.

Acknowledgements

The code base is based on these libraries:

- snabbdom
- snabbdom-pragma
- @types/react`

Show more