@microsoft/fast-element 2.0.0-beta.1 → 2.0.0-beta.10

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.
Files changed (96) hide show
  1. package/CHANGELOG.json +333 -0
  2. package/CHANGELOG.md +106 -1
  3. package/dist/dts/components/attributes.d.ts +10 -0
  4. package/dist/dts/components/{controller.d.ts → element-controller.d.ts} +24 -25
  5. package/dist/dts/components/fast-definitions.d.ts +43 -9
  6. package/dist/dts/components/fast-element.d.ts +15 -21
  7. package/dist/dts/context.d.ts +157 -0
  8. package/dist/dts/di/di.d.ts +899 -0
  9. package/dist/dts/index.d.ts +2 -2
  10. package/dist/dts/interfaces.d.ts +44 -12
  11. package/dist/dts/metadata.d.ts +25 -0
  12. package/dist/dts/observation/arrays.d.ts +1 -1
  13. package/dist/dts/observation/observable.d.ts +101 -75
  14. package/dist/dts/pending-task.d.ts +20 -0
  15. package/dist/dts/platform.d.ts +6 -0
  16. package/dist/dts/state/exports.d.ts +3 -0
  17. package/dist/dts/state/reactive.d.ts +8 -0
  18. package/dist/dts/state/state.d.ts +141 -0
  19. package/dist/dts/state/visitor.d.ts +6 -0
  20. package/dist/dts/state/watch.d.ts +10 -0
  21. package/dist/dts/styles/css-directive.d.ts +2 -2
  22. package/dist/dts/styles/element-styles.d.ts +9 -3
  23. package/dist/dts/styles/host.d.ts +68 -0
  24. package/dist/dts/templating/binding-signal.d.ts +21 -0
  25. package/dist/dts/templating/binding-two-way.d.ts +39 -0
  26. package/dist/dts/templating/binding.d.ts +69 -294
  27. package/dist/dts/templating/children.d.ts +1 -1
  28. package/dist/dts/templating/compiler.d.ts +1 -2
  29. package/dist/dts/templating/html-directive.d.ts +93 -35
  30. package/dist/dts/templating/node-observation.d.ts +4 -5
  31. package/dist/dts/templating/ref.d.ts +5 -13
  32. package/dist/dts/templating/render.d.ts +272 -0
  33. package/dist/dts/templating/repeat.d.ts +20 -75
  34. package/dist/dts/templating/slotted.d.ts +1 -1
  35. package/dist/dts/templating/template.d.ts +12 -61
  36. package/dist/dts/templating/view.d.ts +77 -12
  37. package/dist/dts/templating/when.d.ts +3 -3
  38. package/dist/dts/testing/exports.d.ts +3 -0
  39. package/dist/dts/testing/fakes.d.ts +4 -0
  40. package/dist/dts/testing/fixture.d.ts +84 -0
  41. package/dist/dts/testing/timeout.d.ts +7 -0
  42. package/dist/{tsdoc-metadata.json → dts/tsdoc-metadata.json} +0 -0
  43. package/dist/dts/utilities.d.ts +0 -18
  44. package/dist/esm/components/attributes.js +13 -4
  45. package/dist/esm/components/{controller.js → element-controller.js} +95 -105
  46. package/dist/esm/components/fast-definitions.js +38 -28
  47. package/dist/esm/components/fast-element.js +31 -12
  48. package/dist/esm/context.js +163 -0
  49. package/dist/esm/debug.js +36 -4
  50. package/dist/esm/di/di.js +1435 -0
  51. package/dist/esm/index.js +2 -1
  52. package/dist/esm/interfaces.js +4 -0
  53. package/dist/esm/metadata.js +60 -0
  54. package/dist/esm/observation/arrays.js +304 -3
  55. package/dist/esm/observation/observable.js +81 -87
  56. package/dist/esm/pending-task.js +16 -0
  57. package/dist/esm/platform.js +25 -1
  58. package/dist/esm/state/exports.js +3 -0
  59. package/dist/esm/state/reactive.js +34 -0
  60. package/dist/esm/state/state.js +148 -0
  61. package/dist/esm/state/visitor.js +28 -0
  62. package/dist/esm/state/watch.js +36 -0
  63. package/dist/esm/styles/css.js +4 -4
  64. package/dist/esm/styles/element-styles.js +14 -0
  65. package/dist/esm/{observation/behavior.js → styles/host.js} +0 -0
  66. package/dist/esm/templating/binding-signal.js +83 -0
  67. package/dist/esm/templating/binding-two-way.js +103 -0
  68. package/dist/esm/templating/binding.js +134 -414
  69. package/dist/esm/templating/compiler.js +30 -7
  70. package/dist/esm/templating/html-directive.js +100 -28
  71. package/dist/esm/templating/node-observation.js +9 -8
  72. package/dist/esm/templating/ref.js +4 -12
  73. package/dist/esm/templating/render.js +391 -0
  74. package/dist/esm/templating/repeat.js +96 -72
  75. package/dist/esm/templating/template.js +11 -29
  76. package/dist/esm/templating/view.js +107 -29
  77. package/dist/esm/templating/when.js +5 -4
  78. package/dist/esm/testing/exports.js +3 -0
  79. package/dist/esm/testing/fakes.js +76 -0
  80. package/dist/esm/testing/fixture.js +86 -0
  81. package/dist/esm/testing/timeout.js +24 -0
  82. package/dist/esm/utilities.js +0 -95
  83. package/dist/fast-element.api.json +9034 -10524
  84. package/dist/fast-element.d.ts +707 -811
  85. package/dist/fast-element.debug.js +1133 -850
  86. package/dist/fast-element.debug.min.js +1 -1
  87. package/dist/fast-element.js +1097 -846
  88. package/dist/fast-element.min.js +1 -1
  89. package/dist/fast-element.untrimmed.d.ts +724 -818
  90. package/docs/api-report.md +264 -305
  91. package/package.json +39 -10
  92. package/dist/dts/hooks.d.ts +0 -20
  93. package/dist/dts/observation/behavior.d.ts +0 -19
  94. package/dist/dts/observation/splice-strategies.d.ts +0 -13
  95. package/dist/esm/hooks.js +0 -32
  96. package/dist/esm/observation/splice-strategies.js +0 -400
