jsx-dom-runtime - npm Package Compare versions

Comparing version 0.46.0 to 0.47.0

index.d.ts

@@ -38,2 +38,3 @@ /// <reference lib="dom" />
 export const properties: Set<string>;
+export const extensions: Map<string, (node: HTMLElement | SVGElement, value: any) => void>;
 
@@ -40,0 +41,0 @@ export function useRef<T = any>(current?: T): RefObject<T>

jsx-runtime/index.js

@@ -16,10 +16,4 @@ let appendChildren = (node, children) => {
 
+let internalKeys = new Set(['ref', 'children', '__ns']);
 let extensions = new Map();
-let Extend = props => {
-  for (let key in props) {
-    extensions.set(key, props[key]);
-  }
-};
-
-let internalKeys = new Set(['ref', 'children', '__ns']);
 let properties = new Set(['value']);
@@ -72,2 +66,8 @@ let jsx = (tag, props) => {
 
+let Extend = props => {
+  for (let key in props) {
+    extensions.set(key, props[key]);
+  }
+};
+
 let useRef = current => {
@@ -95,2 +95,2 @@ return Object.seal({
 
-export { Extend, Fragment, Template, appendChildren, jsx, parseFromString, properties, useRef, useText };
+export { Extend, Fragment, Template, appendChildren, extensions, jsx, parseFromString, properties, useRef, useText };

package.json

 {
   "name": "jsx-dom-runtime",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "description": "A tiny in 500 bytes library to JSX syntax templates for DOM",
@@ -63,4 +63,4 @@ "type": "module",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
     "babel-jest": "^29.5.0",
@@ -71,3 +71,3 @@ "eslint": "^8.40.0",
     "jest-environment-jsdom": "^29.5.0",
-    "rollup": "^3.21.7",
+    "rollup": "^3.21.8",
     "size-limit": "^8.2.4",
@@ -74,0 +74,0 @@ "typescript": "^5.0.4"

README.md

@@ -7,2 +7,3 @@ # jsx-dom-runtime
 [![npm version](https://badgen.net/npm/v/jsx-dom-runtime)](https://www.npmjs.com/package/jsx-dom-runtime)
+[![Stand with Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://stand-with-ukraine.pp.ua/)
 
@@ -34,22 +35,2 @@ ## Install
 ```js
-import { useRef } from 'jsx-dom-runtime';
-
-const App = () => {
-  const ref = useRef();
-
-  const addItem = () => {
-    // add to the start of the list
-    ref.current.prepend(<li>New Item</li>);
-  };
-
-  return (
-    <>
-      <button type="button" onclick={addItem}>
-        Add Item
-      </button>
-      <ul ref={ref} />
-    </>
-  );
-};
-
 // add to the end of the head
@@ -61,3 +42,7 @@ document.head.append(
 // add to the end the the body
-document.body.append(<App />);
+document.body.append(
+  <main class="box">
+    <h1 class="title">Hello World!</h1>
+  </main>
+);
 ```
@@ -69,2 +54,29 @@
 
+Support general [JSX syntax](https://facebook.github.io/jsx/).
+
+## Function Components
+
+Function components must start with a capital letter or they won’t work.
+
+```js
+const App = ({ name }) => (
+  <div>Hello {name}</div>
+);
+
+document.body.append(<App name="Bob" />);
+```
+
+### Fragments
+
+Use `<>...</>` syntax, to group multiple elements together. Under the hood, it use [`DocumentFragment`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) interface.
+
+```js
+document.body.append(
+  <>
+    <p>Hello</p>
+    <p>World</p>
+  </>
+);
+```
+
 ### Creating Refs
@@ -77,7 +89,7 @@
 
-let i = 0;
+const ref = useRef();
 
-const ref = useRef();
-const click = () => {
-  ref.current.textContent = ++i;
+const addItem = () => {
+  // add to the start of the list
+  ref.current.prepend(<li>New Item</li>);
 };
@@ -87,6 +99,6 @@
   <>
-    <p ref={ref}>0</p>
-    <button type="button" onclick={click}>
-      + 1
+    <button type="button" onclick={addItem}>
+      Add Item
     </button>
+    <ul ref={ref} />
   </>
@@ -99,3 +111,3 @@ );
 ```js
-const focus = (node) => {
+const callbackRef = (node) => {
   node.addEventListener('focusin', () => {
@@ -111,8 +123,10 @@ node.style.backgroundColor = 'pink';
 document.body.append(
-  <input type="text" ref={focus} />
+  <input type="text" ref={callbackRef} />
 );
 ```
 
-## Text
+### Text
 
+Use the [Text](https://developer.mozilla.org/en-US/docs/Web/API/Text) node in a DOM tree.
+
 ```js
@@ -126,3 +140,5 @@ import { useText } from 'jsx-dom-runtime';
     <p>{text}</p>
-    <button type="button" onclick={() => setText('Clicked!')}>
+    <button type="button" onclick={() => {
+      setText('Clicked!');
+    }}>
       Click me
@@ -136,3 +152,3 @@ </button>
 
-Get template from string.
+Get template from a string.
 
@@ -151,3 +167,3 @@ ```js
 
-## Extend
+## extensions
 
@@ -157,17 +173,18 @@ Add custom attributes in `JSX.Element`.
 ```js
-import { Extend } from 'jsx-dom-runtime';
+import { extensions } from 'jsx-dom-runtime';
 
-Extend({
-  'x-class': (node, value) => {
+extensions
+  .set('x-class', (node, value) => {
     node.setAttribute('class', value.filter(Boolean).join(' '));
-  },
-  'x-dataset': (node, value) => {
+  })
+  .set('x-dataset', (node, value) => {
     for (let key in value) {
-      node.dataset[key] = value[key];
+      if (value[key] != null) {
+        node.dataset[key] = value[key];
+      }
     }
-  },
-  'x-autofocus': (node, value) => {
+  })
+  .set('x-autofocus', (node, value) => {
     setTimeout(() => node.focus(), value);
-  },
-});
+  });
 
@@ -304,9 +321,7 @@ document.body.append(
 
-const App: FC<Props> = ({ text }) => {
-  return (
-    <div class="card">
-      <div class="text">{text}</div>
-    </div>
-  );
-};
+const App: FC<Props> = ({ text }) => (
+  <div class="card">
+    <div class="text">{text}</div>
+  </div>
+);
 
@@ -316,6 +331,4 @@ document.body.append(<App text="Hello!" />);
 
-Read more: [TypeScript JSX](https://www.typescriptlang.org/docs/handbook/jsx.html)
-
 ## License
 
 [MIT](./LICENSE)

No alert changes

Improved metrics

Total package byte prevSize

78658

increased by0.86%

Lines of code

2012

increased by0.05%

Number of lines in readme file

321

increased by4.22%

No dependency changes