@thi.ng/rdom 0.6.9 → 0.7.4

package/replace.js

@@ -0,0 +1,62 @@
+import { $compile } from "./compile.js";
+import { Component } from "./component.js";
+import { $sub } from "./sub.js";
+import { $wrapText } from "./wrap.js";
+/**
+ * Similar to {@link $refresh}, but more basic/simple. Takes a reactive value
+ * `src` and wraps it in a {@link $sub} component using an inner
+ * {@link Replace}, which then passes the value to {@link $compile} for each
+ * change and replaces the result in the target DOM. If the value evaluates to
+ * `null`ish, the previously mounted component will be unmounted and stays so
+ * until the value becomes non-null again.
+ *
+ * @remarks
+ * If the reactive value is null-ish when the wrapper component is first
+ * mounted, a hidden dummy `<span>` element will be created instead. This is to
+ * ensure the general {@link IComponent.mount} contract will not be broken. The
+ * dummy element will later be removed/replaced as soon as the reactive value
+ * becomes non-null.
+ *
+ * @example
+ * ```ts
+ * import { $compile, $replace } from "@thi.ng/rdom";
+ * import { fromInterval } from "@thi.ng/rstream";
+ *
+ * // reactive counter component
+ * const counter = fromInterval(16).map((x) => [
+ *     "div",
+ *     { style: { "font-size": `${(x % 100) + 10}px` } },
+ *     x,
+ * ]);
+ *
+ * $compile($replace(counter)).mount(document.body);
+ * ```
+ *
+ * @param src
+ */
+export const $replace = (src) => $sub(src, new Replace());
+export class Replace extends Component {
+    async mount(parent, index, val) {
+        this.parent = parent;
+        this.index = index;
+        await this.update(val);
+        if (!this.inner) {
+            this.inner = $wrapText("span", { hidden: true });
+            await this.inner.mount(parent, index);
+        }
+        return this.inner.el;
+    }
+    async unmount() {
+        this.inner && (await this.inner.unmount());
+        this.parent = undefined;
+        this.inner = undefined;
+    }
+    async update(val) {
+        this.inner && (await this.inner.unmount());
+        this.inner = undefined;
+        if (val != null) {
+            this.inner = $compile(val);
+            this.inner && (await this.inner.mount(this.parent, this.index));
+        }
+    }
+}

package/scheduler.d.ts

@@ -1,4 +1,4 @@
-import type { Task, IScheduler } from "./api";
+import type { Task, IScheduler } from "./api.js";
 /**
  * {@link IScheduler} implementation which queues component updates (or other
  * tasks) and then only processes them during next RAF cycle. Supports task

package/sub.d.ts

@@ -1,6 +1,7 @@
 import type { Fn2, Path } from "@thi.ng/api";
-import { ISubscribable, Subscription } from "@thi.ng/rstream";
-import type { IComponent, IMountWithState, NumOrElement } from "./api";
+import type { ISubscribable } from "@thi.ng/rstream";
+import { Subscription } from "@thi.ng/rstream/subscription";
+import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
 /**
  * Takes an {@link @thi.ng/rstream#ISubscribable} and creates a simple component
  * wrapper for its reactively produced values.

package/sub.js

@@ -1,15 +1,16 @@
-import { isString } from "@thi.ng/checks";
-import { defSetterUnsafe } from "@thi.ng/paths";
-import { nextID, Subscription } from "@thi.ng/rstream";
-import { $attribs } from "./dom";
-import { SCHEDULER } from "./scheduler";
-import { $wrapText } from "./wrap";
+import { isString } from "@thi.ng/checks/is-string";
+import { defSetterUnsafe } from "@thi.ng/paths/setter";
+import { __nextID } from "@thi.ng/rstream/idgen";
+import { Subscription } from "@thi.ng/rstream/subscription";
+import { $attribs } from "./dom.js";
+import { SCHEDULER } from "./scheduler.js";
+import { $wrapText } from "./wrap.js";
 export function $sub(src, tag, attribs) {
     return (src.subscribe(new $Sub(isString(tag) ? $wrapText(tag, attribs) : tag)));
 }
 export class $Sub extends Subscription {
     constructor(inner) {
-        super(undefined, { id: `rdom$sub-${nextID()}` });
+        super(undefined, { id: `rdom$sub-${__nextID()}` });
         this.inner = inner;
     }
     async mount(parent, index = -1) {
@@ -30,7 +31,7 @@ export class $Sub extends Subscription {
 }
 export class $SubA extends Subscription {
     constructor(comp, path) {
-        super(undefined, { id: `rdom$sub-${nextID()}` });
+        super(undefined, { id: `rdom$sub-${__nextID()}` });
         this.comp = comp;
         this.attr = {};
         this.setter = defSetterUnsafe(path);

package/switch.d.ts

@@ -1,7 +1,7 @@
-import { Fn, NumOrString } from "@thi.ng/api";
+import type { Fn, NumOrString } from "@thi.ng/api";
 import type { ISubscribable } from "@thi.ng/rstream";
-import type { IComponent, IMountWithState, NumOrElement } from "./api";
-import { Component } from "./component";
+import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
+import { Component } from "./component.js";
 /**
  * Reactive component wrapper to dynamically switch/replace itself with one of
  * the given components depending on subscribed value.

package/switch.js

@@ -1,8 +1,8 @@
-import { assert } from "@thi.ng/api";
-import { $compile } from "./compile";
-import { Component } from "./component";
-import { $sub } from "./sub";
-import { $wrapText } from "./wrap";
+import { assert } from "@thi.ng/errors/assert";
+import { $compile } from "./compile.js";
+import { Component } from "./component.js";
+import { $sub } from "./sub.js";
+import { $wrapText } from "./wrap.js";
 /**
  * Reactive component wrapper to dynamically switch/replace itself with one of
  * the given components depending on subscribed value.

package/wrap.d.ts

@@ -1,4 +1,4 @@
-import type { IMountWithState } from "./api";
+import type { IMountWithState } from "./api.js";
 /**
  * Returns a component wrapper for a single DOM element whose TEXT body can be
  * later updated/replaced via `.update()`, similarly to setting `.innerText`.

package/wrap.js

@@ -1,5 +1,5 @@
-import { $el, $html, $remove, $text } from "./dom";
-import { SCHEDULER } from "./scheduler";
+import { $el, $html, $remove, $text } from "./dom.js";
+import { SCHEDULER } from "./scheduler.js";
 const wrapper = (update) => (tag, attribs, body) => ({
     el: undefined,
     async mount(parent, index, state) {