@thi.ng/rdom 0.10.2 → 0.10.3

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.
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Change Log
2
2
 
3
- - **Last updated**: 2022-12-16T12:52:25Z
3
+ - **Last updated**: 2022-12-20T16:33:11Z
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.
package/compile.d.ts CHANGED
@@ -1,22 +1,23 @@
1
1
  import type { IComponent } from "./api.js";
2
2
  /**
3
- * Compiles a tree of components given in any supported format incl.
4
- * reactive state values into a single, nested {@link IComponent}.
3
+ * Compiles a tree of components given in any supported format incl. reactive
4
+ * state values into a single, nested {@link IComponent}.
5
5
  *
6
6
  * @remarks
7
7
  * Supported formats:
8
8
  *
9
9
  * - hiccup component trees, i.e. `["tag#id.class", attribs, [...]]`
10
10
  * - {@link IComponent} instances
11
- * - {@link @thi.ng/rstream#ISubscribable} instances
12
- * - {@link @thi.ng/api#IDeref} instances
11
+ * - [`ISubscribable`](https://docs.thi.ng/umbrella/rstream/interfaces/ISubscribable.html)
12
+ * instances
13
+ * - [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html)
14
+ * instances
13
15
  *
14
16
  * Any other value type will be wrapped in a `<span>` element. Reactive
15
17
  * `ISubscribable` values can be used as element attributes or element
16
- * body/children. For the former, a subscription will be added to update
17
- * the target attribute. If used as element body, the reactive value
18
- * will be wrapped using a {@link $sub} `<span>` with the value as its
19
- * reactive body.
18
+ * body/children. For the former, a subscription will be added to update the
19
+ * target attribute. If used as element body, the reactive value will be wrapped
20
+ * using a {@link $sub} `<span>` with the value as its reactive body.
20
21
  *
21
22
  * @param tree -
22
23
  */
package/compile.js CHANGED
@@ -7,23 +7,24 @@ import { SCHEDULER } from "./scheduler.js";
7
7
  import { $sub, $SubA } from "./sub.js";
8
8
  import { $wrapText } from "./wrap.js";
9
9
  /**
10
- * Compiles a tree of components given in any supported format incl.
11
- * reactive state values into a single, nested {@link IComponent}.
10
+ * Compiles a tree of components given in any supported format incl. reactive
11
+ * state values into a single, nested {@link IComponent}.
12
12
  *
13
13
  * @remarks
14
14
  * Supported formats:
15
15
  *
16
16
  * - hiccup component trees, i.e. `["tag#id.class", attribs, [...]]`
17
17
  * - {@link IComponent} instances
18
- * - {@link @thi.ng/rstream#ISubscribable} instances
19
- * - {@link @thi.ng/api#IDeref} instances
18
+ * - [`ISubscribable`](https://docs.thi.ng/umbrella/rstream/interfaces/ISubscribable.html)
19
+ * instances
20
+ * - [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html)
21
+ * instances
20
22
  *
21
23
  * Any other value type will be wrapped in a `<span>` element. Reactive
22
24
  * `ISubscribable` values can be used as element attributes or element
23
- * body/children. For the former, a subscription will be added to update
24
- * the target attribute. If used as element body, the reactive value
25
- * will be wrapped using a {@link $sub} `<span>` with the value as its
26
- * reactive body.
25
+ * body/children. For the former, a subscription will be added to update the
26
+ * target attribute. If used as element body, the reactive value will be wrapped
27
+ * using a {@link $sub} `<span>` with the value as its reactive body.
27
28
  *
28
29
  * @param tree -
29
30
  */
