snabbdom-jsx

0.4.2 verified Sat Apr 25 auth: no javascript

Snabbdom-jsx is a lightweight library (v0.4.2, latest stable) that enables writing Snabbdom virtual DOM nodes using JSX syntax with Babel. It transforms JSX attributes into Snabbdom's data format, supporting namespaces like on- for events, class- for classes, and style- for styles. Unlike full frameworks, it stays focused on the virtual DOM layer, allowing flexible architecture choices. Released irregularly with minor updates since 2016, it ships TypeScript types and avoids React's component class overhead by using simple functions. Key differentiator: direct mapping of JSX to Snabbdom's modular system without additional abstractions.

Common errors

error Error: Cannot find module 'snabbdom-jsx' ↓

cause Package not installed or not in node_modules.

fix

Run 'npm install snabbdom-jsx' and ensure it's listed in package.json dependencies.

error TypeError: (0 , _snabbdomJsx.html) is not a function ↓

cause Using default import instead of named import for 'html'.

fix

Change import to: import { html } from 'snabbdom-jsx'.

error Uncaught ReferenceError: html is not defined ↓

cause Missing or incorrect JSX pragma comment.

fix

Ensure the first line of the file is '/** @jsx html */' (or the correct pragma function).

error The 'key' property is not being recognized ↓

cause Using 'key' inside props object instead of as a top-level attribute.

fix

Use <div key="myKey">...</div> directly, not <div props={{key: 'myKey'}}>.</div>.

Warnings

breaking In v0.3.0, 'key' and 'classNames' are no longer added to the 'props' namespace. ↓

fix Use 'key' as a direct attribute on the element, e.g., <div key="myId">.

gotcha JSX attribute names with hyphens (e.g., 'on-click') must use lowercase; camelCase ('onClick') will be treated as 'props.onClick' without event listener binding. ↓

fix Use prefix notation: on-click for events, class-visible for classes.

deprecated The old practice of wrapping components with <div key=...> is deprecated since v0.2.0. ↓

fix Specify 'key' directly on the component element.

gotcha Children arrays are flattened in v0.3.1, but nested arrays from previous versions may still cause issues if not updated. ↓

fix Upgrade to v0.3.1+ and ensure child arrays are flattened.

breaking Component functions receive (attributes, children) in v0.4.0, changing from the previous signature. ↓

fix Update component definitions to accept { attrs, children } object or (attributes, children) parameters.

Install

npm install snabbdom-jsx

yarn add snabbdom-jsx

pnpm add snabbdom-jsx

Imports

html

wrong

import html from 'snabbdom-jsx'

correct

import { html } from 'snabbdom-jsx'

html is a named export, not default. Use named import.

svg

wrong

import { html } from 'snabbdom-jsx' // for SVG

correct

import { svg } from 'snabbdom-jsx'

Use 'svg' pragma for SVG elements instead of 'html'.

defineComponent
wrong
```
import { component } from 'snabbdom-jsx'
```
correct
```
import { defineComponent } from 'snabbdom-jsx'
```
defineComponent is the correct name for creating reusable component functions.

Quickstart

Shows how to set up the JSX pragma, import html, initialize snabbdom with modules, create a virtual node with event listener, and patch the DOM.

/** @jsx html */
import { html } from 'snabbdom-jsx';
import snabbdom from 'snabbdom';
import propsModule from 'snabbdom/modules/props';
import eventlistenersModule from 'snabbdom/modules/eventlisteners';

const patch = snabbdom.init([propsModule, eventlistenersModule]);

const app = <div on-click={() => alert('Hello!')}>
  <h1>Hello JSX</h1>
  <p>This is snabbdom-jsx.</p>
</div>;

const container = document.getElementById('app');
patch(container, app);