snabbdom-pragma

2.8.0 verified Fri May 01 auth: no javascript maintenance

JSX pragma for Snabbdom virtual DOM library. Current stable version is 2.8.0 (released 2018-11-26). Maintained as a stable, feature-complete bridge between JSX transpilers (Babel, TypeScript, Bublé, Traceur) and Snabbdom's vnode creation. Key differentiator: provides a React-like createElement API for Snabbdom, supporting HTML attributes, SVG, custom modules, and components. Alternative to writing raw Snabbdom h() calls. Release cadence is low (last release Nov 2018).

Common errors

error Cannot find module 'snabbdom-pragma' ↓

cause Package not installed or missing dependency.

fix

Run 'npm install snabbdom-pragma' or 'yarn add snabbdom-pragma'.

error TypeError: Snabbdom.createElement is not a function ↓

cause Wrong import or pragma configuration: using 'Snabbdom.createElement' instead of 'Snabbdom.createelement' or wrong import name.

fix

Ensure the pragma is set exactly to 'Snabbdom.createElement' and import Snabbdom as default or named export createElement.

error The pragma 'Snabbdom.createElement' is not a function ↓

cause Using a version of the package that does not export createElement (pre-v2.0.0).

fix

Update to snabbdom-pragma >=2.0.0 and ensure the pragma matches the export.

error Property 'class' does not exist on type 'VNodeData' ↓

cause TypeScript strict mode: class is not a valid attribute; use className instead.

fix

Replace class with className in JSX.

Warnings

breaking Since v2.0.0, snabbdom-pragma returns a vnode object instead of calling h() directly. ↓

fix Update code that expected raw h() calls; ensure you are using the returned vnode with patch().

gotcha Data and aria attributes are handled by the 'props' module (not 'attrs') since v2.0.0. ↓

fix Use className for class, not class; use htmlFor for label, not for. Refer to Snabbdom module documentation.

breaking Only the first dash in a property is considered as module name (v2.7.0+). ↓

fix If you were using multiple dashes to denote nested modules, refactor to use the single-dash convention.

gotcha SVG className attribute is transformed to class, not className (since v2.4.0). ↓

fix Use className in JSX; snabbdom-pragma will convert to class for SVG elements.

gotcha Data attributes now use Snabbdom's dataset module (since v2.3.0). ↓

fix Ensure Snabbdom dataset module is included in patch initialization if you use data-* attributes.

deprecated The module attribute on elements (e.g., props: {}) is deprecated in favor of custom module support (v2.8.0+). ↓

fix Use the module object passed to createElement or JSX pragma instead of per-element module specs.

Install

npm install snabbdom-pragma

yarn add snabbdom-pragma

pnpm add snabbdom-pragma

Imports

Snabbdom

wrong

const Snabbdom = require('snabbdom-pragma')

correct

import Snabbdom from 'snabbdom-pragma'

Default ESM import. CommonJS require also works.

createElement

wrong

const { createElement } = require('snabbdom-pragma')

correct

import { createElement } from 'snabbdom-pragma'

Named export; available since v2.0.0.

h
wrong
```
import { h } from 'snabbdom'
```
correct
```
import { h } from 'snabbdom-pragma'
```
Re-exports snabbdom's h function; may conflict with direct snabbdom h import.

Quickstart

Shows JSX usage with snabbdom-pragma: imports, patch initialization, and rendering a simple component.

import Snabbdom from 'snabbdom-pragma'
import { init, classModule, propsModule, styleModule, eventListenersModule } from 'snabbdom'

const patch = init([classModule, propsModule, styleModule, eventListenersModule])

const vnode = (
  <div className="container">
    <h1>Hello, Snabbdom!</h1>
    <button onClick={() => alert('Clicked!')}>Click me</button>
  </div>
)

const app = document.getElementById('app')
patch(app, vnode)