@twobirds/microcomponents 0.1.20 → 0.1.23
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/LICENSE +21 -0
- package/README.md +97 -102
- package/dist/MC.min.js +1 -342
- package/dist/autoload.min.js +1 -0
- package/dist/core/MC.d.ts +401 -0
- package/dist/core/MC.d.ts.map +1 -0
- package/dist/core/MC.js +471 -0
- package/dist/core/autoload.d.ts +54 -0
- package/dist/core/autoload.d.ts.map +1 -0
- package/dist/core/autoload.js +158 -0
- package/dist/core/elements.d.ts +232 -0
- package/dist/core/elements.d.ts.map +1 -0
- package/dist/core/elements.js +123 -0
- package/dist/core/events.d.ts +231 -0
- package/dist/core/events.d.ts.map +1 -0
- package/dist/core/events.js +228 -0
- package/dist/core/mcGuards.d.ts +49 -0
- package/dist/core/mcGuards.d.ts.map +1 -0
- package/dist/core/mcGuards.js +19 -0
- package/dist/elements.min.js +1 -1
- package/dist/events.min.js +1 -0
- package/dist/formValues.min.js +1 -1
- package/dist/mcGuards.min.js +1 -0
- package/dist/microcomponents.d.ts +8 -5
- package/dist/microcomponents.d.ts.map +1 -1
- package/dist/microcomponents.js +8 -5
- package/dist/microcomponents.min.js +1 -1
- package/dist/observables.min.js +1 -1
- package/dist/state/formValues.d.ts +70 -0
- package/dist/state/formValues.d.ts.map +1 -0
- package/dist/state/formValues.js +334 -0
- package/dist/state/observables.d.ts +276 -0
- package/dist/state/observables.d.ts.map +1 -0
- package/dist/state/observables.js +382 -0
- package/dist/state/placeholders.d.ts +62 -0
- package/dist/state/placeholders.d.ts.map +1 -0
- package/dist/state/placeholders.js +181 -0
- package/dist/types/mcTypes.d.ts +201 -0
- package/dist/types/mcTypes.d.ts.map +1 -0
- package/dist/types/mcTypes.js +9 -0
- package/dist/utils/helpers.d.ts +195 -0
- package/dist/utils/helpers.d.ts.map +1 -0
- package/dist/utils/helpers.js +340 -0
- package/package.json +95 -61
- package/dist/MC.d.ts +0 -39
- package/dist/MC.d.ts.map +0 -1
- package/dist/MC.js +0 -299
- package/dist/MC.ts +0 -457
- package/dist/MicroComponents.svg +0 -15
- package/dist/elements.d.ts +0 -5
- package/dist/elements.d.ts.map +0 -1
- package/dist/elements.js +0 -50
- package/dist/elements.ts +0 -94
- package/dist/formValues.d.ts +0 -3
- package/dist/formValues.d.ts.map +0 -1
- package/dist/formValues.js +0 -158
- package/dist/formValues.ts +0 -213
- package/dist/helpers.d.ts +0 -14
- package/dist/helpers.d.ts.map +0 -1
- package/dist/helpers.js +0 -111
- package/dist/helpers.ts +0 -138
- package/dist/microcomponents.ts +0 -6
- package/dist/observables.d.ts +0 -11
- package/dist/observables.d.ts.map +0 -1
- package/dist/observables.js +0 -228
- package/dist/observables.ts +0 -338
|
@@ -0,0 +1,401 @@
|
|
|
1
|
+
/**
|
|
2
|
+
@module
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
MicroComponents (MC) is a lightweight pattern for creating self-contained, event-driven, and composable UI components. It provides two core base classes: {@link MC} and {@link DC}, which differ primarily in their target attachment strategy and runtime environment requirements.
|
|
6
|
+
|
|
7
|
+
In general, your code extends from either of these classes depending on whether you need DOM interaction or pure logic encapsulation.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## MC vs DC: Server vs Client
|
|
12
|
+
|
|
13
|
+
The key distinction between the two base classes is their execution context:
|
|
14
|
+
|
|
15
|
+
- **MC (MicroComponent)** – A general-purpose component that works in **any JavaScript environment**, including server-side runtimes (Node.js, Deno, etc.). It does not require a DOM and can be used for business logic, state management, or as a lightweight container. The `target` parameter is optional.
|
|
16
|
+
|
|
17
|
+
- **DC (DOM Component)** – A DOM-centric component that operates wherever a real ( browser ) or simulated ( jsdom, etc. ) DOM exists. It attaches itself to an {@link HTMLElement} and provides event handling, DOM traversal, and lifecycle management. The `target` parameter is required and must be an HTMLElement.
|
|
18
|
+
|
|
19
|
+
**HINT:** DCs can be attached to **any** DOM node ( HTMLElement ). That is you can connect them to <div>, <span> and the like. With a trick you can even define custom elements that convert themselves to e.g. a plain <div>.
|
|
20
|
+
|
|
21
|
+
### When to use which?
|
|
22
|
+
|
|
23
|
+
| Scenario | Recommended Class |
|
|
24
|
+
|----------|-------------------|
|
|
25
|
+
| Server-side rendering or logic | MC |
|
|
26
|
+
| Pure data processing without DOM | MC |
|
|
27
|
+
| Interactive UI elements in the browser | DC |
|
|
28
|
+
| Event-driven components attached to HTML nodes | DC |
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## The `target` Property: Backreference Concept
|
|
33
|
+
|
|
34
|
+
Both MC and DC store a reference to their **host object** via the internal `_target` property (exposed as the `target` getter). This is a *backreference* — it points back to the object that contains or hosts this component instance.
|
|
35
|
+
|
|
36
|
+
- For **DC instances**, `this.target` refers to the {@link HTMLElement} in the DOM (or testing DOM such as jsdom) to which the component is attached.
|
|
37
|
+
- For **MC instances**, `this.target` can be any arbitrary object, allowing flexible composition patterns.
|
|
38
|
+
|
|
39
|
+
The reference is held via a `WeakRef` ([MDN WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef)) internally to avoid circular references and prevent memory leaks.
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## DOM Integration: The `_mc` Property and `data-mc` Attribute
|
|
44
|
+
|
|
45
|
+
When a DC is attached to an element via {@linkcode DC.add}, two things happen:
|
|
46
|
+
|
|
47
|
+
1. The element gains a `_mc` property (of type {@link McHost}) that holds references to all attached microcomponents, keyed by their unique identifiers.
|
|
48
|
+
2. The element receives a `data-mc` attribute, signaling that it hosts at least one microcomponent. This attribute is used internally for DOM queries and selectors.
|
|
49
|
+
|
|
50
|
+
This `_mc` property is the **only** interference with the native DOM structure, ensuring compatibility with other frameworks or libraries.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Lifecycle & Automatic Event Handler Attachment
|
|
55
|
+
|
|
56
|
+
DC instances automatically trigger an `"Init"` lifecycle event asynchronously after construction. Additionally, methods prefixed with `on` or `one` (e.g., `onClick`, `oneUpdate`) are auto-attached as event listeners on the target element, supporting both native HTML events and custom microcomponent events.
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
@example Understanding target in DC
|
|
62
|
+
|
|
63
|
+
javascript:
|
|
64
|
+
```javascript
|
|
65
|
+
import { DC } from '@twobirds/microcomponents';
|
|
66
|
+
|
|
67
|
+
class MyButton extends DC {
|
|
68
|
+
constructor(target: HTMLElement) {
|
|
69
|
+
super(target);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
logTarget() {
|
|
73
|
+
// this.target is the <button> element itself
|
|
74
|
+
console.log(this.target.tagName); // "BUTTON"
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const btn = document.querySelector('button');
|
|
79
|
+
if (btn) {
|
|
80
|
+
const host = DC.add(btn, 'myButton', new MyButton(btn));
|
|
81
|
+
host._mc.myButton.logTarget();
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
@example Understanding target in MC
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
```javascript
|
|
89
|
+
import { MC } from '@twobirds/microcomponents';
|
|
90
|
+
|
|
91
|
+
class Counter extends MC {
|
|
92
|
+
private count = 0;
|
|
93
|
+
|
|
94
|
+
constructor(target?: object) {
|
|
95
|
+
super(target);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
increment() {
|
|
99
|
+
this.count++;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
getCount() {
|
|
103
|
+
return this.count;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// Works without any DOM — usable on server or client
|
|
108
|
+
const counter = new Counter();
|
|
109
|
+
counter.increment();
|
|
110
|
+
console.log(counter.getCount()); // 1
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
@example Usage
|
|
114
|
+
|
|
115
|
+
Below is a complete example demonstrating how to create, attach, and interact with a custom microcomponent:
|
|
116
|
+
|
|
117
|
+
html before:
|
|
118
|
+
```html
|
|
119
|
+
<div id="container"></div>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
javascript:
|
|
123
|
+
```javascript
|
|
124
|
+
import { DC } from '@twobirds/microcomponents';
|
|
125
|
+
|
|
126
|
+
// 1. Create a custom micro component class extending DC
|
|
127
|
+
class HelloWorld extends DC {
|
|
128
|
+
constructor(target: HTMLElement) {
|
|
129
|
+
super(target);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
greet() {
|
|
133
|
+
console.log('Hello World');
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// 2. Get an element from the DOM
|
|
138
|
+
const element = document.getElementById('container')!;
|
|
139
|
+
|
|
140
|
+
// 3. Attach the micro component instance to the target element
|
|
141
|
+
DC.add(element, 'helloWorld', new HelloWorld(element));
|
|
142
|
+
|
|
143
|
+
// 4. Invoke methods on the attached component
|
|
144
|
+
element._mc.helloWorld.greet(); // "Hello World"
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
html after:
|
|
148
|
+
```html
|
|
149
|
+
<div id="container" data-mc></div>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
The `data-mc` attribute indicates that this element contains at least one microcomponent. The `_mc` property provides direct programmatic access to the attached instances.
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
*/
|
|
157
|
+
import { BubbleController } from './events.js';
|
|
158
|
+
import type { BubbleDirections, McController, McEntriesOf, McEventHandler, McHost, McHostOf, McMerged, McPayloadOf, McRemoved } from '../types/mcTypes.js';
|
|
159
|
+
export type { McBubbleController, McController, McDetail, McEntriesOf, McEvent, McEventHandler, McHost, McHostOf, McMerged, McNativeEventHandlers, McPayloadOf, McRemoved, } from '../types/mcTypes.js';
|
|
160
|
+
export { isMcDOM } from './mcGuards.js';
|
|
161
|
+
/**
|
|
162
|
+
The base class for all microcomponents.
|
|
163
|
+
|
|
164
|
+
Implements a `WeakRef` to the target DOM element or other data, avoiding
|
|
165
|
+
circular references. Automatically triggers the "Init" lifecycle event and
|
|
166
|
+
attaches listeners via `autoAttachListeners` upon construction.
|
|
167
|
+
*/
|
|
168
|
+
declare class McBase<TTarget extends object = object> {
|
|
169
|
+
private _target;
|
|
170
|
+
/**
|
|
171
|
+
The constructor for the base `McBase` class.
|
|
172
|
+
|
|
173
|
+
Initializes a weak reference to the target and triggers auto-attachment
|
|
174
|
+
of listeners and initialization lifecycle events.
|
|
175
|
+
|
|
176
|
+
@param target - The object or element this microcomponent represents.
|
|
177
|
+
*/
|
|
178
|
+
constructor(target: TTarget);
|
|
179
|
+
/**
|
|
180
|
+
Returns the current target object (DOM node or other data) referenced by this microcomponent.
|
|
181
|
+
|
|
182
|
+
Uses a `WeakRef` internally to avoid circular references, and safely dereferences it here.
|
|
183
|
+
|
|
184
|
+
The dereference is asserted non-null: the controller is stored on its target
|
|
185
|
+
(`element._mc`), so any code that can reach the controller through the element is
|
|
186
|
+
holding the target alive. Only a controller retained independently after its element
|
|
187
|
+
was garbage-collected could observe a stale reference — do not cache controllers
|
|
188
|
+
detached from their elements.
|
|
189
|
+
|
|
190
|
+
@returns The target object.
|
|
191
|
+
*/
|
|
192
|
+
get target(): TTarget;
|
|
193
|
+
}
|
|
194
|
+
/**
|
|
195
|
+
A general-purpose base microcomponent that does not require a DOM target.
|
|
196
|
+
|
|
197
|
+
Inherits from `McBase`, but is primarily used as a lightweight container or
|
|
198
|
+
for logic not directly tied to DOM elements.
|
|
199
|
+
|
|
200
|
+
@template TTarget - The concrete type of the wrapped target data; preserved by
|
|
201
|
+
the `target` getter, so `new MC({ some: 'data' }).target.some` stays typed.
|
|
202
|
+
*/
|
|
203
|
+
declare class MC<TTarget extends object = object> extends McBase<TTarget> {
|
|
204
|
+
/**
|
|
205
|
+
Constructs an instance of the general-purpose microcomponent.
|
|
206
|
+
|
|
207
|
+
@param target - Target object or data.
|
|
208
|
+
*/
|
|
209
|
+
constructor(target: TTarget);
|
|
210
|
+
}
|
|
211
|
+
/**
|
|
212
|
+
A DOM-centric microcomponent that operates on a specific HTML element.
|
|
213
|
+
|
|
214
|
+
Extends `McBase` and associates itself with an actual DOM node via the
|
|
215
|
+
`_target` reference. Provides methods for event handling, DOM traversal,
|
|
216
|
+
and interaction with sibling or ancestor microcomponents.
|
|
217
|
+
|
|
218
|
+
@template T - The concrete element type of the host element.
|
|
219
|
+
@template EM - The component's custom event map (`event name → payload type`).
|
|
220
|
+
Declaring it registers events on the type level: `trigger()` enforces the
|
|
221
|
+
payload for registered names, and `on()`/`one()` handlers receive
|
|
222
|
+
`CustomEvent<McDetail<Payload>>` with no annotation needed. Unregistered
|
|
223
|
+
names keep the open `unknown`-payload behavior.
|
|
224
|
+
@example
|
|
225
|
+
```ts
|
|
226
|
+
class Cart extends DC<HTMLFormElement, { CartUpdate: { count: number } }> {
|
|
227
|
+
checkout() {
|
|
228
|
+
this.trigger('CartUpdate', { count: 2 }, 'u'); // payload checked
|
|
229
|
+
this.on('CartUpdate', (ev) => ev.detail.data.count); // ev fully typed
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
*/
|
|
234
|
+
declare class DC<T extends HTMLElement = HTMLElement, EM extends Record<string, unknown> = Record<never, never>> extends McBase<T> implements McController<T> {
|
|
235
|
+
constructor(target: T);
|
|
236
|
+
/**
|
|
237
|
+
Static helper to attach a microcomponent instance to a DOM element.
|
|
238
|
+
|
|
239
|
+
Wrapper around the `add()` utility function, providing a class-level API
|
|
240
|
+
for adding child microcomponents to a target node.
|
|
241
|
+
|
|
242
|
+
@template T - The concrete element type of the target; preserved in the return type.
|
|
243
|
+
@template K - The literal registration key; becomes a known entry of the returned `_mc` registry.
|
|
244
|
+
@template E - The type of the attached element; retrievable as `result._mc[key]`.
|
|
245
|
+
@param target - The DOM element to which to attach the microcomponent.
|
|
246
|
+
@param key - The property name/key under which to store the instance in `_mc`.
|
|
247
|
+
@returns The target DOM element with the attached microcomponent.
|
|
248
|
+
*/
|
|
249
|
+
static add<T extends HTMLElement>(target: T, key: string): McHost<McHostOf<T>, McEntriesOf<T>>;
|
|
250
|
+
/** @param element - The microcomponent instance or config object to attach. When
|
|
251
|
+
omitted, a bare `{}` marker is stored and no typed entry is claimed. */
|
|
252
|
+
static add<T extends HTMLElement, K extends string, E extends object>(target: T, key: K, element: E): McHost<McHostOf<T>, McMerged<McEntriesOf<T>, Record<K, E>>>;
|
|
253
|
+
/**
|
|
254
|
+
Static helper to remove a named microcomponent from a DOM element.
|
|
255
|
+
|
|
256
|
+
Wrapper around the `remove()` utility function, providing a class-level API
|
|
257
|
+
for removing child microcomponents.
|
|
258
|
+
|
|
259
|
+
@template T - A plain or already-enhanced element type.
|
|
260
|
+
@template K - The literal registration key; its entry is poisoned in the registry type.
|
|
261
|
+
@param target - The DOM element from which to remove the microcomponent.
|
|
262
|
+
@param key - The property name/key corresponding to the microcomponent to remove.
|
|
263
|
+
*/
|
|
264
|
+
static remove<T extends HTMLElement, K extends string = string>(target: T, key: K): asserts target is T & McRemoved<T, K>;
|
|
265
|
+
/**
|
|
266
|
+
Class-verified entry lookup: returns the component stored under `key` on the
|
|
267
|
+
element's `_mc` record — but only if it is an instance of `Klass`.
|
|
268
|
+
|
|
269
|
+
This is the *sound* retrieval primitive: presence AND type identity are both
|
|
270
|
+
proven at runtime (`instanceof`), so it needs no global `McRegistry`
|
|
271
|
+
declaration and stays correct even when different elements use the same key
|
|
272
|
+
name for different component types. Accepts any value (including
|
|
273
|
+
`querySelector` results that may be null) — every failure mode returns
|
|
274
|
+
`undefined`.
|
|
275
|
+
|
|
276
|
+
@template E - The component type, inferred from `Klass`.
|
|
277
|
+
@param element - The value to look the entry up on; anything non-host yields undefined.
|
|
278
|
+
@param key - The registry key name to look under.
|
|
279
|
+
@param elementMcClass - The class the entry must be an instance of.
|
|
280
|
+
@returns The verified instance, or undefined.
|
|
281
|
+
@example
|
|
282
|
+
```ts
|
|
283
|
+
const cart = DC.get(document.querySelector('form'), 'cart', Cart);
|
|
284
|
+
cart?.addItem(item); // Cart | undefined — no global declaration involved
|
|
285
|
+
```
|
|
286
|
+
*/
|
|
287
|
+
static get<E extends object>(element: unknown, key: string, elementMcClass: abstract new (...args: never[]) => E): E | undefined;
|
|
288
|
+
/**
|
|
289
|
+
Detaches an event listener from the DOM node.
|
|
290
|
+
|
|
291
|
+
This is an instance method wrapper for `off()`, using the internal `_target` DOM reference.
|
|
292
|
+
|
|
293
|
+
@param eventName - The name of the event (e.g., 'click', 'update').
|
|
294
|
+
@param handler - The previously attached callback function or object to remove.
|
|
295
|
+
*/
|
|
296
|
+
off<D = unknown, K extends string = string>(eventName: K, handler: McEventHandler<McPayloadOf<EM, K, D>>): void;
|
|
297
|
+
off(eventName: string, handler: EventListenerOrEventListenerObject): void;
|
|
298
|
+
/**
|
|
299
|
+
Attaches a persistent event listener to the DOM node.
|
|
300
|
+
|
|
301
|
+
This is an instance method wrapper for `on()`, using the internal `_target` DOM reference.
|
|
302
|
+
|
|
303
|
+
The handler receives a `CustomEvent<McDetail<Payload>>`. For event names
|
|
304
|
+
registered in the component's event map `EM` the payload is resolved from the
|
|
305
|
+
map — an unannotated arrow handler is fully typed. For unregistered names the
|
|
306
|
+
payload defaults to `unknown` and can be pinned via the type argument
|
|
307
|
+
(`on<Payload>('Name', handler)`) or the handler's own annotation.
|
|
308
|
+
|
|
309
|
+
@param eventName - The name of the event (e.g., 'click', 'update').
|
|
310
|
+
@param handler - The callback function or object to invoke.
|
|
311
|
+
@returns The attached handler reference, unchanged — usable directly with {@link off}.
|
|
312
|
+
*/
|
|
313
|
+
on<D = unknown, K extends string = string>(eventName: K, handler: McEventHandler<McPayloadOf<EM, K, D>>): McEventHandler<McPayloadOf<EM, K, D>>;
|
|
314
|
+
on(eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
|
|
315
|
+
/**
|
|
316
|
+
Attaches a one-time event listener to the DOM node.
|
|
317
|
+
|
|
318
|
+
This is an instance method wrapper for `one()`, using the internal `_target` DOM reference.
|
|
319
|
+
Payload typing follows the same rules as {@link DC.on}.
|
|
320
|
+
|
|
321
|
+
@param eventName - The name of the event (e.g., 'click', 'update').
|
|
322
|
+
@param handler - The callback function or object to invoke once.
|
|
323
|
+
@returns The attached one-time handler reference, unchanged — usable directly with {@link off}.
|
|
324
|
+
*/
|
|
325
|
+
one<D = unknown, K extends string = string>(eventName: K, handler: McEventHandler<McPayloadOf<EM, K, D>>): McEventHandler<McPayloadOf<EM, K, D>>;
|
|
326
|
+
one(eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
|
|
327
|
+
/**
|
|
328
|
+
Triggers a custom event on the DOM node and optionally bubbles it.
|
|
329
|
+
|
|
330
|
+
This is an instance method wrapper for `trigger()`, using the internal `_target` DOM reference.
|
|
331
|
+
|
|
332
|
+
For event names registered in the component's event map `EM` the payload type
|
|
333
|
+
is enforced; unregistered names accept any payload (typed via inference or an
|
|
334
|
+
explicit `trigger<Payload>(...)` argument).
|
|
335
|
+
|
|
336
|
+
@param eventName - The name of the event (will be prefixed if needed).
|
|
337
|
+
@param data - Additional data payload attached to `event.detail.data`.
|
|
338
|
+
@param bubble - Bubbling direction ('l', 'u', 'd' or combinations).
|
|
339
|
+
@param controller - Optional controller for managing bubbling behavior.
|
|
340
|
+
*/
|
|
341
|
+
trigger<D = unknown, K extends string = string>(eventName: K, data?: McPayloadOf<EM, K, D>, bubble?: BubbleDirections, controller?: BubbleController): void;
|
|
342
|
+
/**
|
|
343
|
+
Returns an array of all ancestor microcomponents up the DOM tree.
|
|
344
|
+
|
|
345
|
+
Traverses upward from this element's target, collecting the `_mc` instances
|
|
346
|
+
of ancestor elements marked with `data-mc`. The keyed form only collects
|
|
347
|
+
hosts whose registry carries `key`, typed from the global {@link McRegistry}
|
|
348
|
+
binding — non-optional, since presence is checked during the walk.
|
|
349
|
+
|
|
350
|
+
@template R - Known registry entries of the results; pass a record to assert
|
|
351
|
+
a site-specific shape: `ancestors<{ cart: Cart }>()`. Defaults to none.
|
|
352
|
+
@returns An array of ancestor microcomponent instances (empty if none found).
|
|
353
|
+
*/
|
|
354
|
+
ancestors<R extends Record<string, unknown> = Record<never, never>>(): (McController & R)[];
|
|
355
|
+
/** @param key - Optional registry key each collected ancestor must carry. */
|
|
356
|
+
ancestors<K extends keyof McRegistry & string>(key: K): (McController & Pick<McRegistry, K>)[];
|
|
357
|
+
/**
|
|
358
|
+
Returns the closest ancestor microcomponent or null if none found.
|
|
359
|
+
|
|
360
|
+
This method is equivalent to calling `ancestors()[0]`, but more concise.
|
|
361
|
+
The keyed form walks up to the nearest host whose registry carries `key`,
|
|
362
|
+
typed from the global {@link McRegistry} binding — non-optional, since
|
|
363
|
+
presence is checked during the walk.
|
|
364
|
+
|
|
365
|
+
@template R - Known registry entries of the result; pass a record to assert
|
|
366
|
+
a site-specific shape: `closest<{ cart: Cart }>()?.cart.addItem(...)`.
|
|
367
|
+
Defaults to none.
|
|
368
|
+
@returns The nearest matching ancestor's `_mc`, or null if not found.
|
|
369
|
+
*/
|
|
370
|
+
closest<R extends Record<string, unknown> = Record<never, never>>(): (McController & R) | null;
|
|
371
|
+
/** @param key - Optional registry key the ancestor must carry. */
|
|
372
|
+
closest<K extends keyof McRegistry & string>(key: K): (McController & Pick<McRegistry, K>) | null;
|
|
373
|
+
/**
|
|
374
|
+
Returns an array of direct child microcomponents.
|
|
375
|
+
|
|
376
|
+
Calls `getMcChildNodes()` internally to find immediate descendants only,
|
|
377
|
+
excluding nested grandchildren and deeper levels. The keyed form filters to
|
|
378
|
+
hosts whose registry carries `key`; see {@link DC.closest}.
|
|
379
|
+
|
|
380
|
+
@template R - Known registry entries of the results; see {@link DC.closest}.
|
|
381
|
+
@returns An array of child microcomponent instances (empty if none found).
|
|
382
|
+
*/
|
|
383
|
+
children<R extends Record<string, unknown> = Record<never, never>>(): (McController & R)[];
|
|
384
|
+
/** @param key - Optional registry key each child must carry. */
|
|
385
|
+
children<K extends keyof McRegistry & string>(key: K): (McController & Pick<McRegistry, K>)[];
|
|
386
|
+
/**
|
|
387
|
+
Returns an array of all descendant microcomponents recursively.
|
|
388
|
+
|
|
389
|
+
Uses a `querySelectorAll` query to collect every nested element marked with
|
|
390
|
+
`data-mc`, returning their associated `_mc` instances. The keyed form
|
|
391
|
+
filters to hosts whose registry carries `key`; see {@link DC.closest}.
|
|
392
|
+
|
|
393
|
+
@template R - Known registry entries of the results; see {@link DC.closest}.
|
|
394
|
+
@returns An array of descendant microcomponent instances (empty if none found).
|
|
395
|
+
*/
|
|
396
|
+
descendants<R extends Record<string, unknown> = Record<never, never>>(): (McController & R)[];
|
|
397
|
+
/** @param key - Optional registry key each descendant must carry. */
|
|
398
|
+
descendants<K extends keyof McRegistry & string>(key: K): (McController & Pick<McRegistry, K>)[];
|
|
399
|
+
}
|
|
400
|
+
export { MC, DC, McBase };
|
|
401
|
+
//# sourceMappingURL=MC.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../../src/core/MC.ts"],"names":[],"mappings":"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"}
|