dom-magic

1.1.0 verified Fri May 01 auth: no javascript

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.

Common errors

error Uncaught ReferenceError: createElement is not defined ↓

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

error Cannot read property 'appendChild' of null ↓

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

error Cannot use import statement outside a module ↓

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

Warnings

gotcha Package 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.

deprecated The 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.

breaking No TypeScript definitions shipped; TypeScript users must create their own or use 'any' types. ↓

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

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

fix Always check if element exists before operating on it.

gotcha JSX 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' }]]

Install

npm install dom-magic

yarn add dom-magic

pnpm add dom-magic

Imports

default
wrong
```
const domMagic = require('dom-magic')
```
correct
```
import domMagic from '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

wrong

import getElement from 'dom-magic'

correct

import { getElement } from 'dom-magic'

getElement is a named export, not default.

insertBefore

wrong

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

correct

import { insertBefore } from 'dom-magic'

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

Quickstart

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