@b9g/crank 0.5.7 → 0.6.0

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/crank.d.ts CHANGED
@@ -1,486 +1,489 @@
1
- /**
2
- * A type which represents all valid values for an element tag.
3
- */
4
- export type Tag = string | symbol | Component;
5
- /**
6
- * A helper type to map the tag of an element to its expected props.
7
- *
8
- * @template TTag - The tag associated with the props. Can be a string, symbol
9
- * or a component function.
10
- */
11
- export type TagProps<TTag extends Tag> = TTag extends string ? JSX.IntrinsicElements[TTag] : TTag extends Component<infer TProps> ? TProps : Record<string, unknown>;
12
- /***
13
- * SPECIAL TAGS
14
- *
15
- * Crank provides a couple tags which have special meaning for the renderer.
16
- ***/
17
- /**
18
- * A special tag for grouping multiple children within the same parent.
19
- *
20
- * All non-string iterables which appear in the element tree are implicitly
21
- * wrapped in a fragment element.
22
- *
23
- * This tag is just the empty string, and you can use the empty string in
24
- * createElement calls or transpiler options directly to avoid having to
25
- * reference this export.
26
- */
27
- export declare const Fragment = "";
28
- export type Fragment = typeof Fragment;
29
- /**
30
- * A special tag for rendering into a new root node via a root prop.
31
- *
32
- * This tag is useful for creating element trees with multiple roots, for
33
- * things like modals or tooltips.
34
- *
35
- * Renderer.prototype.render() will implicitly wrap top-level element trees in
36
- * a Portal element.
37
- */
38
- export declare const Portal: any;
39
- export type Portal = typeof Portal;
40
- /**
41
- * A special tag which preserves whatever was previously rendered in the
42
- * element’s position.
43
- *
44
- * Copy elements are useful for when you want to prevent a subtree from
45
- * rerendering as a performance optimization. Copy elements can also be keyed,
46
- * in which case the previously rendered keyed element will be copied.
47
- */
48
- export declare const Copy: any;
49
- export type Copy = typeof Copy;
50
- /**
51
- * A special tag for injecting raw nodes or strings via a value prop.
52
- *
53
- * Renderer.prototype.raw() is called with the value prop.
54
- */
55
- export declare const Raw: any;
56
- export type Raw = typeof Raw;
57
- /**
58
- * Describes all valid values of an element tree, excluding iterables.
59
- *
60
- * Arbitrary objects can also be safely rendered, but will be converted to a
61
- * string using the toString() method. We exclude them from this type to catch
62
- * potential mistakes.
63
- */
64
- export type Child = Element | string | number | boolean | null | undefined;
65
- /**
66
- * An arbitrarily nested iterable of Child values.
67
- *
68
- * We use a recursive interface here rather than making the Children type
69
- * directly recursive because recursive type aliases were added in TypeScript
70
- * 3.7.
71
- *
72
- * You should avoid referencing this type directly, as it is mainly exported to
73
- * prevent TypeScript errors.
74
- */
75
- export interface ChildIterable extends Iterable<Child | ChildIterable> {
76
- }
77
- /**
78
- * Describes all valid values of an element tree, including arbitrarily nested
79
- * iterables of such values.
80
- */
81
- export type Children = Child | ChildIterable;
82
- /**
83
- * Represents all functions which can be used as a component.
84
- *
85
- * @template [TProps=*] - The expected props for the component.
86
- */
87
- export type Component<TProps extends Record<string, unknown> = any> = (this: Context<TProps>, props: TProps) => Children | PromiseLike<Children> | Iterator<Children, Children | void, any> | AsyncIterator<Children, Children | void, any>;
88
- /**
89
- * A type to keep track of keys. Any value can be a key, though null and
90
- * undefined are ignored.
91
- */
92
- type Key = unknown;
93
- declare const ElementSymbol: unique symbol;
94
- export interface Element<TTag extends Tag = Tag> {
95
- /**
96
- * @internal
97
- * A unique symbol to identify elements as elements across versions and
98
- * realms, and to protect against basic injection attacks.
99
- * https://overreacted.io/why-do-react-elements-have-typeof-property/
100
- *
101
- * This property is defined on the element prototype rather than per
102
- * instance, because it is the same for every Element.
103
- */
104
- $$typeof: typeof ElementSymbol;
105
- /**
106
- * The tag of the element. Can be a string, symbol or function.
107
- */
108
- tag: TTag;
109
- /**
110
- * An object containing the properties of an element. These correspond to
111
- * the attribute syntax from JSX.
112
- */
113
- props: TagProps<TTag>;
114
- /**
115
- * A value which uniquely identifies an element from its siblings so that it
116
- * can be added/updated/moved/removed by key rather than position.
117
- *
118
- * Passed in createElement() as the prop "c-key".
119
- */
120
- key: Key;
121
- /**
122
- * A callback which is called with the element’s result when it is committed.
123
- *
124
- * Passed in createElement() as the prop "c-ref".
125
- */
126
- ref: ((value: unknown) => unknown) | undefined;
127
- /**
128
- * A possible boolean which indicates that element should NOT be rerendered.
129
- * If the element has never been rendered, this property has no effect.
130
- *
131
- * Passed in createElement() as the prop "c-static".
132
- */
133
- static_: boolean | undefined;
134
- }
135
- /**
136
- * Elements are the basic building blocks of Crank applications. They are
137
- * JavaScript objects which are interpreted by special classes called renderers
138
- * to produce and manage stateful nodes.
139
- *
140
- * @template {Tag} [TTag=Tag] - The type of the tag of the element.
141
- *
142
- * @example
143
- * // specific element types
144
- * let div: Element<"div">;
145
- * let portal: Element<Portal>;
146
- * let myEl: Element<MyComponent>;
147
- *
148
- * // general element types
149
- * let host: Element<string | symbol>;
150
- * let component: Element<Component>;
151
- *
152
- * Typically, you use a helper function like createElement to create elements
153
- * rather than instatiating this class directly.
154
- */
155
- export declare class Element<TTag extends Tag = Tag> {
156
- constructor(tag: TTag, props: TagProps<TTag>, key: Key, ref?: ((value: unknown) => unknown) | undefined, static_?: boolean | undefined);
157
- }
158
- export declare function isElement(value: any): value is Element;
159
- /**
160
- * Creates an element with the specified tag, props and children.
161
- *
162
- * This function is usually used as a transpilation target for JSX transpilers,
163
- * but it can also be called directly. It additionally extracts special props so
164
- * they aren’t accessible to renderer methods or components, and assigns the
165
- * children prop according to any additional arguments passed to the function.
166
- */
167
- export declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, ...children: Array<unknown>): Element<TTag>;
168
- /** Clones a given element, shallowly copying the props object. */
169
- export declare function cloneElement<TTag extends Tag>(el: Element<TTag>): Element<TTag>;
170
- /**
171
- * A helper type which repesents all possible rendered values of an element.
172
- *
173
- * @template TNode - The node type for the element provided by the renderer.
174
- *
175
- * When asking the question, what is the “value” of a specific element, the
176
- * answer varies depending on the tag:
177
- *
178
- * For host elements, the value is the nodes created for the element.
179
- *
180
- * For fragments, the value is usually an array of nodes.
181
- *
182
- * For portals, the value is undefined, because a Portal element’s root and
183
- * children are opaque to its parent.
184
- *
185
- * For components, the value can be any of the above, because the value of a
186
- * component is determined by its immediate children.
187
- *
188
- * Rendered values can also be strings or arrays of nodes and strings, in the
189
- * case of component or fragment elements with strings or multiple children.
190
- *
191
- * All of these possible values are reflected in this utility type.
192
- */
193
- export type ElementValue<TNode> = Array<TNode | string> | TNode | string | undefined;
194
- /**
195
- * @internal
196
- * The internal nodes which are cached and diffed against new elements when
197
- * rendering element trees.
198
- */
199
- declare class Retainer<TNode> {
200
- /**
201
- * The element associated with this retainer.
202
- */
203
- el: Element;
204
- /**
205
- * The context associated with this element. Will only be defined for
206
- * component elements.
207
- */
208
- ctx: ContextImpl<TNode> | undefined;
209
- /**
210
- * The retainer children of this element. Retainers form a tree which mirrors
211
- * elements. Can be a single child or undefined as a memory optimization.
212
- */
213
- children: Array<RetainerChild<TNode>> | RetainerChild<TNode>;
214
- /**
215
- * The value associated with this element.
216
- */
217
- value: ElementValue<TNode>;
218
- /**
219
- * The cached child values of this element. Only host and component elements
220
- * will use this property.
221
- */
222
- cachedChildValues: ElementValue<TNode>;
223
- /**
224
- * The child which this retainer replaces. This property is used when an
225
- * async retainer tree replaces previously rendered elements, so that the
226
- * previously rendered elements can remain visible until the async tree
227
- * fulfills. Will be set to undefined once this subtree fully renders.
228
- */
229
- fallbackValue: RetainerChild<TNode>;
230
- inflightValue: Promise<ElementValue<TNode>> | undefined;
231
- onNextValues: Function | undefined;
232
- constructor(el: Element);
233
- }
234
- /**
235
- * The retainer equivalent of ElementValue
236
- */
237
- type RetainerChild<TNode> = Retainer<TNode> | string | undefined;
238
- export interface HydrationData<TNode> {
239
- props: Record<string, unknown>;
240
- children: Array<TNode | string>;
241
- }
242
- export interface RendererImpl<TNode, TScope, TRoot extends TNode = TNode, TResult = ElementValue<TNode>> {
243
- scope<TTag extends string | symbol>(scope: TScope | undefined, tag: TTag, props: TagProps<TTag>): TScope | undefined;
244
- create<TTag extends string | symbol>(tag: TTag, props: TagProps<TTag>, scope: TScope | undefined): TNode;
245
- hydrate<TTag extends string | symbol>(tag: TTag, node: TNode | TRoot, props: TagProps<TTag>): HydrationData<TNode> | undefined;
246
- /**
247
- * Called when an element’s rendered value is exposed via render, schedule,
248
- * refresh, refs, or generator yield expressions.
249
- *
250
- * @param value - The value of the element being read. Can be a node, a
251
- * string, undefined, or an array of nodes and strings, depending on the
252
- * element.
253
- *
254
- * @returns Varies according to the specific renderer subclass. By default,
255
- * it exposes the element’s value.
256
- *
257
- * This is useful for renderers which don’t want to expose their internal
258
- * nodes. For instance, the HTML renderer will convert all internal nodes to
259
- * strings.
260
- */
261
- read(value: ElementValue<TNode>): TResult;
262
- /**
263
- * Called for each string in an element tree.
264
- *
265
- * @param text - The string child.
266
- * @param scope - The current scope.
267
- *
268
- * @returns A string to be passed to arrange.
269
- *
270
- * Rather than returning Text nodes as we would in the DOM case, for example,
271
- * we delay that step for Renderer.prototype.arrange. We do this so that
272
- * adjacent strings can be concatenated, and the actual element tree can be
273
- * rendered in normalized form.
274
- */
275
- text(text: string, scope: TScope | undefined, hydration: HydrationData<TNode> | undefined): string;
276
- /**
277
- * Called for each Raw element whose value prop is a string.
278
- *
279
- * @param text - The string child.
280
- * @param scope - The current scope.
281
- *
282
- * @returns The parsed node or string.
283
- */
284
- raw(value: string | TNode, scope: TScope | undefined, hydration: HydrationData<TNode> | undefined): ElementValue<TNode>;
285
- patch<TTag extends string | symbol, TName extends string>(tag: TTag, node: TNode, name: TName, value: TagProps<TTag>[TName], oldValue: TagProps<TTag>[TName] | undefined, scope: TScope): unknown;
286
- arrange<TTag extends string | symbol>(tag: TTag, node: TNode, props: TagProps<TTag>, children: Array<TNode | string>, oldProps: TagProps<TTag> | undefined, oldChildren: Array<TNode | string> | undefined): unknown;
287
- dispose<TTag extends string | symbol>(tag: TTag, node: TNode, props: TagProps<TTag>): unknown;
288
- flush(root: TRoot): unknown;
289
- }
290
- declare const _RendererImpl: unique symbol;
291
- /**
292
- * An abstract class which is subclassed to render to different target
293
- * environments. This class is responsible for kicking off the rendering
294
- * process and caching previous trees by root.
295
- *
296
- * @template TNode - The type of the node for a rendering environment.
297
- * @template TScope - Data which is passed down the tree.
298
- * @template TRoot - The type of the root for a rendering environment.
299
- * @template TResult - The type of exposed values.
300
- */
301
- export declare class Renderer<TNode extends object = object, TScope = unknown, TRoot extends TNode = TNode, TResult = ElementValue<TNode>> {
302
- /**
303
- * @internal
304
- * A weakmap which stores element trees by root.
305
- */
306
- cache: WeakMap<object, Retainer<TNode>>;
307
- [_RendererImpl]: RendererImpl<TNode, TScope, TRoot, TResult>;
308
- constructor(impl: Partial<RendererImpl<TNode, TScope, TRoot, TResult>>);
309
- /**
310
- * Renders an element tree into a specific root.
311
- *
312
- * @param children - An element tree. You can render null with a previously
313
- * used root to delete the previously rendered element tree from the cache.
314
- * @param root - The node to be rendered into. The renderer will cache
315
- * element trees per root.
316
- * @param bridge - An optional context that will be the ancestor context of all
317
- * elements in the tree. Useful for connecting different renderers so that
318
- * events/provisions properly propagate. The context for a given root must be
319
- * the same or an error will be thrown.
320
- *
321
- * @returns The result of rendering the children, or a possible promise of
322
- * the result if the element tree renders asynchronously.
323
- */
324
- render(children: Children, root?: TRoot | undefined, bridge?: Context | undefined): Promise<TResult> | TResult;
325
- hydrate(children: Children, root: TRoot, bridge?: Context | undefined): Promise<TResult> | TResult;
326
- }
327
- export interface Context extends Crank.Context {
328
- }
329
- /**
330
- * An interface which can be extended to provide strongly typed provisions.
331
- * See Context.prototype.consume and Context.prototype.provide.
332
- */
333
- export interface ProvisionMap extends Crank.ProvisionMap {
334
- }
335
- /**
336
- * @internal
337
- * The internal class which holds context data.
338
- */
339
- declare class ContextImpl<TNode = unknown, TScope = unknown, TRoot extends TNode = TNode, TResult = unknown> {
340
- /** A bitmask. See CONTEXT FLAGS above. */
341
- f: number;
342
- /** The actual context associated with this impl. */
343
- owner: Context<unknown, TResult>;
344
- /**
345
- * The renderer which created this context.
346
- */
347
- renderer: RendererImpl<TNode, TScope, TRoot, TResult>;
348
- /** The root node as set by the nearest ancestor portal. */
349
- root: TRoot | undefined;
350
- /**
351
- * The nearest ancestor host or portal retainer.
352
- *
353
- * When refresh is called, the host element will be arranged as the last step
354
- * of the commit, to make sure the parent’s children properly reflects the
355
- * components’s children.
356
- */
357
- host: Retainer<TNode>;
358
- /** The parent context impl. */
359
- parent: ContextImpl<TNode, TScope, TRoot, TResult> | undefined;
360
- /** The value of the scope at the point of element’s creation. */
361
- scope: TScope | undefined;
362
- /** The internal node associated with this context. */
363
- ret: Retainer<TNode>;
364
- /**
365
- * The iterator returned by the component function.
366
- *
367
- * Existence of this property implies that the component is a generator
368
- * component. It is deleted when a component is returned.
369
- */
370
- iterator: Iterator<Children, Children | void, unknown> | AsyncIterator<Children, Children | void, unknown> | undefined;
371
- inflightBlock: Promise<unknown> | undefined;
372
- inflightValue: Promise<ElementValue<TNode>> | undefined;
373
- enqueuedBlock: Promise<unknown> | undefined;
374
- enqueuedValue: Promise<ElementValue<TNode>> | undefined;
375
- onProps: ((props: Record<string, any>) => unknown) | undefined;
376
- onPropsRequested: Function | undefined;
377
- constructor(renderer: RendererImpl<TNode, TScope, TRoot, TResult>, root: TRoot | undefined, host: Retainer<TNode>, parent: ContextImpl<TNode, TScope, TRoot, TResult> | undefined, scope: TScope | undefined, ret: Retainer<TNode>);
378
- }
379
- declare const _ContextImpl: unique symbol;
380
- type ComponentProps<T> = T extends () => any ? {} : T extends (props: infer U) => any ? U : T;
381
- /**
382
- * A class which is instantiated and passed to every component as its this
383
- * value. Contexts form a tree just like elements and all components in the
384
- * element tree are connected via contexts. Components can use this tree to
385
- * communicate data upwards via events and downwards via provisions.
386
- *
387
- * @template [T=*] - The expected shape of the props passed to the component,
388
- * or a component function. Used to strongly type the Context iterator methods.
389
- * @template [TResult=*] - The readable element value type. It is used in
390
- * places such as the return value of refresh and the argument passed to
391
- * schedule and cleanup callbacks.
392
- */
393
- export declare class Context<T = any, TResult = any> implements EventTarget {
394
- /**
395
- * @internal
396
- */
397
- [_ContextImpl]: ContextImpl<unknown, unknown, unknown, TResult>;
398
- constructor(impl: ContextImpl<unknown, unknown, unknown, TResult>);
399
- /**
400
- * The current props of the associated element.
401
- *
402
- * Typically, you should read props either via the first parameter of the
403
- * component or via the context iterator methods. This property is mainly for
404
- * plugins or utilities which wrap contexts.
405
- */
406
- get props(): ComponentProps<T>;
407
- /**
408
- * The current value of the associated element.
409
- *
410
- * Typically, you should read values via refs, generator yield expressions,
411
- * or the refresh, schedule, cleanup, or flush methods. This property is
412
- * mainly for plugins or utilities which wrap contexts.
413
- */
414
- get value(): TResult;
415
- [Symbol.iterator](): Generator<ComponentProps<T>>;
416
- [Symbol.asyncIterator](): AsyncGenerator<ComponentProps<T>>;
417
- /**
418
- * Re-executes a component.
419
- *
420
- * @returns The rendered value of the component or a promise thereof if the
421
- * component or its children execute asynchronously.
422
- *
423
- * The refresh method works a little differently for async generator
424
- * components, in that it will resume the Context’s props async iterator
425
- * rather than resuming execution. This is because async generator components
426
- * are perpetually resumed independent of updates, and rely on the props
427
- * async iterator to suspend.
428
- */
429
- refresh(): Promise<TResult> | TResult;
430
- /**
431
- * Registers a callback which fires when the component commits. Will only
432
- * fire once per callback and update.
433
- */
434
- schedule(callback: (value: TResult) => unknown): void;
435
- /**
436
- * Registers a callback which fires when the component’s children are
437
- * rendered into the root. Will only fire once per callback and render.
438
- */
439
- flush(callback: (value: TResult) => unknown): void;
440
- /**
441
- * Registers a callback which fires when the component unmounts. Will only
442
- * fire once per callback.
443
- */
444
- cleanup(callback: (value: TResult) => unknown): void;
445
- consume<TKey extends keyof ProvisionMap>(key: TKey): ProvisionMap[TKey];
446
- consume(key: unknown): any;
447
- provide<TKey extends keyof ProvisionMap>(key: TKey, value: ProvisionMap[TKey]): void;
448
- provide(key: unknown, value: any): void;
449
- addEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: boolean | AddEventListenerOptions): void;
450
- removeEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: EventListenerOptions | boolean): void;
451
- dispatchEvent(ev: Event): boolean;
452
- }
453
- /**
454
- * A map of event type strings to Event subclasses. Can be extended via
455
- * TypeScript module augmentation to have strongly typed event listeners.
456
- */
457
- export interface EventMap extends Crank.EventMap {
458
- [type: string]: Event;
459
- }
460
- type MappedEventListener<T extends string> = (ev: EventMap[T]) => unknown;
461
- type MappedEventListenerOrEventListenerObject<T extends string> = MappedEventListener<T> | {
462
- handleEvent: MappedEventListener<T>;
463
- };
464
- declare global {
465
- namespace Crank {
466
- interface EventMap {
467
- }
468
- interface ProvisionMap {
469
- }
470
- interface Context {
471
- }
472
- }
473
- namespace JSX {
474
- interface IntrinsicElements {
475
- [tag: string]: any;
476
- }
477
- interface ElementChildrenAttribute {
478
- children: {};
479
- }
480
- }
481
- }
482
- declare const _default: {
483
- createElement: typeof createElement;
484
- Fragment: string;
485
- };
486
- export default _default;
1
+ /**
2
+ * A type which represents all valid values for an element tag.
3
+ */
4
+ export type Tag = string | symbol | Component;
5
+ /**
6
+ * A helper type to map the tag of an element to its expected props.
7
+ *
8
+ * @template TTag - The tag associated with the props. Can be a string, symbol
9
+ * or a component function.
10
+ */
11
+ export type TagProps<TTag extends Tag> = TTag extends string ? JSX.IntrinsicElements[TTag] : TTag extends Component<infer TProps> ? TProps & JSX.IntrinsicAttributes : Record<string, unknown> & JSX.IntrinsicAttributes;
12
+ /***
13
+ * SPECIAL TAGS
14
+ *
15
+ * Crank provides a couple tags which have special meaning for the renderer.
16
+ ***/
17
+ /**
18
+ * A special tag for grouping multiple children within the same parent.
19
+ *
20
+ * All non-string iterables which appear in the element tree are implicitly
21
+ * wrapped in a fragment element.
22
+ *
23
+ * This tag is just the empty string, and you can use the empty string in
24
+ * createElement calls or transpiler options directly to avoid having to
25
+ * reference this export.
26
+ */
27
+ export declare const Fragment = "";
28
+ export type Fragment = typeof Fragment;
29
+ /**
30
+ * A special tag for rendering into a new root node via a root prop.
31
+ *
32
+ * This tag is useful for creating element trees with multiple roots, for
33
+ * things like modals or tooltips.
34
+ *
35
+ * Renderer.prototype.render() will implicitly wrap top-level element trees in
36
+ * a Portal element.
37
+ */
38
+ export declare const Portal: any;
39
+ export type Portal = typeof Portal;
40
+ /**
41
+ * A special tag which preserves whatever was previously rendered in the
42
+ * element’s position.
43
+ *
44
+ * Copy elements are useful for when you want to prevent a subtree from
45
+ * rerendering as a performance optimization. Copy elements can also be keyed,
46
+ * in which case the previously rendered keyed element will be copied.
47
+ */
48
+ export declare const Copy: any;
49
+ export type Copy = typeof Copy;
50
+ /**
51
+ * A special tag for injecting raw nodes or strings via a value prop.
52
+ *
53
+ * Renderer.prototype.raw() is called with the value prop.
54
+ */
55
+ export declare const Raw: any;
56
+ export type Raw = typeof Raw;
57
+ /**
58
+ * Describes all valid values of an element tree, excluding iterables.
59
+ *
60
+ * Arbitrary objects can also be safely rendered, but will be converted to a
61
+ * string using the toString() method. We exclude them from this type to catch
62
+ * potential mistakes.
63
+ */
64
+ export type Child = Element | string | number | boolean | null | undefined;
65
+ /**
66
+ * An arbitrarily nested iterable of Child values.
67
+ *
68
+ * We use a recursive interface here rather than making the Children type
69
+ * directly recursive because recursive type aliases were added in TypeScript
70
+ * 3.7.
71
+ *
72
+ * You should avoid referencing this type directly, as it is mainly exported to
73
+ * prevent TypeScript errors.
74
+ */
75
+ export interface ChildIterable extends Iterable<Child | ChildIterable> {
76
+ }
77
+ /**
78
+ * Describes all valid values of an element tree, including arbitrarily nested
79
+ * iterables of such values.
80
+ */
81
+ export type Children = Child | ChildIterable;
82
+ /**
83
+ * Represents all functions which can be used as a component.
84
+ *
85
+ * @template [TProps=*] - The expected props for the component.
86
+ */
87
+ export type Component<TProps extends Record<string, unknown> = any> = (this: Context<TProps>, props: TProps, ctx: Context<TProps>) => Children | PromiseLike<Children> | Iterator<Children, Children | void, any> | AsyncIterator<Children, Children | void, any>;
88
+ /**
89
+ * A type to keep track of keys. Any value can be a key, though null and
90
+ * undefined are ignored.
91
+ */
92
+ type Key = unknown;
93
+ declare const ElementSymbol: unique symbol;
94
+ export interface Element<TTag extends Tag = Tag> {
95
+ /**
96
+ * @internal
97
+ * A unique symbol to identify elements as elements across versions and
98
+ * realms, and to protect against basic injection attacks.
99
+ * https://overreacted.io/why-do-react-elements-have-typeof-property/
100
+ *
101
+ * This property is defined on the element prototype rather than per
102
+ * instance, because it is the same for every Element.
103
+ */
104
+ $$typeof: typeof ElementSymbol;
105
+ /**
106
+ * The tag of the element. Can be a string, symbol or function.
107
+ */
108
+ tag: TTag;
109
+ /**
110
+ * An object containing the "properties" of an element. These correspond to
111
+ * the attribute syntax from JSX.
112
+ */
113
+ props: TagProps<TTag>;
114
+ }
115
+ /**
116
+ * Elements are the basic building blocks of Crank applications. They are
117
+ * JavaScript objects which are interpreted by special classes called renderers
118
+ * to produce and manage stateful nodes.
119
+ *
120
+ * @template {Tag} [TTag=Tag] - The type of the tag of the element.
121
+ *
122
+ * @example
123
+ * // specific element types
124
+ * let div: Element<"div">;
125
+ * let portal: Element<Portal>;
126
+ * let myEl: Element<MyComponent>;
127
+ *
128
+ * // general element types
129
+ * let host: Element<string | symbol>;
130
+ * let component: Element<Component>;
131
+ *
132
+ * Typically, you use a helper function like createElement to create elements
133
+ * rather than instatiating this class directly.
134
+ */
135
+ export declare class Element<TTag extends Tag = Tag> {
136
+ constructor(tag: TTag, props: TagProps<TTag>);
137
+ get key(): Key;
138
+ get ref(): unknown;
139
+ get copy(): boolean;
140
+ }
141
+ export declare function isElement(value: any): value is Element;
142
+ /**
143
+ * Creates an element with the specified tag, props and children.
144
+ *
145
+ * This function is usually used as a transpilation target for JSX transpilers,
146
+ * but it can also be called directly. It additionally extracts special props so
147
+ * they aren’t accessible to renderer methods or components, and assigns the
148
+ * children prop according to any additional arguments passed to the function.
149
+ */
150
+ export declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, ...children: Array<unknown>): Element<TTag>;
151
+ /** Clones a given element, shallowly copying the props object. */
152
+ export declare function cloneElement<TTag extends Tag>(el: Element<TTag>): Element<TTag>;
153
+ /**
154
+ * A helper type which repesents all possible rendered values of an element.
155
+ *
156
+ * @template TNode - The node type for the element provided by the renderer.
157
+ *
158
+ * When asking the question, what is the "value" of a specific element, the
159
+ * answer varies depending on the tag:
160
+ *
161
+ * For host elements, the value is the nodes created for the element, e.g. the
162
+ * DOM node in the case of the DOMRenderer.
163
+ *
164
+ * For fragments, the value is the value of the
165
+ *
166
+ * For portals, the value is undefined, because a Portal element’s root and
167
+ * children are opaque to its parent.
168
+ *
169
+ * For components, the value can be any of the above, because the value of a
170
+ * component is determined by its immediate children.
171
+ *
172
+ * Rendered values can also be strings or arrays of nodes and strings, in the
173
+ * case of component or fragment elements with strings or multiple children.
174
+ *
175
+ * All of these possible values are reflected in this utility type.
176
+ */
177
+ export type ElementValue<TNode> = Array<TNode | string> | TNode | string | undefined;
178
+ /**
179
+ * @internal
180
+ * The internal nodes which are cached and diffed against new elements when
181
+ * rendering element trees.
182
+ */
183
+ declare class Retainer<TNode> {
184
+ /**
185
+ * The element associated with this retainer.
186
+ */
187
+ el: Element;
188
+ /**
189
+ * The context associated with this element. Will only be defined for
190
+ * component elements.
191
+ */
192
+ ctx: ContextImpl<TNode> | undefined;
193
+ /**
194
+ * The retainer children of this element. Retainers form a tree which mirrors
195
+ * elements. Can be a single child or undefined as a memory optimization.
196
+ */
197
+ children: Array<RetainerChild<TNode>> | RetainerChild<TNode>;
198
+ /**
199
+ * The value associated with this element.
200
+ */
201
+ value: ElementValue<TNode>;
202
+ /**
203
+ * The cached child values of this element. Only host and component elements
204
+ * will use this property.
205
+ */
206
+ cachedChildValues: ElementValue<TNode>;
207
+ /**
208
+ * The child which this retainer replaces. This property is used when an
209
+ * async retainer tree replaces previously rendered elements, so that the
210
+ * previously rendered elements can remain visible until the async tree
211
+ * fulfills. Will be set to undefined once this subtree fully renders.
212
+ */
213
+ fallbackValue: RetainerChild<TNode>;
214
+ inflightValue: Promise<ElementValue<TNode>> | undefined;
215
+ onNextValues: Function | undefined;
216
+ constructor(el: Element);
217
+ }
218
+ /**
219
+ * The retainer equivalent of ElementValue
220
+ */
221
+ type RetainerChild<TNode> = Retainer<TNode> | string | undefined;
222
+ export interface HydrationData<TNode> {
223
+ props: Record<string, unknown>;
224
+ children: Array<TNode | string>;
225
+ }
226
+ export interface RendererImpl<TNode, TScope, TRoot extends TNode = TNode, TResult = ElementValue<TNode>> {
227
+ scope<TTag extends string | symbol>(scope: TScope | undefined, tag: TTag, props: TagProps<TTag>): TScope | undefined;
228
+ create<TTag extends string | symbol>(tag: TTag, props: TagProps<TTag>, scope: TScope | undefined): TNode;
229
+ hydrate<TTag extends string | symbol>(tag: TTag, node: TNode | TRoot, props: TagProps<TTag>): HydrationData<TNode> | undefined;
230
+ /**
231
+ * Called when an element’s rendered value is exposed via render, schedule,
232
+ * refresh, refs, or generator yield expressions.
233
+ *
234
+ * @param value - The value of the element being read. Can be a node, a
235
+ * string, undefined, or an array of nodes and strings, depending on the
236
+ * element.
237
+ *
238
+ * @returns Varies according to the specific renderer subclass. By default,
239
+ * it exposes the element’s value.
240
+ *
241
+ * This is useful for renderers which don’t want to expose their internal
242
+ * nodes. For instance, the HTML renderer will convert all internal nodes to
243
+ * strings.
244
+ */
245
+ read(value: ElementValue<TNode>): TResult;
246
+ /**
247
+ * Called for each string in an element tree.
248
+ *
249
+ * @param text - The string child.
250
+ * @param scope - The current scope.
251
+ *
252
+ * @returns A string to be passed to arrange.
253
+ *
254
+ * Rather than returning Text nodes as we would in the DOM case, for example,
255
+ * we delay that step for Renderer.prototype.arrange. We do this so that
256
+ * adjacent strings can be concatenated, and the actual element tree can be
257
+ * rendered in normalized form.
258
+ */
259
+ text(text: string, scope: TScope | undefined, hydration: HydrationData<TNode> | undefined): string;
260
+ /**
261
+ * Called for each Raw element whose value prop is a string.
262
+ *
263
+ * @param text - The string child.
264
+ * @param scope - The current scope.
265
+ *
266
+ * @returns The parsed node or string.
267
+ */
268
+ raw(value: string | TNode, scope: TScope | undefined, hydration: HydrationData<TNode> | undefined): ElementValue<TNode>;
269
+ patch<TTag extends string | symbol, TName extends string>(tag: TTag, node: TNode, name: TName, value: unknown, oldValue: unknown, scope: TScope): unknown;
270
+ arrange<TTag extends string | symbol>(tag: TTag, node: TNode, props: Record<string, unknown>, children: Array<TNode | string>, oldProps: Record<string, unknown> | undefined, oldChildren: Array<TNode | string> | undefined): unknown;
271
+ dispose<TTag extends string | symbol>(tag: TTag, node: TNode, props: Record<string, unknown>): unknown;
272
+ flush(root: TRoot): unknown;
273
+ }
274
+ declare const _RendererImpl: unique symbol;
275
+ /**
276
+ * An abstract class which is subclassed to render to different target
277
+ * environments. Subclasses will typically call super() with a custom
278
+ * RendererImpl. This class is responsible for kicking off the rendering
279
+ * process and caching previous trees by root.
280
+ *
281
+ * @template TNode - The type of the node for a rendering environment.
282
+ * @template TScope - Data which is passed down the tree.
283
+ * @template TRoot - The type of the root for a rendering environment.
284
+ * @template TResult - The type of exposed values.
285
+ */
286
+ export declare class Renderer<TNode extends object = object, TScope = unknown, TRoot extends TNode = TNode, TResult = ElementValue<TNode>> {
287
+ /**
288
+ * @internal
289
+ * A weakmap which stores element trees by root.
290
+ */
291
+ cache: WeakMap<object, Retainer<TNode>>;
292
+ [_RendererImpl]: RendererImpl<TNode, TScope, TRoot, TResult>;
293
+ constructor(impl: Partial<RendererImpl<TNode, TScope, TRoot, TResult>>);
294
+ /**
295
+ * Renders an element tree into a specific root.
296
+ *
297
+ * @param children - An element tree. You can render null with a previously
298
+ * used root to delete the previously rendered element tree from the cache.
299
+ * @param root - The node to be rendered into. The renderer will cache
300
+ * element trees per root.
301
+ * @param bridge - An optional context that will be the ancestor context of all
302
+ * elements in the tree. Useful for connecting different renderers so that
303
+ * events/provisions properly propagate. The context for a given root must be
304
+ * the same or an error will be thrown.
305
+ *
306
+ * @returns The result of rendering the children, or a possible promise of
307
+ * the result if the element tree renders asynchronously.
308
+ */
309
+ render(children: Children, root?: TRoot | undefined, bridge?: Context | undefined): Promise<TResult> | TResult;
310
+ hydrate(children: Children, root: TRoot, bridge?: Context | undefined): Promise<TResult> | TResult;
311
+ }
312
+ export interface Context extends Crank.Context {
313
+ }
314
+ /**
315
+ * An interface which can be extended to provide strongly typed provisions.
316
+ * See Context.prototype.consume and Context.prototype.provide.
317
+ */
318
+ export interface ProvisionMap extends Crank.ProvisionMap {
319
+ }
320
+ /**
321
+ * @internal
322
+ * The internal class which holds context data.
323
+ */
324
+ declare class ContextImpl<TNode = unknown, TScope = unknown, TRoot extends TNode = TNode, TResult = unknown> {
325
+ /** A bitmask. See CONTEXT FLAGS above. */
326
+ f: number;
327
+ /** The actual context associated with this impl. */
328
+ owner: Context<unknown, TResult>;
329
+ /**
330
+ * The renderer which created this context.
331
+ */
332
+ renderer: RendererImpl<TNode, TScope, TRoot, TResult>;
333
+ /** The root node as set by the nearest ancestor portal. */
334
+ root: TRoot | undefined;
335
+ /**
336
+ * The nearest ancestor host or portal retainer.
337
+ *
338
+ * When refresh is called, the host element will be arranged as the last step
339
+ * of the commit, to make sure the parent’s children properly reflects the
340
+ * components’s children.
341
+ */
342
+ host: Retainer<TNode>;
343
+ /** The parent context impl. */
344
+ parent: ContextImpl<TNode, TScope, TRoot, TResult> | undefined;
345
+ /** The value of the scope at the point of element’s creation. */
346
+ scope: TScope | undefined;
347
+ /** The internal node associated with this context. */
348
+ ret: Retainer<TNode>;
349
+ /**
350
+ * The iterator returned by the component function.
351
+ *
352
+ * Existence of this property implies that the component is a generator
353
+ * component. It is deleted when a component is returned.
354
+ */
355
+ iterator: Iterator<Children, Children | void, unknown> | AsyncIterator<Children, Children | void, unknown> | undefined;
356
+ inflightBlock: Promise<unknown> | undefined;
357
+ inflightValue: Promise<ElementValue<TNode>> | undefined;
358
+ enqueuedBlock: Promise<unknown> | undefined;
359
+ enqueuedValue: Promise<ElementValue<TNode>> | undefined;
360
+ onProps: ((props: Record<string, any>) => unknown) | undefined;
361
+ onPropsRequested: Function | undefined;
362
+ constructor(renderer: RendererImpl<TNode, TScope, TRoot, TResult>, root: TRoot | undefined, host: Retainer<TNode>, parent: ContextImpl<TNode, TScope, TRoot, TResult> | undefined, scope: TScope | undefined, ret: Retainer<TNode>);
363
+ }
364
+ declare const _ContextImpl: unique symbol;
365
+ type ComponentProps<T> = T extends () => any ? {} : T extends (props: infer U) => any ? U : T;
366
+ /**
367
+ * A class which is instantiated and passed to every component as its this
368
+ * value. Contexts form a tree just like elements and all components in the
369
+ * element tree are connected via contexts. Components can use this tree to
370
+ * communicate data upwards via events and downwards via provisions.
371
+ *
372
+ * @template [T=*] - The expected shape of the props passed to the component,
373
+ * or a component function. Used to strongly type the Context iterator methods.
374
+ * @template [TResult=*] - The readable element value type. It is used in
375
+ * places such as the return value of refresh and the argument passed to
376
+ * schedule and cleanup callbacks.
377
+ */
378
+ export declare class Context<T = any, TResult = any> implements EventTarget {
379
+ /**
380
+ * @internal
381
+ */
382
+ [_ContextImpl]: ContextImpl<unknown, unknown, unknown, TResult>;
383
+ constructor(impl: ContextImpl<unknown, unknown, unknown, TResult>);
384
+ /**
385
+ * The current props of the associated element.
386
+ */
387
+ get props(): ComponentProps<T>;
388
+ /**
389
+ * The current value of the associated element.
390
+ *
391
+ * @deprecated
392
+ */
393
+ get value(): TResult;
394
+ [Symbol.iterator](): Generator<ComponentProps<T>>;
395
+ [Symbol.asyncIterator](): AsyncGenerator<ComponentProps<T>>;
396
+ /**
397
+ * Re-executes a component.
398
+ *
399
+ * @returns The rendered value of the component or a promise thereof if the
400
+ * component or its children execute asynchronously.
401
+ *
402
+ * The refresh method works a little differently for async generator
403
+ * components, in that it will resume the Context’s props async iterator
404
+ * rather than resuming execution. This is because async generator components
405
+ * are perpetually resumed independent of updates, and rely on the props
406
+ * async iterator to suspend.
407
+ */
408
+ refresh(): Promise<TResult> | TResult;
409
+ /**
410
+ * Registers a callback which fires when the component commits. Will only
411
+ * fire once per callback and update.
412
+ */
413
+ schedule(callback: (value: TResult) => unknown): void;
414
+ /**
415
+ * Registers a callback which fires when the component’s children are
416
+ * rendered into the root. Will only fire once per callback and render.
417
+ */
418
+ flush(callback: (value: TResult) => unknown): void;
419
+ /**
420
+ * Registers a callback which fires when the component unmounts. Will only
421
+ * fire once per callback.
422
+ */
423
+ cleanup(callback: (value: TResult) => unknown): void;
424
+ consume<TKey extends keyof ProvisionMap>(key: TKey): ProvisionMap[TKey];
425
+ consume(key: unknown): any;
426
+ provide<TKey extends keyof ProvisionMap>(key: TKey, value: ProvisionMap[TKey]): void;
427
+ provide(key: unknown, value: any): void;
428
+ addEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: boolean | AddEventListenerOptions): void;
429
+ removeEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: EventListenerOptions | boolean): void;
430
+ dispatchEvent(ev: Event): boolean;
431
+ }
432
+ /**
433
+ * A map of event type strings to Event subclasses. Can be extended via
434
+ * TypeScript module augmentation to have strongly typed event listeners.
435
+ */
436
+ export interface EventMap extends Crank.EventMap {
437
+ [type: string]: Event;
438
+ }
439
+ type MappedEventListener<T extends string> = (ev: EventMap[T]) => unknown;
440
+ type MappedEventListenerOrEventListenerObject<T extends string> = MappedEventListener<T> | {
441
+ handleEvent: MappedEventListener<T>;
442
+ };
443
+ declare global {
444
+ namespace Crank {
445
+ interface EventMap {
446
+ }
447
+ interface ProvisionMap {
448
+ }
449
+ interface Context {
450
+ }
451
+ }
452
+ namespace JSX {
453
+ interface IntrinsicElements {
454
+ [tag: string]: any;
455
+ }
456
+ interface IntrinsicAttributes {
457
+ children?: unknown;
458
+ key?: unknown;
459
+ ref?: unknown;
460
+ ["static"]?: unknown;
461
+ /** @deprecated */
462
+ ["crank-key"]?: unknown;
463
+ /** @deprecated */
464
+ ["crank-ref"]?: unknown;
465
+ /** @deprecated */
466
+ ["crank-static"]?: unknown;
467
+ /** @deprecated */
468
+ ["c-key"]?: unknown;
469
+ /** @deprecated */
470
+ ["c-ref"]?: unknown;
471
+ /** @deprecated */
472
+ ["c-static"]?: unknown;
473
+ /** @deprecated */
474
+ $key?: unknown;
475
+ /** @deprecated */
476
+ $ref?: unknown;
477
+ /** @deprecated */
478
+ $static?: unknown;
479
+ }
480
+ interface ElementChildrenAttribute {
481
+ children: {};
482
+ }
483
+ }
484
+ }
485
+ declare const _default: {
486
+ createElement: typeof createElement;
487
+ Fragment: string;
488
+ };
489
+ export default _default;