jsx-dom-runtime - npm Package Compare versions

Comparing version 0.18.0 to 0.19.0

babel-preset/index.js

 import { declarePreset } from '@babel/helper-plugin-utils';
 import _createPlugin from '@babel/plugin-transform-react-jsx/lib/create-plugin.js';
 
-const createPlugin = _createPlugin && typeof _createPlugin.default === 'function'
+const createPlugin = typeof _createPlugin.default === 'function'
   ? _createPlugin.default
@@ -6,0 +6,0 @@ : _createPlugin;

jsx-dev-runtime/index.js

@@ -11,2 +11,7 @@ let appendChildren = (node, children) => {
 let extensions = new Map();
+let Extend = props => {
+  for (let key in props) {
+    extensions.set(key, props[key]);
+  }
+};
 
@@ -73,8 +78,2 @@ let properties = new Set(['className', 'innerHTML', 'textContent', 'value', 'htmlFor']);
 
-let Fragment = props => {
-  let fragment = new DocumentFragment();
-  appendChildren(fragment, props.children);
-  return fragment;
-};
-
 class PropTypeError extends Error {
@@ -368,2 +367,28 @@ constructor(message, expected = []) {
 
+let Fragment = props => {
+  let fragment = new DocumentFragment();
+  appendChildren(fragment, props.children);
+  return fragment;
+};
+
+let createRef = () => ({
+  current: null
+});
+
+let parseFromString = html => {
+  return jsx('template', {
+    innerHTML: html
+  }).content;
+};
+let Template = props => {
+  return parseFromString(props.children);
+};
+
+let useText = initContent => {
+  let text = new Text(initContent);
+  return [text, content => {
+    text.textContent = content;
+  }];
+};
+
 const printValue = val => {
@@ -402,2 +427,2 @@ if (Array.isArray(val)) return '{ […] }';
 
-export { Fragment, jsxDEV };
+export { Extend, Fragment, Template, createRef, jsx, jsxDEV, jsx as jsxs, parseFromString, createRef as useRef, useText };

jsx-runtime/index.js

@@ -1,1 +0,103 @@
-let e=(t,r)=>{Array.isArray(r)?r.some((r=>e(t,r))):null!=r&&!1!==r&&t.append(r)},t=t=>{let r=new DocumentFragment;return e(r,t.children),r},r=new Map,n=e=>{for(let t in e)r.set(t,e[t])},l=new Set(["className","innerHTML","textContent","value","htmlFor"]),s=(t,n)=>{let s,o;if("function"==typeof t)return t(n);for(s in t="string"==typeof t?document.createElement(t):t,n)if("ref"!==s&&"children"!==s)if(o=n[s],r.has(s))r.get(s)(t,o);else if(l.has(s))t[s]=o;else if("style"===s)if("string"==typeof o)t.style.cssText=o;else for(s in o)"-"===s[0]?t.style.setProperty(s,o[s]):t.style[s]=o[s];else"o"===s[0]&&"n"===s[1]?(s=s.toLowerCase(),s in t&&(t[s]=o)):null!=o?"boolean"!=typeof o||/^(ari|dat)a-/.test(s)?t.setAttribute(s,o):o?t.setAttribute(s,""):t.removeAttribute(s):t.removeAttribute(s);return e("template"===t.localName?t.content:t,n.children),o=n.ref,null!=o&&("function"==typeof o?o(t):o.current=t),t};export{n as Extend,t as Fragment,s as jsx,s as jsxs};
+let appendChildren = (node, children) => {
+  if (Array.isArray(children)) {
+    // Just shorter that the .forEach
+    children.some(child => appendChildren(node, child));
+  } else if (children != null && children !== false) {
+    node.append(children);
+  }
+};
+
+let Fragment = props => {
+  let fragment = new DocumentFragment();
+  appendChildren(fragment, props.children);
+  return fragment;
+};
+
+let extensions = new Map();
+let Extend = props => {
+  for (let key in props) {
+    extensions.set(key, props[key]);
+  }
+};
+
+let properties = new Set(['className', 'innerHTML', 'textContent', 'value', 'htmlFor']);
+let jsx = (node, props) => {
+  let key, val;
+  if (typeof node === 'function') {
+    return node(props);
+  }
+  node = typeof node === 'string' ? document.createElement(node) : node;
+  for (key in props) {
+    if (key !== 'ref' && key !== 'children') {
+      val = props[key];
+      if (extensions.has(key)) {
+        extensions.get(key)(node, val);
+      } else if (properties.has(key)) {
+        node[key] = val;
+      } else if (key === 'style') {
+        if (typeof val === 'string') {
+          node.style.cssText = val;
+        } else {
+          // reuse `key` variable
+          for (key in val) {
+            if (key[0] === '-') {
+              node.style.setProperty(key, val[key]);
+            } else {
+              node.style[key] = val[key];
+            }
+          }
+        }
+        // Benchmark for comparison (thanks preact): https://esbench.com/bench/574c954bdb965b9a00965ac6
+      } else if (key[0] === 'o' && key[1] === 'n') {
+        key = key.toLowerCase();
+        if (key in node) {
+          node[key] = val;
+        }
+      } else if (val != null) {
+        if (typeof val !== 'boolean' || /^(ari|dat)a-/.test(key)) {
+          node.setAttribute(key, val);
+        } else if (val) {
+          node.setAttribute(key, '');
+        } else {
+          node.removeAttribute(key);
+        }
+      } else {
+        node.removeAttribute(key);
+      }
+    }
+  }
+  appendChildren(node.localName === 'template' ? node.content : node, props.children);
+
+  // reuse `val` variable
+  val = props.ref;
+  if (val != null) {
+    if (typeof val === 'function') {
+      val(node);
+    } else {
+      val.current = node;
+    }
+  }
+  return node;
+};
+
+let createRef = () => ({
+  current: null
+});
+
+let parseFromString = html => {
+  return jsx('template', {
+    innerHTML: html
+  }).content;
+};
+let Template = props => {
+  return parseFromString(props.children);
+};
+
+let useText = initContent => {
+  let text = new Text(initContent);
+  return [text, content => {
+    text.textContent = content;
+  }];
+};
+
+export { Extend, Fragment, Template, createRef, jsx, jsx as jsxs, parseFromString, createRef as useRef, useText };

package.json

 {
   "name": "jsx-dom-runtime",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "A tiny in 500 bytes library to JSX syntax templates for DOM",
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "main": "jsx-runtime/index.cjs",
+  "module": "jsx-runtime/index.js",
   "types": "./index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "require": "./jsx-runtime/index.cjs",
+      "import": "./jsx-runtime/index.js",
+      "default": "./jsx-runtime/index.js"
     },
@@ -50,5 +50,4 @@ "./jsx-runtime": {
     "@evilmartians/lefthook": "^1.2.8",
-    "@jest/globals": "^29.4.1",
+    "@jest/globals": "^29.4.2",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -59,10 +58,9 @@ "@size-limit/preset-small-lib": "^8.1.2",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
-    "babel-jest": "^29.4.1",
-    "eslint": "^8.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
+    "babel-jest": "^29.4.2",
+    "eslint": "^8.34.0",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
-    "rollup": "^2.79.1",
-    "rollup-plugin-terser": "^7.0.2",
+    "rollup": "^3.15.0",
     "size-limit": "^8.1.2",
@@ -86,7 +84,4 @@ "typescript": "^4.9.5"
       "path": "jsx-runtime/index.js",
-      "limit": "495 B"
-    },
-    {
-      "path": "jsx-runtime/index.cjs",
-      "limit": "553 B"
+      "import": "{ jsx }",
+      "limit": "454 B"
     }
@@ -93,0 +88,0 @@ ],

README.md

@@ -45,3 +45,3 @@ # jsx-dom-runtime
     <>
-      <button type="button" onClick={addItem}>
+      <button type="button" onclick={addItem}>
         Add Item
@@ -77,8 +77,9 @@ </button>
 const ref = createRef();
+const clickHandler = () => {
+  ref.current.textContent = ++i;
+};
 
 <document.body>
   <p ref={ref}>{i}</p>
-  <button type="button" onClick={() => {
-    ref.current.textContent = ++i;
-  }}>
+  <button type="button" onclick={clickHandler}>
     + 1
@@ -92,6 +93,8 @@ </button>
 ```js
+const autofocus = (node) => {
+  setTimeout(() => node.focus(), 100);
+};
+
 <document.body>
-  <input ref={(node) => {
-    setTimeout(() => node.focus(), 100);
-  }} />
+  <input type="text" ref={autofocus} />
 </document.body>;
@@ -105,3 +108,3 @@ ```
 ```js
-import { Extend } from 'jsx-dom-runtime/jsx-runtime';
+import { Extend } from 'jsx-dom-runtime';
 
@@ -121,3 +124,6 @@ Extend({
 <document.body>
-  <div classList={['one', 'two']} dataset={{ testid: 'test', hook: 'text' }} />
+  <div
+    classList={['one', 'two']}
+    dataset={{ testid: 'test', hook: 'text' }}
+  />
 </document.body>;
@@ -132,16 +138,16 @@ ```
 
-### Parse from string
+### Template
 
+Get template from string
+
 ```js
-import { parseFromString } from 'jsx-dom-runtime';
+import { Template } 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>;
+  <Template>
+    {`<svg width="24" height="24" aria-hidden="true">
+        <path d="M12 12V6h-1v6H5v1h6v6h1v-6h6v-1z"/>
+      </svg>`}
+  </Template>
+</document.body>
 ```
@@ -148,0 +154,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

Improved metrics

Total package byte prevSize

41148

increased by11.96%

Dev dependency count

19

decreased by-9.52%

Lines of code

1080

increased by28.72%

Number of lines in readme file

152

increased by4.11%

Worsened metrics

Number of package files

9

decreased by-18.18%

No dependency changes