Registry / web-framework / snabbdom-pragma

snabbdom-pragma

library2.8.0jsnpmunverified

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

web-framework

npm install snabbdom-pragma

github ↗package ↗

INSTALL

IMPORT

SIG · SNABBDOM-PRAGMA

snabbdom-pragma

web-frameworkjavascriptv2.8.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Snabbdom

✓ import Snabbdom from 'snabbdom-pragma'

✗ const Snabbdom = require('snabbdom-pragma')

Default ESM import. CommonJS require also works.

createElement

✓ import { createElement } from 'snabbdom-pragma'

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

Named export; available since v2.0.0.

✓ import { h } from 'snabbdom-pragma'

✗ import { h } from 'snabbdom'

Re-exports snabbdom's h function; may conflict with direct snabbdom h import.

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)

Debug

Known issues

breakingSince 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().

affects: >=2.0.0

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

affects: >=2.0.0

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

affects: >=2.7.0

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

affects: >=2.4.0

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

affects: >=2.3.0

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

affects: >=2.8.0

Errors

Common errors & fixes

Cannot find module 'snabbdom-pragma'

Package not installed or missing dependency.

fix

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

TypeError: Snabbdom.createElement is not a function

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.

The pragma 'Snabbdom.createElement' is not a function

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.

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

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

fix

Replace class with className in JSX.

Upgrade

Version history

2.8.0latest on npm

Audit

Dependencies

snabbdomrequiredPeer dependency for creating virtual DOM nodes; snabbdom-pragma wraps snabbdom's h() function.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/Swizz/snabbdom-pragma ↗

packagehttps://www.npmjs.com/package/snabbdom-pragma ↗