jsx-dom-runtime - npm Package Compare versions

Comparing version 0.11.0 to 0.12.0

dist/index.cjs.js

@@ -44,11 +44,7 @@ 'use strict';
   return function (node) {
-    var on = function on(type, listener, options) {
+    ready(function (type, listener, options) {
       node.addEventListener(type, listener, options);
-    };
-
-    var off = function off(type, listener, options) {
+    }, function (type, listener, options) {
       node.removeEventListener(type, listener, options);
-    };
-
-    ready(on, off, node);
+    }, node);
   };
@@ -55,0 +51,0 @@ };

dist/index.js

@@ -34,16 +34,10 @@ let createRef = () => ({
 
-const events = ready => {
-  return node => {
-    let on = (type, listener, options) => {
-      node.addEventListener(type, listener, options);
-    };
-
-    let off = (type, listener, options) => {
-      node.removeEventListener(type, listener, options);
-    };
-
-    ready(on, off, node);
-  };
+let events = ready => node => {
+  ready((type, listener, options) => {
+    node.addEventListener(type, listener, options);
+  }, (type, listener, options) => {
+    node.removeEventListener(type, listener, options);
+  }, node);
 };
 
 export { bindRef, createRef, events, parseFromString, useText };

dist/index.module.js

@@ -38,11 +38,7 @@ var createRef = function createRef() {
   return function (node) {
-    var on = function on(type, listener, options) {
+    ready(function (type, listener, options) {
       node.addEventListener(type, listener, options);
-    };
-
-    var off = function off(type, listener, options) {
+    }, function (type, listener, options) {
       node.removeEventListener(type, listener, options);
-    };
-
-    ready(on, off, node);
+    }, node);
   };
@@ -49,0 +45,0 @@ };

jsx-dev-runtime/index.js

@@ -5,12 +5,9 @@ 'use strict';
 
-let isArray = Array.isArray;
-let doc = document;
-
 let appendChildren = (node, children) => {
-  if (isArray(children)) {
-    for (let i = 0; children.length > i;) {
-      appendChildren(node, children[i++]);
-    }
+  if (Array.isArray(children)) {
+    children.forEach(child => {
+      appendChildren(node, child);
+    });
   } else if (children != null && children !== false) {
-    node.appendChild(children.nodeType > 0 ? children : doc.createTextNode(children));
+    node.appendChild(children.nodeType > 0 ? children : document.createTextNode(children));
   }
@@ -26,3 +23,3 @@ };
   let val;
-  let node = typeof el === 'string' ? doc.createElement(el) : el;
+  let node = typeof el === 'string' ? document.createElement(el) : el;
 
@@ -34,3 +31,3 @@ for (let key in props) {
       if (key === 'className') {
-        node.setAttribute('class', isArray(val) ? val.filter(Boolean).join(' ') : val);
+        node.setAttribute('class', Array.isArray(val) ? val.filter(Boolean).join(' ') : val);
       } else if (properties.has(key)) {
@@ -72,3 +69,3 @@ node[key] = val;
 
-  appendChildren(node, props.children); // reuse `val` variable
+  appendChildren(node.tagName === 'TEMPLATE' ? node.content : node, props.children); // reuse `val` variable
 
@@ -89,3 +86,3 @@ val = props.ref;
 let Fragment = props => {
-  let fragment = doc.createDocumentFragment();
+  let fragment = document.createDocumentFragment();
   appendChildren(fragment, props.children);
@@ -269,2 +266,8 @@ return fragment;
 
+const referrerPolicy = T.oneOf(['', 'no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url']);
+const ReferrerPolicy = {
+  referrerPolicy,
+  referrerpolicy: referrerPolicy
+};
+
 const element = {
@@ -287,3 +290,2 @@ accesskey: T.string,
 
-const referrerPolicy = T.oneOf(['', 'no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url']);
 const a = {
@@ -294,5 +296,3 @@ href: T.string.isRequired,
   type: T.string,
-  target: T.oneOf(['_blank', '_self', '_parent', '_top']),
-  referrerPolicy,
-  referrerpolicy: referrerPolicy
+  target: T.oneOf(['_blank', '_self', '_parent', '_top'])
 };
@@ -313,3 +313,4 @@
   type: T.oneOf(['text', 'password', 'tel', 'checkbox', 'radio', 'button', 'search', 'color', 'date', 'datetime', 'email', 'file', 'hidden', 'image', 'month', 'number', 'range', 'reset', 'submit', 'time', 'url', 'week', 'datetime-local']),
-  value: T.oneOfType([T.string, T.number])
+  value: T.oneOfType([T.string, T.number]),
+  name: T.string
 };
@@ -331,2 +332,3 @@
   autofocus: T.bool,
+  autoFocus: T.bool,
   name: T.string,
@@ -345,3 +347,3 @@ maxLength: T.number,
 const defaultSpecs = Object.assign({}, element, ARIA);
-const list = [['a', a], 'abbr', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'blockquote', 'body', 'br', ['button', button], 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', ['img', img, CORS], ['input', input], 'ins', 'kbd', ['label', label], 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'slot', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', ['textarea', textarea], 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr'];
+const list = [['a', a, ReferrerPolicy], 'abbr', 'address', 'applet', ['area', ReferrerPolicy], 'article', 'aside', ['audio', CORS], 'b', 'base', 'basefont', 'bdi', 'bdo', 'blockquote', 'body', 'br', ['button', button], 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', ['iframe', ReferrerPolicy], ['img', img, CORS, ReferrerPolicy], ['input', input, CORS], 'ins', 'kbd', ['label', label], 'legend', 'li', ['link', CORS, ReferrerPolicy], 'main', 'map', 'mark', 'marquee', 'menu', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', ['script', CORS], 'section', 'select', 'slot', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', ['textarea', textarea], 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', ['video', CORS], 'wbr'];
 list.forEach(item => {
@@ -348,0 +350,0 @@ if (Array.isArray(item)) {

jsx-runtime/jsxRuntime.cjs.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var e=Array.isArray,t=document,r=function r(n,o){if(e(o))for(var s=0;o.length>s;)r(n,o[s++]);else null!=o&&!1!==o&&n.appendChild(o.nodeType>0?o:t.createTextNode(o))},n=new Set(["innerHTML","textContent","value","htmlFor"]),o=function(o,s){if("function"==typeof o)return o(s);var i,l="string"==typeof o?t.createElement(o):o;for(var a in s)if("ref"!==a&&"children"!==a)if(i=s[a],"className"===a)l.setAttribute("class",e(i)?i.filter(Boolean).join(" "):i);else if(n.has(a))l[a]=i;else if("style"===a)if("string"==typeof i)l.style.cssText=i;else for(a in i)"-"===a[0]?l.style.setProperty(a,i[a]):l.style[a]=i[a];else"o"===a[0]&&"n"===a[1]?(a=a.toLowerCase())in l&&(l[a]=i):null!=i?"boolean"!=typeof i||/^(ari|dat)a-/.test(a)?l.setAttribute(a,i):i?l.setAttribute(a,""):l.removeAttribute(a):l.removeAttribute(a);return r(l,s.children),null!=(i=s.ref)&&("function"==typeof i?i(l):i.current=l),l};exports.Fragment=function(e){var n=t.createDocumentFragment();return r(n,e.children),n},exports.jsx=o,exports.jsxs=o;
+Object.defineProperty(exports,"__esModule",{value:!0});var e=function e(t,r){Array.isArray(r)?r.forEach((function(r){e(t,r)})):null!=r&&!1!==r&&t.appendChild(r.nodeType>0?r:document.createTextNode(r))},t=new Set(["innerHTML","textContent","value","htmlFor"]),r=function(r,n){if("function"==typeof r)return r(n);var o,i="string"==typeof r?document.createElement(r):r;for(var s in n)if("ref"!==s&&"children"!==s)if(o=n[s],"className"===s)i.setAttribute("class",Array.isArray(o)?o.filter(Boolean).join(" "):o);else if(t.has(s))i[s]=o;else if("style"===s)if("string"==typeof o)i.style.cssText=o;else for(s in o)"-"===s[0]?i.style.setProperty(s,o[s]):i.style[s]=o[s];else"o"===s[0]&&"n"===s[1]?(s=s.toLowerCase())in i&&(i[s]=o):null!=o?"boolean"!=typeof o||/^(ari|dat)a-/.test(s)?i.setAttribute(s,o):o?i.setAttribute(s,""):i.removeAttribute(s):i.removeAttribute(s);return e("TEMPLATE"===i.tagName?i.content:i,n.children),null!=(o=n.ref)&&("function"==typeof o?o(i):o.current=i),i};exports.Fragment=function(t){var r=document.createDocumentFragment();return e(r,t.children),r},exports.jsx=r,exports.jsxs=r;

jsx-runtime/jsxRuntime.esm.js

@@ -1,1 +0,1 @@
-let e=Array.isArray,t=document,r=(n,l)=>{if(e(l))for(let e=0;l.length>e;)r(n,l[e++]);else null!=l&&!1!==l&&n.appendChild(l.nodeType>0?l:t.createTextNode(l))},n=e=>{let n=t.createDocumentFragment();return r(n,e.children),n},l=new Set(["innerHTML","textContent","value","htmlFor"]),i=(n,i)=>{if("function"==typeof n)return n(i);let o,s="string"==typeof n?t.createElement(n):n;for(let t in i)if("ref"!==t&&"children"!==t)if(o=i[t],"className"===t)s.setAttribute("class",e(o)?o.filter(Boolean).join(" "):o);else if(l.has(t))s[t]=o;else if("style"===t)if("string"==typeof o)s.style.cssText=o;else for(t in o)"-"===t[0]?s.style.setProperty(t,o[t]):s.style[t]=o[t];else"o"===t[0]&&"n"===t[1]?(t=t.toLowerCase(),t in s&&(s[t]=o)):null!=o?"boolean"!=typeof o||/^(ari|dat)a-/.test(t)?s.setAttribute(t,o):o?s.setAttribute(t,""):s.removeAttribute(t):s.removeAttribute(t);return r(s,i.children),o=i.ref,null!=o&&("function"==typeof o?o(s):o.current=s),s};export{n as Fragment,i as jsx,i as jsxs};
+let e=(t,r)=>{Array.isArray(r)?r.forEach((r=>{e(t,r)})):null!=r&&!1!==r&&t.appendChild(r.nodeType>0?r:document.createTextNode(r))},t=t=>{let r=document.createDocumentFragment();return e(r,t.children),r},r=new Set(["innerHTML","textContent","value","htmlFor"]),n=(t,n)=>{if("function"==typeof t)return t(n);let o,l="string"==typeof t?document.createElement(t):t;for(let e in n)if("ref"!==e&&"children"!==e)if(o=n[e],"className"===e)l.setAttribute("class",Array.isArray(o)?o.filter(Boolean).join(" "):o);else if(r.has(e))l[e]=o;else if("style"===e)if("string"==typeof o)l.style.cssText=o;else for(e in o)"-"===e[0]?l.style.setProperty(e,o[e]):l.style[e]=o[e];else"o"===e[0]&&"n"===e[1]?(e=e.toLowerCase(),e in l&&(l[e]=o)):null!=o?"boolean"!=typeof o||/^(ari|dat)a-/.test(e)?l.setAttribute(e,o):o?l.setAttribute(e,""):l.removeAttribute(e):l.removeAttribute(e);return e("TEMPLATE"===l.tagName?l.content:l,n.children),o=n.ref,null!=o&&("function"==typeof o?o(l):o.current=l),l};export{t as Fragment,n as jsx,n as jsxs};

jsx-runtime/jsxRuntime.js

@@ -1,9 +0,6 @@
-let isArray = Array.isArray;
-let doc = document;
-
 let appendChildren = (node, children) => {
-  if (isArray(children)) {
-    for (let i = 0; children.length > i;) {
-      appendChildren(node, children[i++]);
-    }
+  if (Array.isArray(children)) {
+    children.forEach((child) => {
+      appendChildren(node, child);
+    });
   } else if (children != null && children !== false) {
@@ -13,3 +10,3 @@ node.appendChild(
         ? children
-        : doc.createTextNode(children)
+        : document.createTextNode(children)
     );
@@ -20,3 +17,3 @@ }
 let Fragment = (props) => {
-  let fragment = doc.createDocumentFragment();
+  let fragment = document.createDocumentFragment();
 
@@ -40,3 +37,3 @@ appendChildren(fragment, props.children);
   let val;
-  let node = typeof el === 'string' ? doc.createElement(el) : el;
+  let node = typeof el === 'string' ? document.createElement(el) : el;
 
@@ -50,3 +47,3 @@ for (let key in props) {
           'class',
-          isArray(val)
+          Array.isArray(val)
             ? val.filter(Boolean).join(' ')
@@ -91,3 +88,6 @@ : val
 
-  appendChildren(node, props.children);
+  appendChildren(
+    node.tagName === 'TEMPLATE' ? node.content : node,
+    props.children
+  );
 
@@ -94,0 +94,0 @@ // reuse `val` variable

jsx-runtime/jsxRuntime.module.js

@@ -1,1 +0,1 @@
-var e=Array.isArray,t=document,r=function r(n,i){if(e(i))for(var o=0;i.length>o;)r(n,i[o++]);else null!=i&&!1!==i&&n.appendChild(i.nodeType>0?i:t.createTextNode(i))},n=function(e){var n=t.createDocumentFragment();return r(n,e.children),n},i=new Set(["innerHTML","textContent","value","htmlFor"]),o=function(n,o){if("function"==typeof n)return n(o);var l,s="string"==typeof n?t.createElement(n):n;for(var a in o)if("ref"!==a&&"children"!==a)if(l=o[a],"className"===a)s.setAttribute("class",e(l)?l.filter(Boolean).join(" "):l);else if(i.has(a))s[a]=l;else if("style"===a)if("string"==typeof l)s.style.cssText=l;else for(a in l)"-"===a[0]?s.style.setProperty(a,l[a]):s.style[a]=l[a];else"o"===a[0]&&"n"===a[1]?(a=a.toLowerCase())in s&&(s[a]=l):null!=l?"boolean"!=typeof l||/^(ari|dat)a-/.test(a)?s.setAttribute(a,l):l?s.setAttribute(a,""):s.removeAttribute(a):s.removeAttribute(a);return r(s,o.children),null!=(l=o.ref)&&("function"==typeof l?l(s):l.current=s),s};export{n as Fragment,o as jsx,o as jsxs};
+var e=function e(t,r){Array.isArray(r)?r.forEach((function(r){e(t,r)})):null!=r&&!1!==r&&t.appendChild(r.nodeType>0?r:document.createTextNode(r))},t=function(t){var r=document.createDocumentFragment();return e(r,t.children),r},r=new Set(["innerHTML","textContent","value","htmlFor"]),n=function(t,n){if("function"==typeof t)return t(n);var o,i="string"==typeof t?document.createElement(t):t;for(var a in n)if("ref"!==a&&"children"!==a)if(o=n[a],"className"===a)i.setAttribute("class",Array.isArray(o)?o.filter(Boolean).join(" "):o);else if(r.has(a))i[a]=o;else if("style"===a)if("string"==typeof o)i.style.cssText=o;else for(a in o)"-"===a[0]?i.style.setProperty(a,o[a]):i.style[a]=o[a];else"o"===a[0]&&"n"===a[1]?(a=a.toLowerCase())in i&&(i[a]=o):null!=o?"boolean"!=typeof o||/^(ari|dat)a-/.test(a)?i.setAttribute(a,o):o?i.setAttribute(a,""):i.removeAttribute(a):i.removeAttribute(a);return e("TEMPLATE"===i.tagName?i.content:i,n.children),null!=(o=n.ref)&&("function"==typeof o?o(i):o.current=i),i};export{t as Fragment,n as jsx,n as jsxs};

package.json

 {
   "name": "jsx-dom-runtime",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "A tiny in 500 bytes library to JSX syntax templates for DOM",
@@ -20,3 +20,3 @@ "main": "dist/index.cjs.js",
   "dependencies": {
-    "@babel/core": "^7.13.8",
+    "@babel/core": "^7.13.10",
     "@babel/helper-plugin-utils": "^7.13.0",
@@ -27,3 +27,3 @@ "@babel/plugin-transform-react-jsx": "^7.12.17",
   "devDependencies": {
-    "@babel/preset-env": "^7.13.9",
+    "@babel/preset-env": "^7.13.10",
     "@babel/preset-typescript": "^7.13.0",
@@ -37,4 +37,4 @@ "@rollup/plugin-babel": "^5.3.0",
     "@types/testing-library__jest-dom": "^5.9.5",
-    "@typescript-eslint/eslint-plugin": "^4.16.1",
-    "@typescript-eslint/parser": "^4.16.1",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
     "babel-jest": "^26.6.3",
@@ -45,3 +45,3 @@ "eslint": "^7.22.0",
     "jest": "^26.6.3",
-    "rollup": "^2.41.2",
+    "rollup": "^2.42.2",
     "rollup-plugin-terser": "^7.0.2",
@@ -68,11 +68,11 @@ "size-limit": "^4.10.1",
       "path": "jsx-runtime/jsxRuntime.esm.js",
-      "limit": "482 B"
+      "limit": "491 B"
     },
     {
       "path": "jsx-runtime/jsxRuntime.cjs.js",
-      "limit": "471 B"
+      "limit": "475 B"
     },
     {
       "path": "jsx-runtime/jsxRuntime.module.js",
-      "limit": "478 B"
+      "limit": "483 B"
     }
@@ -79,0 +79,0 @@ ],

No alert changes

Improved metrics

Total package byte prevSize

27788

increased by0.63%

Worsened metrics

Lines of code

586

decreased by-0.68%

Dependency changes

• Updated@babel/core@^7.13.10