jsx-dom-runtime - npm Package Compare versions

Comparing version 0.13.0 to 0.14.0

dist/index.cjs.js

@@ -13,17 +13,2 @@ 'use strict';
 
-function bindRef() {
-  var refs = arguments;
-  return function (node) {
-    for (var i = 0; i < refs.length;) {
-      var ref = refs[i++];
-
-      if (typeof ref === 'function') {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    }
-  };
-}
-
 var parseFromString = function parseFromString(html) {
@@ -43,16 +28,6 @@ /* just the shorter tag name than the `div` */
 
-var events = function events(ready) {
-  return function (node) {
-    ready(function (type, listener, options) {
-      node.addEventListener(type, listener, options);
-    }, function (type, listener, options) {
-      node.removeEventListener(type, listener, options);
-    }, node);
-  };
-};
-
-exports.bindRef = bindRef;
+var Extend = '_ex';
+exports.Extend = Extend;
 exports.createRef = createRef;
-exports.events = events;
 exports.parseFromString = parseFromString;
 exports.useText = useText;

dist/index.js

@@ -5,17 +5,2 @@ let createRef = () => ({
 
-function bindRef() {
-  let refs = arguments;
-  return node => {
-    for (let i = 0; i < refs.length;) {
-      let ref = refs[i++];
-
-      if (typeof ref === 'function') {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    }
-  };
-}
-
 let parseFromString = html => {
@@ -35,10 +20,4 @@ /* just the shorter tag name than the `div` */
 
-let events = ready => node => {
-  ready((type, listener, options) => {
-    node.addEventListener(type, listener, options);
-  }, (type, listener, options) => {
-    node.removeEventListener(type, listener, options);
-  }, node);
-};
+const Extend = '_ex';
 
-export { bindRef, createRef, events, parseFromString, useText };
+export { Extend, createRef, parseFromString, useText };

dist/index.module.js

@@ -7,17 +7,2 @@ var createRef = function createRef() {
 
-function bindRef() {
-  var refs = arguments;
-  return function (node) {
-    for (var i = 0; i < refs.length;) {
-      var ref = refs[i++];
-
-      if (typeof ref === 'function') {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    }
-  };
-}
-
 var parseFromString = function parseFromString(html) {
@@ -37,12 +22,3 @@ /* just the shorter tag name than the `div` */
 
-var events = function events(ready) {
-  return function (node) {
-    ready(function (type, listener, options) {
-      node.addEventListener(type, listener, options);
-    }, function (type, listener, options) {
-      node.removeEventListener(type, listener, options);
-    }, node);
-  };
-};
-
-export { bindRef, createRef, events, parseFromString, useText };
+var Extend = '_ex';
+export { Extend, createRef, parseFromString, useText };

jsx-dev-runtime/index.js

@@ -15,2 +15,3 @@ 'use strict';
 
+let plugins = new Map();
 let properties = new Set(['className', 'innerHTML', 'textContent', 'value', 'htmlFor']);
@@ -22,2 +23,10 @@ let jsx = (el, props) => {
 
+  if (el === '_ex') {
+    for (let key in props) {
+      plugins.set(key, props[key]);
+    }
+
+    return;
+  }
+
   let val;
@@ -30,3 +39,5 @@ let node = typeof el === 'string' ? document.createElement(el) : el;
 
-      if (properties.has(key)) {
+      if (plugins.has(key)) {
+        plugins.get(key)(node, val);
+      } else if (properties.has(key)) {
         node[key] = val;
@@ -33,0 +44,0 @@ } else if (key === 'style') {

jsx-runtime/jsxRuntime.cjs.js

@@ -1,1 +0,1 @@
-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(["className","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],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;
+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 Map,r=new Set(["className","innerHTML","textContent","value","htmlFor"]),n=function(n,o){if("function"==typeof n)return n(o);if("_ex"!==n){var i,s="string"==typeof n?document.createElement(n):n;for(var a in o)if("ref"!==a&&"children"!==a)if(i=o[a],t.has(a))t.get(a)(s,i);else if(r.has(a))s[a]=i;else if("style"===a)if("string"==typeof i)s.style.cssText=i;else for(a in i)"-"===a[0]?s.style.setProperty(a,i[a]):s.style[a]=i[a];else"o"===a[0]&&"n"===a[1]?(a=a.toLowerCase())in s&&(s[a]=i):null!=i?"boolean"!=typeof i||/^(ari|dat)a-/.test(a)?s.setAttribute(a,i):i?s.setAttribute(a,""):s.removeAttribute(a):s.removeAttribute(a);return e("TEMPLATE"===s.tagName?s.content:s,o.children),null!=(i=o.ref)&&("function"==typeof i?i(s):i.current=s),s}for(var f in o)t.set(f,o[f])};exports.Fragment=function(t){var r=document.createDocumentFragment();return e(r,t.children),r},exports.jsx=n,exports.jsxs=n;

jsx-runtime/jsxRuntime.esm.js

@@ -1,1 +0,1 @@
-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(["className","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],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};
+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 Map,n=new Set(["className","innerHTML","textContent","value","htmlFor"]),o=(t,o)=>{if("function"==typeof t)return t(o);if("_ex"===t){for(let e in o)r.set(e,o[e]);return}let l,i="string"==typeof t?document.createElement(t):t;for(let e in o)if("ref"!==e&&"children"!==e)if(l=o[e],r.has(e))r.get(e)(i,l);else if(n.has(e))i[e]=l;else if("style"===e)if("string"==typeof l)i.style.cssText=l;else for(e in l)"-"===e[0]?i.style.setProperty(e,l[e]):i.style[e]=l[e];else"o"===e[0]&&"n"===e[1]?(e=e.toLowerCase(),e in i&&(i[e]=l)):null!=l?"boolean"!=typeof l||/^(ari|dat)a-/.test(e)?i.setAttribute(e,l):l?i.setAttribute(e,""):i.removeAttribute(e):i.removeAttribute(e);return e("TEMPLATE"===i.tagName?i.content:i,o.children),l=o.ref,null!=l&&("function"==typeof l?l(i):l.current=i),i};export{t as Fragment,o as jsx,o as jsxs};

jsx-runtime/jsxRuntime.js

@@ -22,2 +22,4 @@ let appendChildren = (node, children) => {
 
+let plugins = new Map();
+
 let properties = new Set([
@@ -36,2 +38,10 @@ 'className',
 
+  if (el === '_ex') {
+    for (let key in props) {
+      plugins.set(key, props[key]);
+    }
+
+    return;
+  }
+
   let val;
@@ -44,3 +54,5 @@ let node = typeof el === 'string' ? document.createElement(el) : el;
 
-      if (properties.has(key)) {
+      if (plugins.has(key)) {
+        plugins.get(key)(node, val);
+      } else if (properties.has(key)) {
         node[key] = val;
@@ -47,0 +59,0 @@ } else if (key === 'style') {

jsx-runtime/jsxRuntime.module.js

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

package.json

 {
   "name": "jsx-dom-runtime",
-  "version": "0.13.0",
+  "version": "0.14.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.10",
+    "@babel/core": "^7.13.13",
     "@babel/helper-plugin-utils": "^7.13.0",
@@ -30,4 +30,4 @@ "@babel/plugin-transform-react-jsx": "^7.13.12",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
     "@size-limit/preset-small-lib": "^4.10.1",
@@ -40,7 +40,7 @@ "@testing-library/dom": "^7.30.1",
     "babel-jest": "^26.6.3",
-    "eslint": "^7.22.0",
+    "eslint": "^7.23.0",
     "fs-extra": "^9.1.0",
     "husky": "^4.3.8",
     "jest": "^26.6.3",
-    "rollup": "^2.42.4",
+    "rollup": "^2.43.0",
     "rollup-plugin-terser": "^7.0.2",
@@ -67,11 +67,11 @@ "size-limit": "^4.10.1",
       "path": "jsx-runtime/jsxRuntime.esm.js",
-      "limit": "458 B"
+      "limit": "496 B"
     },
     {
       "path": "jsx-runtime/jsxRuntime.cjs.js",
-      "limit": "439 B"
+      "limit": "482 B"
     },
     {
       "path": "jsx-runtime/jsxRuntime.module.js",
-      "limit": "454 B"
+      "limit": "494 B"
     }
@@ -78,0 +78,0 @@ ],

README.md

@@ -97,37 +97,30 @@ # jsx-dom-runtime
 
-### Events
+### Extend
 
+Add custom attributes behavior
+
 ```js
-import { events } from 'jsx-dom-runtime';
+import { Extend } from 'jsx-dom-runtime';
 
-let i = 0;
+<Extend
+  classList={(node, value) => {
+    node.setAttribute('class', value.filter(Boolean).join(' '));
+  }}
 
-const ready = events((on, off, Target) => {
-  on('click', () => <Target textContent={++i} />);
-  on('mouseover', () => console.log('Ping'), { once: true });
-});
+  dataset={(node, value) => {
+    for (let key in value) {
+      node.dataset[key] = value[key];
+    }
+  }}
+/>;
 
 <document.body>
-  <button ref={ready}>{i}</button>
+  <div classList={['one', 'two']} dataset={{ testid: 'test', hook: 'text' }} />
 </document.body>;
 ```
 
-### Binding multiple refs
+Result
 
-```js
-import { bindRef, createRef, events } from 'jsx-dom-runtime';
-
-const ref = createRef();
-
-const callback = (node) => {
-  console.log(ref.current === node); // true
-};
-
-const ready = events((on, off, Target) => {
-  console.log(ref.current === Target); // true
-});
-
-<document.body>
-  <p ref={bindRef(ref, callback, ready /*,...*/)} />
-</document.body>;
+```html
+<div class="one two" data-testid="test" data-hook="text"></div>
 ```
@@ -134,0 +127,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

26506

decreased by-3.88%

Lines of code

541

decreased by-7.36%

Number of lines in readme file

146

decreased by-4.58%

Dependency changes

• Updated@babel/core@^7.13.13