dom-magic

library1.1.0jsnpmunverified

Simple ES6 utility library for DOM manipulation, providing JSX-compatible createElement, show/hide, event listener, and insertion methods. Version 1.1.0 is current but shows no recent updates. Designed as a native ES6 module requiring Babel/Rollup for browser use. Lightweight alternative to React for basic DOM tasks, but lacks TypeScript definitions and broader ecosystem support. Similar to hyperscript or virtual-dom but with fewer features.

web-framework

npm install dom-magic

github ↗package ↗

INSTALL

IMPORT

SIG · DOM-MAGIC

dom-magic

web-frameworkjavascriptv1.1.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.

default

✓ import domMagic from 'dom-magic'

✗ const domMagic = require('dom-magic')

Package is ES6 only; CommonJS require works in Node >=10 but may not tree-shake.

createElement

✓ import { createElement } from 'dom-magic'

Named export for JSX transpilation.

getElement

✓ import { getElement } from 'dom-magic'

✗ import getElement from 'dom-magic'

getElement is a named export, not default.

insertBefore

✓ import { insertBefore } from 'dom-magic'

✗ import * as domMagic from 'dom-magic'; domMagic.insertBefore(...)

Both patterns work, but named import is preferred for tree-shaking.

Shows how to create a DOM element with an event listener and append it to a container.

import { createElement, getElement } from 'dom-magic'; // Get a container element const container = getElement('#app'); // Create a button using JSX-compatible createElement const button = createElement('button', { className: 'btn', onClick: () => alert('Clicked!') }, 'Click Me'); // Append button to container container.appendChild(button);

Debug

Known issues

gotchaPackage requires ES6 module bundler (Babel/Rollup) for browser usage; direct script tags will not work.

fix

Set up a build pipeline with Babel and Rollup as described in README.

affects: >=1.0.0

deprecatedThe package has not been updated since 2018 and may have compatibility issues with modern frameworks or bundlers.

fix

Consider using a maintained alternative like htm or preact for lightweight DOM manipulation.

affects: >=1.0.0

breakingNo TypeScript definitions shipped; TypeScript users must create their own or use 'any' types.

fix

Install @types/dom-magic if available, or declare module manually.

affects: >=1.0.0

gotchagetElement uses querySelector; may behave unexpectedly with non-existing selectors (returns null).

fix

Always check if element exists before operating on it.

affects: >=1.0.0

gotchaJSX usage requires additional Babel plugin (@babel/plugin-transform-react-jsx) and pragma setup.

fix

Add 'plugins' in babel config: [['@babel/plugin-transform-react-jsx', { pragma: 'createElement' }]]

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught ReferenceError: createElement is not defined

JSX transpiled to createElement but import is missing or pragma not set.

fix

Ensure you import { createElement } from 'dom-magic' and set Babel pragma to createElement.

Cannot read property 'appendChild' of null

getElement returned null because selector did not match any element.

fix

Verify the selector string is correct and the DOM element exists before calling appendChild.

Cannot use import statement outside a module

Running ES6 modules directly in browser without bundler.

fix

Use a bundler (Rollup, Webpack) or set <script type="module"> and ensure the file is served correctly.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/AndiDittrich/dom-magic ↗

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