Create Element Extended
Extends document.createElement
to conform to the target API of JSX transpilation.
var element = document
This package is useful when frequently creating DOM nodes on the fly, e.g.:
{ const div = document; divid = id; divclassList; const cube1 = document; cube1classList cube1classList const cube2 = document; cube2classList cube2classList const cube3 = document; cube3classList cube3classList const srOnly = document srOnlyclassList; srOnlytextContent = 'Loading...'; div; div; div; div; return div;}
becomes
; { return document;}
When using babel and babel-plugin-transform-react-jsx
you can use JSX,
which transpiles to the example above.
/* pragma: document.createElement */ ; { 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
:
FAQ
I don't like monkey-patching...
/* pragma: createElement */
How do I use this without webpack, browserify?
-- or --
Type signature?
jsdom
or other DOM implementations?
How do I use dis with ;; const window: document = ; const createElement = ;
jsx-dom
, jsx-create-element
, nativejsx
, and jsx-foobar
?
How is this different from This package does less. All I wanted was to create a DOM node.
Here is (almost) the entire source code:
const createCreateElement = { { if typeof c === 'string' this; else this; } return { const el = ; for const attr in attributes el; if children if typeof children === 'string' el; else if childrenlength const copy = Arrayprototypeslice; ArrayprototypeforEach; else el; return el; };};
Why not jQuery?
Courage.
Why not React/Vue/Zoidberg?
Because all I wanted was to create a DOM node.
LOL, the DOM is way to slow to re-render the entire page every time. React has a tree diffing algorithm that only updates the parts of the DOM that have changed, and it's super fast, and everybody should use it, and it's like the Doom 3 rendering engine, and...
Cool.