jsx-dom-runtime - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/index.cjs.js

@@ -13,2 +13,41 @@ '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) {
+  var node = document.createElement('p');
+  node.innerHTML = html;
+  var childNodes = node.childNodes;
+  var i = childNodes.length;
+  var list = Array(i);
+
+  while (0 < i--) {
+    list[i] = childNodes[i];
+  }
+
+  return list;
+};
+
+var useText = function useText(initContent) {
+  var text = new Text(initContent);
+  return [text, function (content) {
+    text.textContent = content;
+  }];
+};
+
+exports.bindRef = bindRef;
 exports.createRef = createRef;
+exports.parseFromString = parseFromString;
+exports.useText = useText;

dist/index.js

@@ -1,5 +0,41 @@
-const createRef = () => ({
+let createRef = () => ({
   current: null
 });
 
-export { 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 => {
+  let node = document.createElement('p');
+  node.innerHTML = html;
+  let childNodes = node.childNodes;
+  let i = childNodes.length;
+  let list = Array(i);
+
+  while (0 < i--) {
+    list[i] = childNodes[i];
+  }
+
+  return list;
+};
+
+let useText = initContent => {
+  let text = new Text(initContent);
+  return [text, content => {
+    text.textContent = content;
+  }];
+};
+
+export { bindRef, createRef, parseFromString, useText };

dist/index.module.js

@@ -7,2 +7,38 @@ var createRef = function createRef() {
 
-export { 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) {
+  var node = document.createElement('p');
+  node.innerHTML = html;
+  var childNodes = node.childNodes;
+  var i = childNodes.length;
+  var list = Array(i);
+
+  while (0 < i--) {
+    list[i] = childNodes[i];
+  }
+
+  return list;
+};
+
+var useText = function useText(initContent) {
+  var text = new Text(initContent);
+  return [text, function (content) {
+    text.textContent = content;
+  }];
+};
+
+export { bindRef, createRef, parseFromString, useText };

jsx-dev-runtime/index.js

@@ -63,6 +63,6 @@ 'use strict';
   if (ref != null) {
-    if ('current' in ref) {
+    if (typeof ref === 'function') {
+      ref(node);
+    } else {
       ref.current = node;
-    } else if (typeof ref === 'function') {
-      ref(node);
     }
@@ -112,3 +112,3 @@ }
 const createChainableChecker = validater => {
-  const required = (isRequired, key, value, props) => {
+  const required = (isRequired, key, value) => {
     if (value == null) {
@@ -122,3 +122,3 @@ if (isRequired) {
 
-    return validater(key, value, props);
+    return validater(key, value);
   };
@@ -152,6 +152,21 @@
 
-    return new PropTypeError(`Invalid prop \`${key}\` of type \`${value}\`, expected one of ${list.join(', ')}`);
+    return new PropTypeError(`Invalid prop \`${key}\` of type "${value}", expected one of "${list.join('", "')}"`);
   });
 };
 
+const createOneOfType = validators => {
+  return createChainableChecker((key, value) => {
+    for (let i = 0; i < validators.length; i++) {
+      const result = validators[i](key, value);
+
+      if (result === null) {
+        return null;
+      }
+    }
+
+    const preciseType = getPreciseType(value);
+    return new PropTypeError(`Invalid prop \`${key}\` of type \`${preciseType}\``);
+  });
+};
+
 var T = {
@@ -165,6 +180,9 @@ array: createPrimitiveChecker('array'),
   any: createChainableChecker(() => null),
-  oneOf: createOneOf
+  oneOf: createOneOf,
+  oneOfType: createOneOfType
 };
 
 const element = {
+  accesskey: T.string,
+  accessKey: T.string,
   id: T.string,
@@ -175,4 +193,4 @@ dir: T.string,
   class: T.string,
-  // className: T.string, // TODO:
-  // style: T.string, // TODO:
+  className: T.oneOfType([T.string, T.array]),
+  style: T.oneOfType([T.string, T.object]),
   tabindex: T.number,
@@ -195,7 +213,31 @@ tabIndex: T.number,
   src: T.string.isRequired,
-  alt: T.string.isRequired
+  alt: T.string.isRequired,
+  width: T.number,
+  height: T.number,
+  srcset: T.string,
+  sizes: T.string,
+  loading: T.oneOf(['lazy', 'eager', 'auto'])
 };
 
+const input = {
+  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'])
+};
+
+const button = {
+  type: T.oneOf(['button', 'reset', 'submit'])
+};
+
+const type = T.oneOf(['anonymous', 'use-credentials']);
+const CORS = {
+  crossorigin: type,
+  crossOrigin: type
+};
+
+const label = {
+  for: T.string,
+  htmlFor: T.string
+};
+
 const specMap = new Map();
-const list = [['a', a], 'abbr', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'blockquote', 'body', 'br', '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], 'input', 'ins', 'kbd', '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', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr'];
+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', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr'];
 list.forEach(item => {
@@ -217,3 +259,3 @@ if (Array.isArray(item)) {
     try {
-      error = spec[key](key, props[key], props);
+      error = spec[key](key, props[key]);
     } catch (ex) {
@@ -220,0 +262,0 @@ error = ex;

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(null!=o&&!1!==o)if(e(o))for(var i=0;o.length>i;)r(n,o[i++]);else n.appendChild(o.nodeType>0?o:t.createTextNode(o))},n=new Set(["innerHTML","textContent","value","htmlFor"]),o=function(o,i){if("function"==typeof o)return o(i);var s="string"==typeof o?t.createElement(o):o,l=i.ref;for(var a in i)if("ref"!==a&&"children"!==a){var f=i[a];if("className"===a)s.setAttribute("class",e(f)?f.filter(Boolean).join(" "):f);else if(n.has(a))s[a]=f;else if("style"===a)if("string"==typeof f)s.style.cssText=f;else for(var u in f)s.style[u]=f[u];else if("o"===a[0]&&"n"===a[1]){var c=a.toLowerCase();c in s&&(s[c]=f)}else"boolean"!=typeof f||/^(aria|data)-/.test(a)?null!=f&&s.setAttribute(a,""+f):s[a]=f}return r(s,i.children),null!=l&&("current"in l?l.current=s:"function"==typeof l&&l(s)),s};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=Array.isArray,t=document,r=function r(n,o){if(null!=o&&!1!==o)if(e(o))for(var i=0;o.length>i;)r(n,o[i++]);else n.appendChild(o.nodeType>0?o:t.createTextNode(o))},n=new Set(["innerHTML","textContent","value","htmlFor"]),o=function(o,i){if("function"==typeof o)return o(i);var s="string"==typeof o?t.createElement(o):o,l=i.ref;for(var a in i)if("ref"!==a&&"children"!==a){var f=i[a];if("className"===a)s.setAttribute("class",e(f)?f.filter(Boolean).join(" "):f);else if(n.has(a))s[a]=f;else if("style"===a)if("string"==typeof f)s.style.cssText=f;else for(var u in f)s.style[u]=f[u];else if("o"===a[0]&&"n"===a[1]){var c=a.toLowerCase();c in s&&(s[c]=f)}else"boolean"!=typeof f||/^(aria|data)-/.test(a)?null!=f&&s.setAttribute(a,""+f):s[a]=f}return r(s,i.children),null!=l&&("function"==typeof l?l(s):l.current=s),s};exports.Fragment=function(e){var n=t.createDocumentFragment();return r(n,e.children),n},exports.jsx=o,exports.jsxs=o;

jsx-runtime/jsxRuntime.esm.js

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

jsx-runtime/jsxRuntime.js

@@ -81,6 +81,6 @@ let isArray = Array.isArray;
   if (ref != null) {
-    if ('current' in ref) {
+    if (typeof ref === 'function') {
+      ref(node);
+    } else {
       ref.current = node;
-    } else if (typeof ref === 'function') {
-      ref(node);
     }
@@ -87,0 +87,0 @@ }

jsx-runtime/jsxRuntime.module.js

@@ -1,1 +0,1 @@
-var e=Array.isArray,t=document,r=function r(n,i){if(null!=i&&!1!==i)if(e(i))for(var a=0;i.length>a;)r(n,i[a++]);else 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"]),a=function(n,a){if("function"==typeof n)return n(a);var l="string"==typeof n?t.createElement(n):n,o=a.ref;for(var s in a)if("ref"!==s&&"children"!==s){var f=a[s];if("className"===s)l.setAttribute("class",e(f)?f.filter(Boolean).join(" "):f);else if(i.has(s))l[s]=f;else if("style"===s)if("string"==typeof f)l.style.cssText=f;else for(var c in f)l.style[c]=f[c];else if("o"===s[0]&&"n"===s[1]){var u=s.toLowerCase();u in l&&(l[u]=f)}else"boolean"!=typeof f||/^(aria|data)-/.test(s)?null!=f&&l.setAttribute(s,""+f):l[s]=f}return r(l,a.children),null!=o&&("current"in o?o.current=l:"function"==typeof o&&o(l)),l};export{n as Fragment,a as jsx,a as jsxs};
+var e=Array.isArray,t=document,r=function r(n,i){if(null!=i&&!1!==i)if(e(i))for(var a=0;i.length>a;)r(n,i[a++]);else 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"]),a=function(n,a){if("function"==typeof n)return n(a);var l="string"==typeof n?t.createElement(n):n,o=a.ref;for(var s in a)if("ref"!==s&&"children"!==s){var f=a[s];if("className"===s)l.setAttribute("class",e(f)?f.filter(Boolean).join(" "):f);else if(i.has(s))l[s]=f;else if("style"===s)if("string"==typeof f)l.style.cssText=f;else for(var c in f)l.style[c]=f[c];else if("o"===s[0]&&"n"===s[1]){var u=s.toLowerCase();u in l&&(l[u]=f)}else"boolean"!=typeof f||/^(aria|data)-/.test(s)?null!=f&&l.setAttribute(s,""+f):l[s]=f}return r(l,a.children),null!=o&&("function"==typeof o?o(l):o.current=l),l};export{n as Fragment,a as jsx,a as jsxs};

package.json

 {
   "name": "jsx-dom-runtime",
-  "version": "0.6.0",
-  "description": "JSX syntax for DOM Element",
+  "version": "0.7.0",
+  "description": "A tiny in 500 bytes library to JSX syntax templates for DOM",
   "main": "dist/index.cjs.js",
@@ -45,3 +45,2 @@ "module": "dist/index.module.js",
   "files": [
-    "src",
     "dist",
@@ -56,2 +55,3 @@ "jsx-dev-runtime",
     "jsx",
+    "jsxdom",
     "jsx-dom",
@@ -63,11 +63,11 @@ "jsx-runtime"
       "path": "jsx-runtime/jsxRuntime.esm.js",
-      "limit": "469 B"
+      "limit": "462 B"
     },
     {
       "path": "jsx-runtime/jsxRuntime.cjs.js",
-      "limit": "463 B"
+      "limit": "456 B"
     },
     {
       "path": "jsx-runtime/jsxRuntime.module.js",
-      "limit": "470 B"
+      "limit": "464 B"
     }
@@ -74,0 +74,0 @@ ],

README.md

 # jsx-dom-runtime
 
+A tiny in 500 bytes library to JSX syntax templates for DOM.
+
 [![test status](https://github.com/shoonia/jsx-dom-runtime/workflows/tests/badge.svg)](https://github.com/shoonia/jsx-dom-runtime/actions)
 [![npm version](https://badgen.net/npm/v/jsx-dom-runtime)](https://www.npmjs.com/package/jsx-dom-runtime)
-[![minzip](https://badgen.net/bundlephobia/minzip/jsx-dom-runtime)](https://bundlephobia.com/result?p=jsx-dom-runtime)
 
@@ -36,2 +37,3 @@ ## Install
   const addItem = () => {
+    // append to the end the of list
     <List.current>
@@ -52,2 +54,3 @@ <li>New Item</li>
 
+// append to the end the of head
 <document.head>
@@ -57,2 +60,3 @@ <link rel="stylesheet" href="/style.css" />
 
+// append to the end the of body
 <document.body id="root">
@@ -65,4 +69,67 @@ <App />
 
+## Syntax
+
+### Creating Refs
+
+```js
+import { createRef } from 'jsx-dom-runtime';
+
+let i = 0;
+
+const ref = createRef();
+
+<document.body>
+  <p ref={ref}>{i}</p>
+  <button type="button" onClick={() => {
+    ref.current.textContent = ++i;
+  }}>
+    + 1
+  </button>
+</document.body>;
+```
+
+### Callback Refs
+
+```js
+<document.body>
+  <input ref={(node) => {
+    setTimeout(() => node.focus(), 100);
+  }} />
+</document.body>;
+```
+
+### Binding multiple refs
+
+```js
+import { bindRef, createRef } from 'jsx-dom-runtime';
+
+const ref = createRef();
+
+const callback = (node) => {
+  console.log(ref.current === node); // true
+};
+
+<document.body>
+  <p ref={bindRef(ref, callback /* ... */)} />
+</document.body>;
+```
+
+### Parse from string
+
+```js
+import { parseFromString } from 'jsx-dom-runtime';
+
+const svg = parseFromString(
+  `<svg width="24" height="24" aria-hidden="true">
+    <path d="M12 12V6h-1v6H5v1h6v6h1v-6h6v-1z"/>
+  </svg>`
+);
+
+<document.body>
+  {svg}
+</document.body>;
+```
+
 ## License
 
 [MIT](./LICENSE)

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

132

increased by103.08%

Worsened metrics

Total package byte prevSize

21568

decreased by-14.88%

Number of package files

13

decreased by-50%

Lines of code

456

decreased by-35.5%

No dependency changes