项目作者: qwtel

项目描述 :
Extends document.createElement to conform to the target API of JSX.
高级语言: JavaScript
项目地址: git://github.com/qwtel/create-element-x.git
创建时间: 2017-12-06T19:27:56Z
项目社区:https://github.com/qwtel/create-element-x

开源协议:MIT License

下载


Create Element Extended

Build Status

Extends document.createElement to conform to the target API of JSX transpilation.

  1. var element = document.createElement(tagName[, attributes[, children]])

This package is useful when frequently creating DOM nodes on the fly, e.g.:

  1. function makeSpinner(id) {
  2. const div = document.createElement('div');
  3. div.id = id;
  4. div.classList.add('sk-folding-cube');
  5. const cube1 = document.createElement('div');
  6. cube1.classList.add('sk-cube1')
  7. cube1.classList.add('sk-cube')
  8. const cube2 = document.createElement('div');
  9. cube2.classList.add('sk-cube2')
  10. cube2.classList.add('sk-cube')
  11. const cube3 = document.createElement('div');
  12. cube3.classList.add('sk-cube3')
  13. cube3.classList.add('sk-cube')
  14. const srOnly = document.createElement('span')
  15. srOnly.classList.add('sr-only');
  16. srOnly.textContent = 'Loading...';
  17. div.appendChild(cube1);
  18. div.appendChild(cube2);
  19. div.appendChild(cube3);
  20. div.appendChild(srOnly);
  21. return div;
  22. }

becomes

  1. import 'create-element-x';
  2. function makeSpinner(id) {
  3. return document.createElement('div', { id, 'class': 'sk-folding-cube' }, [
  4. document.createElement('div', { 'class': 'sk-cube1 sk-cube' }),
  5. document.createElement('div', { 'class': 'sk-cube2 sk-cube' }),
  6. document.createElement('div', { 'class': 'sk-cube3 sk-cube' }),
  7. document.createElement('span', { 'class': 'sr-only' }, 'Loading...'),
  8. ]);
  9. }

When using babel and babel-plugin-transform-react-jsx you can use JSX,
which transpiles to the example above.

  1. /* pragma: document.createElement */
  2. import 'create-element-x';
  3. function makeSpinner(id) {
  4. return (
  5. <div id={id} class="sk-folding-cube">
  6. <div class="sk-cube1 sk-cube"></div>
  7. <div class="sk-cube2 sk-cube"></div>
  8. <div class="sk-cube3 sk-cube"></div>
  9. <span class="sr-only">Loading...</span>
  10. </div>
  11. );
  12. }

Instead of setting pragma via comment, you can configure babel globally via .babelrc:

  1. {
  2. "plugins": [
  3. ["transform-react-jsx", {
  4. "pragma": "document.createElement"
  5. }]
  6. ]
  7. }

FAQ

I don’t like monkey-patching…

Import the library funtion instead:

  1. /* pragma: createElement */
  2. import { createElement } from 'create-element-x/library'

How do I use this without webpack, browserify?

Monkey-patch:

  1. <script src="https://unpkg.com/create-element-x/dist/index.min.js"></script>

Library:

  1. <script src="https://unpkg.com/create-element-x/dist/library.min.js"></script>
  2. <script>
  3. const { createElement } = window.createElementX;
  4. createElement('div', { id, 'class': 'sk-folding-cube' });
  5. // ...
  6. </script>

How do I use this with jsdom or other DOM implementations?

  1. import { JSDOM } from 'jsdom';
  2. import { createCreateElement } from 'create-element-x/factory';
  3. const { window: { document } } = new JSDOM();
  4. const createElement = createCreateElement(
  5. tagName => document.createElement(tagName),
  6. text => document.createTextNode(text),
  7. );

How is this different from jsx-dom, jsx-create-element, nativejsx, and jsx-foobar?

This package does less. All it does is to create a DOM node.

Why not jQuery?

Courage.