@@ -1,6 +1,6 @@
1
- import type { Constructable } from "../interfaces.js";
2
- import { Controller } from "./controller.js";
3
- import { PartialFASTElementDefinition } from "./fast-definitions.js";
1
+ import { Constructable } from "../interfaces.js";
2
+ import { ElementController } from "./element-controller.js";
3
+ import { FASTElementDefinition, PartialFASTElementDefinition } from "./fast-definitions.js";
4
4
  /**
5
5
  * Represents a custom element based on the FASTElement infrastructure.
6
6
  * @public
@@ -10,7 +10,7 @@ export interface FASTElement extends HTMLElement {
10
10
  * The underlying controller that handles the lifecycle and rendering of
11
11
  * this FASTElement.
12
12
  */
13
- readonly $fastController: Controller;
13
+ readonly $fastController: ElementController;
14
14
  /**
15
15
  * Emits a custom HTML event.
16
16
  * @param type - The type name of the event.
@@ -45,28 +45,21 @@ export interface FASTElement extends HTMLElement {
45
45
  */
46
46
  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
47
47
  }
48
+ declare function compose<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>>(this: TType, nameOrDef: string | PartialFASTElementDefinition): FASTElementDefinition<TType>;
49
+ declare function compose<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition): FASTElementDefinition<TType>;
50
+ declare function define<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>>(this: TType, nameOrDef: string | PartialFASTElementDefinition): TType;
51
+ declare function define<TType extends Constructable<HTMLElement> = Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition): TType;
52
+ declare function from<TBase extends typeof HTMLElement>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
48
53
  /**
49
54
  * A minimal base class for FASTElements that also provides
50
55
  * static helpers for working with FASTElements.
51
56
  * @public
52
57
  */
