create-element-extended
Advanced tools
Extension of the native DOM createElement method to match JSX
Extends document.createElement to conform to the target API of JSX transpilation.
var element = document.createElement(tagName[, attributes[, children]])
This package is useful when frequently creating DOM nodes on the fly, e.g.:
function makeSpinner(id) {
const div = document.createElement('div');
div.id = id;
div.classList.add('sk-folding-cube');
const cube1 = document.createElement('div');
cube1.classList.add('sk-cube1')
cube1.classList.add('sk-cube')
const cube2 = document.createElement('div');
cube2.classList.add('sk-cube2')
cube2.classList.add('sk-cube')
const cube3 = document.createElement('div');
cube3.classList.add('sk-cube3')
cube3.classList.add('sk-cube')
const srOnly = document.createElement('span')
srOnly.classList.add('sr-only');
srOnly.textContent = 'Loading...';
div.appendChild(cube1);
div.appendChild(cube2);
div.appendChild(cube3);
div.appendChild(srOnly);
return div;
}
With create-element-extended, this becomes:
import 'create-element-extended';
function makeSpinner(id) {
return document.createElement('div', { id, 'class': 'sk-folding-cube' }, [
document.createElement('div', { 'class': 'sk-cube1 sk-cube' }),
document.createElement('div', { 'class': 'sk-cube2 sk-cube' }),
document.createElement('div', { 'class': 'sk-cube3 sk-cube' }),
document.createElement('span', { 'class': 'sr-only' }, 'Loading...'),
]);
}
When using babel and babel-plugin-transform-react-jsx you can use JSX,
which transpiles to the example above.
/* pragma: document.createElement */
import 'create-element-extended';
function makeSpinner(id) {
return (
<div id={id} class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
<span class="sr-only">Loading...</span>
</div>
);
}
Instead of setting pragma via comment, you can configure babel globally via .babelrc:
{
"plugins": [
["transform-react-jsx", {
"pragma": "document.createElement"
}]
]
}
import { createElement } from 'create-element-extended/library'
/* pragma: createElement */
function (tagName: string, attributes: object, children: string | Array<Element | string>): Element
jsx-dom, jsx-create-element, nativejsx, and jsx-foobar?This package does less. All I wanted was to create a DOM node.
Here is (almost) the entire source code:
export const createCreateElement = (createElement, createTextNode) => {
function appendChild(c) {
if (typeof c === 'string') this.appendChild(createTextNode(c));
else this.appendChild(c);
}
return (tagName, attributes, children) => {
const el = createElement(tagName);
if (attributes) {
Object.keys(attributes).forEach(attr => el.setAttribute(attr, attributes[attr]));
}
if (children) {
if (Array.isArray(children)) children.forEach(appendChild, el);
else appendChild.call(el, children);
}
return el;
};
};
jsdom or other DOM implementations?import { JSDOM } from 'jsdom';
import { createCreateElement } from 'create-element-extended/factory';
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
const createElement = createCreateElement(
tagName => dom.window.document.createElement(tagName),
str => dom.window.document.createTextNode(str),
);
Courage.
Because all I wanted was to create a DOM node.
Cool.
FAQs
Extension of the native DOM createElement method to match JSX
The npm package create-element-extended receives a total of 7 weekly downloads. As such, create-element-extended popularity was classified as not popular.
We found that create-element-extended demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.