jsx-dom-runtime - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

jsx-dev-runtime/index.js

@@ -47,11 +47,15 @@ 'use strict';
       } else if (key[0] === 'o' && key[1] === 'n') {
-        let name = key.toLowerCase();
+        key = key.toLowerCase();
 
-        if (name in node) {
-          node[name] = val;
+        if (key in node) {
+          node[key] = val;
         }
       } else if (typeof val === 'boolean' && !/^(aria|data)-/.test(key)) {
-        node[key] = val;
+        if (val) {
+          node.setAttribute(key, '');
+        } else {
+          node.removeAttribute(key);
+        }
       } else if (val != null) {
-        node.setAttribute(key, '' + val);
+        node.setAttribute(key, val);
       }
@@ -81,6 +85,7 @@ }
 class PropTypeError extends Error {
-  constructor(message) {
+  constructor(message, expected = []) {
     super();
     this.message = message;
     this.stack = '';
+    this.expected = expected;
   }
@@ -136,3 +141,3 @@
       const preciseType = getPreciseType(value);
-      return new PropTypeError(`Invalid prop \`${key}\` of type \`${preciseType}\`, expected \`${expectedType}\``);
+      return new PropTypeError(`Invalid prop \`${key}\` of type \`${preciseType}\`, expected \`${expectedType}\``, [`\`${expectedType}\``]);
     }
@@ -144,2 +149,11 @@
 
+const booleanishChecker = createChainableChecker((key, value) => {
+  if (typeof value === 'boolean' || value === 'true' || value === 'false') {
+    return null;
+  }
+
+  const preciseType = getPreciseType(value);
+  return new PropTypeError(`Invalid prop \`${key}\` of type \`${preciseType}\`, expected "true", "false" or \`boolean\``, ['`boolean`', 'true', 'false']);
+});
+
 const createOneOf = list => {
@@ -153,3 +167,3 @@ return createChainableChecker((key, value) => {
 
-    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('", "')}"`, list);
   });
@@ -160,2 +174,4 @@ };
   return createChainableChecker((key, value) => {
+    const expected = [];
+
     for (let i = 0; i < validators.length; i++) {
@@ -167,6 +183,8 @@ const result = validators[i](key, value);
       }
+
+      expected.push(...result.expected);
     }
 
     const preciseType = getPreciseType(value);
-    return new PropTypeError(`Invalid prop \`${key}\` of type \`${preciseType}\``);
+    return new PropTypeError(`Invalid prop \`${key}\` of type \`${preciseType}\`, expected one of ${expected.join(', ')}`, expected);
   });
@@ -183,2 +201,3 @@ };
   any: createChainableChecker(() => null),
+  booleanish: booleanishChecker,
   oneOf: createOneOf,
@@ -188,2 +207,59 @@ oneOfType: createOneOfType
 