53
- export declare const FASTElement: (new () => HTMLElement & FASTElement) & {
54
- /**
55
- * Creates a new FASTElement base class inherited from the
56
- * provided base type.
57
- * @param BaseType - The base element type to inherit from.
58
- */
59
- from<TBase extends {
60
- new (): HTMLElement;
61
- prototype: HTMLElement;
62
- }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement;
63
- /**
64
- * Defines a platform custom element based on the provided type and definition.
65
- * @param type - The custom element type to define.
66
- * @param nameOrDef - The name of the element to define or a definition object
67
- * that describes the element to define.
68
- */
69
- define<TType extends Constructable<HTMLElement>>(type: TType, nameOrDef?: string | PartialFASTElementDefinition): TType;
58
+ export declare const FASTElement: {
59
+ new (): FASTElement;
60
+ define: typeof define;
61
+ compose: typeof compose;
62
+ from: typeof from;
70
63
  };
71
64
  /**
72
65
  * Decorator: Defines a platform custom element based on `FASTElement`.
@@ -75,3 +68,4 @@ export declare const FASTElement: (new () => HTMLElement & FASTElement) & {
75
68
  * @public
76
69
  */
77
70
  export declare function customElement(nameOrDef: string | PartialFASTElementDefinition): (type: Constructable<HTMLElement>) => void;
71
+ export {};
@@ -0,0 +1,157 @@
1
+ import { Constructable } from "./interfaces.js";
2
+ /**
3
+ * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.
4
+ * @public
5
+ */
6
+ export declare type Context<T> = {
7
+ readonly name: string;
8
+ readonly initialValue?: T;
9
+ };
10
+ /**
11
+ * A constant key that can be used to represent a Context dependency.
12
+ * The key can be used for context or DI but also doubles as a decorator for
13
+ * resolving the associated dependency.
14
+ * @beta
15
+ */
16
+ export declare type ContextDecorator<T = any> = Readonly<Context<T>> & PropertyDecorator & ParameterDecorator;
17
+ /**
18
+ * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.
19
+ * The FASTContext can also be used as a decorator to declare context dependencies or as a key for DI.
20
+ * @beta
21
+ */
22
+ export declare type FASTContext<T> = ContextDecorator<T> & {
23
+ get(target: EventTarget): T;
24
+ provide(target: EventTarget, value: T): void;
25
+ request(target: EventTarget, callback: ContextCallback<T>, multiple?: boolean): void;
26
+ handle(target: EventTarget, callback: (event: ContextEvent<FASTContext<T>>) => void): any;
27
+ };
28
+ /**
29
+ * A strategy that controls how all Context.request API calls are handled.
30
+ * @remarks
31
+ * By default this is handled via Context.dispatch, which dispatched a ContextEvent.
32
+ * @beta
33
+ */
34
+ export declare type FASTContextRequestStrategy = <T extends UnknownContext>(target: EventTarget, context: T, callback: ContextCallback<ContextType<T>>, multiple: any) => void;
35
+ declare const contextEventType = "context-request";
36
+ /**
37
+ * Enables using the {@link https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md | W3C Community Context protocol.}
38
+ * @beta
39
+ */
40
+ export declare const Context: Readonly<{
41
+ /**
42
+ * The event type used for W3C Context Protocol requests.
43
+ */
44
+ eventType: "context-request";
45
+ /**
46
+ * Creates a W3C Community Protocol-based Context object to use in requesting/providing
47
+ * context through the DOM.
48
+ * @param name - The name to use for the connext. Useful in debugging.
49
+ * @param initialValue - An optional initial value to use if a context handler isn't found.
50
+ */
51
+ create<T = unknown>(name: string, initialValue?: T | undefined): FASTContext<T>;
52
+ /**
53
+ * Sets the strategy used by all FAST-specific context requests made through the
54
+ * Context.request, Context.get, Context.defineProperty, and ContextDecorator APIs.
55
+ * @param strategy - The strategy to use. By default, the strategy is Context.dispatch.
56
+ */
57
+ setDefaultRequestStrategy(strategy: FASTContextRequestStrategy): void;
58
+ /**
59
+ * Gets the context value for the target node or returns the initial value if
60
+ * a context handler is not found.
61
+ * @param target - The target to get the context for.
62
+ * @param context - The context to locate.
63
+ * @returns The context value.
64
+ * @remarks
65
+ * Uses the default request strategy to locate the context. If no context is found
66
+ * then the initial value of the context is returned.
67
+ */
68
+ get<T_1 extends UnknownContext>(target: EventTarget, context: T_1): ContextType<T_1>;
69
+ /**
70
+ * Requests the context value for the target node.
71
+ * @param target - The target to request the context for.
72
+ * @param context - The context to locate.
73
+ * @param callback - A callback to invoke with the context value.
74
+ * @param multiple - Whether the context requestor expects to handle updates
75
+ * to the context value after the initial request.
76
+ * @remarks
77
+ * Uses the default request strategy to locate the context.
78
+ */
79
+ request<T_2 extends UnknownContext>(target: EventTarget, context: T_2, callback: ContextCallback<ContextType<T_2>>, multiple?: boolean): void;
80
+ /**
81
+ *
82
+ * @param target - The target to dispatch the context event on.
83
+ * @param context - The context to locate.
84
+ * @param callback - The callback to invoke with the context value.
85
+ * @param multiple - Whether the context requestor expects to handle updates
86
+ * to the context value after the initial request.
87
+ * @remarks
88
+ * This API does NOT use the default request strategy. It always dispatches
89
+ * an event through the DOM.
90
+ */
91
+ dispatch<T_3 extends UnknownContext>(target: EventTarget, context: T_3, callback: ContextCallback<ContextType<T_3>>, multiple?: boolean): void;
92
+ provide<T_4 extends UnknownContext>(target: EventTarget, context: T_4, value: ContextType<T_4>): void;
93
+ /**
94
+ *
95
+ * @param target - The target on which to handle context requests.
96
+ * @param callback - The callback to invoke when a context request is received.
97
+ * @param context - The context to handle requests for.
98
+ * @remarks
99
+ * If a context is not provided then the callback will be invoked for all context
100
+ * requests that are received on the target.
101
+ */
102
+ handle<T_5 extends UnknownContext>(target: EventTarget, callback: (event: ContextEvent<T_5>) => void, context?: T_5 | undefined): void;
103
+ /**
104
+ * Defines a getter-only property on the target that will return the context
105
+ * value for the target.
106
+ * @param target The target to define the property on.
107
+ * @param propertyName The name of the property to define.
108
+ * @param context The context that will be used to retrieve the property value.
109
+ * @remarks
110
+ * Uses the default request strategy to locate the context and will return the
111
+ * initialValue if the context isn't handled.
112
+ */
113
+ defineProperty<T_6 extends UnknownContext>(target: Constructable<EventTarget> | EventTarget, propertyName: string, context: T_6): void;
114
+ }>;
115
+ /**
116
+ * An unknown context type.
117
+ * @public
118
+ */
119
+ export declare type UnknownContext = Context<unknown>;
120
+ /**
121
+ * A helper type which can extract a Context value type from a Context type
122
+ * @public
123
+ */
124
+ export declare type ContextType<T extends UnknownContext> = T extends Context<infer Y> ? Y : never;
125
+ /**
126
+ * A callback which is provided by a context requester and is called with the value satisfying the request.
127
+ * This callback can be called multiple times by context providers as the requested value is changed.
128
+ * @public
129
+ */
130
+ export declare type ContextCallback<ValueType> = (value: ValueType, dispose?: () => void) => void;
131
+ /**
132
+ * An event fired by a context requester to signal it desires a named context.
133
+ *
134
+ * A provider should inspect the `context` property of the event to determine if it has a value that can
135
+ * satisfy the request, calling the `callback` with the requested value if so.
136
+ *
137
+ * If the requested context event contains a truthy `multiple` value, then a provider can call the callback
138
+ * multiple times if the value is changed, if this is the case the provider should pass a `dispose`
139
+ * method to the callback which requesters can invoke to indicate they no longer wish to receive these updates.
140
+ * @public
141
+ */
142
+ export declare class ContextEvent<T extends UnknownContext> extends Event {
143
+ readonly context: T;
144
+ readonly callback: ContextCallback<ContextType<T>>;
145
+ readonly multiple?: boolean | undefined;
146
+ constructor(context: T, callback: ContextCallback<ContextType<T>>, multiple?: boolean | undefined);
147
+ }
148
+ declare global {
149
+ interface HTMLElementEventMap {
150
+ /**
151
+ * A 'context-request' event can be emitted by any element which desires
152
+ * a context value to be injected by an external provider.
153
+ */
154
+ [contextEventType]: ContextEvent<UnknownContext>;
155
+ }
156
+ }
157
+ export {};