{"id":25179,"library":"dom-magic","title":"dom-magic","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/AndiDittrich/dom-magic","tags":["javascript"],"install":[{"cmd":"npm install dom-magic","lang":"bash","label":"npm"},{"cmd":"yarn add dom-magic","lang":"bash","label":"yarn"},{"cmd":"pnpm add dom-magic","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package is ES6 only; CommonJS require works in Node >=10 but may not tree-shake.","wrong":"const domMagic = require('dom-magic')","symbol":"default","correct":"import domMagic from 'dom-magic'"},{"note":"Named export for JSX transpilation.","wrong":null,"symbol":"createElement","correct":"import { createElement } from 'dom-magic'"},{"note":"getElement is a named export, not default.","wrong":"import getElement from 'dom-magic'","symbol":"getElement","correct":"import { getElement } from 'dom-magic'"},{"note":"Both patterns work, but named import is preferred for tree-shaking.","wrong":"import * as domMagic from 'dom-magic'; domMagic.insertBefore(...)","symbol":"insertBefore","correct":"import { insertBefore } from 'dom-magic'"}],"quickstart":{"code":"import { createElement, getElement } from 'dom-magic';\n\n// Get a container element\nconst container = getElement('#app');\n\n// Create a button using JSX-compatible createElement\nconst button = createElement('button', {\n  className: 'btn',\n  onClick: () => alert('Clicked!')\n}, 'Click Me');\n\n// Append button to container\ncontainer.appendChild(button);","lang":"javascript","description":"Shows how to create a DOM element with an event listener and append it to a container."},"warnings":[{"fix":"Set up a build pipeline with Babel and Rollup as described in README.","message":"Package requires ES6 module bundler (Babel/Rollup) for browser usage; direct script tags will not work.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider using a maintained alternative like htm or preact for lightweight DOM manipulation.","message":"The package has not been updated since 2018 and may have compatibility issues with modern frameworks or bundlers.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Install @types/dom-magic if available, or declare module manually.","message":"No TypeScript definitions shipped; TypeScript users must create their own or use 'any' types.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always check if element exists before operating on it.","message":"getElement uses querySelector; may behave unexpectedly with non-existing selectors (returns null).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add 'plugins' in babel config: [['@babel/plugin-transform-react-jsx', { pragma: 'createElement' }]]","message":"JSX usage requires additional Babel plugin (@babel/plugin-transform-react-jsx) and pragma setup.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure you import { createElement } from 'dom-magic' and set Babel pragma to createElement.","cause":"JSX transpiled to createElement but import is missing or pragma not set.","error":"Uncaught ReferenceError: createElement is not defined"},{"fix":"Verify the selector string is correct and the DOM element exists before calling appendChild.","cause":"getElement returned null because selector did not match any element.","error":"Cannot read property 'appendChild' of null"},{"fix":"Use a bundler (Rollup, Webpack) or set <script type=\"module\"> and ensure the file is served correctly.","cause":"Running ES6 modules directly in browser without bundler.","error":"Cannot use import statement outside a module"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}