@thi.ng/rdom 1.3.3 → 1.4.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-04-26T13:32:20Z
+- **Last updated**: 2024-06-21T19:34:38Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,26 @@ 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.1](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@1.4.1) (2024-06-21)
+
+#### 🩹 Bug fixes
+
+- fix [#469](https://github.com/thi-ng/umbrella/issues/469), update setAttrib() `class` handling ([6cf8c56](https://github.com/thi-ng/umbrella/commit/6cf8c56))
+  - use `el.setAttribute()` to be compatible w/ SVG elements
+    - https://developer.mozilla.org/en-US/docs/Web/API/Element/className#notes
+
+#### ♻️ Refactoring
+
+- rename various rest args to be more semantically meaningful ([8088a56](https://github.com/thi-ng/umbrella/commit/8088a56))
+- enforce uniform naming convention of internal functions ([56992b2](https://github.com/thi-ng/umbrella/commit/56992b2))
+
+## [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

@@ -7,7 +7,7 @@
 [![Mastodon Follow](https://img.shields.io/mastodon/follow/109331703950160316?domain=https%3A%2F%2Fmastodon.thi.ng&style=social)](https://mastodon.thi.ng/@toxi)
 
 > [!NOTE]
-> This is one of 192 standalone projects, maintained as part
+> This is one of 193 standalone projects, maintained as part
 > of the [@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo
 > and anti-framework.
 >
@@ -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/api.d.ts

@@ -32,9 +32,9 @@ export interface IComponent<T = any> {
      *
      * @param parent -
      * @param idx -
-     * @param xs -
+     * @param args -
      */
-    mount(parent: ParentNode, idx?: NumOrElement, ...xs: any[]): Promise<Element>;
+    mount(parent: ParentNode, idx?: NumOrElement, ...args: any[]): Promise<Element>;
     /**
      * Async component lifecycle method to remove the component from the
      * target DOM and release any other internal resources (e.g.

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

@@ -7,40 +7,37 @@ import { isComponent, isElement } from "./checks.js";
 import { $el, $remove, $tree } from "./dom.js";
 import { $SubA, $sub } from "./sub.js";
 import { $wrapEl, $wrapText } from "./wrap.js";
-const $compile = (tree) => isArray(tree) ? isComplexComponent(tree) ? complexComponent(tree) : basicComponent(tree) : isComponent(tree) ? tree : isSubscribable(tree) ? $sub(tree, "span") : isAsyncIterable(tree) ? $async(tree, "span") : tree instanceof Element ? $wrapEl(tree) : $wrapText("span", null, tree);
-const walk = (f, x, path = []) => {
+const $compile = (tree) => isArray(tree) ? __isComplexComponent(tree) ? __complexComponent(tree) : __basicComponent(tree) : isComponent(tree) ? tree : isSubscribable(tree) ? $sub(tree, "span") : isAsyncIterable(tree) ? $async(tree, "span") : tree instanceof Element ? $wrapEl(tree) : $wrapText("span", null, tree);
+const __walk = (f, x, path = []) => {
   if (isPlainObject(x)) {
     for (const k in x) {
-      walk(f, x[k], [...path, k]);
+      __walk(f, x[k], [...path, k]);
     }
   }
   f(x, path);
 };
-const isComplexComponent = (x) => {
+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);
 };
-const complexComponent = (tree) => ({
+const __complexComponent = (tree) => ({
   async mount(parent, index = -1) {
     this.subs = [];
     const attribs = { ...tree[1] };
-    walk((x, path) => {
+    __walk((x, path) => {
       if (isSubscribable(x)) {
         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 = [];
@@ -65,7 +62,7 @@ const complexComponent = (tree) => ({
   update() {
   }
 });
-const basicComponent = (tree) => ({
+const __basicComponent = (tree) => ({
   async mount(parent, index = -1) {
     return this.el = await $tree(tree, parent, index);
   },

package/component.d.ts

@@ -7,7 +7,7 @@ import type { IComponent, NumOrElement } from "./api.js";
  */
 export declare abstract class Component<T = any> implements IComponent<T> {
     el?: Element;
-    abstract mount(parent: ParentNode, index?: NumOrElement, ...xs: any[]): Promise<Element>;
+    abstract mount(parent: ParentNode, index?: NumOrElement, ...args: any[]): Promise<Element>;
     unmount(): Promise<void>;
     update(state?: T): void;
     /**

package/dom.js

@@ -96,19 +96,19 @@ const $html = (el, body) => {
 };
 const $attribs = (el, attribs) => {
   for (let id in attribs) {
-    setAttrib(el, id, attribs[id], attribs);
+    __setAttrib(el, id, attribs[id], attribs);
   }
   return el;
 };
 const __setterCache = {};
-const getproto = Object.getPrototypeOf;
-const getdesc = Object.getOwnPropertyDescriptor;
-const __desc = (proto, prop) => proto ? getdesc(proto, prop) ?? __desc(getproto(proto), prop) : void 0;
+const __getProto = Object.getPrototypeOf;
+const __getDesc = Object.getOwnPropertyDescriptor;
+const __desc = (proto, prop) => proto ? __getDesc(proto, prop) ?? __desc(__getProto(proto), prop) : void 0;
 const __setter = (el, prop) => {
   const key = `${el.namespaceURI}/${el.tagName}#${prop}`;
-  return __setterCache[key] ?? (__setterCache[key] = __desc(getproto(el), prop)?.set ?? false);
+  return __setterCache[key] ?? (__setterCache[key] = __desc(__getProto(el), prop)?.set ?? false);
 };
-const setAttrib = (el, id, val, attribs) => {
+const __setAttrib = (el, id, val, attribs) => {
   implementsFunction(val, "deref") && (val = val.deref());
   if (id.startsWith("on")) {
     if (isString(val)) {
@@ -123,16 +123,19 @@ const setAttrib = (el, id, val, attribs) => {
   isArray(val) && (val = val.join(ATTRIB_JOIN_DELIMS[id] || " "));
   switch (id) {
     case "class":
-      el.className = isString(val) ? val : mergeClasses(el.className, val);
+      el.setAttribute(
+        "class",
+        isString(val) ? val : mergeClasses(el.className, val)
+      );
       break;
     case "style":
       $style(el, val);
       break;
     case "value":
-      updateValueAttrib(el, val);
+      __updateValueAttrib(el, val);
       break;
     case "data":
-      updateDataAttribs(el, val);
+      __updateDataAttribs(el, val);
       break;
     case "prefix":
       el.setAttribute(id, isString(val) ? val : formatPrefixes(val));
@@ -152,7 +155,7 @@ const setAttrib = (el, id, val, attribs) => {
     }
   }
 };
-const updateValueAttrib = (el, value) => {
+const __updateValueAttrib = (el, value) => {
   let ev;
   switch (el.type) {
     case "text":
@@ -172,7 +175,7 @@ const updateValueAttrib = (el, value) => {
       el.value = value;
   }
 };
-const updateDataAttribs = (el, attribs) => {
+const __updateDataAttribs = (el, attribs) => {
   const data = el.dataset;
   for (let id in attribs) {
     const v = deref(attribs[id]);

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/object.d.ts

@@ -46,7 +46,7 @@ import { Component } from "./component.js";
  * @param opts - options for `fromObject()` stream setup
  * @param inner -
  */
-export declare const $object: <T extends object, K extends keyof T>(src: T, opts: Partial<StreamObjOpts<T, K>>, inner: Fn<StreamObj<T, K>["streams"], Promise<ComponentLike>>) => $Object<T, K>;
+export declare const $object: <T extends object, K extends Keys<T>>(src: T, opts: Partial<StreamObjOpts<T, K>>, inner: Fn<StreamObj<T, K>["streams"], Promise<ComponentLike>>) => $Object<T, K>;
 /**
  * Syntax sugar for a combination of {@link $sub} and {@link $object} to allow
  * reactive updates of `$object()` components themselves.
@@ -79,7 +79,7 @@ export declare const $object: <T extends object, K extends keyof T>(src: T, opts
  * @param opts -
  * @param inner -
  */
-export declare const $subObject: <T extends object, K extends keyof T>(src: ISubscribable<T>, opts: Partial<StreamObjOpts<T, K>>, inner: Fn<StreamObj<T, K>["streams"], Promise<ComponentLike>>) => IComponent<T>;
+export declare const $subObject: <T extends object, K extends Keys<T>>(src: ISubscribable<T>, opts: Partial<StreamObjOpts<T, K>>, inner: Fn<StreamObj<T, K>["streams"], Promise<ComponentLike>>) => IComponent<T>;
 export declare class $Object<T extends object, K extends Keys<T>> extends Component implements IMountWithState<T> {
     protected ctor: Fn<StreamObj<T, K>["streams"], Promise<ComponentLike>>;
     protected obj: StreamObj<T, K>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rdom",
-  "version": "1.3.3",
+  "version": "1.4.1",
   "description": "Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible",
   "type": "module",
   "module": "./index.js",
@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/thi-ng/umbrella.git"
   },
-  "homepage": "https://github.com/thi-ng/umbrella/tree/develop/packages/rdom#readme",
+  "homepage": "https://thi.ng/rdom",
   "funding": [
     {
       "type": "github",
@@ -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.3",
+    "@thi.ng/checks": "^3.6.5",
+    "@thi.ng/errors": "^2.5.8",
+    "@thi.ng/hiccup": "^5.2.2",
+    "@thi.ng/paths": "^5.1.82",
+    "@thi.ng/prefixes": "^2.3.20",
+    "@thi.ng/rstream": "^8.5.1",
+    "@thi.ng/strings": "^3.7.34"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.43.0",
-    "esbuild": "^0.20.2",
-    "typedoc": "^0.25.12",
-    "typescript": "^5.4.3"
+    "@microsoft/api-extractor": "^7.47.0",
+    "esbuild": "^0.21.5",
+    "typedoc": "^0.25.13",
+    "typescript": "^5.5.2"
   },
   "keywords": [
     "async",
@@ -145,5 +145,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "0bec55821066c18eb977a7eabd42c0bb2b096d98\n"
+  "gitHead": "154c95cf9d6bab32174498ec3b5b5d87e42be7f9\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

@@ -1,6 +1,6 @@
 import { $compile } from "./compile.js";
 import { $addChild, $html, $remove, $text } from "./dom.js";
-const wrapper = (update) => (tag, attribs, body) => ({
+const __wrapper = (update) => (tag, attribs, body) => ({
   async mount(parent, index, state) {
     this.inner = $compile([tag, attribs]);
     this.el = await this.inner.mount(parent, index);
@@ -12,12 +12,11 @@ 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);
-const $wrapHtml = wrapper($html);
+const $wrapText = __wrapper($text);
+const $wrapHtml = __wrapper($html);
 const $wrapEl = (el) => ({
   async mount(parent, idx) {
     $addChild(parent, el, idx);