@thi.ng/rdom 0.13.8 → 0.14.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-12-19T11:01:47Z
+- **Last updated**: 2023-12-28T23:24:39Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,12 @@ 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.
 
+## [0.14.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@0.14.0) (2023-12-28)
+
+#### 🚀 Features
+
+- add $lazy() component wrapper ([5ad3856](https://github.com/thi-ng/umbrella/commit/5ad3856))
+
 ### [0.13.4](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@0.13.4) (2023-12-11)
 
 #### ♻️ Refactoring

package/README.md

@@ -172,6 +172,7 @@ code examples:
 
 - [$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)
 - [$object](https://docs.thi.ng/umbrella/rdom/functions/_object-1.html)
 - [$promise](https://docs.thi.ng/umbrella/rdom/functions/_promise-1.html)
 - [$refresh](https://docs.thi.ng/umbrella/rdom/functions/_refresh.html)
@@ -179,6 +180,7 @@ code examples:
 - [$sub](https://docs.thi.ng/umbrella/rdom/functions/_sub-1.html)
 - [$subObject](https://docs.thi.ng/umbrella/rdom/functions/_subObject.html)
 - [$switch](https://docs.thi.ng/umbrella/rdom/functions/_switch.html)
+- [$wrapEl](https://docs.thi.ng/umbrella/rdom/functions/_wrapEl.html)
 - [$wrapHtml](https://docs.thi.ng/umbrella/rdom/functions/_wrapHtml.html)
 - [$wrapText](https://docs.thi.ng/umbrella/rdom/functions/_wrapText.html)
 
@@ -279,7 +281,7 @@ For Node.js REPL:
 const rdom = await import("@thi.ng/rdom");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 4.06 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 4.19 KB
 
 ## Dependencies
 
@@ -323,6 +325,7 @@ 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-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)      |
 |                                                                                                                            | 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)      |

package/index.d.ts

@@ -6,6 +6,7 @@ export * from "./dom.js";
 export * from "./event.js";
 export * from "./idgen.js";
 export * from "./klist.js";
+export * from "./lazy.js";
 export * from "./list.js";
 export * from "./object.js";
 export * from "./promise.js";

package/index.js

@@ -6,6 +6,7 @@ export * from "./dom.js";
 export * from "./event.js";
 export * from "./idgen.js";
 export * from "./klist.js";
+export * from "./lazy.js";
 export * from "./list.js";
 export * from "./object.js";
 export * from "./promise.js";

package/lazy.d.ts

@@ -0,0 +1,31 @@
+import type { Fn0 } from "@thi.ng/api";
+import type { ComponentLike, IComponent, NumOrElement } from "./api.js";
+import { Component } from "./component.js";
+/**
+ * `IntersectionObserver`-based helper component for lazy
+ * loading/initialization. Creates an initially empty wrapper element, then only
+ * calls the given `inner` component factory function once the wrapper element
+ * intersects the viewport (as per provided IntersectionObserver options).
+ *
+ * @remarks
+ * The wrapper element MUST have an associated non-zero height (e.g. via CSS or
+ * initial content).
+ *
+ * @param tag
+ * @param attribs
+ * @param inner
+ * @param opts
+ */
+export declare const $lazy: (tag: string, attribs: any, inner: Fn0<Promise<ComponentLike>>, opts?: IntersectionObserverInit) => $Lazy;
+export declare class $Lazy extends Component {
+    protected tag: string;
+    protected attribs: any;
+    protected ctor: Fn0<Promise<ComponentLike>>;
+    protected opts?: IntersectionObserverInit | undefined;
+    protected observer: IntersectionObserver | undefined;
+    protected inner: IComponent | undefined;
+    constructor(tag: string, attribs: any, ctor: Fn0<Promise<ComponentLike>>, opts?: IntersectionObserverInit | undefined);
+    mount(parent: Element, index?: NumOrElement | undefined): Promise<Element>;
+    unmount(): Promise<void>;
+}
+//# sourceMappingURL=lazy.d.ts.map

package/lazy.js

@@ -0,0 +1,42 @@
+import { Component } from "./component.js";
+const $lazy = (tag, attribs, inner, opts) => new $Lazy(tag, attribs, inner, opts);
+class $Lazy extends Component {
+  constructor(tag, attribs, ctor, opts) {
+    super();
+    this.tag = tag;
+    this.attribs = attribs;
+    this.ctor = ctor;
+    this.opts = opts;
+  }
+  observer;
+  inner;
+  async mount(parent, index) {
+    this.el = this.$el(this.tag, this.attribs, null, parent, index);
+    this.observer = new IntersectionObserver(([item]) => {
+      if (item.isIntersecting) {
+        this.observer.unobserve(this.el);
+        (async () => {
+          this.inner = this.$compile(await this.ctor());
+          this.inner.mount(this.el, 0);
+        })();
+      }
+    }, this.opts);
+    this.observer.observe(this.el);
+    return this.el;
+  }
+  async unmount() {
+    if (this.inner) {
+      await this.inner.unmount();
+      this.inner = void 0;
+    }
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = void 0;
+      super.unmount();
+    }
+  }
+}
+export {
+  $Lazy,
+  $lazy
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/rdom",
-  "version": "0.13.8",
+  "version": "0.14.0",
   "description": "Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible",
   "type": "module",
   "module": "./index.js",
@@ -36,21 +36,21 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.14",
-    "@thi.ng/checks": "^3.4.14",
-    "@thi.ng/errors": "^2.4.8",
-    "@thi.ng/hiccup": "^5.1.3",
-    "@thi.ng/paths": "^5.1.55",
-    "@thi.ng/prefixes": "^2.3.0",
-    "@thi.ng/rstream": "^8.2.17",
-    "@thi.ng/strings": "^3.7.5"
+    "@thi.ng/api": "^8.9.15",
+    "@thi.ng/checks": "^3.4.15",
+    "@thi.ng/errors": "^2.4.9",
+    "@thi.ng/hiccup": "^5.1.4",
+    "@thi.ng/paths": "^5.1.56",
+    "@thi.ng/prefixes": "^2.3.1",
+    "@thi.ng/rstream": "^8.2.18",
+    "@thi.ng/strings": "^3.7.6"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.38.3",
-    "esbuild": "^0.19.8",
+    "@microsoft/api-extractor": "^7.39.0",
+    "esbuild": "^0.19.10",
     "rimraf": "^5.0.5",
     "typedoc": "^0.25.4",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   },
   "keywords": [
     "async",
@@ -107,6 +107,9 @@
     "./klist": {
       "default": "./klist.js"
     },
+    "./lazy": {
+      "default": "./lazy.js"
+    },
     "./list": {
       "default": "./list.js"
     },
@@ -142,5 +145,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "f156d361a652cce316c36e0b7df7d2ac5c2dbbf8\n"
+  "gitHead": "775c664723cd87d6ac5909cedf91195317add287\n"
 }