@gera2ld/jsx-dom - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/index.common.js

@@ -1,4 +0,6 @@
-/*! @gera2ld/jsx-dom v1.0.0 | ISC License */
+/*! @gera2ld/jsx-dom v1.1.0 | ISC License */
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var propRules = ['innerHTML', 'innerText', 'textContent', {
@@ -8,30 +10,41 @@ key: 'value',
 }];
+var Fragment = {
+  name: 'Fragment'
+};
 function createElement(tag, props) {
-  var el = document.createElement(tag);
+  var el;
   var ref;
 
-  if (props) {
-    Object.keys(props).forEach(function (key) {
-      var value = props[key];
-      if (value == null) return;
+  if (tag === Fragment) {
+    el = document.createDocumentFragment();
+  } else if (typeof tag !== 'string') {
+    throw new Error("Invalid element type: " + tag);
+  } else {
+    el = document.createElement(tag);
 
-      if (key.startsWith('on')) {
-        el.addEventListener(key.slice(2).toLowerCase(), value);
-      } else if (key === 'children') {
-        renderChild(el, value);
-      } else if (key === 'style' && typeof value === 'object') {
-        renderStyle(el, value);
-      } else if (key === 'dangerouslySetInnerHTML' && value) {
-        el.innerHTML = value.__html || ''; // eslint-disable-line no-underscore-dangle
-      } else if (key === 'ref' && typeof value === 'function') {
-        ref = value;
-      } else if (typeof value === 'boolean') {
-        if (value) el.setAttribute(key, key);else el.removeAttribute(key);
-      } else if (matchProps(tag, key, value)) {
-        el[key] = value;
-      } else {
-        if (key === 'className') key = 'class';else if (key === 'labelFor') key = 'for';
-        el.setAttribute(key, "" + value);
-      }
-    });
+    if (props) {
+      Object.keys(props).forEach(function (key) {
+        var value = props[key];
+        if (value == null) return;
+
+        if (key.startsWith('on')) {
+          el.addEventListener(key.slice(2).toLowerCase(), value);
+        } else if (key === 'children') {
+          renderChild(el, value);
+        } else if (key === 'style' && typeof value === 'object') {
+          renderStyle(el, value);
+        } else if (key === 'dangerouslySetInnerHTML' && value) {
+          el.innerHTML = value.__html || ''; // eslint-disable-line no-underscore-dangle
+        } else if (key === 'ref' && typeof value === 'function') {
+          ref = value;
+        } else if (typeof value === 'boolean') {
+          if (value) el.setAttribute(key, key);else el.removeAttribute(key);
+        } else if (matchProps(tag, key, value)) {
+          el[key] = value;
+        } else {
+          if (key === 'className') key = 'class';else if (key === 'labelFor') key = 'for';
+          el.setAttribute(key, "" + value);
+        }
+      });
+    }
   }
@@ -87,2 +100,3 @@
 
-module.exports = createElement;
+exports.Fragment = Fragment;
+exports.createElement = createElement;

dist/index.js

@@ -1,3 +0,3 @@
-/*! @gera2ld/jsx-dom v1.0.0 | ISC License */
-var JSX = (function () {
+/*! @gera2ld/jsx-dom v1.1.0 | ISC License */
+var JSX = (function (exports) {
 'use strict';
@@ -9,30 +9,41 @@
 }];
+var Fragment = {
+  name: 'Fragment'
+};
 function createElement(tag, props) {
-  var el = document.createElement(tag);
+  var el;
   var ref;
 
-  if (props) {
-    Object.keys(props).forEach(function (key) {
-      var value = props[key];
-      if (value == null) return;
+  if (tag === Fragment) {
+    el = document.createDocumentFragment();
+  } else if (typeof tag !== 'string') {
+    throw new Error("Invalid element type: " + tag);
+  } else {
+    el = document.createElement(tag);
 
-      if (key.startsWith('on')) {
-        el.addEventListener(key.slice(2).toLowerCase(), value);
-      } else if (key === 'children') {
-        renderChild(el, value);
-      } else if (key === 'style' && typeof value === 'object') {
-        renderStyle(el, value);
-      } else if (key === 'dangerouslySetInnerHTML' && value) {
-        el.innerHTML = value.__html || ''; // eslint-disable-line no-underscore-dangle
-      } else if (key === 'ref' && typeof value === 'function') {
-        ref = value;
-      } else if (typeof value === 'boolean') {
-        if (value) el.setAttribute(key, key);else el.removeAttribute(key);
-      } else if (matchProps(tag, key, value)) {
-        el[key] = value;
-      } else {
-        if (key === 'className') key = 'class';else if (key === 'labelFor') key = 'for';
-        el.setAttribute(key, "" + value);
-      }
-    });
+    if (props) {
+      Object.keys(props).forEach(function (key) {
+        var value = props[key];
+        if (value == null) return;
+
+        if (key.startsWith('on')) {
+          el.addEventListener(key.slice(2).toLowerCase(), value);
+        } else if (key === 'children') {
+          renderChild(el, value);
+        } else if (key === 'style' && typeof value === 'object') {
+          renderStyle(el, value);
+        } else if (key === 'dangerouslySetInnerHTML' && value) {
+          el.innerHTML = value.__html || ''; // eslint-disable-line no-underscore-dangle
+        } else if (key === 'ref' && typeof value === 'function') {
+          ref = value;
+        } else if (typeof value === 'boolean') {
+          if (value) el.setAttribute(key, key);else el.removeAttribute(key);
+        } else if (matchProps(tag, key, value)) {
+          el[key] = value;
+        } else {
+          if (key === 'className') key = 'class';else if (key === 'labelFor') key = 'for';
+          el.setAttribute(key, "" + value);
+        }
+      });
+    }
   }
@@ -88,4 +99,7 @@
 
-return createElement;
+exports.Fragment = Fragment;
+exports.createElement = createElement;
 
-}());
+return exports;
+
+}({}));

dist/index.min.js

@@ -1,2 +0,2 @@
-/*! @gera2ld/jsx-dom v1.0.0 | ISC License */
-var JSX=function(){"use strict";var c=["innerHTML","innerText","textContent",{key:"value",tag:"textarea"}];function i(t,e){Array.isArray(e)?e.forEach(function(e){return i(t,e)}):null!=e&&!1!==e&&("object"!=typeof e?t.appendChild(document.createTextNode(""+e)):t.appendChild(e))}return function(n,r){var o,a=document.createElement(n);r&&Object.keys(r).forEach(function(e){var t=r[e];null!=t&&(e.startsWith("on")?a.addEventListener(e.slice(2).toLowerCase(),t):"children"===e?i(a,t):"style"===e&&"object"==typeof t?function(n,r){Object.keys(r).forEach(function(e){var t=r[e];n.style[e]="number"==typeof t?t+"px":t})}(a,t):"dangerouslySetInnerHTML"===e&&t?a.innerHTML=t.__html||"":"ref"===e&&"function"==typeof t?o=t:"boolean"==typeof t?t?a.setAttribute(e,e):a.removeAttribute(e):function(e,r,o){return c.some(function(t){if(!t)return!1;if("string"==typeof t)return r===t;var n={tag:e,key:r,value:o};return Object.keys(t).every(function(e){return t[e]===n[e]})})}(n,e,t)?a[e]=t:("className"===e?e="class":"labelFor"===e&&(e="for"),a.setAttribute(e,""+t)))});for(var e=arguments.length,t=new Array(2<e?e-2:0),u=2;u<e;u++)t[u-2]=arguments[u];return i(a,t),o&&o(a),a}}();
+/*! @gera2ld/jsx-dom v1.1.0 | ISC License */
+var JSX=function(e){"use strict";var c=["innerHTML","innerText","textContent",{key:"value",tag:"textarea"}],i={name:"Fragment"};function f(t,e){Array.isArray(e)?e.forEach(function(e){return f(t,e)}):null!=e&&!1!==e&&("object"!=typeof e?t.appendChild(document.createTextNode(""+e)):t.appendChild(e))}return e.Fragment=i,e.createElement=function(n,r){var o,a;if(n===i)o=document.createDocumentFragment();else{if("string"!=typeof n)throw new Error("Invalid element type: "+n);o=document.createElement(n),r&&Object.keys(r).forEach(function(e){var t=r[e];null!=t&&(e.startsWith("on")?o.addEventListener(e.slice(2).toLowerCase(),t):"children"===e?f(o,t):"style"===e&&"object"==typeof t?function(n,r){Object.keys(r).forEach(function(e){var t=r[e];n.style[e]="number"==typeof t?t+"px":t})}(o,t):"dangerouslySetInnerHTML"===e&&t?o.innerHTML=t.__html||"":"ref"===e&&"function"==typeof t?a=t:"boolean"==typeof t?t?o.setAttribute(e,e):o.removeAttribute(e):function(e,r,o){return c.some(function(t){if(!t)return!1;if("string"==typeof t)return r===t;var n={tag:e,key:r,value:o};return Object.keys(t).every(function(e){return t[e]===n[e]})})}(n,e,t)?o[e]=t:("className"===e?e="class":"labelFor"===e&&(e="for"),o.setAttribute(e,""+t)))})}for(var e=arguments.length,t=new Array(2<e?e-2:0),u=2;u<e;u++)t[u-2]=arguments[u];return f(o,t),a&&a(o),o},e}({});

package.json

 {
   "name": "@gera2ld/jsx-dom",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Use JSX for HTML elements.",
@@ -5,0 +5,0 @@ "author": "Gerald <[e-mail]>",

types/index.d.ts

@@ -1,1 +0,6 @@
-export default function createElement(tag: string, props?: object, ...children: any[]): HTMLElement;
+interface IComponent {
+    name?: string;
+}
+export declare const Fragment: IComponent;
+export declare function createElement(tag: string | IComponent, props?: object, ...children: any[]): any;
+export {};

No alert changes

Improved metrics

Total package byte prevSize

9339

increased by11.92%

Lines of code

189

increased by18.87%

No dependency changes