@thi.ng/rdom 1.1.22 → 1.3.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-04-08T14:59:30Z
+- **Last updated**: 2024-04-20T14:42:45Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,29 @@ 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.3.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@1.3.0) (2024-04-20)
+
+#### 🚀 Features
+
+- add support for async iterables ([742e0db](https://github.com/thi-ng/umbrella/commit/742e0db))
+  - add $async() component wrapper
+  - add $asyncA() attribute wrapper
+  - update $compile() to support embedded `AsyncIterable` values
+- update wrapper() to support reactive/async attribs ([96ea779](https://github.com/thi-ng/umbrella/commit/96ea779))
+  - internally switch from `$el()` => `$compile()`
+
+#### ♻️ Refactoring
+
+- update type usage ([56d5747](https://github.com/thi-ng/umbrella/commit/56d5747))
+
+## [1.2.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@1.2.0) (2024-04-11)
+
+#### 🚀 Features
+
+- update setAttrib() property vs. attrib handling ([52cfe72](https://github.com/thi-ng/umbrella/commit/52cfe72))
+  - add/build cache of property setters
+  - update setAttrib() to prioritize setters and only fallback to attributes
+
 ## [1.1.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@1.1.0) (2024-02-10)
 
 #### 🚀 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 191 standalone projects, maintained as part
+> This is one of 192 standalone projects, maintained as part
 > of the [@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo
 > and anti-framework.
 >
@@ -22,6 +22,7 @@
 - [DOM creation & mutation](#dom-creation--mutation)
 - [Control structures](#control-structures)
   - [Event handlers for reactive streams](#event-handlers-for-reactive-streams)
+  - [Embedding async iterables](#embedding-async-iterables)
 - [Status](#status)
 - [Support packages](#support-packages)
 - [Related packages](#related-packages)
@@ -110,14 +111,16 @@ reasons.
 
 Because _rdom_ itself relies for most reactive features, stream composition and
 reactive value transformations on other packages, i.e.
-[@thi.ng/rstream](https://github.com/thi-ng/umbrella/tree/develop/packages/rstream)
+[@thi.ng/rstream](https://github.com/thi-ng/umbrella/tree/develop/packages/rstream),
+[@thi.ng/transducers-async](https://github.com/thi-ng/umbrella/tree/develop/packages/transducers-async)
 and
 [@thi.ng/transducers](https://github.com/thi-ng/umbrella/tree/develop/packages/transducers),
 please consult the docs for these packages to learn more about the available
 constructs and patterns. Most of _rdom_ only deals with either subscribing to
-reactive values and/or wrapping/transforming existing subscriptions, either
-explicitly using the provided control components (e.g.
-[`$sub()`](https://docs.thi.ng/umbrella/rdom/functions/_sub.html)) or using
+reactive values, async iterables and/or wrapping/transforming existing
+subscriptions, either explicitly using the provided control components (e.g.
+[`$async()`](https://docs.thi.ng/umbrella/rdom/functions/_async.html)),
+[`$sub()`](https://docs.thi.ng/umbrella/rdom/functions/_sub.html), or using
 [`$compile()`](https://docs.thi.ng/umbrella/rdom/functions/_compile.html) to
 auto-wrap such values embedded in an hiccup tree.
 
@@ -144,8 +147,8 @@ as a facade for many of these other functions and creates an actual DOM from a
 given hiccup component tree. It also automatically wraps any reactive values
 contained therein.
 
-**All of these functions are also usable, even if you don't intend to use any
-other package features!**
+**All of the following functions are also usable, even if you don't intend to
+use any other package features!**
 
 - [$addChild](https://docs.thi.ng/umbrella/rdom/functions/_addChild.html)
 - [$attribs](https://docs.thi.ng/umbrella/rdom/functions/_attribs.html)
@@ -168,6 +171,7 @@ for the implementation of common UI structures (e.g. item lists of any kind).
 The following links lead to the documentation of these wrappers, incl. small
 code examples:
 
+- [$async](https://docs.thi.ng/umbrella/rdom/functions/_async.html)
 - [$klist](https://docs.thi.ng/umbrella/rdom/functions/_klist.html)
 - [$list](https://docs.thi.ng/umbrella/rdom/functions/_list.html)
 - [$lazy](https://docs.thi.ng/umbrella/rdom/functions/_lazy.html)
@@ -184,12 +188,12 @@ code examples:
 
 ### Event handlers for reactive streams
 
-Reactive rdom component are based on
+Currently, reactive rdom components are based on
 [@thi.ng/rstream](https://github.com/thi-ng/umbrella/tree/develop/packages/rstream)
-subscriptions. In order to create a feedback loop between those reactive state
-values and their subscribed UI components, input event handlers need to feed any
-user changes back to those reactive state(s). To reduce boilerplate for these
-tasks, the following higher order input event handlers are provided:
+subscriptions. To create a feedback loop between those reactive state values and
+their subscribed UI components, input event handlers need to feed any user
+changes back to those reactive state(s). To reduce boilerplate for these tasks,
+the following higher order input event handlers are provided:
 
 - [$input](https://docs.thi.ng/umbrella/rdom/functions/_input.html)
 - [$inputCheckbox](https://docs.thi.ng/umbrella/rdom/functions/_inputCheckbox.html)
@@ -218,7 +222,8 @@ $compile(["input", {
 name.subscribe(trace("name:"));
 ```
 
-Click counter:
+Click counter using [thi.ng/rstream](https://github.com/thi-ng/umbrella/tree/develop/packages/rstream) and
+[thi.ng/transducers](https://github.com/thi-ng/umbrella/tree/develop/packages/transducers):
 
 ```ts
 import { $compile, $inputTrigger } from "@thi.ng/rdom";
@@ -239,6 +244,34 @@ $compile([
 ]).mount(document.body);
 ```
 
+### Embedding async iterables
+
+Work is underway to better support [built-in
+AsyncIterables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_async_iterator_and_async_iterable_protocols)
+(possibly entirely in-lieu of rstream constructs). Currently, they can only be directly used for simple text or attribute values (also see the [rdom-async example](https://github.com/thi-ng/umbrella/blob/develop/examples/rdom-async)):
+
+```ts
+import { $compile } from "@thi.ng/rdom";
+import { range, source } from "@thi.ng/transducers-async";
+
+// infinite 1Hz counter
+const counter = range(1000);
+
+// manually updated click counter (also an async iterable)
+const clicks = source(0);
+
+// event handler to update click count
+const updateClicks = () => clicks.update((x)=> x + 1);
+
+// compile DOM with embedded async iterables
+$compile(
+    ["div", {},
+        ["div", {}, "counter: ", counter],
+        ["button", { onclick: updateClicks }, "clicks: ", clicks]
+    ]
+).mount(document.body)
+```
+
 ## Status
 
 **STABLE** - used in production
@@ -274,12 +307,12 @@ import * as rdom from "@thi.ng/rdom";
 Browser ESM import:
 
 ```html
-<script type="module" src="https://cdn.skypack.dev/@thi.ng/rdom"></script>
+<script type="module" src="https://esm.run/@thi.ng/rdom"></script>
 ```
 
-[Skypack documentation](https://docs.skypack.dev/)
+[JSDelivr documentation](https://www.jsdelivr.com/)
 
-Package sizes (brotli'd, pre-treeshake): ESM: 4.02 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 4.21 KB
 
 ## Dependencies
 
@@ -319,6 +352,7 @@ directory are using this package:
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/pointfree-geom.jpg" width="240"/>      | Live coding playground for 2D geometry generation using @thi.ng/pointfree-lang                          | [Demo](https://demo.thi.ng/umbrella/pointfree-geom/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/pointfree-geom)      |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/procedural-text.jpg" width="240"/>     | Procedural stochastic text generation via custom DSL, parse grammar & AST transformation                | [Demo](https://demo.thi.ng/umbrella/procedural-text/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/procedural-text)     |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/ramp-scroll-anim.png" width="240"/>    | Scroll-based, reactive, multi-param CSS animation basics                                                | [Demo](https://demo.thi.ng/umbrella/ramp-scroll-anim/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/ramp-scroll-anim)    |
+|                                                                                                                            | Basic & barebones usage of async iterables in thi.ng/rdom                                               | [Demo](https://demo.thi.ng/umbrella/rdom-async/)          | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-async)          |
 |                                                                                                                            | Demonstates various rdom usage patterns                                                                 | [Demo](https://demo.thi.ng/umbrella/rdom-basics/)         | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-basics)         |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-delayed-update.jpg" width="240"/> | Dynamically loaded images w/ preloader state                                                            | [Demo](https://demo.thi.ng/umbrella/rdom-delayed-update/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-delayed-update) |
 | <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)            |

package/async.d.ts

@@ -0,0 +1,41 @@
+import type { Maybe, Path } from "@thi.ng/api";
+import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
+/**
+ * Takes an ES `AsyncIterable` and creates a simple component wrapper for its
+ * asynchronously produced values.
+ *
+ * @remarks
+ * If given an {@link IMountWithState} component, new values are applied via the
+ * `.update()` life cycle value. If given a `tag` and `attribs`, a corresponding
+ * element wrapper component will be created automatically (using
+ * {@link $wrapText} and incoming values will be applied using {@link $text}
+ * (aka setting `el.innerText`).
+ *
+ * @example
+ * ```ts
+ * import { $async } from "@thi.ng/rdom";
+ * import { range } from "@thi.ng/transducers-async";
+ *
+ * // infinite 1Hz counter
+ * const counter = range(1000);
+ *
+ * // wrapper component which updates whenever counter produces new values
+ * $async(counter, "div", { class: "red" }).mount(document.body);
+ * ```
+ *
+ * @param src -
+ * @param inner -
+ */
+export declare function $async<T>(src: AsyncIterable<T>, inner: IMountWithState<T>): IComponent<T>;
+export declare function $async(src: AsyncIterable<any>, tag: string, attribs?: any): IComponent;
+export declare class $Async<T = any> {
+    protected src: AsyncIterable<T>;
+    protected inner: IMountWithState<Maybe<T>>;
+    el?: Element;
+    constructor(src: AsyncIterable<T>, inner: IMountWithState<Maybe<T>>);
+    mount(parent: ParentNode, index?: NumOrElement): Promise<Element>;
+    unmount(): Promise<void>;
+    update(x: T): void;
+}
+export declare const $asyncA: (src: AsyncIterable<any>, comp: IComponent, path: Path) => Promise<void>;
+//# sourceMappingURL=async.d.ts.map

package/async.js

@@ -0,0 +1,46 @@
+import { isString } from "@thi.ng/checks/is-string";
+import { defSetterUnsafe } from "@thi.ng/paths/setter";
+import { $attribs } from "./dom.js";
+import { $wrapText } from "./wrap.js";
+function $async(src, tag, attribs) {
+  return new $Async(src, isString(tag) ? $wrapText(tag, attribs) : tag);
+}
+class $Async {
+  constructor(src, inner) {
+    this.src = src;
+    this.inner = inner;
+  }
+  el;
+  async mount(parent, index = -1) {
+    this.el = await this.inner.mount(parent, index, void 0);
+    (async () => {
+      for await (let x of this.src) {
+        if (!this.el)
+          return;
+        this.update(x);
+      }
+    })();
+    return this.el;
+  }
+  async unmount() {
+    this.el = void 0;
+    await this.inner.unmount();
+  }
+  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));
+  }
+};
+export {
+  $Async,
+  $async,
+  $asyncA
+};

package/compile.js

@@ -1,11 +1,13 @@
 import { isArray } from "@thi.ng/checks/is-array";
+import { isAsyncIterable } from "@thi.ng/checks/is-async-iterable";
 import { isPlainObject } from "@thi.ng/checks/is-plain-object";
 import { isSubscribable } from "@thi.ng/rstream/checks";
+import { $async, $asyncA } from "./async.js";
 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") : tree instanceof Element ? $wrapEl(tree) : $wrapText("span", null, tree);
+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) {
@@ -26,13 +28,17 @@ const isComplexComponent = (x) => {
         return true;
     }
   }
-  return isSubscribable(x) || isComponent(x) || isElement(x);
+  return isSubscribable(x) || isAsyncIterable(x) || isComponent(x) || isElement(x);
 };
 const complexComponent = (tree) => ({
   async mount(parent, index = -1) {
     this.subs = [];
     walk((x, path) => {
-      isSubscribable(x) && this.subs.push(x.subscribe(new $SubA(this, path)));
+      if (isSubscribable(x)) {
+        this.subs.push(x.subscribe(new $SubA(this, path)));
+      } else if (isAsyncIterable(x)) {
+        $asyncA(x, this, path);
+      }
     }, tree[1]);
     this.children = [];
     this.el = $el(tree[0], tree[1], null, parent, index);

package/component.d.ts

@@ -1,4 +1,4 @@
-import type { MaybeDeref } from "@thi.ng/api";
+import type { Maybe, MaybeDeref } from "@thi.ng/api";
 import type { IComponent, NumOrElement } from "./api.js";
 /**
  * Abstract base class / {@link IComponent} implementation. Provides
@@ -20,7 +20,7 @@ export declare abstract class Component<T = any> implements IComponent<T> {
      * @param parent
      * @param idx
      */
-    $el(tag: string, attribs?: any, body?: any, parent?: ParentNode | undefined, idx?: NumOrElement): Element;
+    $el(tag: string, attribs?: any, body?: any, parent?: Maybe<ParentNode>, idx?: NumOrElement): Element;
     /**
      * Syntax sugar for {@link $comment}, creates a new comment DOM node using
      * this component's {@link IComponent.el} as default `parent`.
@@ -29,7 +29,7 @@ export declare abstract class Component<T = any> implements IComponent<T> {
      * @param parent
      * @param idx
      */
-    $comment(body: string | string[], parent?: ParentNode | undefined, idx?: NumOrElement): Comment;
+    $comment(body: string | string[], parent?: Maybe<ParentNode>, idx?: NumOrElement): Comment;
     /**
      * Syntax sugar for {@link $clear}, using this component's
      * {@link IComponent.el} as default element to clear.

package/dom.js

@@ -100,10 +100,17 @@ const $attribs = (el, 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 __setter = (el, prop) => {
+  const key = `${el.namespaceURI}/${el.tagName}#${prop}`;
+  return __setterCache[key] ?? (__setterCache[key] = __desc(getproto(el), prop)?.set ?? false);
+};
 const setAttrib = (el, id, val, attribs) => {
   implementsFunction(val, "deref") && (val = val.deref());
-  const isListener = id.startsWith("on");
-  if (isListener) {
+  if (id.startsWith("on")) {
     if (isString(val)) {
       el.setAttribute(id, val);
     } else {
@@ -130,27 +137,11 @@ const setAttrib = (el, id, val, attribs) => {
     case "prefix":
       el.setAttribute(id, isString(val) ? val : formatPrefixes(val));
       break;
-    case "accessKey":
-    case "autocapitalize":
-    case "checked":
-    case "contentEditable":
-    case "dir":
-    case "draggable":
-    case "hidden":
-    case "id":
-    case "indeterminate":
-    case "lang":
-    case "scrollLeft":
-    case "scrollTop":
-    case "selectionEnd":
-    case "selectionStart":
-    case "slot":
-    case "spellcheck":
-    case "tabIndex":
-    case "title":
-      el[id] = val;
-      break;
     default: {
+      const setter = __setter(el, id);
+      if (setter && val != null) {
+        return setter.call(el, val);
+      }
       const idx = id.indexOf(":");
       if (idx < 0) {
         val === false || val == null ? el.removeAttribute(id) : el.setAttribute(id, val === true ? id : val);

package/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./api.js";
+export * from "./async.js";
 export * from "./checks.js";
 export * from "./compile.js";
 export * from "./component.js";

package/index.js

@@ -1,4 +1,5 @@
 export * from "./api.js";
+export * from "./async.js";
 export * from "./checks.js";
 export * from "./compile.js";
 export * from "./component.js";

package/lazy.d.ts

@@ -1,4 +1,4 @@
-import type { Fn0 } from "@thi.ng/api";
+import type { Fn0, Maybe } from "@thi.ng/api";
 import type { ComponentLike, IComponent, NumOrElement } from "./api.js";
 import { Component } from "./component.js";
 /**
@@ -22,10 +22,10 @@ export declare class $Lazy extends Component {
     protected attribs: any;
     protected ctor: Fn0<Promise<ComponentLike>>;
     protected opts?: IntersectionObserverInit | undefined;
-    protected observer: IntersectionObserver | undefined;
-    protected inner: IComponent | undefined;
+    protected observer: Maybe<IntersectionObserver>;
+    protected inner: Maybe<IComponent>;
     constructor(tag: string, attribs: any, ctor: Fn0<Promise<ComponentLike>>, opts?: IntersectionObserverInit | undefined);
-    mount(parent: ParentNode, index?: NumOrElement | undefined): Promise<Element>;
+    mount(parent: ParentNode, index?: NumOrElement): Promise<Element>;
     unmount(): Promise<void>;
 }
 //# sourceMappingURL=lazy.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rdom",
-  "version": "1.1.22",
+  "version": "1.3.0",
   "description": "Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible",
   "type": "module",
   "module": "./index.js",
@@ -37,14 +37,14 @@
     "tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.10.0",
-    "@thi.ng/checks": "^3.6.0",
-    "@thi.ng/errors": "^2.5.3",
-    "@thi.ng/hiccup": "^5.1.27",
-    "@thi.ng/paths": "^5.1.77",
-    "@thi.ng/prefixes": "^2.3.15",
-    "@thi.ng/rstream": "^8.3.20",
-    "@thi.ng/strings": "^3.7.29"
+    "@thi.ng/api": "^8.11.0",
+    "@thi.ng/checks": "^3.6.2",
+    "@thi.ng/errors": "^2.5.5",
+    "@thi.ng/hiccup": "^5.1.29",
+    "@thi.ng/paths": "^5.1.79",
+    "@thi.ng/prefixes": "^2.3.17",
+    "@thi.ng/rstream": "^8.4.1",
+    "@thi.ng/strings": "^3.7.31"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.43.0",
@@ -87,6 +87,9 @@
     "./api": {
       "default": "./api.js"
     },
+    "./async": {
+      "default": "./async.js"
+    },
     "./checks": {
       "default": "./checks.js"
     },
@@ -143,5 +146,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "85ac4bd4d6d89f8e3689e2863d5bea0cecdb371c\n"
+  "gitHead": "8339d05ecc857e529c7325a9839c0063b89e728d\n"
 }

package/sub.d.ts

@@ -1,4 +1,4 @@
-import type { Fn2, Path } from "@thi.ng/api";
+import type { Fn2, Maybe, Path } from "@thi.ng/api";
 import type { ISubscribable } from "@thi.ng/rstream";
 import { Subscription } from "@thi.ng/rstream/subscription";
 import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
@@ -42,9 +42,9 @@ export declare function $sub(src: ISubscribable<any>, tag: string, attribs?: any
  */
 export declare const $subWithID: <T>(src: ISubscribable<T>, inner: IMountWithState<T>, id: string) => IComponent<T>;
 export declare class $Sub<T = any> extends Subscription<T, T> {
-    protected inner: IMountWithState<T | undefined>;
+    protected inner: IMountWithState<Maybe<T>>;
     el?: Element;
-    constructor(inner: IMountWithState<T | undefined>, id?: string);
+    constructor(inner: IMountWithState<Maybe<T>>, id?: string);
     mount(parent: ParentNode, index?: NumOrElement): Promise<Element>;
     unmount(): Promise<void>;
     update(x: T): void;

package/wrap.d.ts

@@ -1,4 +1,7 @@
 import type { IComponent, IMountWithState } from "./api.js";
+export interface WrappedComponent<T> extends IMountWithState<T> {
+    inner: IComponent<any>;
+}
 /**
  * Returns a component wrapper for a single DOM element whose TEXT body can be
  * later updated/replaced via `.update()`, similarly to setting `.innerText`.
@@ -7,7 +10,7 @@ import type { IComponent, IMountWithState } from "./api.js";
  * @param attribs - element attribs
  * @param body - optional initial body
  */
-export declare const $wrapText: (tag: string, attribs?: any, body?: any) => IMountWithState<any>;
+export declare const $wrapText: (tag: string, attribs?: any, body?: any) => WrappedComponent<any>;
 /**
  * Returns a component wrapper for a single DOM element whose HTML body can be
  * later updated/replaced via `.update()`, similarly to setting `.innerHTML`.
@@ -35,7 +38,7 @@ export declare const $wrapText: (tag: string, attribs?: any, body?: any) => IMou
  * @param attribs - element attribs
  * @param body - optional initial body
  */
-export declare const $wrapHtml: (tag: string, attribs?: any, body?: import("@thi.ng/api").MaybeDeref<string> | undefined) => IMountWithState<import("@thi.ng/api").MaybeDeref<string>>;
+export declare const $wrapHtml: (tag: string, attribs?: any, body?: import("@thi.ng/api").MaybeDeref<string> | undefined) => WrappedComponent<import("@thi.ng/api").MaybeDeref<string>>;
 /**
  * {@link IComponent} wrapper for an existing DOM element. When mounted, the
  * given element will be (re)attached to the parent node provided at that time.

package/wrap.js

@@ -1,13 +1,14 @@
-import { $addChild, $el, $html, $remove, $text } from "./dom.js";
+import { $compile } from "./compile.js";
+import { $addChild, $html, $remove, $text } from "./dom.js";
 const wrapper = (update) => (tag, attribs, body) => ({
-  el: void 0,
   async mount(parent, index, state) {
-    this.el = $el(tag, attribs, null, parent, index);
+    this.inner = $compile([tag, attribs]);
+    this.el = await this.inner.mount(parent, index);
     update(this.el, state != null ? state : body);
     return this.el;
   },
   async unmount() {
-    $remove(this.el);
+    this.inner.unmount();
     this.el = void 0;
   },
   update(body2) {