dom-chef

library5.1.1jsnpmunverified

dom-chef is a lightweight library that enables developers to construct native browser DOM elements using JSX syntax, bypassing the need for unsafe `innerHTML` or verbose `document.createElement` calls. It acts as a JSX compiler target, transforming JSX into direct DOM API calls without introducing a virtual DOM layer, offering a performant and small-footprint alternative to larger frameworks. The current stable version is 5.1.1, with a consistent release cadence addressing features and stability. Key differentiators include its direct DOM manipulation approach, comprehensive support for SVG, event listeners, inline styles, nested elements, and functional components, all while shipping TypeScript types for a robust developer experience. It is not a full UI framework but a utility for DOM construction.

web-framework

npm install dom-chef

github ↗package ↗

INSTALL

IMPORT

SIG · DOM-CHEF

dom-chef

web-frameworkjavascriptv5.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

✓ import { h } from 'dom-chef';

✗ const h = require('dom-chef');

The primary JSX factory function. Required configuration in `tsconfig.json` or `babel.config.js` for `jsxFactory`.

React

✓ import React from 'dom-chef';

✗ import { React } from 'dom-chef';

An alternative import for JSX transpilers configured to default to `React.createElement`. This allows `dom-chef` to function as the `React` object. It's a default export from `dom-chef`.

DocumentFragment

✓ /** Configure jsxFragmentFactory: */ // tsconfig.json: {"compilerOptions": {"jsxFragmentFactory": "DocumentFragment"}}

✗ import { DocumentFragment } from 'dom-chef';

Not a direct import, but the native `DocumentFragment` constructor is used as the `jsxFragmentFactory`. Ensure your JSX transpiler is configured to use it, rather than importing it.

Demonstrates creating a dynamic DOM structure, including functional components, event listeners, inline styles, and SVG elements using `dom-chef`'s JSX transformation.

import {h} from 'dom-chef'; // A simple function component function Greeting({name, theme}: {name: string; theme: string}): HTMLElement { return ( <h2 className={`greeting-${theme}`}>Hello, {name}!</h2> ); } const handleClick = (e: MouseEvent) => { const button = e.target as HTMLButtonElement; button.textContent = 'Clicked!'; console.log('Button clicked!', button); }; // Create a complex DOM structure using JSX const appContainer = ( <div className="app-root"> <h1>Welcome to dom-chef example!</h1> <Greeting name="World" theme="dark" /> <section> <p>This paragraph uses inline <strong style={{color: 'blue'}}>styles</strong>.</p> <button onClick={handleClick}>Click me</button> <input type="text" placeholder="Type something..." onInput={(e) => console.log((e.target as HTMLInputElement).value)} /> </section> <div dangerouslySetInnerHTML={{__html: '<em>This HTML is rendered dangerously.</em>'}} /> <svg width={100} height={100}> <circle cx={50} cy={50} r={40} stroke="green" strokeWidth={4} fill="yellow" /> </svg> </div> ); // Append the created element to the document body document.body.appendChild(appContainer); // Example of accessing a created element const heading = appContainer.querySelector('h1'); if (heading) { console.log('Heading text:', heading.textContent); } // To compile this, ensure your build tool (e.g., TypeScript, Babel, esbuild) is configured for JSX. // For TypeScript, in your tsconfig.json: // {"compilerOptions": {"jsx": "react", "jsxFactory": "h", "jsxFragmentFactory": "DocumentFragment"}}

Debug

Known issues

breakingdom-chef v4.0.0 and above are exclusively exported as ES Modules (ESM). This removes CommonJS (CJS) support, requiring projects to adopt ESM or use a bundler capable of handling ESM imports.

fix

Migrate your project to ES Modules, use a bundler (like webpack or Rollup) that supports ESM, or configure Node.js with '"type": "module"' in your package.json. If using TypeScript, ensure your 'module' compiler option is set appropriately (e.g., 'esnext').

affects: >=4.0.0

breakingFor TypeScript users, v5.0.0 introduced built-in TypeScript types for JSX. This means you likely no longer need to specify any `JSX` types in your `globals.d.ts` file.

fix

Remove any custom `JSX` declarations from your `globals.d.ts` or other declaration files, as they may now conflict with the types provided by `dom-chef`.

affects: >=5.0.0

gotchaWhen rendering SVG elements, certain HTML tags are explicitly unsupported due to the library's underlying DOM creation mechanism. Specifically, `<a>`, `<audio>`, `<canvas>`, `<iframe>`, `<script>`, and `<video>` tags cannot be nested inside an `<svg>` element.

fix

Avoid using the listed unsupported HTML tags directly within SVG JSX structures. If you need to embed such content, consider alternative rendering strategies or placing them outside the SVG context.

affects: >=3.0.0

gotchaUsing `dangerouslySetInnerHTML` can expose your application to cross-site scripting (XSS) attacks if the content is not sanitized. Only use this attribute with trusted HTML content.

fix

Always sanitize any user-generated or external HTML content before assigning it via `dangerouslySetInnerHTML`. Prefer creating DOM elements programmatically or using text content where possible to avoid this risk.

affects: >=3.0.0

Errors

Common errors & fixes

ReferenceError: h is not defined

The JSX transpiler (Babel, TypeScript, esbuild) is not configured to use 'h' as the JSX factory function, or JSX transformation is not enabled.

fix

For TypeScript: Add `"jsx": "react", "jsxFactory": "h", "jsxFragmentFactory": "DocumentFragment"` to your `tsconfig.json` compiler options. For Babel: Configure `@babel/plugin-transform-react-jsx` with `pragma: 'h'` and `pragmaFrag: 'DocumentFragment'`.

TypeError: __webpack_require__(...).default is not a function

Webpack or another bundler is attempting to `require` a default export from `dom-chef` (e.g., `import React from 'dom-chef'`) in a CommonJS context, which can cause interop issues after v4.0.0's ESM-only change.

fix

Ensure your bundler is correctly configured to handle ESM modules and their default exports. For Webpack, this might involve ensuring correct `experiments.outputModule` or `resolve.fullySpecified` settings, or explicitly importing named exports if `h` is preferred.

Property 'className' does not exist on type 'IntrinsicElements...' (TypeScript error)

Before v5.0.0, TypeScript users needed custom JSX type declarations. After v5.0.0, conflicting or missing type declarations can cause this if `dom-chef`'s types aren't correctly picked up.

fix

If using dom-chef < v5.0.0, ensure you have a `globals.d.ts` file with appropriate JSX type definitions (e.g., `interface IntrinsicElements { [elemName: string]: any; }`). If using dom-chef >= v5.0.0, remove any custom `JSX.IntrinsicElements` declarations that might be conflicting with the package's bundled types.

Upgrade

Version history

5.1.1latest on npm

Audit

Dependencies

svg-tag-namesrequiredProvides a list of known SVG tag names for correct element creation.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/vadimdemedes/dom-chef ↗

packagehttps://www.npmjs.com/package/dom-chef ↗