@thi.ng/rdom 0.13.8 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/README.md +7 -3
  3. package/index.d.ts +1 -0
  4. package/index.js +1 -0
  5. package/lazy.d.ts +31 -0
  6. package/lazy.js +42 -0
  7. package/package.json +16 -13
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Change Log
2
2
 
3
- - **Last updated**: 2023-12-19T11:01:47Z
3
+ - **Last updated**: 2023-12-31T09:44:24Z
4
4
  - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
5
5
 
6
6
  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
9
9
  **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
10
10
  and/or version bumps of transitive dependencies.
11
11
 
12
+ ## [0.14.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@0.14.0) (2023-12-28)
13
+
14
+ #### 🚀 Features
15
+
16
+ - add $lazy() component wrapper ([5ad3856](https://github.com/thi-ng/umbrella/commit/5ad3856))
17
+
12
18
  ### [0.13.4](https://github.com/thi-ng/umbrella/tree/@thi.ng/rdom@0.13.4) (2023-12-11)
13
19
 
14
20
  #### ♻️ Refactoring
package/README.md CHANGED
@@ -7,8 +7,9 @@
7
7
  ![npm downloads](https://img.shields.io/npm/dm/@thi.ng/rdom.svg)
8
8
  [![Mastodon Follow](https://img.shields.io/mastodon/follow/109331703950160316?domain=https%3A%2F%2Fmastodon.thi.ng&style=social)](https://mastodon.thi.ng/@toxi)
9
9
 
10
- This project is part of the
11
- [@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo and anti-framework.
10
+ This is a standalone project, maintained as part of the
11
+ [@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo and
12
+ anti-framework.
12
13
 
13
14
  - [About](#about)
14
15
  - [From hdom to rdom: Reactive UIs without virtual DOMs](#from-hdom-to-rdom-reactive-uis-without-virtual-doms)
@@ -172,6 +173,7 @@ code examples:
172
173
 
173
174
  - [$klist](https://docs.thi.ng/umbrella/rdom/functions/_klist.html)
174
175
  - [$list](https://docs.thi.ng/umbrella/rdom/functions/_list.html)
176
+ - [$lazy](https://docs.thi.ng/umbrella/rdom/functions/_lazy.html)
175
177
  - [$object](https://docs.thi.ng/umbrella/rdom/functions/_object-1.html)
176
178
  - [$promise](https://docs.thi.ng/umbrella/rdom/functions/_promise-1.html)
177
179
  - [$refresh](https://docs.thi.ng/umbrella/rdom/functions/_refresh.html)
@@ -179,6 +181,7 @@ code examples:
179
181
  - [$sub](https://docs.thi.ng/umbrella/rdom/functions/_sub-1.html)
180
182
  - [$subObject](https://docs.thi.ng/umbrella/rdom/functions/_subObject.html)
181
183
  - [$switch](https://docs.thi.ng/umbrella/rdom/functions/_switch.html)
184
+ - [$wrapEl](https://docs.thi.ng/umbrella/rdom/functions/_wrapEl.html)
182
185
  - [$wrapHtml](https://docs.thi.ng/umbrella/rdom/functions/_wrapHtml.html)
183
186
  - [$wrapText](https://docs.thi.ng/umbrella/rdom/functions/_wrapText.html)
184
187
 
@@ -279,7 +282,7 @@ For Node.js REPL:
279
282
  const rdom = await import("@thi.ng/rdom");
280
283
  ```
281
284
 
282
- Package sizes (brotli'd, pre-treeshake): ESM: 4.06 KB
285
+ Package sizes (brotli'd, pre-treeshake): ESM: 4.19 KB
283
286
 
284
287
  ## Dependencies
285
288
 
@@ -323,6 +326,7 @@ directory are using this package:
323
326
  | <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) |
324
327
  | <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) |
325
328
  | <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) |
329
+ | <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) |
326
330
  | <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) |
327
331
  | | 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) |
328
332
  | <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 CHANGED
@@ -6,6 +6,7 @@ export * from "./dom.js";
6
6
  export * from "./event.js";
7
7
  export * from "./idgen.js";
8
8
  export * from "./klist.js";
9
+ export * from "./lazy.js";
9
10
  export * from "./list.js";
10
11
  export * from "./object.js";
11
12
  export * from "./promise.js";
package/index.js CHANGED
@@ -6,6 +6,7 @@ export * from "./dom.js";
6
6
  export * from "./event.js";
7
7
  export * from "./idgen.js";
8
8
  export * from "./klist.js";
9
+ export * from "./lazy.js";
9
10
  export * from "./list.js";
10
11
  export * from "./object.js";
11
12
  export * from "./promise.js";
package/lazy.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ import type { Fn0 } from "@thi.ng/api";
2
+ import type { ComponentLike, IComponent, NumOrElement } from "./api.js";
3
+ import { Component } from "./component.js";
4
+ /**
5
+ * `IntersectionObserver`-based helper component for lazy
6
+ * loading/initialization. Creates an initially empty wrapper element, then only
7
+ * calls the given `inner` component factory function once the wrapper element
8
+ * intersects the viewport (as per provided IntersectionObserver options).
9
+ *
10
+ * @remarks
11
+ * The wrapper element MUST have an associated non-zero height (e.g. via CSS or
12
+ * initial content).
13
+ *
14
+ * @param tag
15
+ * @param attribs
16
+ * @param inner
17
+ * @param opts
18
+ */
19
+ export declare const $lazy: (tag: string, attribs: any, inner: Fn0<Promise<ComponentLike>>, opts?: IntersectionObserverInit) => $Lazy;
20
+ export declare class $Lazy extends Component {
21
+ protected tag: string;
22
+ protected attribs: any;
23
+ protected ctor: Fn0<Promise<ComponentLike>>;
24
+ protected opts?: IntersectionObserverInit | undefined;
25
+ protected observer: IntersectionObserver | undefined;
26
+ protected inner: IComponent | undefined;
27
+ constructor(tag: string, attribs: any, ctor: Fn0<Promise<ComponentLike>>, opts?: IntersectionObserverInit | undefined);
28
+ mount(parent: Element, index?: NumOrElement | undefined): Promise<Element>;
29
+ unmount(): Promise<void>;
30
+ }
31
+ //# sourceMappingURL=lazy.d.ts.map
package/lazy.js ADDED
@@ -0,0 +1,42 @@
1
+ import { Component } from "./component.js";
2
+ const $lazy = (tag, attribs, inner, opts) => new $Lazy(tag, attribs, inner, opts);
3
+ class $Lazy extends Component {
4
+ constructor(tag, attribs, ctor, opts) {
5
+ super();
6
+ this.tag = tag;
7
+ this.attribs = attribs;
8
+ this.ctor = ctor;
9
+ this.opts = opts;
10
+ }
11
+ observer;
12
+ inner;
13
+ async mount(parent, index) {
14
+ this.el = this.$el(this.tag, this.attribs, null, parent, index);
15
+ this.observer = new IntersectionObserver(([item]) => {
16
+ if (item.isIntersecting) {
17
+ this.observer.unobserve(this.el);
18
+ (async () => {
19
+ this.inner = this.$compile(await this.ctor());
20
+ this.inner.mount(this.el, 0);
21
+ })();
22
+ }
23
+ }, this.opts);
24
+ this.observer.observe(this.el);
25
+ return this.el;
26
+ }
27
+ async unmount() {
28
+ if (this.inner) {
29
+ await this.inner.unmount();
30
+ this.inner = void 0;
31
+ }
32
+ if (this.observer) {
33
+ this.observer.disconnect();
34
+ this.observer = void 0;
35
+ super.unmount();
36
+ }
37
+ }
38
+ }
39
+ export {
40
+ $Lazy,
41
+ $lazy
42
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thi.ng/rdom",
3
- "version": "0.13.8",
3
+ "version": "0.14.1",
4
4
  "description": "Lightweight, reactive, VDOM-less UI/DOM components with async lifecycle and @thi.ng/hiccup compatible",
5
5
  "type": "module",
6
6
  "module": "./index.js",
@@ -36,21 +36,21 @@
36
36
  "test": "bun test"
37
37
  },
38
38
  "dependencies": {
39
- "@thi.ng/api": "^8.9.14",
40
- "@thi.ng/checks": "^3.4.14",
41
- "@thi.ng/errors": "^2.4.8",
42
- "@thi.ng/hiccup": "^5.1.3",
43
- "@thi.ng/paths": "^5.1.55",
44
- "@thi.ng/prefixes": "^2.3.0",
45
- "@thi.ng/rstream": "^8.2.17",
46
- "@thi.ng/strings": "^3.7.5"
39
+ "@thi.ng/api": "^8.9.16",
40
+ "@thi.ng/checks": "^3.4.16",
41
+ "@thi.ng/errors": "^2.4.10",
42
+ "@thi.ng/hiccup": "^5.1.5",
43
+ "@thi.ng/paths": "^5.1.57",
44
+ "@thi.ng/prefixes": "^2.3.2",
45
+ "@thi.ng/rstream": "^8.2.19",
46
+ "@thi.ng/strings": "^3.7.7"
47
47
  },
48
48
  "devDependencies": {
49
- "@microsoft/api-extractor": "^7.38.3",
50
- "esbuild": "^0.19.8",
49
+ "@microsoft/api-extractor": "^7.39.0",
50
+ "esbuild": "^0.19.10",
51
51
  "rimraf": "^5.0.5",
52
52
  "typedoc": "^0.25.4",
53
- "typescript": "^5.3.2"
53
+ "typescript": "^5.3.3"
54
54
  },
55
55
  "keywords": [
56
56
  "async",
@@ -107,6 +107,9 @@
107
107
  "./klist": {
108
108
  "default": "./klist.js"
109
109
  },
110
+ "./lazy": {
111
+ "default": "./lazy.js"
112
+ },
110
113
  "./list": {
111
114
  "default": "./list.js"
112
115
  },
@@ -142,5 +145,5 @@
142
145
  ],
143
146
  "year": 2020
144
147
  },
145
- "gitHead": "f156d361a652cce316c36e0b7df7d2ac5c2dbbf8\n"
148
+ "gitHead": "b3db173682e1148cf08a6bd907b8d90b47b7c066\n"
146
149
  }