+const type = T.oneOf(['anonymous', 'use-credentials', '']);
+const CORS = {
+  crossorigin: type,
+  crossOrigin: type
+};
+
+const ARIA = {
+  'aria-activedescendant': T.string,
+  'aria-atomic': T.booleanish,
+  'aria-autocomplete': T.oneOf(['none', 'inline', 'list', 'both']),
+  'aria-busy': T.booleanish,
+  'aria-checked': T.oneOfType([T.booleanish, T.oneOf(['mixed'])]),
+  'aria-colcount': T.number,
+  'aria-colindex': T.number,
+  'aria-colspan': T.number,
+  'aria-controls': T.string,
+  'aria-current': T.oneOfType([T.booleanish, T.oneOf(['page', 'step', 'location', 'date', 'time'])]),
+  'aria-describedby': T.string,
+  'aria-details': T.string,
+  'aria-disabled': T.booleanish,
+  'aria-dropeffect': T.oneOf(['none', 'copy', 'execute', 'link', 'move', 'popup']),
+  'aria-errormessage': T.string,
+  'aria-expanded': T.booleanish,
+  'aria-flowto': T.string,
+  'aria-grabbed': T.booleanish,
+  'aria-haspopup': T.oneOfType([T.booleanish, T.oneOf(['menu', 'listbox', 'tree', 'grid', 'dialog'])]),
+  'aria-hidden': T.booleanish,
+  'aria-invalid': T.oneOfType([T.booleanish, T.oneOf(['grammar', 'spelling'])]),
+  'aria-keyshortcuts': T.string,
+  'aria-label': T.string,
+  'aria-labelledby': T.string,
+  'aria-level': T.number,
+  'aria-live': T.oneOf(['off', 'assertive', 'polite']),
+  'aria-modal': T.booleanish,
+  'aria-multiline': T.booleanish,
+  'aria-multiselectable': T.booleanish,
+  'aria-orientation': T.oneOf(['horizontal', 'vertical']),
+  'aria-owns': T.string,
+  'aria-placeholder': T.string,
+  'aria-posinset': T.number,
+  'aria-pressed': T.oneOfType([T.booleanish, T.oneOf(['mixed'])]),
+  'aria-readonly': T.booleanish,
+  'aria-relevant': T.oneOf(['additions', 'additions removals', 'additions text', 'all', 'removals', 'removals additions', 'removals text', 'text', 'text additions', 'text removals']),
+  'aria-required': T.booleanish,
+  'aria-roledescription': T.string,
+  'aria-rowcount': T.number,
+  'aria-rowindex': T.number,
+  'aria-rowspan': T.number,
+  'aria-selected': T.booleanish,
+  'aria-setsize': T.number,
+  'aria-sort': T.oneOf(['none', 'ascending', 'descending', 'other']),
+  'aria-valuemax': T.number,
+  'aria-valuemin': T.number,
+  'aria-valuenow': T.number,
+  'aria-valuetext': T.string
+};
+
 const element = {
@@ -221,19 +297,18 @@ accesskey: T.string,
   sizes: T.string,
-  loading: T.oneOf(['lazy', 'eager', 'auto'])
+  loading: T.oneOf(['lazy', 'eager', 'auto']),
+  decoding: T.oneOf(['async', 'sync', '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'])
+  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])
 };
 
 const button = {
-  type: T.oneOf(['button', 'reset', 'submit'])
+  disabled: T.bool,
+  type: T.oneOf(['button', 'reset', 'submit']),
+  value: T.string,
+  name: T.string
 };
 
-const type = T.oneOf(['anonymous', 'use-credentials']);
-const CORS = {
-  crossorigin: type,
-  crossOrigin: type
-};
-
 const label = {
@@ -244,12 +319,25 @@ for: T.string,
 
+const textarea = {
+  autofocus: T.bool,
+  name: T.string,
+  maxLength: T.number,
+  minLength: T.number,
+  placeholder: T.string,
+  rows: T.number,
+  cols: T.number,
+  readOnly: T.bool,
+  required: T.bool
+};
+
 const specMap = new Map();
-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'];
+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'];
 list.forEach(item => {
   if (Array.isArray(item)) {
     const [tagName, ...specs] = item;
-    specMap.set(tagName, Object.assign({}, element, ...specs));
+    specMap.set(tagName, Object.assign({}, defaultSpecs, ...specs));
   }
 
   if (typeof item === 'string') {
-    specMap.set(item, element);
+    specMap.set(item, defaultSpecs);
   }
@@ -259,3 +347,3 @@ });
 const propTypes = (tagName, spec, props, stack) => {
-  for (const key in spec) {
+  for (const key in props) {
     let error;
@@ -262,0 +350,0 @@

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

jsx-runtime/jsxRuntime.js

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

jsx-runtime/package.json

@@ -11,4 +11,5 @@ {
   "esmodule": "jsxRuntime.esm.js",
+  "types": "../index.d.ts",
   "private": true,
   "license": "MIT"
 }

package.json

 {
   "name": "jsx-dom-runtime",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A tiny in 500 bytes library to JSX syntax templates for DOM",
@@ -9,2 +9,3 @@ "main": "dist/index.cjs.js",
   "source": "dist/index.js",
+  "types": "./index.d.ts",
   "sideEffects": false,
@@ -22,3 +23,4 @@ "scripts": {
     "@babel/helper-plugin-utils": "^7.13.0",
-    "@babel/plugin-transform-react-jsx": "^7.12.17"
+    "@babel/plugin-transform-react-jsx": "^7.12.17",
+    "csstype": "^3.0.7"
   },
@@ -63,11 +65,11 @@ "devDependencies": {
       "path": "jsx-runtime/jsxRuntime.esm.js",
-      "limit": "462 B"
+      "limit": "469 B"
     },
     {
       "path": "jsx-runtime/jsxRuntime.cjs.js",
-      "limit": "456 B"
+      "limit": "462 B"
     },
     {
       "path": "jsx-runtime/jsxRuntime.module.js",
-      "limit": "464 B"
+      "limit": "470 B"
     }
@@ -74,0 +76,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

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

Total package byte prevSize

25009

increased by15.95%

Lines of code

542

increased by18.86%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedcsstype@^3.0.7

• + Addedcsstype@3.1.3(transitive)