sigula 1.0.4 → 2.0.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.
- package/README.md +281 -554
- package/dist/sigula.d.ts +687 -31
- package/dist/sigula.d.ts.map +1 -1
- package/dist/sigula.js +1 -1
- package/dist/sigula.js.map +1 -1
- package/package.json +2 -1
package/dist/sigula.d.ts
CHANGED
|
@@ -1,130 +1,726 @@
|
|
|
1
|
-
//#region src/boundary.d.ts
|
|
1
|
+
//#region src/core/boundary.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* An inclusive range of sibling nodes (`start` through `end`).
|
|
4
|
+
*
|
|
5
|
+
* @group Low-level API
|
|
6
|
+
*/
|
|
2
7
|
export interface Boundary {
|
|
8
|
+
/** The first node in the range. */
|
|
3
9
|
start: Node;
|
|
10
|
+
/** The last node in the range. */
|
|
4
11
|
end: Node;
|
|
5
12
|
}
|
|
13
|
+
/**
|
|
14
|
+
* Visits every node from `b.start` through `b.end`.
|
|
15
|
+
*
|
|
16
|
+
* @param b - the boundary to walk.
|
|
17
|
+
* @param fn - called with each node.
|
|
18
|
+
* @group Low-level API
|
|
19
|
+
*/
|
|
6
20
|
export declare const walkBoundary: (b: Boundary, fn: (node: Node) => void) => void;
|
|
21
|
+
/**
|
|
22
|
+
* Removes every node in the boundary. No-op if the boundary has no parent.
|
|
23
|
+
*
|
|
24
|
+
* @param b - the boundary to remove.
|
|
25
|
+
* @group Low-level API
|
|
26
|
+
*/
|
|
7
27
|
export declare const removeBoundary: (b: Boundary) => void;
|
|
28
|
+
/**
|
|
29
|
+
* Wraps a node in a {@link Boundary}. A `DocumentFragment` spans its first and
|
|
30
|
+
* last child; any other node covers itself. Throws `E2` on an empty fragment.
|
|
31
|
+
*
|
|
32
|
+
* @param node - the node to wrap.
|
|
33
|
+
* @returns the node's boundary.
|
|
34
|
+
* @group Low-level API
|
|
35
|
+
*/
|
|
8
36
|
export declare const toBoundary: (node: Node) => Boundary;
|
|
37
|
+
/**
|
|
38
|
+
* Replaces an entire boundary with `node` and returns the new boundary. Throws
|
|
39
|
+
* `E3` if the old boundary has no parent.
|
|
40
|
+
*
|
|
41
|
+
* @param old - the boundary to replace.
|
|
42
|
+
* @param node - the replacement node.
|
|
43
|
+
* @returns the boundary of the inserted node.
|
|
44
|
+
* @group Low-level API
|
|
45
|
+
*/
|
|
9
46
|
export declare const replaceWithNode: (old: Boundary, node: Node) => Boundary;
|
|
10
47
|
//#endregion
|
|
11
|
-
//#region src/cmd.d.ts
|
|
48
|
+
//#region src/core/cmd.d.ts
|
|
49
|
+
/**
|
|
50
|
+
* Base type for command contexts: an arbitrary string-keyed record.
|
|
51
|
+
*
|
|
52
|
+
* @group Low-level API
|
|
53
|
+
*/
|
|
12
54
|
export interface CmdContext {
|
|
55
|
+
/** Any string key; values are unconstrained. */
|
|
13
56
|
[key: string]: unknown;
|
|
14
57
|
}
|
|
58
|
+
/**
|
|
59
|
+
* The unit of work a binding runs: it receives the current value and context.
|
|
60
|
+
*
|
|
61
|
+
* @typeParam T - the value type.
|
|
62
|
+
* @typeParam C - the context type.
|
|
63
|
+
* @group Low-level API
|
|
64
|
+
*/
|
|
15
65
|
export type Cmd<T, C extends CmdContext> = (val: T, context: C) => void;
|
|
66
|
+
/**
|
|
67
|
+
* A {@link Cmd} with erased value and context types.
|
|
68
|
+
*
|
|
69
|
+
* @group Low-level API
|
|
70
|
+
*/
|
|
16
71
|
export type AnyCmd = Cmd<any, any>;
|
|
17
72
|
//#endregion
|
|
18
|
-
//#region src/eq.d.ts
|
|
73
|
+
//#region src/core/eq.d.ts
|
|
74
|
+
/**
|
|
75
|
+
* Implement this on a value type to give `eq` custom equality semantics.
|
|
76
|
+
*
|
|
77
|
+
* @group Reactivity
|
|
78
|
+
*/
|
|
19
79
|
export interface Equatable {
|
|
80
|
+
/** Returns whether `this` and `other` are equal. */
|
|
20
81
|
equals(other: unknown): boolean;
|
|
21
82
|
}
|
|
83
|
+
/**
|
|
84
|
+
* A value equality function.
|
|
85
|
+
*
|
|
86
|
+
* @typeParam T - the value type.
|
|
87
|
+
* @group Reactivity
|
|
88
|
+
*/
|
|
89
|
+
export type Eq<T> = (a: T, b: T) => boolean;
|
|
90
|
+
/**
|
|
91
|
+
* Convenience alias for an arbitrary string-keyed object.
|
|
92
|
+
*
|
|
93
|
+
* @group Reactivity
|
|
94
|
+
*/
|
|
22
95
|
export type UnknownRecord = Record<string, unknown>;
|
|
23
|
-
|
|
96
|
+
/**
|
|
97
|
+
* Deep structural equality. Compares primitives, arrays, `Date`, `RegExp`,
|
|
98
|
+
* `Map`, `Set`, and plain objects, and defers to `a.equals(b)` when `a`
|
|
99
|
+
* implements `Equatable`. This is the default comparator for `Sig.update` and
|
|
100
|
+
* `repeat`. Values with different prototypes are never equal.
|
|
101
|
+
*
|
|
102
|
+
* @typeParam T - the value type.
|
|
103
|
+
* @param a - the first value.
|
|
104
|
+
* @param b - the second value.
|
|
105
|
+
* @returns `true` when `a` and `b` are deeply equal.
|
|
106
|
+
* @group Reactivity
|
|
107
|
+
*/
|
|
108
|
+
export declare const eq: <T>(a: T, b: T) => boolean;
|
|
24
109
|
//#endregion
|
|
25
|
-
//#region src/sig.bind.d.ts
|
|
110
|
+
//#region src/core/sig.bind.d.ts
|
|
111
|
+
/**
|
|
112
|
+
* A registered binding: the signal, its command context, and the command that
|
|
113
|
+
* runs when the signal changes.
|
|
114
|
+
*
|
|
115
|
+
* @typeParam T - the signal's value type.
|
|
116
|
+
* @typeParam C - the command context type.
|
|
117
|
+
* @group Reactivity
|
|
118
|
+
*/
|
|
26
119
|
export interface Bind<T, C extends CmdContext> {
|
|
120
|
+
/** The signal this binding observes. */
|
|
27
121
|
sig: Sig<T>;
|
|
122
|
+
/** The context passed to `cmd` on each run. */
|
|
28
123
|
context: C;
|
|
124
|
+
/** The command run with the current value and context. */
|
|
29
125
|
cmd: Cmd<T, C>;
|
|
126
|
+
/** Set when the binding is detached; a removed binding is skipped. */
|
|
30
127
|
removed: boolean;
|
|
128
|
+
/** Queue flag; true while the binding is queued for the next flush. */
|
|
31
129
|
queued?: boolean;
|
|
32
130
|
}
|
|
131
|
+
/**
|
|
132
|
+
* A {@link Bind} with erased value and context types.
|
|
133
|
+
*
|
|
134
|
+
* @group Reactivity
|
|
135
|
+
*/
|
|
33
136
|
export type AnyBind = Bind<any, any>;
|
|
137
|
+
/**
|
|
138
|
+
* The core reactive value. A `Sig` holds a value and a set of bindings that run
|
|
139
|
+
* when it changes; writes are queued and coalesced in a microtask.
|
|
140
|
+
*
|
|
141
|
+
* @typeParam T - the value type.
|
|
142
|
+
* @group Reactivity
|
|
143
|
+
*/
|
|
34
144
|
export declare class Sig<T> implements Equatable {
|
|
35
145
|
private _val;
|
|
36
146
|
private _binds;
|
|
37
|
-
|
|
147
|
+
private _eq;
|
|
148
|
+
constructor(val: T, opts?: {
|
|
149
|
+
eq?: Eq<T>;
|
|
150
|
+
});
|
|
151
|
+
/** `Equatable` implementation; two `Sig`s are equal when their values are deeply equal. */
|
|
38
152
|
equals(b: unknown): boolean;
|
|
153
|
+
/** Reads the current value. */
|
|
39
154
|
get(): T;
|
|
155
|
+
/** Enqueues dependents without changing the value; use after in-place mutation. */
|
|
156
|
+
notify(): void;
|
|
157
|
+
/** Sets the value and always notifies dependents, even when deeply equal. */
|
|
40
158
|
forceUpdate(v: T): void;
|
|
159
|
+
/** Sets the value and notifies dependents only when `eq(v, current)` is false. */
|
|
41
160
|
update(v: T): void;
|
|
161
|
+
/** Applies `fn` to the current value via `update`, so an equal result is skipped. */
|
|
42
162
|
trans(fn: (v: T) => T): void;
|
|
163
|
+
/** Registers a binding. Prefer `createBind` or the `patch`/`text`/`view` APIs. */
|
|
43
164
|
addBind<C extends CmdContext>(bind: Bind<T, C>): void;
|
|
165
|
+
/** Unregisters a binding; runs `cleanup()` when the last one goes away. */
|
|
44
166
|
removeBind<C extends CmdContext>(bind: Bind<T, C>): void;
|
|
167
|
+
/** Returns the current bindings. */
|
|
45
168
|
getBinds(): Bind<T, CmdContext>[];
|
|
169
|
+
/** Overridable hook called when a signal loses all bindings. No-op on `Sig`. */
|
|
46
170
|
cleanup(): void;
|
|
47
171
|
}
|
|
172
|
+
/**
|
|
173
|
+
* A `Sig` produced by {@link compute}. Extends `Sig` and additionally tracks the
|
|
174
|
+
* source bindings that feed it: it detaches from its sources when it loses its
|
|
175
|
+
* last consumer, and re-links and recomputes once when a consumer is added
|
|
176
|
+
* again.
|
|
177
|
+
*
|
|
178
|
+
* @typeParam T - the derived value type.
|
|
179
|
+
* @group Reactivity
|
|
180
|
+
*/
|
|
48
181
|
export declare class DerivedSig<T> extends Sig<T> {
|
|
49
182
|
private _fromBinds;
|
|
50
183
|
private _linked;
|
|
184
|
+
/** Registers a source binding. */
|
|
51
185
|
addFromBind<S, C extends CmdContext>(bind: Bind<S, C>): void;
|
|
186
|
+
/** Registers a consumer; re-links to sources and recomputes once if detached. */
|
|
52
187
|
addBind<C extends CmdContext>(bind: Bind<T, C>): void;
|
|
188
|
+
/** Removes every source binding when the derived signal has no consumers. */
|
|
53
189
|
cleanup(): void;
|
|
54
190
|
}
|
|
55
|
-
|
|
191
|
+
/**
|
|
192
|
+
* Creates a writable signal holding `v`.
|
|
193
|
+
*
|
|
194
|
+
* @param v - the initial value.
|
|
195
|
+
* @param opts - optional settings; `eq` overrides the comparator used by `update`.
|
|
196
|
+
* @returns a new `Sig` for `v`.
|
|
197
|
+
* @example
|
|
198
|
+
* ```ts
|
|
199
|
+
* const count = sig(0);
|
|
200
|
+
* count.get(); // 0
|
|
201
|
+
* count.update(1); // schedules dependents
|
|
202
|
+
* ```
|
|
203
|
+
* @group Reactivity
|
|
204
|
+
*/
|
|
205
|
+
export declare const sig: <T>(v: T, opts?: {
|
|
206
|
+
eq?: Eq<T>;
|
|
207
|
+
}) => Sig<T>;
|
|
208
|
+
/**
|
|
209
|
+
* Detaches a binding and marks it removed so queued runs are skipped.
|
|
210
|
+
*
|
|
211
|
+
* @typeParam T - the signal's value type.
|
|
212
|
+
* @typeParam C - the command context type.
|
|
213
|
+
* @param bind - the binding to remove.
|
|
214
|
+
* @group Reactivity
|
|
215
|
+
*/
|
|
56
216
|
export declare const removeBind: <T, C extends CmdContext>(bind: Bind<T, C>) => void;
|
|
217
|
+
/**
|
|
218
|
+
* Wires `cmd(sig.get(), context)` to run whenever `sig` changes.
|
|
219
|
+
*
|
|
220
|
+
* @typeParam T - the signal's value type.
|
|
221
|
+
* @typeParam C - the command context type.
|
|
222
|
+
* @param sig - the signal to observe.
|
|
223
|
+
* @param context - the context passed to `cmd`.
|
|
224
|
+
* @param cmd - the command run on change.
|
|
225
|
+
* @returns the registered binding.
|
|
226
|
+
* @group Reactivity
|
|
227
|
+
*/
|
|
57
228
|
export declare const createBind: <T, C extends CmdContext>(sig: Sig<T>, context: C, cmd: Cmd<T, C>) => Bind<T, C>;
|
|
229
|
+
/**
|
|
230
|
+
* A value that may be plain, a `Sig`, or `undefined`.
|
|
231
|
+
*
|
|
232
|
+
* @typeParam T - the underlying value type.
|
|
233
|
+
* @group Reactivity
|
|
234
|
+
*/
|
|
235
|
+
export type Reactive<T> = T | Sig<T> | undefined;
|
|
58
236
|
//#endregion
|
|
59
|
-
//#region src/compute.d.ts
|
|
237
|
+
//#region src/core/compute.d.ts
|
|
238
|
+
/**
|
|
239
|
+
* A record whose values are signals, used by the record overload of
|
|
240
|
+
* {@link compute}.
|
|
241
|
+
*
|
|
242
|
+
* @group Reactivity
|
|
243
|
+
*/
|
|
60
244
|
export interface SigRecord {
|
|
245
|
+
/** Each key maps to a signal of any value type. */
|
|
61
246
|
[key: string]: Sig<any>;
|
|
62
247
|
}
|
|
248
|
+
/**
|
|
249
|
+
* Maps a {@link SigRecord} to a record of the signals' values.
|
|
250
|
+
*
|
|
251
|
+
* @typeParam K - the signal record type.
|
|
252
|
+
* @group Reactivity
|
|
253
|
+
*/
|
|
63
254
|
export type ValRecord<K extends SigRecord> = { [P in keyof K]: K[P] extends Sig<infer U> ? U : never; };
|
|
255
|
+
/**
|
|
256
|
+
* Derives a signal from one source signal. The result recomputes whenever
|
|
257
|
+
* `source` changes.
|
|
258
|
+
*
|
|
259
|
+
* @typeParam S - the source value type.
|
|
260
|
+
* @typeParam T - the derived value type.
|
|
261
|
+
* @param source - the source signal.
|
|
262
|
+
* @param fn - maps the source value to the derived value.
|
|
263
|
+
* @returns a `DerivedSig` for the mapped value.
|
|
264
|
+
* @example
|
|
265
|
+
* ```ts
|
|
266
|
+
* const x = sig(1);
|
|
267
|
+
* const doubled = compute(x, (v) => v * 2);
|
|
268
|
+
* ```
|
|
269
|
+
* @group Reactivity
|
|
270
|
+
*/
|
|
64
271
|
export declare function compute<S, T>(source: Sig<S>, fn: (v: S) => T): DerivedSig<T>;
|
|
272
|
+
/**
|
|
273
|
+
* Derives a signal from a record of signals; `fn` receives the matching record
|
|
274
|
+
* of values. The result recomputes whenever any source changes.
|
|
275
|
+
*
|
|
276
|
+
* @typeParam S - the signal record type.
|
|
277
|
+
* @typeParam T - the derived value type.
|
|
278
|
+
* @param source - a record of signals.
|
|
279
|
+
* @param fn - maps the record of values to the derived value.
|
|
280
|
+
* @returns a `DerivedSig` for the mapped value.
|
|
281
|
+
* @example
|
|
282
|
+
* ```ts
|
|
283
|
+
* const sum = compute({x, y}, (v) => v.x + v.y);
|
|
284
|
+
* ```
|
|
285
|
+
* @group Reactivity
|
|
286
|
+
*/
|
|
65
287
|
export declare function compute<S extends SigRecord, T>(source: S, fn: (v: ValRecord<S>) => T): DerivedSig<T>;
|
|
66
288
|
//#endregion
|
|
67
|
-
//#region src/
|
|
289
|
+
//#region src/core/err.d.ts
|
|
290
|
+
/**
|
|
291
|
+
* Throws an `Error` whose message is the short `code` (for example `E2` or
|
|
292
|
+
* `E11:1:2`). The full text for each code lives in the README error table, so
|
|
293
|
+
* string tables stay out of the bundle.
|
|
294
|
+
*
|
|
295
|
+
* @param code - the coded error message.
|
|
296
|
+
* @group Low-level API
|
|
297
|
+
*/
|
|
298
|
+
export declare function err(code: string): never;
|
|
299
|
+
//#endregion
|
|
300
|
+
//#region src/core/patch.core.d.ts
|
|
301
|
+
/**
|
|
302
|
+
* A collection of deferred bindings to apply to one element, produced by
|
|
303
|
+
* {@link patch}.
|
|
304
|
+
*
|
|
305
|
+
* @group DOM bindings
|
|
306
|
+
*/
|
|
307
|
+
export interface Patch {
|
|
308
|
+
/** Discriminant identifying a patch. */
|
|
309
|
+
type: 'patch';
|
|
310
|
+
/** Deferred patch-item factories, resolved against the target element on mount. */
|
|
311
|
+
toPatchItems: ToAnyPatchItem[];
|
|
312
|
+
/** Detaches the bindings created when the patch was committed. */
|
|
313
|
+
cleanBinds: () => void;
|
|
314
|
+
}
|
|
315
|
+
/**
|
|
316
|
+
* Context passed to patch commands: the target node plus any extra arguments.
|
|
317
|
+
*
|
|
318
|
+
* @group DOM bindings
|
|
319
|
+
*/
|
|
68
320
|
export interface PatchContext extends CmdContext {
|
|
321
|
+
/** The element the binding applies to. */
|
|
69
322
|
node: Node;
|
|
323
|
+
/** Extra arguments for the command, such as the attribute or style key. */
|
|
70
324
|
extra?: unknown[];
|
|
71
325
|
}
|
|
326
|
+
/**
|
|
327
|
+
* One resolved patch binding: a source value, its context, and the command.
|
|
328
|
+
*
|
|
329
|
+
* @typeParam T - the source value type.
|
|
330
|
+
* @group DOM bindings
|
|
331
|
+
*/
|
|
72
332
|
export interface PatchItem<T> {
|
|
333
|
+
/** The plain value or `Sig` the command binds. */
|
|
73
334
|
source: T | Sig<T>;
|
|
335
|
+
/** The context passed to `cmd`. */
|
|
74
336
|
context: PatchContext;
|
|
337
|
+
/** The command run with the value and context. */
|
|
75
338
|
cmd: Cmd<T, PatchContext>;
|
|
76
339
|
}
|
|
340
|
+
/**
|
|
341
|
+
* A factory that defers reading the target element until mount.
|
|
342
|
+
*
|
|
343
|
+
* @typeParam T - the source value type.
|
|
344
|
+
* @group DOM bindings
|
|
345
|
+
*/
|
|
77
346
|
export type ToPatchItem<T> = (el: Element) => PatchItem<T>;
|
|
347
|
+
/**
|
|
348
|
+
* A {@link PatchItem} with an erased value type.
|
|
349
|
+
*
|
|
350
|
+
* @group DOM bindings
|
|
351
|
+
*/
|
|
78
352
|
export type AnyPatchItem = PatchItem<any>;
|
|
353
|
+
/**
|
|
354
|
+
* A {@link ToPatchItem} with an erased value type.
|
|
355
|
+
*
|
|
356
|
+
* @group DOM bindings
|
|
357
|
+
*/
|
|
79
358
|
export type ToAnyPatchItem = (el: Element) => AnyPatchItem;
|
|
80
|
-
export interface Patch {
|
|
81
|
-
type: 'patch';
|
|
82
|
-
toPatchItems: ToAnyPatchItem[];
|
|
83
|
-
cleanBinds: () => void;
|
|
84
|
-
}
|
|
85
|
-
export declare const patch: (...toPatchItems: ToAnyPatchItem[]) => Patch;
|
|
86
|
-
export declare const id: <T>(source: T | Sig<T>) => ToPatchItem<T>;
|
|
87
|
-
export declare const val: <T>(source: T | Sig<T>) => ToPatchItem<T>;
|
|
88
|
-
export declare const attr: <T>(source: T | Sig<T>, key: string) => ToPatchItem<T>;
|
|
89
|
-
export type WritableStyleKey = { [K in keyof CSSStyleDeclaration]: CSSStyleDeclaration[K] extends string ? K : never; }[keyof CSSStyleDeclaration];
|
|
90
|
-
export declare const style: <T>(source: T | Sig<T>, key: WritableStyleKey) => ToPatchItem<T>;
|
|
91
|
-
export declare const styleProperty: <T>(source: T | Sig<T>, key: string) => ToPatchItem<T>;
|
|
92
|
-
export declare const toggleClass: <T>(source: T | Sig<T>, token: string) => ToPatchItem<T>;
|
|
93
|
-
export declare const toggleClasses: <T>(source: T | Sig<T>, ...tokens: string[]) => ToPatchItem<T>;
|
|
94
|
-
export type ActFn<T> = (node: Node, val?: T) => void;
|
|
95
|
-
export declare const act: <T>(source: T | Sig<T>, fn: ActFn<T>) => ToPatchItem<T>;
|
|
96
|
-
type _Listener<K extends keyof HTMLElementEventMap> = (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown;
|
|
97
|
-
export declare const on: <K extends keyof HTMLElementEventMap>(type: K, listener: _Listener<K>, options?: boolean | AddEventListenerOptions) => ToPatchItem<_Listener<K>>;
|
|
98
359
|
//#endregion
|
|
99
|
-
//#region src/
|
|
360
|
+
//#region src/core/utils.d.ts
|
|
361
|
+
/**
|
|
362
|
+
* Reads `arr[index]`, throwing `E1:<index>` when it is out of range.
|
|
363
|
+
*
|
|
364
|
+
* @typeParam T - the element type.
|
|
365
|
+
* @param arr - the array to read from.
|
|
366
|
+
* @param index - the index to read.
|
|
367
|
+
* @returns the element at `index`.
|
|
368
|
+
* @group Low-level API
|
|
369
|
+
*/
|
|
370
|
+
export declare const at: <T>(arr: T[], index: number) => T;
|
|
371
|
+
//#endregion
|
|
372
|
+
//#region src/core/view.core.d.ts
|
|
373
|
+
/**
|
|
374
|
+
* An item that can occupy a slot in a view's children: a view or a patch.
|
|
375
|
+
*
|
|
376
|
+
* @group Templates
|
|
377
|
+
*/
|
|
100
378
|
export type ChildView = AnyView | Patch;
|
|
379
|
+
/**
|
|
380
|
+
* The unit returned by `html`, `text`, `raw`, `view`, `repeat`, `list`, and
|
|
381
|
+
* `frag`.
|
|
382
|
+
*
|
|
383
|
+
* @typeParam T - the bound value type.
|
|
384
|
+
* @typeParam C - the bind context type.
|
|
385
|
+
* @group Templates
|
|
386
|
+
*/
|
|
101
387
|
export interface View<T = unknown, C extends CmdContext = any> {
|
|
388
|
+
/** Discriminant identifying a view. */
|
|
102
389
|
type: 'view';
|
|
390
|
+
/** The DOM node or `DocumentFragment` the view occupies. */
|
|
103
391
|
node: Node;
|
|
392
|
+
/** The view's own binding, when it is reactive. */
|
|
104
393
|
bind?: Bind<T, C> | undefined;
|
|
394
|
+
/** Detaches the view's bindings and, recursively, those of its children. */
|
|
105
395
|
cleanBinds: () => void;
|
|
396
|
+
/** Returns the nodes the view currently occupies. */
|
|
106
397
|
boundary: () => Boundary;
|
|
398
|
+
/** The interpolated children of a template view. */
|
|
107
399
|
children?: ChildView[] | undefined;
|
|
108
400
|
}
|
|
401
|
+
/**
|
|
402
|
+
* A {@link View} with erased value and context types.
|
|
403
|
+
*
|
|
404
|
+
* @group Templates
|
|
405
|
+
*/
|
|
109
406
|
export type AnyView = View<any, any>;
|
|
407
|
+
/**
|
|
408
|
+
* Context for the `view` command: the current inner view and the view factory.
|
|
409
|
+
*
|
|
410
|
+
* @typeParam T - the value type.
|
|
411
|
+
* @group Templates
|
|
412
|
+
*/
|
|
110
413
|
export interface ViewContext<T> extends CmdContext {
|
|
414
|
+
/** The currently mounted inner view. */
|
|
111
415
|
inner: AnyView;
|
|
416
|
+
/** Builds the next inner view from a new value. */
|
|
112
417
|
viewFn: (val: T) => AnyView;
|
|
113
418
|
}
|
|
114
|
-
|
|
419
|
+
/**
|
|
420
|
+
* Replaces an existing boundary with a view's node and returns the new boundary.
|
|
421
|
+
*
|
|
422
|
+
* @param old - the boundary to replace.
|
|
423
|
+
* @param view - the view to mount.
|
|
424
|
+
* @returns the boundary of the mounted view.
|
|
425
|
+
* @group Templates
|
|
426
|
+
*/
|
|
115
427
|
export declare const replaceWithView: (old: Boundary, view: View) => Boundary;
|
|
116
428
|
//#endregion
|
|
429
|
+
//#region src/frag.d.ts
|
|
430
|
+
/**
|
|
431
|
+
* Composes several views into one content-position view. The views' nodes are
|
|
432
|
+
* inserted as flat siblings, in order, with no wrapper element; nested
|
|
433
|
+
* fragments flatten. Reactivity comes from the child views. `frag()` with no
|
|
434
|
+
* arguments renders nothing.
|
|
435
|
+
*
|
|
436
|
+
* @param views - the views to compose.
|
|
437
|
+
* @returns a `View` rendering the views as siblings.
|
|
438
|
+
* @example
|
|
439
|
+
* ```ts
|
|
440
|
+
* html`<div>${frag(text('a'), html`<b>${text('b')}</b>`)}</div>`;
|
|
441
|
+
* ```
|
|
442
|
+
* @group Control flow
|
|
443
|
+
*/
|
|
444
|
+
export declare const frag: (...views: AnyView[]) => View;
|
|
445
|
+
//#endregion
|
|
117
446
|
//#region src/html.d.ts
|
|
118
|
-
|
|
447
|
+
type TextValue = string | number | boolean | bigint | null | undefined;
|
|
448
|
+
type HtmlItem = Patch | AnyView | TextValue | Sig<any>;
|
|
449
|
+
/**
|
|
450
|
+
* Tagged template that parses native HTML and returns a {@link View}. Three
|
|
451
|
+
* kinds of interpolation are supported:
|
|
452
|
+
*
|
|
453
|
+
* - a `View` fills a content position;
|
|
454
|
+
* - a `Patch` (from `patch(...)`) fills an attribute position;
|
|
455
|
+
* - a plain value or a `Sig` fills a content position as text — a `Sig` binds
|
|
456
|
+
* reactively and any other value becomes `String(value)`.
|
|
457
|
+
*
|
|
458
|
+
* Templates are cached per call site, so repeated renders skip parsing. Throws
|
|
459
|
+
* `E10` for an empty template, `E11:<expected>:<got>` for an interpolation-count
|
|
460
|
+
* mismatch, and `E12` for an unmatched interpolation (a `patch` in content
|
|
461
|
+
* position, or a text value in an attribute position).
|
|
462
|
+
*
|
|
463
|
+
* @param strs - the static template strings.
|
|
464
|
+
* @param rawItems - the interpolated views, patches, or text values.
|
|
465
|
+
* @returns the parsed `View`.
|
|
466
|
+
* @example
|
|
467
|
+
* ```ts
|
|
468
|
+
* html`<p>Hello, ${name}!</p>`;
|
|
469
|
+
* html`<button ${patch(on('click', handler))}>Go</button>`;
|
|
470
|
+
* ```
|
|
471
|
+
* @group Templates
|
|
472
|
+
*/
|
|
473
|
+
export declare const html: (strs: TemplateStringsArray, ...rawItems: HtmlItem[]) => View;
|
|
474
|
+
//#endregion
|
|
475
|
+
//#region src/list.d.ts
|
|
476
|
+
/**
|
|
477
|
+
* Renders a fixed array in order. `viewFn` is called once per item with the item
|
|
478
|
+
* and its 0-based index, and each returned `AnyView` is appended in sequence.
|
|
479
|
+
* There is no keying or reconciliation and no reactive source; any reactivity
|
|
480
|
+
* comes from the views `viewFn` returns. An empty array renders
|
|
481
|
+
* `<!--empty-list-->`.
|
|
482
|
+
*
|
|
483
|
+
* @typeParam T - the item type.
|
|
484
|
+
* @param items - the items to render.
|
|
485
|
+
* @param viewFn - builds the view for an item and its index.
|
|
486
|
+
* @returns a `View` rendering the items.
|
|
487
|
+
* @example
|
|
488
|
+
* ```ts
|
|
489
|
+
* html`<ul>${list(items, (item, i) => html`<li>${i}: ${text(item)}</li>`)}</ul>`;
|
|
490
|
+
* ```
|
|
491
|
+
* @group Control flow
|
|
492
|
+
*/
|
|
493
|
+
export declare const list: <T>(items: readonly T[], viewFn: (item: T, index: number) => AnyView) => View;
|
|
494
|
+
//#endregion
|
|
495
|
+
//#region src/patch.d.ts
|
|
496
|
+
/**
|
|
497
|
+
* Object form for {@link patch}, desugared into commands in key order:
|
|
498
|
+
* `id`, `val`, `class` (per entry, via `toggleClass`), `style` (per entry,
|
|
499
|
+
* via `style`), `styleProp` (per entry), `on` (per entry), and any other key
|
|
500
|
+
* via `attr`. A key whose value is `undefined` is skipped.
|
|
501
|
+
*
|
|
502
|
+
* @group DOM bindings
|
|
503
|
+
*/
|
|
504
|
+
export interface PatchProps {
|
|
505
|
+
/** Sets the element's `id`. */
|
|
506
|
+
id?: Reactive<string>;
|
|
507
|
+
/** Sets the element's `value` property. */
|
|
508
|
+
val?: Reactive<string>;
|
|
509
|
+
/** Toggles each class from the truthiness of its value. */
|
|
510
|
+
class?: Record<string, Reactive<boolean>>;
|
|
511
|
+
/** Sets inline style properties by typed name. */
|
|
512
|
+
style?: Partial<Record<WritableStyleKey, Reactive<string>>>;
|
|
513
|
+
/** Sets style properties via `setProperty` (custom properties, untyped names). */
|
|
514
|
+
styleProp?: Record<string, Reactive<string>>;
|
|
515
|
+
/** Registers DOM event listeners. */
|
|
516
|
+
on?: { [K in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[K]) => void; };
|
|
517
|
+
/** Any other key is set as an attribute via `attr`. */
|
|
518
|
+
[attr: string]: unknown;
|
|
519
|
+
}
|
|
520
|
+
/**
|
|
521
|
+
* Declares one or more bindings to apply to the same element; must be
|
|
522
|
+
* interpolated in an attribute position. Each command receives a plain value
|
|
523
|
+
* (applied once) or a `Sig` (applied on mount and re-applied on change).
|
|
524
|
+
*
|
|
525
|
+
* The first argument may be a {@link PatchProps} object, desugared into the
|
|
526
|
+
* commands below in key order, optionally followed by command items.
|
|
527
|
+
*
|
|
528
|
+
* @param props - a props object.
|
|
529
|
+
* @param items - command items applied after the props.
|
|
530
|
+
* @returns a `Patch` for `html` to commit.
|
|
531
|
+
* @example
|
|
532
|
+
* ```ts
|
|
533
|
+
* html`<input ${patch({val: name, placeholder: 'name'})} />`;
|
|
534
|
+
* ```
|
|
535
|
+
* @group DOM bindings
|
|
536
|
+
*/
|
|
537
|
+
export declare function patch(props: PatchProps, ...items: ToAnyPatchItem[]): Patch;
|
|
538
|
+
/**
|
|
539
|
+
* Declares one or more command bindings to apply to the same element.
|
|
540
|
+
*
|
|
541
|
+
* @param toPatchItems - the command items to apply.
|
|
542
|
+
* @returns a `Patch` for `html` to commit.
|
|
543
|
+
* @example
|
|
544
|
+
* ```ts
|
|
545
|
+
* html`<input ${patch(val(name), attr('name', placeholder))} />`;
|
|
546
|
+
* ```
|
|
547
|
+
* @group DOM bindings
|
|
548
|
+
*/
|
|
549
|
+
export declare function patch(...toPatchItems: ToAnyPatchItem[]): Patch;
|
|
550
|
+
/**
|
|
551
|
+
* Sets the element's `id`.
|
|
552
|
+
*
|
|
553
|
+
* @typeParam T - the value type.
|
|
554
|
+
* @param source - a plain value or a `Sig`.
|
|
555
|
+
* @returns a deferred patch item.
|
|
556
|
+
* @group DOM bindings
|
|
557
|
+
*/
|
|
558
|
+
export declare const id: <T>(source: T | Sig<T>) => ToPatchItem<T>;
|
|
559
|
+
/**
|
|
560
|
+
* Sets the element's `value` property (form controls).
|
|
561
|
+
*
|
|
562
|
+
* @typeParam T - the value type.
|
|
563
|
+
* @param source - a plain value or a `Sig`.
|
|
564
|
+
* @returns a deferred patch item.
|
|
565
|
+
* @group DOM bindings
|
|
566
|
+
*/
|
|
567
|
+
export declare const val: <T>(source: T | Sig<T>) => ToPatchItem<T>;
|
|
568
|
+
/**
|
|
569
|
+
* Sets attribute `key`. Use this for boolean/ARIA/data attributes.
|
|
570
|
+
*
|
|
571
|
+
* @typeParam T - the value type.
|
|
572
|
+
* @param key - the attribute name.
|
|
573
|
+
* @param source - a plain value or a `Sig`.
|
|
574
|
+
* @returns a deferred patch item.
|
|
575
|
+
* @group DOM bindings
|
|
576
|
+
*/
|
|
577
|
+
export declare const attr: <T>(key: string, source: T | Sig<T>) => ToPatchItem<T>;
|
|
578
|
+
/**
|
|
579
|
+
* The union of `CSSStyleDeclaration` keys whose values are strings.
|
|
580
|
+
*
|
|
581
|
+
* @group DOM bindings
|
|
582
|
+
*/
|
|
583
|
+
export type WritableStyleKey = { [K in keyof CSSStyleDeclaration]: CSSStyleDeclaration[K] extends string ? K : never; }[keyof CSSStyleDeclaration];
|
|
584
|
+
/**
|
|
585
|
+
* Sets an inline style property by typed name.
|
|
586
|
+
*
|
|
587
|
+
* @typeParam T - the value type.
|
|
588
|
+
* @param key - the typed style property name.
|
|
589
|
+
* @param source - a plain value or a `Sig`.
|
|
590
|
+
* @returns a deferred patch item.
|
|
591
|
+
* @example
|
|
592
|
+
* ```ts
|
|
593
|
+
* html`<span ${patch(style('color', color))}>text</span>`;
|
|
594
|
+
* ```
|
|
595
|
+
* @group DOM bindings
|
|
596
|
+
*/
|
|
597
|
+
export declare const style: <T>(key: WritableStyleKey, source: T | Sig<T>) => ToPatchItem<T>;
|
|
598
|
+
/**
|
|
599
|
+
* Sets a style property via `CSSStyleDeclaration.setProperty`; use this for
|
|
600
|
+
* custom properties (`--my-var`) or untyped names.
|
|
601
|
+
*
|
|
602
|
+
* @typeParam T - the value type.
|
|
603
|
+
* @param key - the style property name.
|
|
604
|
+
* @param source - a plain value or a `Sig`.
|
|
605
|
+
* @returns a deferred patch item.
|
|
606
|
+
* @example
|
|
607
|
+
* ```ts
|
|
608
|
+
* html`<div ${patch(styleProp('--size', size))}></div>`;
|
|
609
|
+
* ```
|
|
610
|
+
* @group DOM bindings
|
|
611
|
+
*/
|
|
612
|
+
export declare const styleProp: <T>(key: string, source: T | Sig<T>) => ToPatchItem<T>;
|
|
613
|
+
/**
|
|
614
|
+
* Toggles a single class from the truthiness of the value.
|
|
615
|
+
*
|
|
616
|
+
* @typeParam T - the value type.
|
|
617
|
+
* @param token - the class token.
|
|
618
|
+
* @param source - a plain value or a `Sig`.
|
|
619
|
+
* @returns a deferred patch item.
|
|
620
|
+
* @group DOM bindings
|
|
621
|
+
*/
|
|
622
|
+
export declare const toggleClass: <T>(token: string, source: T | Sig<T>) => ToPatchItem<T>;
|
|
623
|
+
/**
|
|
624
|
+
* Toggles several classes from one value.
|
|
625
|
+
*
|
|
626
|
+
* @typeParam T - the value type.
|
|
627
|
+
* @param tokens - the class tokens.
|
|
628
|
+
* @param source - a plain value or a `Sig`.
|
|
629
|
+
* @returns a deferred patch item.
|
|
630
|
+
* @group DOM bindings
|
|
631
|
+
*/
|
|
632
|
+
export declare const toggleClasses: <T>(tokens: readonly string[], source: T | Sig<T>) => ToPatchItem<T>;
|
|
633
|
+
/**
|
|
634
|
+
* A custom patch callback run on mount and on change.
|
|
635
|
+
*
|
|
636
|
+
* @typeParam T - the value type.
|
|
637
|
+
* @group DOM bindings
|
|
638
|
+
*/
|
|
639
|
+
export type ActFn<T> = (elem: Element, val?: T) => void;
|
|
640
|
+
/**
|
|
641
|
+
* Runs arbitrary code with the bound node and value, on mount and again on
|
|
642
|
+
* change. The escape hatch for anything the built-in commands do not cover.
|
|
643
|
+
*
|
|
644
|
+
* @typeParam T - the value type.
|
|
645
|
+
* @param source - a plain value or a `Sig`.
|
|
646
|
+
* @param fn - called with the node and current value.
|
|
647
|
+
* @returns a deferred patch item.
|
|
648
|
+
* @example
|
|
649
|
+
* ```ts
|
|
650
|
+
* html`<canvas ${patch(act(frame, (node, v) => draw(node, v)))}></canvas>`;
|
|
651
|
+
* ```
|
|
652
|
+
* @group DOM bindings
|
|
653
|
+
*/
|
|
654
|
+
export declare const act: <T>(source: T | Sig<T>, fn: ActFn<T>) => ToPatchItem<T>;
|
|
655
|
+
type _Listener<K extends keyof HTMLElementEventMap> = (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown;
|
|
656
|
+
/**
|
|
657
|
+
* Adds a DOM event listener. The listener is registered once at mount and is
|
|
658
|
+
* not a reactive source; combine it with `sig` writes to drive updates.
|
|
659
|
+
*
|
|
660
|
+
* @typeParam K - the event type.
|
|
661
|
+
* @param type - the event name.
|
|
662
|
+
* @param listener - the event listener.
|
|
663
|
+
* @param options - standard `addEventListener` options.
|
|
664
|
+
* @returns a deferred patch item.
|
|
665
|
+
* @group DOM bindings
|
|
666
|
+
*/
|
|
667
|
+
export declare const on: <K extends keyof HTMLElementEventMap>(type: K, listener: _Listener<K>, options?: boolean | AddEventListenerOptions) => ToPatchItem<_Listener<K>>;
|
|
668
|
+
//#endregion
|
|
669
|
+
//#region src/raw.d.ts
|
|
670
|
+
/**
|
|
671
|
+
* Parses its value as HTML and mounts the resulting nodes with no wrapper
|
|
672
|
+
* element. Unlike `text`, the value is **not** escaped, so only pass trusted
|
|
673
|
+
* HTML; inline handlers and other vectors still apply once the nodes connect.
|
|
674
|
+
* A `Sig` re-parses and replaces the content on change; an empty string renders
|
|
675
|
+
* nothing.
|
|
676
|
+
*
|
|
677
|
+
* @param source - an HTML string or a `Sig` of one.
|
|
678
|
+
* @returns a content-position `View`.
|
|
679
|
+
* @example
|
|
680
|
+
* ```ts
|
|
681
|
+
* html`<article>${raw(post.bodyHtml)}</article>`;
|
|
682
|
+
* ```
|
|
683
|
+
* @group Templates
|
|
684
|
+
*/
|
|
685
|
+
export declare const raw: (source: string | Sig<string>) => AnyView;
|
|
119
686
|
//#endregion
|
|
120
687
|
//#region src/render.d.ts
|
|
688
|
+
/**
|
|
689
|
+
* Mounts a view into `node` by appending its `node`. Accepts a `View` directly
|
|
690
|
+
* or a factory function that returns one. Returns a disposer that detaches every
|
|
691
|
+
* bind in the tree and removes the nodes from `node`; calling it twice is a
|
|
692
|
+
* no-op.
|
|
693
|
+
*
|
|
694
|
+
* @param viewArg - the view, or a function returning one.
|
|
695
|
+
* @param node - the node to mount into.
|
|
696
|
+
* @returns a disposer that unmounts the view.
|
|
697
|
+
* @example
|
|
698
|
+
* ```ts
|
|
699
|
+
* const dispose = render(App(), document.querySelector('#app')!);
|
|
700
|
+
* dispose();
|
|
701
|
+
* ```
|
|
702
|
+
* @group Rendering
|
|
703
|
+
*/
|
|
121
704
|
export declare const render: (viewArg: AnyView | (() => AnyView), node: Node) => (() => void);
|
|
122
705
|
//#endregion
|
|
123
706
|
//#region src/repeat.d.ts
|
|
707
|
+
/**
|
|
708
|
+
* Options for {@link repeat}.
|
|
709
|
+
*
|
|
710
|
+
* @typeParam T - the item type.
|
|
711
|
+
* @group Control flow
|
|
712
|
+
*/
|
|
124
713
|
export type RepeatProp<T> = {
|
|
714
|
+
/** Returns the unique, stable key for an item. */
|
|
125
715
|
key: (item: T) => string;
|
|
716
|
+
/** Builds the view for an item. */
|
|
126
717
|
view: (item: T) => AnyView;
|
|
127
|
-
|
|
718
|
+
/**
|
|
719
|
+
* Item comparator.
|
|
720
|
+
*
|
|
721
|
+
* @defaultValue `eq`
|
|
722
|
+
*/
|
|
723
|
+
eq?: (a: T, b: T) => boolean;
|
|
128
724
|
};
|
|
129
725
|
interface Track<T> {
|
|
130
726
|
key: string;
|
|
@@ -133,14 +729,74 @@ interface Track<T> {
|
|
|
133
729
|
checked?: boolean;
|
|
134
730
|
cleaned?: boolean;
|
|
135
731
|
}
|
|
732
|
+
/**
|
|
733
|
+
* Context for the `repeat` command.
|
|
734
|
+
*
|
|
735
|
+
* @typeParam T - the item type.
|
|
736
|
+
* @group Control flow
|
|
737
|
+
*/
|
|
136
738
|
export interface RepeatContext<T> extends CmdContext {
|
|
739
|
+
/** The repeat options. */
|
|
137
740
|
prop: RepeatProp<T>;
|
|
741
|
+
/** The current node boundary. */
|
|
138
742
|
boundary: Boundary;
|
|
743
|
+
/** The tracked items and their views. */
|
|
139
744
|
tracks: Track<T>[];
|
|
140
745
|
}
|
|
746
|
+
/**
|
|
747
|
+
* Keyed list rendering. On each change `repeat` matches items by `key`, then
|
|
748
|
+
* reuses, moves, creates, or removes as few DOM nodes as possible. The item
|
|
749
|
+
* comparator defaults to `eq`; when an item is deeply equal to the track it
|
|
750
|
+
* already occupies, the track is reused without rebuilding its view. An empty
|
|
751
|
+
* array renders `<!--empty-list-->`.
|
|
752
|
+
*
|
|
753
|
+
* @typeParam T - the item type.
|
|
754
|
+
* @param sig - the signal holding the items.
|
|
755
|
+
* @param prop - the key/view/eq options.
|
|
756
|
+
* @returns a `View` rendering the list.
|
|
757
|
+
* @example
|
|
758
|
+
* ```ts
|
|
759
|
+
* html`<ul>${repeat(todos, {
|
|
760
|
+
* key: (item) => item.id.toString(),
|
|
761
|
+
* view: (item) => html`<li>${text(item.label)}</li>`,
|
|
762
|
+
* })}</ul>`;
|
|
763
|
+
* ```
|
|
764
|
+
* @group Control flow
|
|
765
|
+
*/
|
|
141
766
|
export declare const repeat: <T>(sig: Sig<T[]>, prop: RepeatProp<T>) => View<T[], RepeatContext<T>>;
|
|
142
767
|
//#endregion
|
|
143
768
|
//#region src/text.d.ts
|
|
769
|
+
/**
|
|
770
|
+
* Creates a text-node view. With a `Sig`, the text updates whenever the signal
|
|
771
|
+
* changes; a plain value is static.
|
|
772
|
+
*
|
|
773
|
+
* @typeParam T - the value type.
|
|
774
|
+
* @param source - a plain value or a `Sig`.
|
|
775
|
+
* @returns a text `View`.
|
|
776
|
+
* @example
|
|
777
|
+
* ```ts
|
|
778
|
+
* html`<span>${text(count)}</span>`;
|
|
779
|
+
* ```
|
|
780
|
+
* @group Templates
|
|
781
|
+
*/
|
|
144
782
|
export declare const text: <T>(source: T | Sig<T>) => View<T, PatchContext>;
|
|
145
783
|
//#endregion
|
|
784
|
+
//#region src/view.d.ts
|
|
785
|
+
/**
|
|
786
|
+
* Conditionally renders one view or another. Whenever `sig` changes, `viewFn`
|
|
787
|
+
* runs with the new value, the previous view is torn down, and a new one is
|
|
788
|
+
* mounted in its place.
|
|
789
|
+
*
|
|
790
|
+
* @typeParam T - the value type.
|
|
791
|
+
* @param sig - the signal to switch on.
|
|
792
|
+
* @param viewFn - builds the view for a value.
|
|
793
|
+
* @returns a `View` that swaps its contents.
|
|
794
|
+
* @example
|
|
795
|
+
* ```ts
|
|
796
|
+
* html`<div>${view(isEmpty, (v) => (v ? text('empty') : listView))}</div>`;
|
|
797
|
+
* ```
|
|
798
|
+
* @group Control flow
|
|
799
|
+
*/
|
|
800
|
+
export declare const view: <T>(sig: Sig<T>, viewFn: (val: T) => AnyView) => View<T, ViewContext<T>>;
|
|
801
|
+
//#endregion
|
|
146
802
|
//# sourceMappingURL=sigula.d.ts.map
|