{"id":26405,"library":"snabbdom-pragma","title":"snabbdom-pragma","description":"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).","status":"maintenance","version":"2.8.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/Swizz/snabbdom-pragma","tags":["javascript","snabbdom","pragma","jsx","createElement","Bublé","Buble","Babel","Traceur","typescript"],"install":[{"cmd":"npm install snabbdom-pragma","lang":"bash","label":"npm"},{"cmd":"yarn add snabbdom-pragma","lang":"bash","label":"yarn"},{"cmd":"pnpm add snabbdom-pragma","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for creating virtual DOM nodes; snabbdom-pragma wraps snabbdom's h() function.","package":"snabbdom","optional":false}],"imports":[{"note":"Default ESM import. CommonJS require also works.","wrong":"const Snabbdom = require('snabbdom-pragma')","symbol":"Snabbdom","correct":"import Snabbdom from 'snabbdom-pragma'"},{"note":"Named export; available since v2.0.0.","wrong":"const { createElement } = require('snabbdom-pragma')","symbol":"createElement","correct":"import { createElement } from 'snabbdom-pragma'"},{"note":"Re-exports snabbdom's h function; may conflict with direct snabbdom h import.","wrong":"import { h } from 'snabbdom'","symbol":"h","correct":"import { h } from 'snabbdom-pragma'"}],"quickstart":{"code":"import Snabbdom from 'snabbdom-pragma'\nimport { init, classModule, propsModule, styleModule, eventListenersModule } from 'snabbdom'\n\nconst patch = init([classModule, propsModule, styleModule, eventListenersModule])\n\nconst vnode = (\n  <div className=\"container\">\n    <h1>Hello, Snabbdom!</h1>\n    <button onClick={() => alert('Clicked!')}>Click me</button>\n  </div>\n)\n\nconst app = document.getElementById('app')\npatch(app, vnode)\n","lang":"typescript","description":"Shows JSX usage with snabbdom-pragma: imports, patch initialization, and rendering a simple component."},"warnings":[{"fix":"Update code that expected raw h() calls; ensure you are using the returned vnode with patch().","message":"Since v2.0.0, snabbdom-pragma returns a vnode object instead of calling h() directly.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use className for class, not class; use htmlFor for label, not for. Refer to Snabbdom module documentation.","message":"Data and aria attributes are handled by the 'props' module (not 'attrs') since v2.0.0.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"If you were using multiple dashes to denote nested modules, refactor to use the single-dash convention.","message":"Only the first dash in a property is considered as module name (v2.7.0+).","severity":"breaking","affected_versions":">=2.7.0"},{"fix":"Use className in JSX; snabbdom-pragma will convert to class for SVG elements.","message":"SVG className attribute is transformed to class, not className (since v2.4.0).","severity":"gotcha","affected_versions":">=2.4.0"},{"fix":"Ensure Snabbdom dataset module is included in patch initialization if you use data-* attributes.","message":"Data attributes now use Snabbdom's dataset module (since v2.3.0).","severity":"gotcha","affected_versions":">=2.3.0"},{"fix":"Use the module object passed to createElement or JSX pragma instead of per-element module specs.","message":"The module attribute on elements (e.g., props: {}) is deprecated in favor of custom module support (v2.8.0+).","severity":"deprecated","affected_versions":">=2.8.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install snabbdom-pragma' or 'yarn add snabbdom-pragma'.","cause":"Package not installed or missing dependency.","error":"Cannot find module 'snabbdom-pragma'"},{"fix":"Ensure the pragma is set exactly to 'Snabbdom.createElement' and import Snabbdom as default or named export createElement.","cause":"Wrong import or pragma configuration: using 'Snabbdom.createElement' instead of 'Snabbdom.createelement' or wrong import name.","error":"TypeError: Snabbdom.createElement is not a function"},{"fix":"Update to snabbdom-pragma >=2.0.0 and ensure the pragma matches the export.","cause":"Using a version of the package that does not export createElement (pre-v2.0.0).","error":"The pragma 'Snabbdom.createElement' is not a function"},{"fix":"Replace class with className in JSX.","cause":"TypeScript strict mode: class is not a valid attribute; use className instead.","error":"Property 'class' does not exist on type 'VNodeData'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}