package/dom.d.ts CHANGED
@@ -92,8 +92,9 @@ export declare const $moveTo: (newParent: Element, el: Element | Comment, idx?:
92
92
  export declare const $clear: (el: Element) => Element;
93
93
  /**
94
94
  * Same as `el.innerText = body`, however if `body` is an
95
- * {@link @thi.ng/api#IDeref} it'll be automatically deref'd. For SVG elements a
96
- * new child text DOM node will be created.
95
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) it'll be
96
+ * automatically deref'd. For SVG elements a new child text DOM node will be
97
+ * created.
97
98
  *
98
99
  * @param el -
99
100
  * @param body -
@@ -101,7 +102,8 @@ export declare const $clear: (el: Element) => Element;
101
102
  export declare const $text: (el: HTMLElement | SVGElement, body: any) => void;
102
103
  /**
103
104
  * Same as `el.innerHtml = body`, use with caution! If `body` is an
104
- * {@link @thi.ng/api#IDeref} it'll be automatically deref'd.
105
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) it'll be
106
+ * automatically deref'd.
105
107
  *
106
108
  * @param el -
107
109
  * @param body -
@@ -111,45 +113,44 @@ export declare const $html: (el: HTMLElement | SVGElement, body: MaybeDeref<stri
111
113
  * Takes an object of attributes and applies them to given DOM element.
112
114
  *
113
115
  * @remarks
114
- * The following rules & transformations are applied (in the stated
115
- * order):
116
- *
117
- * - {@link @thi.ng/api#IDeref} values are `deref`d
118
- * - attributes prefixed with `on` are considered event listeners and
119
- * can either have a function value or tuple of `[listener, opts]`,
120
- * where `opts` are the standard `.addEventListener()` options
121
- * - function values for any other attribs are first called with the
122
- * entire `attribs` object and return value used
116
+ * The following rules & transformations are applied (in the stated order):
117
+ *
118
+ * - [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) values
119
+ * are `deref`d
120
+ * - attributes prefixed with `on` are considered event listeners and can either
121
+ * have a function value or tuple of `[listener, opts]`, where `opts` are the
122
+ * standard `.addEventListener()` options
123
+ * - function values for any other attribs are first called with the entire
124
+ * `attribs` object and return value used
123
125
  * - array values are converted into space-delimited string
124
126
  *
125
- * CSS classs are to given as `class` attribute, with its value either a
126
- * string or an object of booleans. If the latter, the given class names
127
- * are either added to or removed from the current list of classes.
127
+ * CSS classs are to given as `class` attribute, with its value either a string
128
+ * or an object of booleans. If the latter, the given class names are either
129
+ * added to or removed from the current list of classes.
128
130
  *
129
- * CSS style rules can be defined via the `style` attrib. Please
130
- * {@link $style} for further details.
131
+ * CSS style rules can be defined via the `style` attrib. Please {@link $style}
132
+ * for further details.
131
133
  *
132
- * Data attributes are to be given as object under the `data` attribute
133
- * name, with its values being merged with the element's current
134
- * `dataset` property.
134
+ * Data attributes are to be given as object under the `data` attribute name,
135
+ * with its values being merged with the element's current `dataset` property.
135
136
  *
136
- * Depending on element type the `value` attribute will be updated
137
- * keeping the current cursor position / selection intact.
137
+ * Depending on element type the `value` attribute will be updated keeping the
138
+ * current cursor position / selection intact.
138
139
  *
139
140
  * @param el -
140
141
  * @param attribs -
141
142
  */
142
143
  export declare const $attribs: (el: Element, attribs: any) => void;
143
144
  /**
144
- * Takes an object (or string) of CSS properties, compiles them into a
145
- * single CSS string and sets it as `style` attribute on the given
146
- * element.
145
+ * Takes an object (or string) of CSS properties, compiles them into a single
146
+ * CSS string and sets it as `style` attribute on the given element.
147
147
  *
148
148
  * @remarks
149
- * All property values can be {@link @thi.ng/api#IDeref} values, in
150
- * which case they're are first `deref`d before use. If the value is a
151
- * function, it will be called with the entire `rules` object as arg and
152
- * the return value used.
149
+ * All property values can be
150
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) values,
151
+ * in which case they're are first `deref`d before use. If the value is a
152
+ * function, it will be called with the entire `rules` object as arg and the
153
+ * return value used.
153
154
  *
154
155
  * @param el -
155
156
  * @param rules -
package/dom.js CHANGED
@@ -191,8 +191,9 @@ export const $moveTo = (newParent, el, idx = -1) => {
191
191
  export const $clear = (el) => ((el.innerHTML = ""), el);
192
192
  /**
193
193
  * Same as `el.innerText = body`, however if `body` is an
194
- * {@link @thi.ng/api#IDeref} it'll be automatically deref'd. For SVG elements a
195
- * new child text DOM node will be created.
194
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) it'll be
195
+ * automatically deref'd. For SVG elements a new child text DOM node will be
196
+ * created.
196
197
  *
197
198
  * @param el -
198
199
  * @param body -
@@ -208,7 +209,8 @@ export const $text = (el, body) => {
208
209
  };
209
210
  /**
210
211
  * Same as `el.innerHtml = body`, use with caution! If `body` is an
211
- * {@link @thi.ng/api#IDeref} it'll be automatically deref'd.
212
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) it'll be
213
+ * automatically deref'd.
212
214
  *
213
215
  * @param el -
214
216
  * @param body -
@@ -220,30 +222,29 @@ export const $html = (el, body) => {
220
222
  * Takes an object of attributes and applies them to given DOM element.
221
223
  *
222
224
  * @remarks
223
- * The following rules & transformations are applied (in the stated
224
- * order):
225
+ * The following rules & transformations are applied (in the stated order):
225
226
  *
226
- * - {@link @thi.ng/api#IDeref} values are `deref`d
227
- * - attributes prefixed with `on` are considered event listeners and
228
- * can either have a function value or tuple of `[listener, opts]`,
229
- * where `opts` are the standard `.addEventListener()` options
230
- * - function values for any other attribs are first called with the
231
- * entire `attribs` object and return value used
227
+ * - [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) values
228
+ * are `deref`d
229
+ * - attributes prefixed with `on` are considered event listeners and can either
230
+ * have a function value or tuple of `[listener, opts]`, where `opts` are the
231
+ * standard `.addEventListener()` options
232
+ * - function values for any other attribs are first called with the entire
233
+ * `attribs` object and return value used
232
234
  * - array values are converted into space-delimited string
233
235
  *
234
- * CSS classs are to given as `class` attribute, with its value either a
235
- * string or an object of booleans. If the latter, the given class names
236
- * are either added to or removed from the current list of classes.
236
+ * CSS classs are to given as `class` attribute, with its value either a string
237
+ * or an object of booleans. If the latter, the given class names are either
238
+ * added to or removed from the current list of classes.
237
239
  *
238
- * CSS style rules can be defined via the `style` attrib. Please
239
- * {@link $style} for further details.
240
+ * CSS style rules can be defined via the `style` attrib. Please {@link $style}
241
+ * for further details.
240
242
  *
241
- * Data attributes are to be given as object under the `data` attribute
242
- * name, with its values being merged with the element's current
243
- * `dataset` property.
243
+ * Data attributes are to be given as object under the `data` attribute name,
244
+ * with its values being merged with the element's current `dataset` property.
244
245
  *
245
- * Depending on element type the `value` attribute will be updated
246
- * keeping the current cursor position / selection intact.
246
+ * Depending on element type the `value` attribute will be updated keeping the
247
+ * current cursor position / selection intact.
247
248
  *
248
249
  * @param el -
249
250
  * @param attribs -
@@ -358,15 +359,15 @@ const updateDataAttribs = (el, attribs) => {
358
359
  }
359
360
  };
360
361
  /**
361
- * Takes an object (or string) of CSS properties, compiles them into a
362
- * single CSS string and sets it as `style` attribute on the given
363
- * element.
362
+ * Takes an object (or string) of CSS properties, compiles them into a single
363
+ * CSS string and sets it as `style` attribute on the given element.
364
364
  *
365
365
  * @remarks
366
- * All property values can be {@link @thi.ng/api#IDeref} values, in
367
- * which case they're are first `deref`d before use. If the value is a
368
- * function, it will be called with the entire `rules` object as arg and
369
- * the return value used.
366
+ * All property values can be
367
+ * [`IDeref`](https://docs.thi.ng/umbrella/api/interfaces/IDeref.html) values,
368
+ * in which case they're are first `deref`d before use. If the value is a
369
+ * function, it will be called with the entire `rules` object as arg and the
370
+ * return value used.
370
371
  *
371
372
  * @param el -
372
373
  * @param rules -
package/object.d.ts CHANGED
@@ -9,15 +9,18 @@ import { Component } from "./component.js";
9
9
  * that function's return value as component body.
10
10
  *
11
11
  * @remarks
12
- * Uses {@link @thi.ng/rstream#fromObject} for creating the internal key-value
13
- * streams. These can then be used by `inner` to produce reactive child
14
- * elements. The given `src` object is only used to seed those streams with
15
- * initial values. The component wrapper can be updated with new values, using
16
- * the `.update()` life cycle method with a new object.
12
+ * Uses
13
+ * [`fromObject()`](https://docs.thi.ng/umbrella/rstream/functions/fromObject.html)
14
+ * for creating the internal key-value streams. These can then be used by
15
+ * `inner` to produce reactive child elements. The given `src` object is only
16
+ * used to seed those streams with initial values. The component wrapper can be
17
+ * updated with new values, using the `.update()` life cycle method with a new
18
+ * object.
17
19
  *
18
20
  * By default the value streams will only trigger updates if their values have
19
- * changed. See {@link @thi.ng/rstream#StreamObjOpts} for more details and
20
- * options.
21
+ * changed. See
22
+ * [`StreamObjOpts`](https://docs.thi.ng/umbrella/rstream/interfaces/StreamObjOpts.html)
23
+ * for more details and options.
21
24
  *
22
25
  * Also see {@link $subObject}.
23
26
  *
package/object.js CHANGED
@@ -8,15 +8,18 @@ import { $sub } from "./sub.js";
8
8
  * that function's return value as component body.
9
9
  *
10
10
  * @remarks
11
- * Uses {@link @thi.ng/rstream#fromObject} for creating the internal key-value
12
- * streams. These can then be used by `inner` to produce reactive child
13
- * elements. The given `src` object is only used to seed those streams with
14
- * initial values. The component wrapper can be updated with new values, using
15
- * the `.update()` life cycle method with a new object.
11
+ * Uses
12
+ * [`fromObject()`](https://docs.thi.ng/umbrella/rstream/functions/fromObject.html)
13
+ * for creating the internal key-value streams. These can then be used by
14
+ * `inner` to produce reactive child elements. The given `src` object is only
15
+ * used to seed those streams with initial values. The component wrapper can be
16
+ * updated with new values, using the `.update()` life cycle method with a new
17
+ * object.
16
18
  *
17
19
  * By default the value streams will only trigger updates if their values have
18
- * changed. See {@link @thi.ng/rstream#StreamObjOpts} for more details and
19
- * options.
20
+ * changed. See
21
+ * [`StreamObjOpts`](https://docs.thi.ng/umbrella/rstream/interfaces/StreamObjOpts.html)
22
+ * for more details and options.
20
23
  *
21
24
  * Also see {@link $subObject}.
22
25
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thi.ng/rdom",
3
- "version": "0.10.2",
3
+ "version": "0.10.3",
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",
@@ -35,14 +35,14 @@
35
35
  "test": "testament test"
36
36
  },
37
37
  "dependencies": {
38
- "@thi.ng/api": "^8.6.0",
38
+ "@thi.ng/api": "^8.6.1",
39
39
  "@thi.ng/checks": "^3.3.5",
40
40
  "@thi.ng/errors": "^2.2.6",
41
- "@thi.ng/hiccup": "^4.2.26",
42
- "@thi.ng/paths": "^5.1.25",
41
+ "@thi.ng/hiccup": "^4.2.27",
42
+ "@thi.ng/paths": "^5.1.26",
43
43
  "@thi.ng/prefixes": "^2.1.15",
44
- "@thi.ng/rstream": "^7.2.31",
45
- "@thi.ng/strings": "^3.3.20"
44
+ "@thi.ng/rstream": "^7.2.32",
45
+ "@thi.ng/strings": "^3.3.21"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@microsoft/api-extractor": "^7.33.7",
@@ -140,5 +140,5 @@
140
140
  "status": "beta",
141
141
  "year": 2020
142
142
  },
143
- "gitHead": "f445a9cc8022bcdebbf6ff91fd66ced016d72f01\n"
143
+ "gitHead": "7b2af448da8a63fb21704a79cc4cdf1f3d7d7a64\n"
144
144
  }
package/sub.d.ts CHANGED
@@ -3,8 +3,9 @@ import type { ISubscribable } from "@thi.ng/rstream";
3
3
  import { Subscription } from "@thi.ng/rstream/subscription";
4
4
  import type { IComponent, IMountWithState, NumOrElement } from "./api.js";
5
5
  /**
6
- * Takes an {@link @thi.ng/rstream#ISubscribable} and creates a simple component
7
- * wrapper for its reactively produced values.
6
+ * Takes an
7
+ * [`ISubscribable`](https://docs.thi.ng/umbrella/rstream/interfaces/ISubscribable.html)
8
+ * and creates a simple component wrapper for its reactively produced values.
8
9
  *
9
10
  * @remarks
10
11
  * If given an {@link IMountWithState} component, new stream values are applied