@thi.ng/rdom 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-05-08T18:24:31Z
+- **Last updated**: 2024-06-29T09:28:36Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,19 @@ 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

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 189 standalone projects, maintained as part
 > of the [@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo
 > and anti-framework.
 >

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/compile.js

@@ -7,32 +7,32 @@ 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)) {
@@ -62,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/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.4.0",
+  "version": "1.4.2",
   "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.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"
+    "@thi.ng/api": "^8.11.4",
+    "@thi.ng/checks": "^3.6.6",
+    "@thi.ng/errors": "^2.5.9",
+    "@thi.ng/hiccup": "^5.2.3",
+    "@thi.ng/paths": "^5.1.83",
+    "@thi.ng/prefixes": "^2.3.21",
+    "@thi.ng/rstream": "^8.5.2",
+    "@thi.ng/strings": "^3.7.35"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.43.2",
-    "esbuild": "^0.21.1",
+    "@microsoft/api-extractor": "^7.47.0",
+    "esbuild": "^0.21.5",
     "typedoc": "^0.25.13",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.2"
   },
   "keywords": [
     "async",
@@ -145,5 +145,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "df34b4a9e650cc7323575356de207d78933bdcf3\n"
+  "gitHead": "7b950c112fba0b2e7c450765b15624c3382f1354\n"
 }

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);
@@ -15,8 +15,8 @@ const wrapper = (update) => (tag, attribs, body) => ({
     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);