mates 0.0.18 → 0.0.21
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/dist/examples/src/Counter/Counter.d.ts +2 -0
- package/dist/examples/src/Counter/Counter.d.ts.map +1 -0
- package/dist/examples/src/Counter/CounterWithAtoms.d.ts +2 -0
- package/dist/examples/src/Counter/CounterWithAtoms.d.ts.map +1 -0
- package/dist/examples/src/Counter/index.d.ts +3 -0
- package/dist/examples/src/Counter/index.d.ts.map +1 -0
- package/dist/examples/src/Scope Examples/MultiScopeDemo.d.ts +2 -0
- package/dist/examples/src/Scope Examples/MultiScopeDemo.d.ts.map +1 -0
- package/dist/examples/src/Scope Examples/ScopeDemo.d.ts +2 -0
- package/dist/examples/src/Scope Examples/ScopeDemo.d.ts.map +1 -0
- package/dist/examples/src/Scope Examples/SimpleScopeExample.d.ts +2 -0
- package/dist/examples/src/Scope Examples/SimpleScopeExample.d.ts.map +1 -0
- package/dist/examples/src/Scope Examples/index.d.ts +4 -0
- package/dist/examples/src/Scope Examples/index.d.ts.map +1 -0
- package/dist/examples/src/Scopes Test/A.d.ts +3 -0
- package/dist/examples/src/Scopes Test/A.d.ts.map +1 -0
- package/dist/examples/src/ThemeContext.ts/ThemeDemo.d.ts +4 -0
- package/dist/examples/src/ThemeContext.ts/ThemeDemo.d.ts.map +1 -0
- package/dist/examples/src/Todo/Todo.d.ts +2 -0
- package/dist/examples/src/Todo/Todo.d.ts.map +1 -0
- package/dist/examples/src/Todo/TodoWithAtoms.d.ts +2 -0
- package/dist/examples/src/Todo/TodoWithAtoms.d.ts.map +1 -0
- package/dist/examples/src/Todo/index.d.ts +3 -0
- package/dist/examples/src/Todo/index.d.ts.map +1 -0
- package/dist/examples/src/main.d.ts +3 -0
- package/dist/examples/src/main.d.ts.map +1 -0
- package/dist/examples/vite.config.d.ts +3 -0
- package/dist/examples/vite.config.d.ts.map +1 -0
- package/dist/index.d.ts +1176 -28
- package/dist/index.esm.js +7 -7
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +7 -7
- package/dist/index.js.map +1 -1
- package/dist/lib/Context.d.ts +6 -0
- package/dist/lib/Context.d.ts.map +1 -0
- package/dist/{atom.d.ts → lib/atom.d.ts} +3 -3
- package/dist/lib/atom.d.ts.map +1 -0
- package/dist/lib/bubbles.d.ts.map +1 -0
- package/dist/lib/compute.d.ts.map +1 -0
- package/dist/lib/index.d.ts +31 -0
- package/dist/lib/index.d.ts.map +1 -0
- package/dist/lib/molecule.d.ts.map +1 -0
- package/dist/{pathResolver.d.ts → lib/pathResolver.d.ts} +1 -1
- package/dist/lib/pathResolver.d.ts.map +1 -0
- package/dist/lib/scope.d.ts +14 -0
- package/dist/lib/scope.d.ts.map +1 -0
- package/dist/lib/store.d.ts +2 -0
- package/dist/lib/store.d.ts.map +1 -0
- package/dist/{styleDirectives.d.ts → lib/styleDirectives.d.ts} +6 -0
- package/dist/lib/styleDirectives.d.ts.map +1 -0
- package/dist/{units.d.ts → lib/units.d.ts} +2 -0
- package/dist/lib/units.d.ts.map +1 -0
- package/dist/lib/useRefEffect.d.ts.map +1 -0
- package/dist/{useStore.d.ts → lib/useStore.d.ts} +2 -1
- package/dist/lib/useStore.d.ts.map +1 -0
- package/dist/{view.d.ts → lib/view.d.ts} +2 -1
- package/dist/lib/view.d.ts.map +1 -0
- package/dist/{x-view.d.ts → lib/x-view.d.ts} +3 -1
- package/dist/lib/x-view.d.ts.map +1 -0
- package/dist/lib/xProvider.d.ts +2 -0
- package/dist/lib/xProvider.d.ts.map +1 -0
- package/package.json +1 -1
- package/dist/atom.d.ts.map +0 -1
- package/dist/bubbles.d.ts.map +0 -1
- package/dist/compute.d.ts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/molecule.d.ts.map +0 -1
- package/dist/pathResolver.d.ts.map +0 -1
- package/dist/store.d.ts +0 -2
- package/dist/store.d.ts.map +0 -1
- package/dist/styleDirectives.d.ts.map +0 -1
- package/dist/units.d.ts.map +0 -1
- package/dist/useRefEffect.d.ts.map +0 -1
- package/dist/useStore.d.ts.map +0 -1
- package/dist/view.d.ts.map +0 -1
- package/dist/x-view.d.ts.map +0 -1
- package/dist/xProvider.d.ts +0 -13
- package/dist/xProvider.d.ts.map +0 -1
- /package/dist/{bubbles.d.ts → lib/bubbles.d.ts} +0 -0
- /package/dist/{compute.d.ts → lib/compute.d.ts} +0 -0
- /package/dist/{molecule.d.ts → lib/molecule.d.ts} +0 -0
- /package/dist/{useRefEffect.d.ts → lib/useRefEffect.d.ts} +0 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,28 +1,1176 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
1
|
+
import { TrustedHTML } from 'trusted-types/lib/index.js';
|
|
2
|
+
|
|
3
|
+
declare let globalVersion: number;
|
|
4
|
+
declare const incrGlobalVersion: () => void;
|
|
5
|
+
type Subscriber = () => void;
|
|
6
|
+
type Updater<T> = (prev: T) => T;
|
|
7
|
+
type UpdateFn<T> = (draft: T) => void;
|
|
8
|
+
type AtomType<T> = {
|
|
9
|
+
(): T;
|
|
10
|
+
get(): T;
|
|
11
|
+
set(value: T | Updater<T>): void;
|
|
12
|
+
update(fn: UpdateFn<T>): void;
|
|
13
|
+
subscribe(fn: Subscriber): () => void;
|
|
14
|
+
lock(): void;
|
|
15
|
+
unlock(): void;
|
|
16
|
+
readonly val: T;
|
|
17
|
+
readonly toJSON: () => string;
|
|
18
|
+
readonly __version__: number;
|
|
19
|
+
readonly __id__: string;
|
|
20
|
+
readonly __isAtom___: boolean;
|
|
21
|
+
select: <S>(selector: (state: T) => S) => () => S;
|
|
22
|
+
};
|
|
23
|
+
declare function atom<T>(initial: T, deepFreeze?: boolean): AtomType<T>;
|
|
24
|
+
declare function iAtom<T>(initial: T): AtomType<T>;
|
|
25
|
+
declare function df(obj: any): void;
|
|
26
|
+
declare function asyncAtom<T, E = Error>(fn: (abortController: AbortController) => Promise<T>, context: any): {
|
|
27
|
+
getData(): T | null;
|
|
28
|
+
getError(): E | null;
|
|
29
|
+
getStatus(): "init" | "loading" | "success" | "error";
|
|
30
|
+
isLoading(): boolean;
|
|
31
|
+
set(fn: (...args: any[]) => Promise<T>): void;
|
|
32
|
+
cancel: () => void;
|
|
33
|
+
run: (...args: any[]) => Promise<void>;
|
|
34
|
+
subscribe: (fn: () => void) => (() => void);
|
|
35
|
+
};
|
|
36
|
+
declare function action(fn: (...args: any[]) => void, options?: {
|
|
37
|
+
debounce?: number;
|
|
38
|
+
throttle?: number;
|
|
39
|
+
}): {
|
|
40
|
+
(...args: any[]): any;
|
|
41
|
+
subscribe(fn: (result?: any) => void): () => boolean;
|
|
42
|
+
set(fn: (...args: any[]) => void): void;
|
|
43
|
+
intercept(interceptor: (next: (...args: any[]) => any, ...args: any[]) => any): void;
|
|
44
|
+
cancel(): void;
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
declare const bubble: <T>(storeFn: (setter: <F extends (...args: any[]) => any>(updatorFn: F) => F) => () => T) => (() => T);
|
|
48
|
+
|
|
49
|
+
declare const location: {
|
|
50
|
+
readonly path: string;
|
|
51
|
+
pathAtom: AtomType<string>;
|
|
52
|
+
navigateTo(path: string, replace?: boolean): void;
|
|
53
|
+
matchPath(path: string): boolean;
|
|
54
|
+
};
|
|
55
|
+
declare const isPathMatching: (path: string) => boolean;
|
|
56
|
+
|
|
57
|
+
declare class Context<T> {
|
|
58
|
+
id: string;
|
|
59
|
+
context: T;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
declare function withHost(host: HTMLElement, renderFn: () => any): any;
|
|
63
|
+
declare function getCurrentHost(throwError?: boolean): HTMLElement | null;
|
|
64
|
+
declare function subscribe(store: any, throwError?: boolean, subscribeFn?: (fn: () => void) => () => void): void;
|
|
65
|
+
declare function useStore(store: any): any;
|
|
66
|
+
declare function useMutable<T extends Record<string, any>>(initialState: T): [T, (updatorFn: (state: T) => void) => void];
|
|
67
|
+
type CleanupFn = () => void;
|
|
68
|
+
declare function useSubscribe(effectFn: () => any, deps: SetterReturnType<any>[]): any;
|
|
69
|
+
declare function useOnMount(fn: () => CleanupFn | void): void;
|
|
70
|
+
declare function useContext<T>(context: Context<T>): T;
|
|
71
|
+
declare const useOnUnmount: (fn: () => void) => void;
|
|
72
|
+
type SetterReturnType<T extends Function> = T & {
|
|
73
|
+
subscribe: (listener: () => void) => Function;
|
|
74
|
+
[key: string]: any;
|
|
75
|
+
};
|
|
76
|
+
declare const _: (fn: (...args: any[]) => any) => Function;
|
|
77
|
+
declare const setter: (fn: (...args: any[]) => any) => Function;
|
|
78
|
+
declare const useState: <T extends Record<string, any>>(initialState: T) => [T, (updatorFn?: () => any) => any];
|
|
79
|
+
declare const useUpdate: () => (updatorFn?: () => any) => any;
|
|
80
|
+
declare const setBubbleInProgress: (value: boolean) => void;
|
|
81
|
+
declare const setBubblesSetter: (setter: ((fn: () => void) => void) | null) => void;
|
|
82
|
+
declare const getbubbleInProgress: () => boolean;
|
|
83
|
+
declare const getbubblesSetter: () => any;
|
|
84
|
+
declare const safetyCheck: () => void;
|
|
85
|
+
|
|
86
|
+
declare function getter<T extends () => any>(computeFn: T): T & {
|
|
87
|
+
val: ReturnType<T>;
|
|
88
|
+
version: number;
|
|
89
|
+
areVersionsChanged: (callerVersion?: number) => boolean;
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
type ActionFunction<T extends (...args: any[]) => any> = T & {
|
|
93
|
+
subscribe: (fn: (result?: ReturnType<T>) => void) => () => void;
|
|
94
|
+
set: (fn: T) => void;
|
|
95
|
+
intercept: (interceptor: (next: T, ...args: Parameters<T>) => any) => void;
|
|
96
|
+
cancel: () => void;
|
|
97
|
+
};
|
|
98
|
+
type TMolecule<T> = {
|
|
99
|
+
[K in keyof T]: T[K] extends (...args: any[]) => any ? ActionFunction<T[K]> : T[K];
|
|
100
|
+
} & {
|
|
101
|
+
__isMolecule___: true;
|
|
102
|
+
};
|
|
103
|
+
declare function _molecule<T extends Record<string, any>>(molecule: new () => T): () => TMolecule<T>;
|
|
104
|
+
declare const molecule: typeof _molecule;
|
|
105
|
+
|
|
106
|
+
declare const useRefEffect: (effect: () => void, deps: () => any[]) => void;
|
|
107
|
+
|
|
108
|
+
declare function getProps(obj: Record<string, any>): unknown[];
|
|
109
|
+
type TMutableStore<T> = () => T & {
|
|
110
|
+
subscribe: (fn: () => void) => () => void;
|
|
111
|
+
__isUnit___: true;
|
|
112
|
+
__version__: number;
|
|
113
|
+
isLoading: (fn: MethodOfT<T>) => boolean;
|
|
114
|
+
};
|
|
115
|
+
type MethodOfT<T> = T[keyof T] extends (...args: any[]) => any ? T[keyof T] : never;
|
|
116
|
+
declare function createMutableStore<T extends Record<string, any>>(mutableState: T): TMutableStore<T>;
|
|
117
|
+
declare const unit: typeof createMutableStore;
|
|
118
|
+
|
|
119
|
+
type PropsType<T> = () => T;
|
|
120
|
+
type Setter = (fn: (...args: any[]) => any) => any;
|
|
121
|
+
declare const getTemplateIsRunning: () => boolean;
|
|
122
|
+
declare class RenderScheduler {
|
|
123
|
+
private pendingComponents;
|
|
124
|
+
isScheduled: boolean;
|
|
125
|
+
schedule(component: XView): void;
|
|
126
|
+
}
|
|
127
|
+
declare const globalScheduler: RenderScheduler;
|
|
128
|
+
declare class XView extends HTMLElement {
|
|
129
|
+
private _props;
|
|
130
|
+
private _propsFn;
|
|
131
|
+
private _view;
|
|
132
|
+
private _componentFn;
|
|
133
|
+
private _hasMounted;
|
|
134
|
+
private _renderScheduled;
|
|
135
|
+
_xviewRender: () => void;
|
|
136
|
+
componentId: number;
|
|
137
|
+
cleanups: Map<string, Function>;
|
|
138
|
+
scopes: Map<new () => any, () => any>;
|
|
139
|
+
addScope(scopeClass: new () => any, scope: any): void;
|
|
140
|
+
lastVersion: number;
|
|
141
|
+
onEachUpdateCallbacks: (() => void)[];
|
|
142
|
+
onEachUpdate(callback: () => void): void;
|
|
143
|
+
constructor();
|
|
144
|
+
setter<T extends (...args: any[]) => any>(fn: T): T;
|
|
145
|
+
set props(val: Record<string, any>);
|
|
146
|
+
get props(): Record<string, any>;
|
|
147
|
+
oldView: any;
|
|
148
|
+
private _isViewLoading;
|
|
149
|
+
set view(val: any);
|
|
150
|
+
get view(): any;
|
|
151
|
+
callOnEachUpdate(): void;
|
|
152
|
+
disconnectedCallback(): void;
|
|
153
|
+
addToCleanUps(key: string, cleanup: Function): void;
|
|
154
|
+
_render(): void;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/**
|
|
158
|
+
* @license
|
|
159
|
+
* Copyright 2017 Google LLC
|
|
160
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
161
|
+
*/
|
|
162
|
+
|
|
163
|
+
interface DirectiveClass {
|
|
164
|
+
new (part: PartInfo): Directive;
|
|
165
|
+
}
|
|
166
|
+
/**
|
|
167
|
+
* This utility type extracts the signature of a directive class's render()
|
|
168
|
+
* method so we can use it for the type of the generated directive function.
|
|
169
|
+
*/
|
|
170
|
+
type DirectiveParameters<C extends Directive> = Parameters<C['render']>;
|
|
171
|
+
/**
|
|
172
|
+
* A generated directive function doesn't evaluate the directive, but just
|
|
173
|
+
* returns a DirectiveResult object that captures the arguments.
|
|
174
|
+
*/
|
|
175
|
+
interface DirectiveResult<C extends DirectiveClass = DirectiveClass> {
|
|
176
|
+
}
|
|
177
|
+
declare const PartType: {
|
|
178
|
+
readonly ATTRIBUTE: 1;
|
|
179
|
+
readonly CHILD: 2;
|
|
180
|
+
readonly PROPERTY: 3;
|
|
181
|
+
readonly BOOLEAN_ATTRIBUTE: 4;
|
|
182
|
+
readonly EVENT: 5;
|
|
183
|
+
readonly ELEMENT: 6;
|
|
184
|
+
};
|
|
185
|
+
type PartType = (typeof PartType)[keyof typeof PartType];
|
|
186
|
+
interface ChildPartInfo {
|
|
187
|
+
readonly type: typeof PartType.CHILD;
|
|
188
|
+
}
|
|
189
|
+
interface AttributePartInfo {
|
|
190
|
+
readonly type: typeof PartType.ATTRIBUTE | typeof PartType.PROPERTY | typeof PartType.BOOLEAN_ATTRIBUTE | typeof PartType.EVENT;
|
|
191
|
+
readonly strings?: ReadonlyArray<string>;
|
|
192
|
+
readonly name: string;
|
|
193
|
+
readonly tagName: string;
|
|
194
|
+
}
|
|
195
|
+
interface ElementPartInfo {
|
|
196
|
+
readonly type: typeof PartType.ELEMENT;
|
|
197
|
+
}
|
|
198
|
+
/**
|
|
199
|
+
* Information about the part a directive is bound to.
|
|
200
|
+
*
|
|
201
|
+
* This is useful for checking that a directive is attached to a valid part,
|
|
202
|
+
* such as with directive that can only be used on attribute bindings.
|
|
203
|
+
*/
|
|
204
|
+
type PartInfo = ChildPartInfo | AttributePartInfo | ElementPartInfo;
|
|
205
|
+
/**
|
|
206
|
+
* Base class for creating custom directives. Users should extend this class,
|
|
207
|
+
* implement `render` and/or `update`, and then pass their subclass to
|
|
208
|
+
* `directive`.
|
|
209
|
+
*/
|
|
210
|
+
declare abstract class Directive implements Disconnectable {
|
|
211
|
+
constructor(_partInfo: PartInfo);
|
|
212
|
+
get _$isConnected(): boolean;
|
|
213
|
+
abstract render(...props: Array<unknown>): unknown;
|
|
214
|
+
update(_part: Part, props: Array<unknown>): unknown;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/**
|
|
218
|
+
* @license
|
|
219
|
+
* Copyright 2017 Google LLC
|
|
220
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
221
|
+
*/
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* Used to sanitize any value before it is written into the DOM. This can be
|
|
225
|
+
* used to implement a security policy of allowed and disallowed values in
|
|
226
|
+
* order to prevent XSS attacks.
|
|
227
|
+
*
|
|
228
|
+
* One way of using this callback would be to check attributes and properties
|
|
229
|
+
* against a list of high risk fields, and require that values written to such
|
|
230
|
+
* fields be instances of a class which is safe by construction. Closure's Safe
|
|
231
|
+
* HTML Types is one implementation of this technique (
|
|
232
|
+
* https://github.com/google/safe-html-types/blob/master/doc/safehtml-types.md).
|
|
233
|
+
* The TrustedTypes polyfill in API-only mode could also be used as a basis
|
|
234
|
+
* for this technique (https://github.com/WICG/trusted-types).
|
|
235
|
+
*
|
|
236
|
+
* @param node The HTML node (usually either a #text node or an Element) that
|
|
237
|
+
* is being written to. Note that this is just an exemplar node, the write
|
|
238
|
+
* may take place against another instance of the same class of node.
|
|
239
|
+
* @param name The name of an attribute or property (for example, 'href').
|
|
240
|
+
* @param type Indicates whether the write that's about to be performed will
|
|
241
|
+
* be to a property or a node.
|
|
242
|
+
* @return A function that will sanitize this class of writes.
|
|
243
|
+
*/
|
|
244
|
+
type SanitizerFactory = (node: Node, name: string, type: 'property' | 'attribute') => ValueSanitizer;
|
|
245
|
+
/**
|
|
246
|
+
* A function which can sanitize values that will be written to a specific kind
|
|
247
|
+
* of DOM sink.
|
|
248
|
+
*
|
|
249
|
+
* See SanitizerFactory.
|
|
250
|
+
*
|
|
251
|
+
* @param value The value to sanitize. Will be the actual value passed into
|
|
252
|
+
* the lit-html template literal, so this could be of any type.
|
|
253
|
+
* @return The value to write to the DOM. Usually the same as the input value,
|
|
254
|
+
* unless sanitization is needed.
|
|
255
|
+
*/
|
|
256
|
+
type ValueSanitizer = (value: unknown) => unknown;
|
|
257
|
+
/** TemplateResult types */
|
|
258
|
+
declare const HTML_RESULT = 1;
|
|
259
|
+
declare const SVG_RESULT = 2;
|
|
260
|
+
declare const MATHML_RESULT = 3;
|
|
261
|
+
type ResultType = typeof HTML_RESULT | typeof SVG_RESULT | typeof MATHML_RESULT;
|
|
262
|
+
declare const ATTRIBUTE_PART = 1;
|
|
263
|
+
declare const CHILD_PART = 2;
|
|
264
|
+
declare const PROPERTY_PART = 3;
|
|
265
|
+
declare const BOOLEAN_ATTRIBUTE_PART = 4;
|
|
266
|
+
declare const EVENT_PART = 5;
|
|
267
|
+
declare const ELEMENT_PART = 6;
|
|
268
|
+
declare const COMMENT_PART = 7;
|
|
269
|
+
/**
|
|
270
|
+
* The return type of the template tag functions, {@linkcode html} and
|
|
271
|
+
* {@linkcode svg} when it hasn't been compiled by @lit-labs/compiler.
|
|
272
|
+
*
|
|
273
|
+
* A `TemplateResult` object holds all the information about a template
|
|
274
|
+
* expression required to render it: the template strings, expression values,
|
|
275
|
+
* and type of template (html or svg).
|
|
276
|
+
*
|
|
277
|
+
* `TemplateResult` objects do not create any DOM on their own. To create or
|
|
278
|
+
* update DOM you need to render the `TemplateResult`. See
|
|
279
|
+
* [Rendering](https://lit.dev/docs/components/rendering) for more information.
|
|
280
|
+
*
|
|
281
|
+
*/
|
|
282
|
+
type UncompiledTemplateResult<T extends ResultType = ResultType> = {
|
|
283
|
+
['_$litType$']: T;
|
|
284
|
+
strings: TemplateStringsArray;
|
|
285
|
+
values: unknown[];
|
|
286
|
+
};
|
|
287
|
+
/**
|
|
288
|
+
* The return type of the template tag functions, {@linkcode html} and
|
|
289
|
+
* {@linkcode svg}.
|
|
290
|
+
*
|
|
291
|
+
* A `TemplateResult` object holds all the information about a template
|
|
292
|
+
* expression required to render it: the template strings, expression values,
|
|
293
|
+
* and type of template (html or svg).
|
|
294
|
+
*
|
|
295
|
+
* `TemplateResult` objects do not create any DOM on their own. To create or
|
|
296
|
+
* update DOM you need to render the `TemplateResult`. See
|
|
297
|
+
* [Rendering](https://lit.dev/docs/components/rendering) for more information.
|
|
298
|
+
*
|
|
299
|
+
* In Lit 4, this type will be an alias of
|
|
300
|
+
* MaybeCompiledTemplateResult, so that code will get type errors if it assumes
|
|
301
|
+
* that Lit templates are not compiled. When deliberately working with only
|
|
302
|
+
* one, use either {@linkcode CompiledTemplateResult} or
|
|
303
|
+
* {@linkcode UncompiledTemplateResult} explicitly.
|
|
304
|
+
*/
|
|
305
|
+
type TemplateResult<T extends ResultType = ResultType> = UncompiledTemplateResult<T>;
|
|
306
|
+
/**
|
|
307
|
+
* Interprets a template literal as an HTML template that can efficiently
|
|
308
|
+
* render to and update a container.
|
|
309
|
+
*
|
|
310
|
+
* ```ts
|
|
311
|
+
* const header = (title: string) => html`<h1>${title}</h1>`;
|
|
312
|
+
* ```
|
|
313
|
+
*
|
|
314
|
+
* The `html` tag returns a description of the DOM to render as a value. It is
|
|
315
|
+
* lazy, meaning no work is done until the template is rendered. When rendering,
|
|
316
|
+
* if a template comes from the same expression as a previously rendered result,
|
|
317
|
+
* it's efficiently updated instead of replaced.
|
|
318
|
+
*/
|
|
319
|
+
declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult<1>;
|
|
320
|
+
/**
|
|
321
|
+
* A sentinel value that signals that a value was handled by a directive and
|
|
322
|
+
* should not be written to the DOM.
|
|
323
|
+
*/
|
|
324
|
+
declare const noChange: unique symbol;
|
|
325
|
+
/**
|
|
326
|
+
* A sentinel value that signals a ChildPart to fully clear its content.
|
|
327
|
+
*
|
|
328
|
+
* ```ts
|
|
329
|
+
* const button = html`${
|
|
330
|
+
* user.isAdmin
|
|
331
|
+
* ? html`<button>DELETE</button>`
|
|
332
|
+
* : nothing
|
|
333
|
+
* }`;
|
|
334
|
+
* ```
|
|
335
|
+
*
|
|
336
|
+
* Prefer using `nothing` over other falsy values as it provides a consistent
|
|
337
|
+
* behavior between various expression binding contexts.
|
|
338
|
+
*
|
|
339
|
+
* In child expressions, `undefined`, `null`, `''`, and `nothing` all behave the
|
|
340
|
+
* same and render no nodes. In attribute expressions, `nothing` _removes_ the
|
|
341
|
+
* attribute, while `undefined` and `null` will render an empty string. In
|
|
342
|
+
* property expressions `nothing` becomes `undefined`.
|
|
343
|
+
*/
|
|
344
|
+
declare const nothing: unique symbol;
|
|
345
|
+
/**
|
|
346
|
+
* Object specifying options for controlling lit-html rendering. Note that
|
|
347
|
+
* while `render` may be called multiple times on the same `container` (and
|
|
348
|
+
* `renderBefore` reference node) to efficiently update the rendered content,
|
|
349
|
+
* only the options passed in during the first render are respected during
|
|
350
|
+
* the lifetime of renders to that unique `container` + `renderBefore`
|
|
351
|
+
* combination.
|
|
352
|
+
*/
|
|
353
|
+
interface RenderOptions {
|
|
354
|
+
/**
|
|
355
|
+
* An object to use as the `this` value for event listeners. It's often
|
|
356
|
+
* useful to set this to the host component rendering a template.
|
|
357
|
+
*/
|
|
358
|
+
host?: object;
|
|
359
|
+
/**
|
|
360
|
+
* A DOM node before which to render content in the container.
|
|
361
|
+
*/
|
|
362
|
+
renderBefore?: ChildNode | null;
|
|
363
|
+
/**
|
|
364
|
+
* Node used for cloning the template (`importNode` will be called on this
|
|
365
|
+
* node). This controls the `ownerDocument` of the rendered DOM, along with
|
|
366
|
+
* any inherited context. Defaults to the global `document`.
|
|
367
|
+
*/
|
|
368
|
+
creationScope?: {
|
|
369
|
+
importNode(node: Node, deep?: boolean): Node;
|
|
370
|
+
};
|
|
371
|
+
/**
|
|
372
|
+
* The initial connected state for the top-level part being rendered. If no
|
|
373
|
+
* `isConnected` option is set, `AsyncDirective`s will be connected by
|
|
374
|
+
* default. Set to `false` if the initial render occurs in a disconnected tree
|
|
375
|
+
* and `AsyncDirective`s should see `isConnected === false` for their initial
|
|
376
|
+
* render. The `part.setConnected()` method must be used subsequent to initial
|
|
377
|
+
* render to change the connected state of the part.
|
|
378
|
+
*/
|
|
379
|
+
isConnected?: boolean;
|
|
380
|
+
}
|
|
381
|
+
interface DirectiveParent {
|
|
382
|
+
_$parent?: DirectiveParent;
|
|
383
|
+
_$isConnected: boolean;
|
|
384
|
+
__directive?: Directive;
|
|
385
|
+
__directives?: Array<Directive | undefined>;
|
|
386
|
+
}
|
|
387
|
+
declare class Template {
|
|
388
|
+
parts: Array<TemplatePart>;
|
|
389
|
+
constructor({ strings, ['_$litType$']: type }: UncompiledTemplateResult, options?: RenderOptions);
|
|
390
|
+
/** @nocollapse */
|
|
391
|
+
static createElement(html: TrustedHTML, _options?: RenderOptions): HTMLTemplateElement;
|
|
392
|
+
}
|
|
393
|
+
interface Disconnectable {
|
|
394
|
+
_$parent?: Disconnectable;
|
|
395
|
+
_$disconnectableChildren?: Set<Disconnectable>;
|
|
396
|
+
_$isConnected: boolean;
|
|
397
|
+
}
|
|
398
|
+
/**
|
|
399
|
+
* An updateable instance of a Template. Holds references to the Parts used to
|
|
400
|
+
* update the template instance.
|
|
401
|
+
*/
|
|
402
|
+
declare class TemplateInstance implements Disconnectable {
|
|
403
|
+
_$template: Template;
|
|
404
|
+
_$parts: Array<Part | undefined>;
|
|
405
|
+
constructor(template: Template, parent: ChildPart);
|
|
406
|
+
get parentNode(): Node;
|
|
407
|
+
get _$isConnected(): boolean;
|
|
408
|
+
_clone(options: RenderOptions | undefined): Node;
|
|
409
|
+
_update(values: Array<unknown>): void;
|
|
410
|
+
}
|
|
411
|
+
type AttributeTemplatePart = {
|
|
412
|
+
readonly type: typeof ATTRIBUTE_PART;
|
|
413
|
+
readonly index: number;
|
|
414
|
+
readonly name: string;
|
|
415
|
+
readonly ctor: typeof AttributePart;
|
|
416
|
+
readonly strings: ReadonlyArray<string>;
|
|
417
|
+
};
|
|
418
|
+
type ChildTemplatePart = {
|
|
419
|
+
readonly type: typeof CHILD_PART;
|
|
420
|
+
readonly index: number;
|
|
421
|
+
};
|
|
422
|
+
type ElementTemplatePart = {
|
|
423
|
+
readonly type: typeof ELEMENT_PART;
|
|
424
|
+
readonly index: number;
|
|
425
|
+
};
|
|
426
|
+
type CommentTemplatePart = {
|
|
427
|
+
readonly type: typeof COMMENT_PART;
|
|
428
|
+
readonly index: number;
|
|
429
|
+
};
|
|
430
|
+
/**
|
|
431
|
+
* A TemplatePart represents a dynamic part in a template, before the template
|
|
432
|
+
* is instantiated. When a template is instantiated Parts are created from
|
|
433
|
+
* TemplateParts.
|
|
434
|
+
*/
|
|
435
|
+
type TemplatePart = ChildTemplatePart | AttributeTemplatePart | ElementTemplatePart | CommentTemplatePart;
|
|
436
|
+
type Part = ChildPart | AttributePart | PropertyPart | BooleanAttributePart | ElementPart | EventPart;
|
|
437
|
+
|
|
438
|
+
declare class ChildPart implements Disconnectable {
|
|
439
|
+
readonly type = 2;
|
|
440
|
+
readonly options: RenderOptions | undefined;
|
|
441
|
+
_$committedValue: unknown;
|
|
442
|
+
private _textSanitizer;
|
|
443
|
+
get _$isConnected(): boolean;
|
|
444
|
+
constructor(startNode: ChildNode, endNode: ChildNode | null, parent: TemplateInstance | ChildPart | undefined, options: RenderOptions | undefined);
|
|
445
|
+
/**
|
|
446
|
+
* The parent node into which the part renders its content.
|
|
447
|
+
*
|
|
448
|
+
* A ChildPart's content consists of a range of adjacent child nodes of
|
|
449
|
+
* `.parentNode`, possibly bordered by 'marker nodes' (`.startNode` and
|
|
450
|
+
* `.endNode`).
|
|
451
|
+
*
|
|
452
|
+
* - If both `.startNode` and `.endNode` are non-null, then the part's content
|
|
453
|
+
* consists of all siblings between `.startNode` and `.endNode`, exclusively.
|
|
454
|
+
*
|
|
455
|
+
* - If `.startNode` is non-null but `.endNode` is null, then the part's
|
|
456
|
+
* content consists of all siblings following `.startNode`, up to and
|
|
457
|
+
* including the last child of `.parentNode`. If `.endNode` is non-null, then
|
|
458
|
+
* `.startNode` will always be non-null.
|
|
459
|
+
*
|
|
460
|
+
* - If both `.endNode` and `.startNode` are null, then the part's content
|
|
461
|
+
* consists of all child nodes of `.parentNode`.
|
|
462
|
+
*/
|
|
463
|
+
get parentNode(): Node;
|
|
464
|
+
/**
|
|
465
|
+
* The part's leading marker node, if any. See `.parentNode` for more
|
|
466
|
+
* information.
|
|
467
|
+
*/
|
|
468
|
+
get startNode(): Node | null;
|
|
469
|
+
/**
|
|
470
|
+
* The part's trailing marker node, if any. See `.parentNode` for more
|
|
471
|
+
* information.
|
|
472
|
+
*/
|
|
473
|
+
get endNode(): Node | null;
|
|
474
|
+
_$setValue(value: unknown, directiveParent?: DirectiveParent): void;
|
|
475
|
+
private _insert;
|
|
476
|
+
private _commitNode;
|
|
477
|
+
private _commitText;
|
|
478
|
+
private _commitTemplateResult;
|
|
479
|
+
private _commitIterable;
|
|
480
|
+
}
|
|
481
|
+
/**
|
|
482
|
+
* A top-level `ChildPart` returned from `render` that manages the connected
|
|
483
|
+
* state of `AsyncDirective`s created throughout the tree below it.
|
|
484
|
+
*/
|
|
485
|
+
interface RootPart extends ChildPart {
|
|
486
|
+
/**
|
|
487
|
+
* Sets the connection state for `AsyncDirective`s contained within this root
|
|
488
|
+
* ChildPart.
|
|
489
|
+
*
|
|
490
|
+
* lit-html does not automatically monitor the connectedness of DOM rendered;
|
|
491
|
+
* as such, it is the responsibility of the caller to `render` to ensure that
|
|
492
|
+
* `part.setConnected(false)` is called before the part object is potentially
|
|
493
|
+
* discarded, to ensure that `AsyncDirective`s have a chance to dispose of
|
|
494
|
+
* any resources being held. If a `RootPart` that was previously
|
|
495
|
+
* disconnected is subsequently re-connected (and its `AsyncDirective`s should
|
|
496
|
+
* re-connect), `setConnected(true)` should be called.
|
|
497
|
+
*
|
|
498
|
+
* @param isConnected Whether directives within this tree should be connected
|
|
499
|
+
* or not
|
|
500
|
+
*/
|
|
501
|
+
setConnected(isConnected: boolean): void;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
declare class AttributePart implements Disconnectable {
|
|
505
|
+
readonly type: typeof ATTRIBUTE_PART | typeof PROPERTY_PART | typeof BOOLEAN_ATTRIBUTE_PART | typeof EVENT_PART;
|
|
506
|
+
readonly element: HTMLElement;
|
|
507
|
+
readonly name: string;
|
|
508
|
+
readonly options: RenderOptions | undefined;
|
|
509
|
+
/**
|
|
510
|
+
* If this attribute part represents an interpolation, this contains the
|
|
511
|
+
* static strings of the interpolation. For single-value, complete bindings,
|
|
512
|
+
* this is undefined.
|
|
513
|
+
*/
|
|
514
|
+
readonly strings?: ReadonlyArray<string>;
|
|
515
|
+
protected _sanitizer: ValueSanitizer | undefined;
|
|
516
|
+
get tagName(): string;
|
|
517
|
+
get _$isConnected(): boolean;
|
|
518
|
+
constructor(element: HTMLElement, name: string, strings: ReadonlyArray<string>, parent: Disconnectable, options: RenderOptions | undefined);
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
declare class PropertyPart extends AttributePart {
|
|
522
|
+
readonly type = 3;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
declare class BooleanAttributePart extends AttributePart {
|
|
526
|
+
readonly type = 4;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
declare class EventPart extends AttributePart {
|
|
530
|
+
readonly type = 5;
|
|
531
|
+
constructor(element: HTMLElement, name: string, strings: ReadonlyArray<string>, parent: Disconnectable, options: RenderOptions | undefined);
|
|
532
|
+
handleEvent(event: Event): void;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
declare class ElementPart implements Disconnectable {
|
|
536
|
+
element: Element;
|
|
537
|
+
readonly type = 6;
|
|
538
|
+
_$committedValue: undefined;
|
|
539
|
+
options: RenderOptions | undefined;
|
|
540
|
+
constructor(element: Element, parent: Disconnectable, options: RenderOptions | undefined);
|
|
541
|
+
get _$isConnected(): boolean;
|
|
542
|
+
_$setValue(value: unknown): void;
|
|
543
|
+
}
|
|
544
|
+
/**
|
|
545
|
+
* Renders a value, usually a lit-html TemplateResult, to the container.
|
|
546
|
+
*
|
|
547
|
+
* This example renders the text "Hello, Zoe!" inside a paragraph tag, appending
|
|
548
|
+
* it to the container `document.body`.
|
|
549
|
+
*
|
|
550
|
+
* ```js
|
|
551
|
+
* import {html, render} from 'lit';
|
|
552
|
+
*
|
|
553
|
+
* const name = "Zoe";
|
|
554
|
+
* render(html`<p>Hello, ${name}!</p>`, document.body);
|
|
555
|
+
* ```
|
|
556
|
+
*
|
|
557
|
+
* @param value Any [renderable
|
|
558
|
+
* value](https://lit.dev/docs/templates/expressions/#child-expressions),
|
|
559
|
+
* typically a {@linkcode TemplateResult} created by evaluating a template tag
|
|
560
|
+
* like {@linkcode html} or {@linkcode svg}.
|
|
561
|
+
* @param container A DOM container to render to. The first render will append
|
|
562
|
+
* the rendered value to the container, and subsequent renders will
|
|
563
|
+
* efficiently update the rendered value if the same result type was
|
|
564
|
+
* previously rendered there.
|
|
565
|
+
* @param options See {@linkcode RenderOptions} for options documentation.
|
|
566
|
+
* @see
|
|
567
|
+
* {@link https://lit.dev/docs/libraries/standalone-templates/#rendering-lit-html-templates| Rendering Lit HTML Templates}
|
|
568
|
+
*/
|
|
569
|
+
declare const render: {
|
|
570
|
+
(value: unknown, container: HTMLElement | DocumentFragment, options?: RenderOptions): RootPart;
|
|
571
|
+
setSanitizer: (newSanitizer: SanitizerFactory) => void;
|
|
572
|
+
createSanitizer: SanitizerFactory;
|
|
573
|
+
_testOnlyClearSanitizerFactoryDoNotCallOrElse: () => void;
|
|
574
|
+
};
|
|
575
|
+
|
|
576
|
+
type InnerFactory<T> = () => T;
|
|
577
|
+
type ViewType<T> = (factory: InnerFactory<T>) => () => TemplateResult;
|
|
578
|
+
type OuterFn<T> = (factory: InnerFactory<T>) => () => TemplateResult;
|
|
579
|
+
declare const view: <T extends Record<string, any> = {}>(viewFn: OuterFn<T>, props?: T) => TemplateResult<1>;
|
|
580
|
+
declare const renderView: <T extends Record<string, any> = {}>(viewFn: OuterFn<T>, element: HTMLElement) => RootPart;
|
|
581
|
+
|
|
582
|
+
/**
|
|
583
|
+
* @license
|
|
584
|
+
* Copyright 2017 Google LLC
|
|
585
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
586
|
+
*/
|
|
587
|
+
|
|
588
|
+
type KeyFn<T> = (item: T, index: number) => unknown;
|
|
589
|
+
type ItemTemplate<T> = (item: T, index: number) => unknown;
|
|
590
|
+
interface RepeatDirectiveFn {
|
|
591
|
+
<T>(items: Iterable<T>, keyFnOrTemplate: KeyFn<T> | ItemTemplate<T>, template?: ItemTemplate<T>): unknown;
|
|
592
|
+
<T>(items: Iterable<T>, template: ItemTemplate<T>): unknown;
|
|
593
|
+
<T>(items: Iterable<T>, keyFn: KeyFn<T> | ItemTemplate<T>, template: ItemTemplate<T>): unknown;
|
|
594
|
+
}
|
|
595
|
+
/**
|
|
596
|
+
* A directive that repeats a series of values (usually `TemplateResults`)
|
|
597
|
+
* generated from an iterable, and updates those items efficiently when the
|
|
598
|
+
* iterable changes based on user-provided `keys` associated with each item.
|
|
599
|
+
*
|
|
600
|
+
* Note that if a `keyFn` is provided, strict key-to-DOM mapping is maintained,
|
|
601
|
+
* meaning previous DOM for a given key is moved into the new position if
|
|
602
|
+
* needed, and DOM will never be reused with values for different keys (new DOM
|
|
603
|
+
* will always be created for new keys). This is generally the most efficient
|
|
604
|
+
* way to use `repeat` since it performs minimum unnecessary work for insertions
|
|
605
|
+
* and removals.
|
|
606
|
+
*
|
|
607
|
+
* The `keyFn` takes two parameters, the item and its index, and returns a unique key value.
|
|
608
|
+
*
|
|
609
|
+
* ```js
|
|
610
|
+
* html`
|
|
611
|
+
* <ol>
|
|
612
|
+
* ${repeat(this.items, (item) => item.id, (item, index) => {
|
|
613
|
+
* return html`<li>${index}: ${item.name}</li>`;
|
|
614
|
+
* })}
|
|
615
|
+
* </ol>
|
|
616
|
+
* `
|
|
617
|
+
* ```
|
|
618
|
+
*
|
|
619
|
+
* **Important**: If providing a `keyFn`, keys *must* be unique for all items in a
|
|
620
|
+
* given call to `repeat`. The behavior when two or more items have the same key
|
|
621
|
+
* is undefined.
|
|
622
|
+
*
|
|
623
|
+
* If no `keyFn` is provided, this directive will perform similar to mapping
|
|
624
|
+
* items to values, and DOM will be reused against potentially different items.
|
|
625
|
+
*/
|
|
626
|
+
declare const repeat: RepeatDirectiveFn;
|
|
627
|
+
|
|
628
|
+
declare class GuardDirective extends Directive {
|
|
629
|
+
private _previousValue;
|
|
630
|
+
render(_value: unknown, f: () => unknown): unknown;
|
|
631
|
+
update(_part: Part, [value, f]: DirectiveParameters<this>): unknown;
|
|
632
|
+
}
|
|
633
|
+
/**
|
|
634
|
+
* Prevents re-render of a template function until a single value or an array of
|
|
635
|
+
* values changes.
|
|
636
|
+
*
|
|
637
|
+
* Values are checked against previous values with strict equality (`===`), and
|
|
638
|
+
* so the check won't detect nested property changes inside objects or arrays.
|
|
639
|
+
* Arrays values have each item checked against the previous value at the same
|
|
640
|
+
* index with strict equality. Nested arrays are also checked only by strict
|
|
641
|
+
* equality.
|
|
642
|
+
*
|
|
643
|
+
* Example:
|
|
644
|
+
*
|
|
645
|
+
* ```js
|
|
646
|
+
* html`
|
|
647
|
+
* <div>
|
|
648
|
+
* ${guard([user.id, company.id], () => html`...`)}
|
|
649
|
+
* </div>
|
|
650
|
+
* `
|
|
651
|
+
* ```
|
|
652
|
+
*
|
|
653
|
+
* In this case, the template only rerenders if either `user.id` or `company.id`
|
|
654
|
+
* changes.
|
|
655
|
+
*
|
|
656
|
+
* guard() is useful with immutable data patterns, by preventing expensive work
|
|
657
|
+
* until data updates.
|
|
658
|
+
*
|
|
659
|
+
* Example:
|
|
660
|
+
*
|
|
661
|
+
* ```js
|
|
662
|
+
* html`
|
|
663
|
+
* <div>
|
|
664
|
+
* ${guard([immutableItems], () => immutableItems.map(i => html`${i}`))}
|
|
665
|
+
* </div>
|
|
666
|
+
* `
|
|
667
|
+
* ```
|
|
668
|
+
*
|
|
669
|
+
* In this case, items are mapped over only when the array reference changes.
|
|
670
|
+
*
|
|
671
|
+
* @param value the value to check before re-rendering
|
|
672
|
+
* @param f the template function
|
|
673
|
+
*/
|
|
674
|
+
declare const guard: (_value: unknown, f: () => unknown) => DirectiveResult<typeof GuardDirective>;
|
|
675
|
+
|
|
676
|
+
/**
|
|
677
|
+
* A key-value set of CSS properties and values.
|
|
678
|
+
*
|
|
679
|
+
* The key should be either a valid CSS property name string, like
|
|
680
|
+
* `'background-color'`, or a valid JavaScript camel case property name
|
|
681
|
+
* for CSSStyleDeclaration like `backgroundColor`.
|
|
682
|
+
*/
|
|
683
|
+
interface StyleInfo {
|
|
684
|
+
[name: string]: string | number | undefined | null;
|
|
685
|
+
}
|
|
686
|
+
declare class StyleMapDirective extends Directive {
|
|
687
|
+
private _previousStyleProperties?;
|
|
688
|
+
constructor(partInfo: PartInfo);
|
|
689
|
+
render(styleInfo: Readonly<StyleInfo>): string;
|
|
690
|
+
update(part: AttributePart, [styleInfo]: DirectiveParameters<this>): string | typeof noChange;
|
|
691
|
+
}
|
|
692
|
+
/**
|
|
693
|
+
* A directive that applies CSS properties to an element.
|
|
694
|
+
*
|
|
695
|
+
* `styleMap` can only be used in the `style` attribute and must be the only
|
|
696
|
+
* expression in the attribute. It takes the property names in the
|
|
697
|
+
* {@link StyleInfo styleInfo} object and adds the properties to the inline
|
|
698
|
+
* style of the element.
|
|
699
|
+
*
|
|
700
|
+
* Property names with dashes (`-`) are assumed to be valid CSS
|
|
701
|
+
* property names and set on the element's style object using `setProperty()`.
|
|
702
|
+
* Names without dashes are assumed to be camelCased JavaScript property names
|
|
703
|
+
* and set on the element's style object using property assignment, allowing the
|
|
704
|
+
* style object to translate JavaScript-style names to CSS property names.
|
|
705
|
+
*
|
|
706
|
+
* For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':
|
|
707
|
+
* '0'})` sets the `background-color`, `border-top` and `--size` properties.
|
|
708
|
+
*
|
|
709
|
+
* @param styleInfo
|
|
710
|
+
* @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}
|
|
711
|
+
*/
|
|
712
|
+
declare const styleMap: (styleInfo: Readonly<StyleInfo>) => DirectiveResult<typeof StyleMapDirective>;
|
|
713
|
+
|
|
714
|
+
/**
|
|
715
|
+
* A key-value set of class names to truthy values.
|
|
716
|
+
*/
|
|
717
|
+
interface ClassInfo {
|
|
718
|
+
readonly [name: string]: string | boolean | number;
|
|
719
|
+
}
|
|
720
|
+
declare class ClassMapDirective extends Directive {
|
|
721
|
+
/**
|
|
722
|
+
* Stores the ClassInfo object applied to a given AttributePart.
|
|
723
|
+
* Used to unset existing values when a new ClassInfo object is applied.
|
|
724
|
+
*/
|
|
725
|
+
private _previousClasses?;
|
|
726
|
+
private _staticClasses?;
|
|
727
|
+
constructor(partInfo: PartInfo);
|
|
728
|
+
render(classInfo: ClassInfo): string;
|
|
729
|
+
update(part: AttributePart, [classInfo]: DirectiveParameters<this>): string | typeof noChange;
|
|
730
|
+
}
|
|
731
|
+
/**
|
|
732
|
+
* A directive that applies dynamic CSS classes.
|
|
733
|
+
*
|
|
734
|
+
* This must be used in the `class` attribute and must be the only part used in
|
|
735
|
+
* the attribute. It takes each property in the `classInfo` argument and adds
|
|
736
|
+
* the property name to the element's `classList` if the property value is
|
|
737
|
+
* truthy; if the property value is falsy, the property name is removed from
|
|
738
|
+
* the element's `class`.
|
|
739
|
+
*
|
|
740
|
+
* For example `{foo: bar}` applies the class `foo` if the value of `bar` is
|
|
741
|
+
* truthy.
|
|
742
|
+
*
|
|
743
|
+
* @param classInfo
|
|
744
|
+
*/
|
|
745
|
+
declare const classMap: (classInfo: ClassInfo) => DirectiveResult<typeof ClassMapDirective>;
|
|
746
|
+
|
|
747
|
+
/**
|
|
748
|
+
* @license
|
|
749
|
+
* Copyright 2021 Google LLC
|
|
750
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
751
|
+
*/
|
|
752
|
+
type Falsy = null | undefined | false | 0 | -0 | 0n | '';
|
|
753
|
+
/**
|
|
754
|
+
* When `condition` is true, returns the result of calling `trueCase()`, else
|
|
755
|
+
* returns the result of calling `falseCase()` if `falseCase` is defined.
|
|
756
|
+
*
|
|
757
|
+
* This is a convenience wrapper around a ternary expression that makes it a
|
|
758
|
+
* little nicer to write an inline conditional without an else.
|
|
759
|
+
*
|
|
760
|
+
* @example
|
|
761
|
+
*
|
|
762
|
+
* ```ts
|
|
763
|
+
* render() {
|
|
764
|
+
* return html`
|
|
765
|
+
* ${when(this.user, () => html`User: ${this.user.username}`, () => html`Sign In...`)}
|
|
766
|
+
* `;
|
|
767
|
+
* }
|
|
768
|
+
* ```
|
|
769
|
+
*/
|
|
770
|
+
declare function when<C extends Falsy, T, F = undefined>(condition: C, trueCase: (c: C) => T, falseCase?: (c: C) => F): F;
|
|
771
|
+
declare function when<C, T, F>(condition: C extends Falsy ? never : C, trueCase: (c: C) => T, falseCase?: (c: C) => F): T;
|
|
772
|
+
declare function when<C, T, F = undefined>(condition: C, trueCase: (c: Exclude<C, Falsy>) => T, falseCase?: (c: Extract<C, Falsy>) => F): C extends Falsy ? F : T;
|
|
773
|
+
|
|
774
|
+
/**
|
|
775
|
+
* @license
|
|
776
|
+
* Copyright 2018 Google LLC
|
|
777
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
778
|
+
*/
|
|
779
|
+
|
|
780
|
+
/**
|
|
781
|
+
* For AttributeParts, sets the attribute if the value is defined and removes
|
|
782
|
+
* the attribute if the value is undefined.
|
|
783
|
+
*
|
|
784
|
+
* For other part types, this directive is a no-op.
|
|
785
|
+
*/
|
|
786
|
+
declare const ifDefined: <T>(value: T) => typeof nothing | NonNullable<T>;
|
|
787
|
+
|
|
788
|
+
declare class LiveDirective extends Directive {
|
|
789
|
+
constructor(partInfo: PartInfo);
|
|
790
|
+
render(value: unknown): unknown;
|
|
791
|
+
update(part: AttributePart, [value]: DirectiveParameters<this>): unknown;
|
|
792
|
+
}
|
|
793
|
+
/**
|
|
794
|
+
* Checks binding values against live DOM values, instead of previously bound
|
|
795
|
+
* values, when determining whether to update the value.
|
|
796
|
+
*
|
|
797
|
+
* This is useful for cases where the DOM value may change from outside of
|
|
798
|
+
* lit-html, such as with a binding to an `<input>` element's `value` property,
|
|
799
|
+
* a content editable elements text, or to a custom element that changes it's
|
|
800
|
+
* own properties or attributes.
|
|
801
|
+
*
|
|
802
|
+
* In these cases if the DOM value changes, but the value set through lit-html
|
|
803
|
+
* bindings hasn't, lit-html won't know to update the DOM value and will leave
|
|
804
|
+
* it alone. If this is not what you want--if you want to overwrite the DOM
|
|
805
|
+
* value with the bound value no matter what--use the `live()` directive:
|
|
806
|
+
*
|
|
807
|
+
* ```js
|
|
808
|
+
* html`<input .value=${live(x)}>`
|
|
809
|
+
* ```
|
|
810
|
+
*
|
|
811
|
+
* `live()` performs a strict equality check against the live DOM value, and if
|
|
812
|
+
* the new value is equal to the live value, does nothing. This means that
|
|
813
|
+
* `live()` should not be used when the binding will cause a type conversion. If
|
|
814
|
+
* you use `live()` with an attribute binding, make sure that only strings are
|
|
815
|
+
* passed in, or the binding will update every render.
|
|
816
|
+
*/
|
|
817
|
+
declare const live: (value: unknown) => DirectiveResult<typeof LiveDirective>;
|
|
818
|
+
|
|
819
|
+
/**
|
|
820
|
+
* @license
|
|
821
|
+
* Copyright 2017 Google LLC
|
|
822
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
823
|
+
*/
|
|
824
|
+
/**
|
|
825
|
+
* Overview:
|
|
826
|
+
*
|
|
827
|
+
* This module is designed to add support for an async `setValue` API and
|
|
828
|
+
* `disconnected` callback to directives with the least impact on the core
|
|
829
|
+
* runtime or payload when that feature is not used.
|
|
830
|
+
*
|
|
831
|
+
* The strategy is to introduce a `AsyncDirective` subclass of
|
|
832
|
+
* `Directive` that climbs the "parent" tree in its constructor to note which
|
|
833
|
+
* branches of lit-html's "logical tree" of data structures contain such
|
|
834
|
+
* directives and thus need to be crawled when a subtree is being cleared (or
|
|
835
|
+
* manually disconnected) in order to run the `disconnected` callback.
|
|
836
|
+
*
|
|
837
|
+
* The "nodes" of the logical tree include Parts, TemplateInstances (for when a
|
|
838
|
+
* TemplateResult is committed to a value of a ChildPart), and Directives; these
|
|
839
|
+
* all implement a common interface called `DisconnectableChild`. Each has a
|
|
840
|
+
* `_$parent` reference which is set during construction in the core code, and a
|
|
841
|
+
* `_$disconnectableChildren` field which is initially undefined.
|
|
842
|
+
*
|
|
843
|
+
* The sparse tree created by means of the `AsyncDirective` constructor
|
|
844
|
+
* crawling up the `_$parent` tree and placing a `_$disconnectableChildren` Set
|
|
845
|
+
* on each parent that includes each child that contains a
|
|
846
|
+
* `AsyncDirective` directly or transitively via its children. In order to
|
|
847
|
+
* notify connection state changes and disconnect (or reconnect) a tree, the
|
|
848
|
+
* `_$notifyConnectionChanged` API is patched onto ChildParts as a directive
|
|
849
|
+
* climbs the parent tree, which is called by the core when clearing a part if
|
|
850
|
+
* it exists. When called, that method iterates over the sparse tree of
|
|
851
|
+
* Set<DisconnectableChildren> built up by AsyncDirectives, and calls
|
|
852
|
+
* `_$notifyDirectiveConnectionChanged` on any directives that are encountered
|
|
853
|
+
* in that tree, running the required callbacks.
|
|
854
|
+
*
|
|
855
|
+
* A given "logical tree" of lit-html data-structures might look like this:
|
|
856
|
+
*
|
|
857
|
+
* ChildPart(N1) _$dC=[D2,T3]
|
|
858
|
+
* ._directive
|
|
859
|
+
* AsyncDirective(D2)
|
|
860
|
+
* ._value // user value was TemplateResult
|
|
861
|
+
* TemplateInstance(T3) _$dC=[A4,A6,N10,N12]
|
|
862
|
+
* ._$parts[]
|
|
863
|
+
* AttributePart(A4) _$dC=[D5]
|
|
864
|
+
* ._directives[]
|
|
865
|
+
* AsyncDirective(D5)
|
|
866
|
+
* AttributePart(A6) _$dC=[D7,D8]
|
|
867
|
+
* ._directives[]
|
|
868
|
+
* AsyncDirective(D7)
|
|
869
|
+
* Directive(D8) _$dC=[D9]
|
|
870
|
+
* ._directive
|
|
871
|
+
* AsyncDirective(D9)
|
|
872
|
+
* ChildPart(N10) _$dC=[D11]
|
|
873
|
+
* ._directive
|
|
874
|
+
* AsyncDirective(D11)
|
|
875
|
+
* ._value
|
|
876
|
+
* string
|
|
877
|
+
* ChildPart(N12) _$dC=[D13,N14,N16]
|
|
878
|
+
* ._directive
|
|
879
|
+
* AsyncDirective(D13)
|
|
880
|
+
* ._value // user value was iterable
|
|
881
|
+
* Array<ChildPart>
|
|
882
|
+
* ChildPart(N14) _$dC=[D15]
|
|
883
|
+
* ._value
|
|
884
|
+
* string
|
|
885
|
+
* ChildPart(N16) _$dC=[D17,T18]
|
|
886
|
+
* ._directive
|
|
887
|
+
* AsyncDirective(D17)
|
|
888
|
+
* ._value // user value was TemplateResult
|
|
889
|
+
* TemplateInstance(T18) _$dC=[A19,A21,N25]
|
|
890
|
+
* ._$parts[]
|
|
891
|
+
* AttributePart(A19) _$dC=[D20]
|
|
892
|
+
* ._directives[]
|
|
893
|
+
* AsyncDirective(D20)
|
|
894
|
+
* AttributePart(A21) _$dC=[22,23]
|
|
895
|
+
* ._directives[]
|
|
896
|
+
* AsyncDirective(D22)
|
|
897
|
+
* Directive(D23) _$dC=[D24]
|
|
898
|
+
* ._directive
|
|
899
|
+
* AsyncDirective(D24)
|
|
900
|
+
* ChildPart(N25) _$dC=[D26]
|
|
901
|
+
* ._directive
|
|
902
|
+
* AsyncDirective(D26)
|
|
903
|
+
* ._value
|
|
904
|
+
* string
|
|
905
|
+
*
|
|
906
|
+
* Example 1: The directive in ChildPart(N12) updates and returns `nothing`. The
|
|
907
|
+
* ChildPart will _clear() itself, and so we need to disconnect the "value" of
|
|
908
|
+
* the ChildPart (but not its directive). In this case, when `_clear()` calls
|
|
909
|
+
* `_$notifyConnectionChanged()`, we don't iterate all of the
|
|
910
|
+
* _$disconnectableChildren, rather we do a value-specific disconnection: i.e.
|
|
911
|
+
* since the _value was an Array<ChildPart> (because an iterable had been
|
|
912
|
+
* committed), we iterate the array of ChildParts (N14, N16) and run
|
|
913
|
+
* `setConnected` on them (which does recurse down the full tree of
|
|
914
|
+
* `_$disconnectableChildren` below it, and also removes N14 and N16 from N12's
|
|
915
|
+
* `_$disconnectableChildren`). Once the values have been disconnected, we then
|
|
916
|
+
* check whether the ChildPart(N12)'s list of `_$disconnectableChildren` is empty
|
|
917
|
+
* (and would remove it from its parent TemplateInstance(T3) if so), but since
|
|
918
|
+
* it would still contain its directive D13, it stays in the disconnectable
|
|
919
|
+
* tree.
|
|
920
|
+
*
|
|
921
|
+
* Example 2: In the course of Example 1, `setConnected` will reach
|
|
922
|
+
* ChildPart(N16); in this case the entire part is being disconnected, so we
|
|
923
|
+
* simply iterate all of N16's `_$disconnectableChildren` (D17,T18) and
|
|
924
|
+
* recursively run `setConnected` on them. Note that we only remove children
|
|
925
|
+
* from `_$disconnectableChildren` for the top-level values being disconnected
|
|
926
|
+
* on a clear; doing this bookkeeping lower in the tree is wasteful since it's
|
|
927
|
+
* all being thrown away.
|
|
928
|
+
*
|
|
929
|
+
* Example 3: If the LitElement containing the entire tree above becomes
|
|
930
|
+
* disconnected, it will run `childPart.setConnected()` (which calls
|
|
931
|
+
* `childPart._$notifyConnectionChanged()` if it exists); in this case, we
|
|
932
|
+
* recursively run `setConnected()` over the entire tree, without removing any
|
|
933
|
+
* children from `_$disconnectableChildren`, since this tree is required to
|
|
934
|
+
* re-connect the tree, which does the same operation, simply passing
|
|
935
|
+
* `isConnected: true` down the tree, signaling which callback to run.
|
|
936
|
+
*/
|
|
937
|
+
|
|
938
|
+
/**
|
|
939
|
+
* An abstract `Directive` base class whose `disconnected` method will be
|
|
940
|
+
* called when the part containing the directive is cleared as a result of
|
|
941
|
+
* re-rendering, or when the user calls `part.setConnected(false)` on
|
|
942
|
+
* a part that was previously rendered containing the directive (as happens
|
|
943
|
+
* when e.g. a LitElement disconnects from the DOM).
|
|
944
|
+
*
|
|
945
|
+
* If `part.setConnected(true)` is subsequently called on a
|
|
946
|
+
* containing part, the directive's `reconnected` method will be called prior
|
|
947
|
+
* to its next `update`/`render` callbacks. When implementing `disconnected`,
|
|
948
|
+
* `reconnected` should also be implemented to be compatible with reconnection.
|
|
949
|
+
*
|
|
950
|
+
* Note that updates may occur while the directive is disconnected. As such,
|
|
951
|
+
* directives should generally check the `this.isConnected` flag during
|
|
952
|
+
* render/update to determine whether it is safe to subscribe to resources
|
|
953
|
+
* that may prevent garbage collection.
|
|
954
|
+
*/
|
|
955
|
+
declare abstract class AsyncDirective extends Directive {
|
|
956
|
+
/**
|
|
957
|
+
* The connection state for this Directive.
|
|
958
|
+
*/
|
|
959
|
+
isConnected: boolean;
|
|
960
|
+
/**
|
|
961
|
+
* Initialize the part with internal fields
|
|
962
|
+
* @param part
|
|
963
|
+
* @param parent
|
|
964
|
+
* @param attributeIndex
|
|
965
|
+
*/
|
|
966
|
+
_$initialize(part: Part, parent: Disconnectable, attributeIndex: number | undefined): void;
|
|
967
|
+
/**
|
|
968
|
+
* Sets the value of the directive's Part outside the normal `update`/`render`
|
|
969
|
+
* lifecycle of a directive.
|
|
970
|
+
*
|
|
971
|
+
* This method should not be called synchronously from a directive's `update`
|
|
972
|
+
* or `render`.
|
|
973
|
+
*
|
|
974
|
+
* @param directive The directive to update
|
|
975
|
+
* @param value The value to set
|
|
976
|
+
*/
|
|
977
|
+
setValue(value: unknown): void;
|
|
978
|
+
/**
|
|
979
|
+
* User callbacks for implementing logic to release any resources/subscriptions
|
|
980
|
+
* that may have been retained by this directive. Since directives may also be
|
|
981
|
+
* re-connected, `reconnected` should also be implemented to restore the
|
|
982
|
+
* working state of the directive prior to the next render.
|
|
983
|
+
*/
|
|
984
|
+
protected disconnected(): void;
|
|
985
|
+
protected reconnected(): void;
|
|
986
|
+
}
|
|
987
|
+
|
|
988
|
+
declare class UntilDirective extends AsyncDirective {
|
|
989
|
+
private __lastRenderedIndex;
|
|
990
|
+
private __values;
|
|
991
|
+
private __weakThis;
|
|
992
|
+
private __pauser;
|
|
993
|
+
render(...args: Array<unknown>): unknown;
|
|
994
|
+
update(_part: Part, args: Array<unknown>): unknown;
|
|
995
|
+
disconnected(): void;
|
|
996
|
+
reconnected(): void;
|
|
997
|
+
}
|
|
998
|
+
/**
|
|
999
|
+
* Renders one of a series of values, including Promises, to a Part.
|
|
1000
|
+
*
|
|
1001
|
+
* Values are rendered in priority order, with the first argument having the
|
|
1002
|
+
* highest priority and the last argument having the lowest priority. If a
|
|
1003
|
+
* value is a Promise, low-priority values will be rendered until it resolves.
|
|
1004
|
+
*
|
|
1005
|
+
* The priority of values can be used to create placeholder content for async
|
|
1006
|
+
* data. For example, a Promise with pending content can be the first,
|
|
1007
|
+
* highest-priority, argument, and a non_promise loading indicator template can
|
|
1008
|
+
* be used as the second, lower-priority, argument. The loading indicator will
|
|
1009
|
+
* render immediately, and the primary content will render when the Promise
|
|
1010
|
+
* resolves.
|
|
1011
|
+
*
|
|
1012
|
+
* Example:
|
|
1013
|
+
*
|
|
1014
|
+
* ```js
|
|
1015
|
+
* const content = fetch('./content.txt').then(r => r.text());
|
|
1016
|
+
* html`${until(content, html`<span>Loading...</span>`)}`
|
|
1017
|
+
* ```
|
|
1018
|
+
*/
|
|
1019
|
+
declare const until: (...values: unknown[]) => DirectiveResult<typeof UntilDirective>;
|
|
1020
|
+
|
|
1021
|
+
declare class Keyed extends Directive {
|
|
1022
|
+
key: unknown;
|
|
1023
|
+
render(k: unknown, v: unknown): unknown;
|
|
1024
|
+
update(part: ChildPart, [k, v]: DirectiveParameters<this>): unknown;
|
|
1025
|
+
}
|
|
1026
|
+
/**
|
|
1027
|
+
* Associates a renderable value with a unique key. When the key changes, the
|
|
1028
|
+
* previous DOM is removed and disposed before rendering the next value, even
|
|
1029
|
+
* if the value - such as a template - is the same.
|
|
1030
|
+
*
|
|
1031
|
+
* This is useful for forcing re-renders of stateful components, or working
|
|
1032
|
+
* with code that expects new data to generate new HTML elements, such as some
|
|
1033
|
+
* animation techniques.
|
|
1034
|
+
*/
|
|
1035
|
+
declare const keyed: (k: unknown, v: unknown) => DirectiveResult<typeof Keyed>;
|
|
1036
|
+
|
|
1037
|
+
declare class CacheDirective extends Directive {
|
|
1038
|
+
private _templateCache;
|
|
1039
|
+
private _value?;
|
|
1040
|
+
constructor(partInfo: PartInfo);
|
|
1041
|
+
render(v: unknown): unknown[];
|
|
1042
|
+
update(containerPart: ChildPart, [v]: DirectiveParameters<this>): unknown[];
|
|
1043
|
+
}
|
|
1044
|
+
/**
|
|
1045
|
+
* Enables fast switching between multiple templates by caching the DOM nodes
|
|
1046
|
+
* and TemplateInstances produced by the templates.
|
|
1047
|
+
*
|
|
1048
|
+
* Example:
|
|
1049
|
+
*
|
|
1050
|
+
* ```js
|
|
1051
|
+
* let checked = false;
|
|
1052
|
+
*
|
|
1053
|
+
* html`
|
|
1054
|
+
* ${cache(checked ? html`input is checked` : html`input is not checked`)}
|
|
1055
|
+
* `
|
|
1056
|
+
* ```
|
|
1057
|
+
*/
|
|
1058
|
+
declare const cache: (v: unknown) => DirectiveResult<typeof CacheDirective>;
|
|
1059
|
+
|
|
1060
|
+
type Mapper<T> = (v: T, index?: number) => unknown;
|
|
1061
|
+
declare class AsyncReplaceDirective extends AsyncDirective {
|
|
1062
|
+
private __value?;
|
|
1063
|
+
private __weakThis;
|
|
1064
|
+
private __pauser;
|
|
1065
|
+
render<T>(value: AsyncIterable<T>, _mapper?: Mapper<T>): symbol;
|
|
1066
|
+
update(_part: ChildPart, [value, mapper]: DirectiveParameters<this>): symbol;
|
|
1067
|
+
protected commitValue(value: unknown, _index: number): void;
|
|
1068
|
+
disconnected(): void;
|
|
1069
|
+
reconnected(): void;
|
|
1070
|
+
}
|
|
1071
|
+
/**
|
|
1072
|
+
* A directive that renders the items of an async iterable[1], replacing
|
|
1073
|
+
* previous values with new values, so that only one value is ever rendered
|
|
1074
|
+
* at a time. This directive may be used in any expression type.
|
|
1075
|
+
*
|
|
1076
|
+
* Async iterables are objects with a `[Symbol.asyncIterator]` method, which
|
|
1077
|
+
* returns an iterator who's `next()` method returns a Promise. When a new
|
|
1078
|
+
* value is available, the Promise resolves and the value is rendered to the
|
|
1079
|
+
* Part controlled by the directive. If another value other than this
|
|
1080
|
+
* directive has been set on the Part, the iterable will no longer be listened
|
|
1081
|
+
* to and new values won't be written to the Part.
|
|
1082
|
+
*
|
|
1083
|
+
* [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of
|
|
1084
|
+
*
|
|
1085
|
+
* @param value An async iterable
|
|
1086
|
+
* @param mapper An optional function that maps from (value, index) to another
|
|
1087
|
+
* value. Useful for generating templates for each item in the iterable.
|
|
1088
|
+
*/
|
|
1089
|
+
declare const asyncReplace: (value: AsyncIterable<unknown>, _mapper?: Mapper<unknown> | undefined) => DirectiveResult<typeof AsyncReplaceDirective>;
|
|
1090
|
+
|
|
1091
|
+
/**
|
|
1092
|
+
* @license
|
|
1093
|
+
* Copyright 2021 Google LLC
|
|
1094
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
1095
|
+
*/
|
|
1096
|
+
/**
|
|
1097
|
+
* Returns an iterable containing the values in `items` interleaved with the
|
|
1098
|
+
* `joiner` value.
|
|
1099
|
+
*
|
|
1100
|
+
* @example
|
|
1101
|
+
*
|
|
1102
|
+
* ```ts
|
|
1103
|
+
* render() {
|
|
1104
|
+
* return html`
|
|
1105
|
+
* ${join(items, html`<span class="separator">|</span>`)}
|
|
1106
|
+
* `;
|
|
1107
|
+
* }
|
|
1108
|
+
*/
|
|
1109
|
+
declare function join<I, J>(items: Iterable<I> | undefined, joiner: (index: number) => J): Iterable<I | J>;
|
|
1110
|
+
declare function join<I, J>(items: Iterable<I> | undefined, joiner: J): Iterable<I | J>;
|
|
1111
|
+
|
|
1112
|
+
/**
|
|
1113
|
+
* @license
|
|
1114
|
+
* Copyright 2021 Google LLC
|
|
1115
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
1116
|
+
*/
|
|
1117
|
+
/**
|
|
1118
|
+
* Returns an iterable of integers from `start` to `end` (exclusive)
|
|
1119
|
+
* incrementing by `step`.
|
|
1120
|
+
*
|
|
1121
|
+
* If `start` is omitted, the range starts at `0`. `step` defaults to `1`.
|
|
1122
|
+
*
|
|
1123
|
+
* @example
|
|
1124
|
+
*
|
|
1125
|
+
* ```ts
|
|
1126
|
+
* render() {
|
|
1127
|
+
* return html`
|
|
1128
|
+
* ${map(range(8), () => html`<div class="cell"></div>`)}
|
|
1129
|
+
* `;
|
|
1130
|
+
* }
|
|
1131
|
+
* ```
|
|
1132
|
+
*/
|
|
1133
|
+
declare function range(end: number): Iterable<number>;
|
|
1134
|
+
declare function range(start: number, end: number, step?: number): Iterable<number>;
|
|
1135
|
+
|
|
1136
|
+
declare class AsyncAppendDirective extends AsyncReplaceDirective {
|
|
1137
|
+
private __childPart;
|
|
1138
|
+
constructor(partInfo: PartInfo);
|
|
1139
|
+
update(part: ChildPart, params: DirectiveParameters<this>): symbol;
|
|
1140
|
+
protected commitValue(value: unknown, index: number): void;
|
|
1141
|
+
}
|
|
1142
|
+
/**
|
|
1143
|
+
* A directive that renders the items of an async iterable[1], appending new
|
|
1144
|
+
* values after previous values, similar to the built-in support for iterables.
|
|
1145
|
+
* This directive is usable only in child expressions.
|
|
1146
|
+
*
|
|
1147
|
+
* Async iterables are objects with a [Symbol.asyncIterator] method, which
|
|
1148
|
+
* returns an iterator who's `next()` method returns a Promise. When a new
|
|
1149
|
+
* value is available, the Promise resolves and the value is appended to the
|
|
1150
|
+
* Part controlled by the directive. If another value other than this
|
|
1151
|
+
* directive has been set on the Part, the iterable will no longer be listened
|
|
1152
|
+
* to and new values won't be written to the Part.
|
|
1153
|
+
*
|
|
1154
|
+
* [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of
|
|
1155
|
+
*
|
|
1156
|
+
* @param value An async iterable
|
|
1157
|
+
* @param mapper An optional function that maps from (value, index) to another
|
|
1158
|
+
* value. Useful for generating templates for each item in the iterable.
|
|
1159
|
+
*/
|
|
1160
|
+
declare const asyncAppend: (value: AsyncIterable<unknown>, _mapper?: ((v: unknown, index?: number) => unknown) | undefined) => DirectiveResult<typeof AsyncAppendDirective>;
|
|
1161
|
+
|
|
1162
|
+
type AsyncMethodKeys<T> = {
|
|
1163
|
+
[K in keyof T]: T[K] extends (...args: infer _A) => Promise<unknown> ? K : never;
|
|
1164
|
+
}[keyof T];
|
|
1165
|
+
type ForbidAsyncMethods<T> = AsyncMethodKeys<T> extends never ? {} : never;
|
|
1166
|
+
interface ScopeGetter<T> {
|
|
1167
|
+
(): T;
|
|
1168
|
+
reset: () => T;
|
|
1169
|
+
__isScope___: boolean;
|
|
1170
|
+
readonly __version__: number;
|
|
1171
|
+
}
|
|
1172
|
+
declare const useScope: <T extends object>(ScopeClass: (new () => T & ForbidAsyncMethods<T>)) => [ScopeGetter<T>, () => T];
|
|
1173
|
+
declare const getParentScope: <T>(ScopeClass: (new () => T)) => never;
|
|
1174
|
+
|
|
1175
|
+
export { Context, _, action, asyncAppend, asyncAtom, asyncReplace, atom, bubble, cache, classMap, df, getCurrentHost, getParentScope, getProps as getStoreProps, getTemplateIsRunning, getbubbleInProgress, getbubblesSetter, getter, globalScheduler, globalVersion, guard, html, iAtom, ifDefined, incrGlobalVersion, isPathMatching, join, keyed, live, location, molecule, range, render, renderView, repeat, safetyCheck, setBubbleInProgress, setBubblesSetter, setter, styleMap, subscribe, unit, until, useContext, useUpdate as useForceUpdate, useMutable, useOnMount, useOnUnmount, useRefEffect, useScope, useState, useStore, useSubscribe, useUpdate, view, when, withHost };
|
|
1176
|
+
export type { PropsType as Props, Setter, SetterReturnType, ViewType };
|