@thi.ng/rdom 1.3.3 → 1.4.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-04-26T13:32:20Z
+- **Last updated**: 2024-05-08T18:24:31Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,13 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+## [1.4.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@1.4.0) (2024-05-08)
+
+#### 🚀 Features
+
+- add rdom-klist example project, update readmes ([cd458ac](https://github.com/thi-ng/umbrella/commit/cd458ac))
+- add rdom-klist example project, update readmes ([531437f](https://github.com/thi-ng/umbrella/commit/531437f))
+
 ### [1.3.3](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@1.3.3) (2024-04-26)
 
 #### 🩹 Bug fixes

package/README.md

@@ -315,7 +315,7 @@ Browser ESM import:
 
 [JSDelivr documentation](https://www.jsdelivr.com/)
 
-Package sizes (brotli'd, pre-treeshake): ESM: 4.24 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 4.23 KB
 
 ## Dependencies
 
@@ -362,8 +362,10 @@ directory are using this package:
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-dnd.png" width="240"/>            | rdom drag & drop example                                                                                | [Demo](https://demo.thi.ng/umbrella/rdom-dnd/)            | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-dnd)            |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-formgen.jpg" width="240"/>        | Basic usage of the declarative rdom-forms generator                                                     | [Demo](https://demo.thi.ng/umbrella/rdom-formgen/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-formgen)        |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-key-sequences.jpg" width="240"/>  | rstream & transducer-based FSM for converting key event sequences into high-level commands              | [Demo](https://demo.thi.ng/umbrella/rdom-key-sequences/)  | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-key-sequences)  |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-klist.png" width="240"/>          | Basic usage of thi.ng/rdom keyed list component wrapper                                                 | [Demo](https://demo.thi.ng/umbrella/rdom-klist/)          | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-klist)          |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lazy-load.png" width="240"/>      | Lazy loading components via @thi.ng/rdom                                                                | [Demo](https://demo.thi.ng/umbrella/rdom-lazy-load/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lazy-load)      |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lissajous.png" width="240"/>      | rdom & hiccup-canvas interop test                                                                       | [Demo](https://demo.thi.ng/umbrella/rdom-lissajous/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lissajous)      |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-reactive-svg.jpg" width="240"/>   | Animated SVG elements with reactive attributes                                                          | [Demo](https://demo.thi.ng/umbrella/rdom-reactive-svg/)   | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-reactive-svg)   |
 |                                                                                                                            | Full umbrella repo doc string search w/ paginated results                                               | [Demo](https://demo.thi.ng/umbrella/rdom-search-docs/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-search-docs)    |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-svg-nodes.png" width="240"/>      | rdom powered SVG graph with draggable nodes                                                             | [Demo](https://demo.thi.ng/umbrella/rdom-svg-nodes/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-svg-nodes)      |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-web-components.png" width="240"/> | Defining & using basic Web Components (with shadow DOM) via @thi.ng/rdom & @thi.ng/meta-css             | [Demo](https://demo.thi.ng/umbrella/rdom-web-components/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-web-components) |

package/async.js

@@ -15,8 +15,7 @@ class $Async {
     this.el = await this.inner.mount(parent, index, void 0);
     (async () => {
       for await (let x of this.src) {
-        if (!this.el)
-          return;
+        if (!this.el) return;
         this.update(x);
       }
     })();
@@ -27,16 +26,14 @@ class $Async {
     await this.inner.unmount();
   }
   update(x) {
-    if (this.el)
-      this.inner.update(x);
+    if (this.el) this.inner.update(x);
   }
 }
 const $asyncA = async (src, comp, path) => {
   const attribs = {};
   const setter = defSetterUnsafe(path);
   for await (let x of src) {
-    if (comp.el)
-      $attribs(comp.el, setter(attribs, x));
+    if (comp.el) $attribs(comp.el, setter(attribs, x));
   }
 };
 export {

package/compile.js

@@ -19,13 +19,11 @@ const walk = (f, x, path = []) => {
 const isComplexComponent = (x) => {
   if (isPlainObject(x)) {
     for (const k in x) {
-      if (isComplexComponent(x[k]))
-        return true;
+      if (isComplexComponent(x[k])) return true;
     }
   } else if (isArray(x)) {
     for (let i = 0, n = x.length; i < n; i++) {
-      if (isComplexComponent(x[i]))
-        return true;
+      if (isComplexComponent(x[i])) return true;
     }
   }
   return isSubscribable(x) || isAsyncIterable(x) || isComponent(x) || isElement(x);
@@ -39,8 +37,7 @@ const complexComponent = (tree) => ({
         this.subs.push(x.subscribe(new $SubA(this, path)));
       } else if (isAsyncIterable(x)) {
         $asyncA(x, this, path);
-        if (path.length === 1)
-          delete attribs[path[0]];
+        if (path.length === 1) delete attribs[path[0]];
       }
     }, attribs);
     this.children = [];

package/klist.js

@@ -32,8 +32,7 @@ class KList extends Component {
     this.cache = void 0;
   }
   async update(curr) {
-    if (!curr)
-      return;
+    if (!curr) return;
     const { keyFn, items, ctor, cache, el: parent } = this;
     const currItems = [];
     const currCache = /* @__PURE__ */ new Map();

package/list.js

@@ -32,8 +32,7 @@ class List extends Component {
     this.prev = void 0;
   }
   async update(curr) {
-    if (!curr)
-      return;
+    if (!curr) return;
     const { ctor, equiv, items, prev, el: parent } = this;
     const nb = curr.length;
     let na = prev.length;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rdom",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible",
   "type": "module",
   "module": "./index.js",
@@ -37,20 +37,20 @@
     "tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.11.1",
-    "@thi.ng/checks": "^3.6.3",
-    "@thi.ng/errors": "^2.5.6",
-    "@thi.ng/hiccup": "^5.2.0",
-    "@thi.ng/paths": "^5.1.80",
-    "@thi.ng/prefixes": "^2.3.18",
-    "@thi.ng/rstream": "^8.4.3",
-    "@thi.ng/strings": "^3.7.32"
+    "@thi.ng/api": "^8.11.2",
+    "@thi.ng/checks": "^3.6.4",
+    "@thi.ng/errors": "^2.5.7",
+    "@thi.ng/hiccup": "^5.2.1",
+    "@thi.ng/paths": "^5.1.81",
+    "@thi.ng/prefixes": "^2.3.19",
+    "@thi.ng/rstream": "^8.5.0",
+    "@thi.ng/strings": "^3.7.33"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.43.0",
-    "esbuild": "^0.20.2",
-    "typedoc": "^0.25.12",
-    "typescript": "^5.4.3"
+    "@microsoft/api-extractor": "^7.43.2",
+    "esbuild": "^0.21.1",
+    "typedoc": "^0.25.13",
+    "typescript": "^5.4.5"
   },
   "keywords": [
     "async",
@@ -145,5 +145,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "0bec55821066c18eb977a7eabd42c0bb2b096d98\n"
+  "gitHead": "df34b4a9e650cc7323575356de207d78933bdcf3\n"
 }

package/sub.js

@@ -30,8 +30,7 @@ class $Sub extends Subscription {
     this.next(x);
   }
   next(x) {
-    if (this.el)
-      this.inner.update(x);
+    if (this.el) this.inner.update(x);
   }
 }
 class $SubA extends Subscription {
@@ -43,8 +42,7 @@ class $SubA extends Subscription {
   setter;
   attr = {};
   next(a) {
-    if (this.comp.el)
-      $attribs(this.comp.el, this.setter(this.attr, a));
+    if (this.comp.el) $attribs(this.comp.el, this.setter(this.attr, a));
   }
 }
 export {

package/wrap.js

@@ -12,8 +12,7 @@ const wrapper = (update) => (tag, attribs, body) => ({
     this.el = void 0;
   },
   update(body2) {
-    if (this.el)
-      update(this.el, body2);
+    if (this.el) update(this.el, body2);
   }
 });
 const $wrapText = wrapper($text);