@microsoft/fast-element 2.0.0-beta.2 → 2.0.0-beta.20

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 (113) hide show
  1. package/CHANGELOG.json +488 -0
  2. package/CHANGELOG.md +180 -1
  3. package/dist/dts/components/attributes.d.ts +15 -0
  4. package/dist/dts/components/{controller.d.ts → element-controller.d.ts} +74 -28
  5. package/dist/dts/components/fast-definitions.d.ts +41 -9
  6. package/dist/dts/components/fast-element.d.ts +14 -26
  7. package/dist/dts/components/hydration.d.ts +14 -0
  8. package/dist/{esm/observation/behavior.js → dts/components/install-hydration.d.ts} +0 -0
  9. package/dist/dts/context.d.ts +1 -1
  10. package/dist/dts/di/di.d.ts +894 -0
  11. package/dist/dts/dom-policy.d.ts +68 -0
  12. package/dist/dts/dom.d.ts +100 -0
  13. package/dist/dts/index.d.ts +5 -4
  14. package/dist/dts/index.rollup.d.ts +0 -1
  15. package/dist/dts/index.rollup.debug.d.ts +0 -1
  16. package/dist/dts/interfaces.d.ts +60 -79
  17. package/dist/dts/observation/observable.d.ts +99 -54
  18. package/dist/dts/pending-task.d.ts +20 -0
  19. package/dist/dts/platform.d.ts +7 -0
  20. package/dist/dts/polyfills.d.ts +0 -8
  21. package/dist/dts/state/exports.d.ts +3 -0
  22. package/dist/dts/state/reactive.d.ts +8 -0
  23. package/dist/dts/state/state.d.ts +141 -0
  24. package/dist/dts/state/visitor.d.ts +6 -0
  25. package/dist/dts/state/watch.d.ts +10 -0
  26. package/dist/dts/styles/css-directive.d.ts +2 -2
  27. package/dist/dts/styles/css.d.ts +0 -5
  28. package/dist/dts/styles/element-styles.d.ts +10 -17
  29. package/dist/dts/styles/host.d.ts +68 -0
  30. package/dist/dts/styles/style-strategy.d.ts +42 -0
  31. package/dist/dts/templating/binding-signal.d.ts +12 -27
  32. package/dist/dts/templating/binding-two-way.d.ts +22 -37
  33. package/dist/dts/templating/binding.d.ts +76 -208
  34. package/dist/dts/templating/children.d.ts +1 -1
  35. package/dist/dts/templating/compiler.d.ts +11 -13
  36. package/dist/dts/templating/html-directive.d.ts +91 -97
  37. package/dist/dts/templating/node-observation.d.ts +15 -6
  38. package/dist/dts/templating/ref.d.ts +7 -11
  39. package/dist/dts/templating/render.d.ts +296 -0
  40. package/dist/dts/templating/repeat.d.ts +23 -34
  41. package/dist/dts/templating/slotted.d.ts +1 -1
  42. package/dist/dts/templating/template.d.ts +92 -14
  43. package/dist/dts/templating/view.d.ts +81 -11
  44. package/dist/dts/templating/when.d.ts +3 -3
  45. package/dist/dts/testing/exports.d.ts +3 -0
  46. package/dist/dts/testing/fakes.d.ts +14 -0
  47. package/dist/dts/testing/fixture.d.ts +84 -0
  48. package/dist/dts/testing/timeout.d.ts +7 -0
  49. package/dist/dts/utilities.d.ts +53 -18
  50. package/dist/esm/components/attributes.js +28 -5
  51. package/dist/esm/components/{controller.js → element-controller.js} +239 -137
  52. package/dist/esm/components/fast-definitions.js +38 -30
  53. package/dist/esm/components/fast-element.js +27 -16
  54. package/dist/esm/components/hydration.js +35 -0
  55. package/dist/esm/components/install-hydration.js +2 -0
  56. package/dist/esm/context.js +5 -1
  57. package/dist/esm/debug.js +40 -5
  58. package/dist/esm/di/di.js +1430 -0
  59. package/dist/esm/dom-policy.js +337 -0
  60. package/dist/esm/dom.js +101 -0
  61. package/dist/esm/index.js +4 -2
  62. package/dist/esm/index.rollup.debug.js +3 -1
  63. package/dist/esm/index.rollup.js +3 -1
  64. package/dist/esm/interfaces.js +52 -0
  65. package/dist/esm/observation/arrays.js +303 -2
  66. package/dist/esm/observation/observable.js +88 -142
  67. package/dist/esm/observation/update-queue.js +2 -2
  68. package/dist/esm/pending-task.js +16 -0
  69. package/dist/esm/platform.js +27 -2
  70. package/dist/esm/polyfills.js +3 -61
  71. package/dist/esm/state/exports.js +3 -0
  72. package/dist/esm/state/reactive.js +34 -0
  73. package/dist/esm/state/state.js +148 -0
  74. package/dist/esm/state/visitor.js +28 -0
  75. package/dist/esm/state/watch.js +36 -0
  76. package/dist/esm/styles/css.js +4 -9
  77. package/dist/esm/styles/element-styles.js +14 -33
  78. package/dist/esm/styles/host.js +1 -0
  79. package/dist/esm/styles/style-strategy.js +1 -0
  80. package/dist/esm/templating/binding-signal.js +67 -62
  81. package/dist/esm/templating/binding-two-way.js +72 -39
  82. package/dist/esm/templating/binding.js +142 -286
  83. package/dist/esm/templating/children.js +8 -4
  84. package/dist/esm/templating/compiler.js +59 -43
  85. package/dist/esm/templating/html-directive.js +56 -75
  86. package/dist/esm/templating/node-observation.js +20 -13
  87. package/dist/esm/templating/ref.js +4 -12
  88. package/dist/esm/templating/render.js +402 -0
  89. package/dist/esm/templating/repeat.js +88 -75
  90. package/dist/esm/templating/template.js +132 -60
  91. package/dist/esm/templating/view.js +113 -29
  92. package/dist/esm/templating/when.js +5 -4
  93. package/dist/esm/testing/exports.js +3 -0
  94. package/dist/esm/testing/fakes.js +107 -0
  95. package/dist/esm/testing/fixture.js +86 -0
  96. package/dist/esm/testing/timeout.js +24 -0
  97. package/dist/esm/utilities.js +95 -95
  98. package/dist/fast-element.api.json +9487 -8326
  99. package/dist/fast-element.d.ts +847 -644
  100. package/dist/fast-element.debug.js +1993 -1166
  101. package/dist/fast-element.debug.min.js +1 -1
  102. package/dist/fast-element.js +1903 -1111
  103. package/dist/fast-element.min.js +1 -1
  104. package/dist/fast-element.untrimmed.d.ts +911 -701
  105. package/docs/api-report.md +329 -252
  106. package/package.json +38 -16
  107. package/dist/dts/hooks.d.ts +0 -20
  108. package/dist/dts/observation/behavior.d.ts +0 -19
  109. package/dist/dts/observation/splice-strategies.d.ts +0 -13
  110. package/dist/dts/templating/dom.d.ts +0 -41
  111. package/dist/esm/hooks.js +0 -32
  112. package/dist/esm/observation/splice-strategies.js +0 -400
  113. package/dist/esm/templating/dom.js +0 -49
@@ -1,220 +1,51 @@
1
- import { Binding, BindingObserver, ExecutionContext } from "../observation/observable.js";
2
- import { AddViewBehaviorFactory, Aspect, Aspected, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewBehaviorTargets } from "./html-directive.js";
3
- import type { CaptureType } from "./template.js";
1
+ import { ExecutionContext, Expression, ExpressionObserver } from "../observation/observable.js";
2
+ import { DOMAspect, DOMPolicy } from "../dom.js";
3
+ import { AddViewBehaviorFactory, Aspected, Binding, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
4
4
  /**
5
- * Describes how aspects of an HTML element will be affected by bindings.
5
+ * A simple View that can be interpolated into HTML content.
6
6
  * @public
7
7
  */
8
- export declare type BindingMode = Record<Aspect, (directive: HTMLBindingDirective) => Pick<ViewBehaviorFactory, "createBehavior">>;
9
- /**
10
- * Describes how aspects of an HTML element will be affected by bindings.
11
- * @public
12
- */
13
- export declare const BindingMode: Readonly<{
14
- /**
15
- * Creates a binding mode based on the supplied behavior types.
16
- * @param UpdateType - The base behavior type used to update aspects.
17
- * @param EventType - The base behavior type used to respond to events.
18
- * @returns A new binding mode.
19
- */
20
- define(UpdateType: typeof UpdateBinding, EventType?: typeof EventBinding): BindingMode;
21
- }>;
22
- /**
23
- * Describes the configuration for a binding expression.
24
- * @public
25
- */
26
- export interface BindingConfig<T = any> {
27
- /**
28
- * The binding mode to configure the binding with.
29
- */
30
- mode: BindingMode;
31
- /**
32
- * Options to be supplied to the binding behaviors.
33
- */
34
- options: T;
35
- }
36
- /**
37
- * Creates a new binding configuration based on the supplied options.
38
- * @public
39
- */
40
- export declare type BindingConfigResolver<T> = (options: T) => BindingConfig<T>;
41
- /**
42
- * Describes the configuration for a binding expression.
43
- * @public
44
- */
45
- export declare const BindingConfig: Readonly<{
46
- /**
47
- * Creates a binding configuration based on the provided mode and options.
48
- * @param mode - The mode to use for the configuration.
49
- * @param defaultOptions - The default options to use for the configuration.
50
- * @returns A new binding configuration.
51
- */
52
- define<T>(mode: BindingMode, defaultOptions: T): BindingConfig<T> & BindingConfigResolver<T>;
53
- }>;
54
- /**
55
- * The "this" context for an update target function.
56
- * @public
57
- */
58
- export interface UpdateTargetThis {
59
- /**
60
- * The directive configuration for the update.
61
- */
62
- directive: HTMLBindingDirective;
63
- }
64
- /**
65
- * A target update function.
66
- * @param this - The "this" context for the update.
67
- * @param target - The node that is targeted by the update.
68
- * @param aspect - The aspect of the node that is being targeted.
69
- * @param value - The value to assign to the aspect.
70
- * @param source - The source object that the value was derived from.
71
- * @param context - The execution context that the binding is being run under.
72
- * @public
73
- */
74
- export declare type UpdateTarget = (this: UpdateTargetThis, target: Node, aspect: string, value: any, source: any, context: ExecutionContext) => void;
75
- /**
76
- * A base binding behavior for DOM updates.
77
- * @public
78
- */
79
- export declare class UpdateBinding implements ViewBehavior {
80
- readonly directive: HTMLBindingDirective;
81
- protected updateTarget: UpdateTarget;
82
- /**
83
- * Creates an instance of UpdateBinding.
84
- * @param directive - The directive that has the configuration for this behavior.
85
- * @param updateTarget - The function used to update the target with the latest value.
86
- */
87
- constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget);
88
- /**
89
- * Bind this behavior to the source.
90
- * @param source - The source to bind to.
91
- * @param context - The execution context that the binding is operating within.
92
- * @param targets - The targets that behaviors in a view can attach to.
93
- */
94
- bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
95
- /**
96
- * Unbinds this behavior from the source.
97
- * @param source - The source to unbind from.
98
- * @param context - The execution context that the binding is operating within.
99
- * @param targets - The targets that behaviors in a view can attach to.
100
- */
101
- unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
102
- /**
103
- * Creates a behavior.
104
- * @param targets - The targets available for behaviors to be attached to.
105
- */
106
- createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
107
- }
108
- /**
109
- * A binding behavior for one-time bindings.
110
- * @public
111
- */
112
- export declare class OneTimeBinding extends UpdateBinding {
113
- /**
114
- * Bind this behavior to the source.
115
- * @param source - The source to bind to.
116
- * @param context - The execution context that the binding is operating within.
117
- * @param targets - The targets that behaviors in a view can attach to.
118
- */
119
- bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
120
- }
121
- /**
122
- * A binding behavior for bindings that change.
123
- * @public
124
- */
125
- export declare class ChangeBinding extends UpdateBinding {
126
- private isBindingVolatile;
127
- private observerProperty;
8
+ export interface ContentView {
9
+ readonly context: ExecutionContext;
128
10
  /**
129
- * Creates an instance of ChangeBinding.
130
- * @param directive - The directive that has the configuration for this behavior.
131
- * @param updateTarget - The function used to update the target with the latest value.
11
+ * Binds a view's behaviors to its binding source.
12
+ * @param source - The binding source for the view's binding behaviors.
13
+ * @param context - The execution context to run the view within.
132
14
  */
133
- constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget);
15
+ bind(source: any, context?: ExecutionContext): void;
134
16
  /**
135
- * Returns the binding observer used to update the node.
136
- * @param target - The target node.
137
- * @returns A BindingObserver.
17
+ * Unbinds a view's behaviors from its binding source and context.
138
18
  */
139
- protected getObserver(target: Node): BindingObserver;
19
+ unbind(): void;
140
20
  /**
141
- * Bind this behavior to the source.
142
- * @param source - The source to bind to.
143
- * @param context - The execution context that the binding is operating within.
144
- * @param targets - The targets that behaviors in a view can attach to.
21
+ * Inserts the view's DOM nodes before the referenced node.
22
+ * @param node - The node to insert the view's DOM before.
145
23
  */
146
- bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
24
+ insertBefore(node: Node): void;
147
25
  /**
148
- * Unbinds this behavior from the source.
149
- * @param source - The source to unbind from.
150
- * @param context - The execution context that the binding is operating within.
151
- * @param targets - The targets that behaviors in a view can attach to.
26
+ * Removes the view's DOM nodes.
27
+ * The nodes are not disposed and the view can later be re-inserted.
152
28
  */
153
- unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
154
- /** @internal */
155
- handleChange(binding: Binding, observer: BindingObserver): void;
29
+ remove(): void;
156
30
  }
157
31
  /**
158
- * A binding behavior for handling events.
32
+ * A simple template that can create ContentView instances.
159
33
  * @public
160
34
  */
161
- export declare class EventBinding {
162
- readonly directive: HTMLBindingDirective;
163
- private contextProperty;
164
- private sourceProperty;
165
- /**
166
- * Creates an instance of EventBinding.
167
- * @param directive - The directive that has the configuration for this behavior.
168
- */
169
- constructor(directive: HTMLBindingDirective);
170
- /**
171
- * Bind this behavior to the source.
172
- * @param source - The source to bind to.
173
- * @param context - The execution context that the binding is operating within.
174
- * @param targets - The targets that behaviors in a view can attach to.
175
- */
176
- bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
35
+ export interface ContentTemplate {
177
36
  /**
178
- * Unbinds this behavior from the source.
179
- * @param source - The source to unbind from.
180
- * @param context - The execution context that the binding is operating within.
181
- * @param targets - The targets that behaviors in a view can attach to.
37
+ * Creates a simple content view instance.
182
38
  */
183
- unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
184
- /**
185
- * Creates a behavior.
186
- * @param targets - The targets available for behaviors to be attached to.
187
- */
188
- createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
189
- /**
190
- * @internal
191
- */
192
- handleEvent(event: Event): void;
39
+ create(): ContentView;
193
40
  }
194
- /**
195
- * The default binding options.
196
- * @public
197
- */
198
- export declare type DefaultBindingOptions = AddEventListenerOptions;
199
- /**
200
- * The default onChange binding configuration.
201
- * @public
202
- */
203
- export declare const onChange: BindingConfig<AddEventListenerOptions> & BindingConfigResolver<AddEventListenerOptions>;
204
- /**
205
- * The default onTime binding configuration.
206
- * @public
207
- */
208
- export declare const oneTime: BindingConfig<AddEventListenerOptions> & BindingConfigResolver<AddEventListenerOptions>;
209
41
  /**
210
42
  * A directive that applies bindings.
211
43
  * @public
212
44
  */
213
- export declare class HTMLBindingDirective implements HTMLDirective, ViewBehaviorFactory, Aspected {
214
- binding: Binding;
215
- mode: BindingMode;
216
- options: any;
217
- private factory;
45
+ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehaviorFactory, ViewBehavior, Aspected {
46
+ dataBinding: Binding;
47
+ private data;
48
+ private updateTarget;
218
49
  /**
219
50
  * The unique id of the factory.
220
51
  */
@@ -222,7 +53,15 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
222
53
  /**
223
54
  * The structural id of the DOM node to which the created behavior will apply.
224
55
  */
225
- nodeId: string;
56
+ targetNodeId: string;
57
+ /**
58
+ * The tagname associated with the target node.
59
+ */
60
+ targetTagName: string | null;
61
+ /**
62
+ * The policy that the created behavior must run under.
63
+ */
64
+ policy: DOMPolicy;
226
65
  /**
227
66
  * The original source aspect exactly as represented in markup.
228
67
  */
@@ -234,14 +73,12 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
234
73
  /**
235
74
  * The type of aspect to target.
236
75
  */
237
- aspectType: Aspect;
76
+ aspectType: DOMAspect;
238
77
  /**
239
78
  * Creates an instance of HTMLBindingDirective.
240
- * @param binding - The binding to apply.
241
- * @param mode - The binding mode to use when applying the binding.
242
- * @param options - The options to configure the binding with.
79
+ * @param dataBinding - The binding configuration to apply.
243
80
  */
244
- constructor(binding: Binding, mode: BindingMode, options: any);
81
+ constructor(dataBinding: Binding);
245
82
  /**
246
83
  * Creates HTML to be used within a template.
247
84
  * @param add - Can be used to add behavior factories to a template.
@@ -249,15 +86,46 @@ export declare class HTMLBindingDirective implements HTMLDirective, ViewBehavior
249
86
  createHTML(add: AddViewBehaviorFactory): string;
250
87
  /**
251
88
  * Creates a behavior.
252
- * @param targets - The targets available for behaviors to be attached to.
253
89
  */
254
- createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
90
+ createBehavior(): ViewBehavior;
91
+ /** @internal */
92
+ bind(controller: ViewController): void;
93
+ /** @internal */
94
+ unbind(controller: ViewController): void;
95
+ /** @internal */
96
+ handleEvent(event: Event): void;
97
+ /** @internal */
98
+ handleChange(binding: Expression, observer: ExpressionObserver): void;
255
99
  }
256
100
  /**
257
- * Creates a binding directive with the specified configuration.
258
- * @param binding - The binding expression.
259
- * @param config - The binding configuration.
260
- * @returns A binding directive.
101
+ * Creates an standard binding.
102
+ * @param expression - The binding to refresh when changed.
103
+ * @param policy - The security policy to associate with th binding.
104
+ * @param isVolatile - Indicates whether the binding is volatile or not.
105
+ * @returns A binding configuration.
106
+ * @public
107
+ */
108
+ export declare function bind<T = any>(expression: Expression<T>, policy?: DOMPolicy, isVolatile?: boolean): Binding<T>;
109
+ /**
110
+ * Creates a one time binding
111
+ * @param expression - The binding to refresh when signaled.
112
+ * @param policy - The security policy to associate with th binding.
113
+ * @returns A binding configuration.
114
+ * @public
115
+ */
116
+ export declare function oneTime<T = any>(expression: Expression<T>, policy?: DOMPolicy): Binding<T>;
117
+ /**
118
+ * Creates an event listener binding.
119
+ * @param expression - The binding to invoke when the event is raised.
120
+ * @param options - Event listener options.
121
+ * @returns A binding configuration.
122
+ * @public
123
+ */
124
+ export declare function listener<T = any>(expression: Expression<T>, options?: AddEventListenerOptions): Binding<T>;
125
+ /**
126
+ * Normalizes the input value into a binding.
127
+ * @param value - The value to create the default binding for.
128
+ * @returns A binding configuration for the provided value.
261
129
  * @public
262
130
  */
263
- export declare function bind<T = any>(binding: Binding<T>, config?: BindingConfig | DefaultBindingOptions): CaptureType<T>;
131
+ export declare function normalizeBinding<TSource = any, TReturn = any, TParent = any>(value: Expression<TSource, TReturn, TParent> | Binding<TSource, TReturn, TParent> | {}): Binding<TSource, TReturn, TParent>;
@@ -60,4 +60,4 @@ export declare class ChildrenDirective extends NodeObservationDirective<Children
60
60
  * @param propertyOrOptions - The options used to configure child node observation.
61
61
  * @public
62
62
  */
63
- export declare function children<T = any>(propertyOrOptions: (keyof T & string) | ChildrenDirectiveOptions<keyof T & string>): CaptureType<T>;
63
+ export declare function children<TSource = any, TParent = any>(propertyOrOptions: (keyof TSource & string) | ChildrenDirectiveOptions<keyof TSource & string>): CaptureType<TSource, TParent>;
@@ -1,4 +1,4 @@
1
- import { TrustedTypesPolicy } from "../interfaces.js";
1
+ import { DOMPolicy } from "../dom.js";
2
2
  import { ViewBehaviorFactory } from "./html-directive.js";
3
3
  import type { HTMLTemplateCompilationResult as TemplateCompilationResult } from "./template.js";
4
4
  /**
@@ -14,32 +14,29 @@ html: string | HTMLTemplateElement,
14
14
  /**
15
15
  * The behavior factories used within the html that is being compiled.
16
16
  */
17
- factories: Record<string, ViewBehaviorFactory>) => TemplateCompilationResult;
17
+ factories: Record<string, ViewBehaviorFactory>,
18
+ /**
19
+ * The security policy to compile the html with.
20
+ */
21
+ policy: DOMPolicy) => TemplateCompilationResult;
18
22
  /**
19
23
  * Common APIs related to compilation.
20
24
  * @public
21
25
  */
22
26
  export declare const Compiler: {
23
- /**
24
- * Sets the HTML trusted types policy used by the compiler.
25
- * @param policy - The policy to set for HTML.
26
- * @remarks
27
- * This API can only be called once, for security reasons. It should be
28
- * called by the application developer at the start of their program.
29
- */
30
- setHTMLPolicy(policy: TrustedTypesPolicy): void;
31
27
  /**
32
28
  * Compiles a template and associated directives into a compilation
33
29
  * result which can be used to create views.
34
30
  * @param html - The html string or template element to compile.
35
- * @param directives - The directives referenced by the template.
31
+ * @param factories - The behavior factories referenced by the template.
32
+ * @param policy - The security policy to compile the html with.
36
33
  * @remarks
37
34
  * The template that is provided for compilation is altered in-place
38
35
  * and cannot be compiled again. If the original template must be preserved,
39
36
  * it is recommended that you clone the original and pass the clone to this API.
40
37
  * @public
41
38
  */
42
- compile<TSource = any, TParent = any>(html: string | HTMLTemplateElement, directives: Record<string, ViewBehaviorFactory>): TemplateCompilationResult<TSource, TParent>;
39
+ compile<TSource = any, TParent = any>(html: string | HTMLTemplateElement, factories: Record<string, ViewBehaviorFactory>, policy?: DOMPolicy): TemplateCompilationResult<TSource, TParent>;
43
40
  /**
44
41
  * Sets the default compilation strategy that will be used by the ViewTemplate whenever
45
42
  * it needs to compile a view preprocessed with the html template function.
@@ -50,7 +47,8 @@ export declare const Compiler: {
50
47
  * Aggregates an array of strings and directives into a single directive.
51
48
  * @param parts - A heterogeneous array of static strings interspersed with
52
49
  * directives.
50
+ * @param policy - The security policy to use with the aggregated bindings.
53
51
  * @returns A single inline directive that aggregates the behavior of all the parts.
54
52
  */
55
- aggregate(parts: (string | ViewBehaviorFactory)[]): ViewBehaviorFactory;
53
+ aggregate(parts: (string | ViewBehaviorFactory)[], policy?: DOMPolicy): ViewBehaviorFactory;
56
54
  };
@@ -1,6 +1,7 @@
1
- import type { Constructable } from "../interfaces.js";
2
- import type { Behavior } from "../observation/behavior.js";
3
- import type { Binding, ExecutionContext } from "../observation/observable.js";
1
+ import { DOMAspect, DOMPolicy } from "../dom.js";
2
+ import { Constructable } from "../interfaces.js";
3
+ import type { Subscriber } from "../observation/notifier.js";
4
+ import type { Expression, ExpressionController, ExpressionObserver } from "../observation/observable.js";
4
5
  /**
5
6
  * The target nodes available to a behavior.
6
7
  * @public
@@ -9,27 +10,28 @@ export declare type ViewBehaviorTargets = {
9
10
  [id: string]: Node;
10
11
  };
11
12
  /**
12
- * Represents an object that can contribute behavior to a view.
13
+ * Controls the lifecycle of a view and provides relevant context.
13
14
  * @public
14
15
  */
15
- export interface ViewBehavior<TSource = any, TParent = any> {
16
+ export interface ViewController<TSource = any, TParent = any> extends ExpressionController<TSource, TParent> {
16
17
  /**
17
- * Bind this behavior to the source.
18
- * @param source - The source to bind to.
19
- * @param context - The execution context that the binding is operating within.
20
- * @param targets - The targets that behaviors in a view can attach to.
18
+ * The parts of the view that are targeted by view behaviors.
21
19
  */
22
- bind(source: TSource, context: ExecutionContext<TParent>, targets: ViewBehaviorTargets): void;
20
+ readonly targets: ViewBehaviorTargets;
21
+ }
22
+ /**
23
+ * Represents an object that can contribute behavior to a view.
24
+ * @public
25
+ */
26
+ export interface ViewBehavior<TSource = any, TParent = any> {
23
27
  /**
24
- * Unbinds this behavior from the source.
25
- * @param source - The source to unbind from.
26
- * @param context - The execution context that the binding is operating within.
27
- * @param targets - The targets that behaviors in a view can attach to.
28
+ * Bind this behavior.
29
+ * @param controller - The view controller that manages the lifecycle of this behavior.
28
30
  */
29
- unbind(source: TSource, context: ExecutionContext<TParent>, targets: ViewBehaviorTargets): void;
31
+ bind(controller: ViewController<TSource, TParent>): void;
30
32
  }
31
33
  /**
32
- * A factory that can create a {@link Behavior} associated with a particular
34
+ * A factory that can create a {@link ViewBehavior} associated with a particular
33
35
  * location within a DOM fragment.
34
36
  * @public
35
37
  */
@@ -37,17 +39,29 @@ export interface ViewBehaviorFactory {
37
39
  /**
38
40
  * The unique id of the factory.
39
41
  */
40
- id: string;
42
+ id?: string;
41
43
  /**
42
44
  * The structural id of the DOM node to which the created behavior will apply.
43
45
  */
44
- nodeId: string;
46
+ targetNodeId?: string;
47
+ /**
48
+ * The tag name of the DOM node to which the created behavior will apply.
49
+ */
50
+ targetTagName?: string | null;
51
+ /**
52
+ * The policy that the created behavior must run under.
53
+ */
54
+ policy?: DOMPolicy;
45
55
  /**
46
56
  * Creates a behavior.
47
- * @param targets - The targets available for behaviors to be attached to.
48
57
  */
49
- createBehavior(targets: ViewBehaviorTargets): Behavior | ViewBehavior;
58
+ createBehavior(): ViewBehavior;
50
59
  }
60
+ /**
61
+ * Represents a ViewBehaviorFactory after the compilation process has completed.
62
+ * @public
63
+ */
64
+ export declare type CompiledViewBehaviorFactory = Required<ViewBehaviorFactory>;
51
65
  /**
52
66
  * Used to add behavior factories when constructing templates.
53
67
  * @public
@@ -64,6 +78,28 @@ export interface HTMLDirective {
64
78
  */
65
79
  createHTML(add: AddViewBehaviorFactory): string;
66
80
  }
81
+ /**
82
+ * Represents something that applies to a specific aspect of the DOM.
83
+ * @public
84
+ */
85
+ export interface Aspected {
86
+ /**
87
+ * The original source aspect exactly as represented in markup.
88
+ */
89
+ sourceAspect: string;
90
+ /**
91
+ * The evaluated target aspect, determined after processing the source.
92
+ */
93
+ targetAspect: string;
94
+ /**
95
+ * The type of aspect to target.
96
+ */
97
+ aspectType: DOMAspect;
98
+ /**
99
+ * A binding if one is associated with the aspect.
100
+ */
101
+ dataBinding?: Binding;
102
+ }
67
103
  /**
68
104
  * Represents metadata configuration for an HTMLDirective.
69
105
  * @public
@@ -106,104 +142,64 @@ export declare const HTMLDirective: Readonly<{
106
142
  * @param options - Options that specify the directive's application.
107
143
  */
108
144
  define<TType extends Constructable<HTMLDirective>>(type: TType, options?: PartialHTMLDirectiveDefinition): TType;
109
- }>;
110
- /**
111
- * Decorator: Defines an HTMLDirective.
112
- * @param options - Provides options that specify the directive's application.
113
- * @public
114
- */
115
- export declare function htmlDirective(options?: PartialHTMLDirectiveDefinition): (type: Constructable<HTMLDirective>) => void;
116
- /**
117
- * The type of HTML aspect to target.
118
- * @public
119
- */
120
- export declare const Aspect: Readonly<{
121
- /**
122
- * Not aspected.
123
- */
124
- readonly none: 0;
125
- /**
126
- * An attribute.
127
- */
128
- readonly attribute: 1;
129
- /**
130
- * A boolean attribute.
131
- */
132
- readonly booleanAttribute: 2;
133
- /**
134
- * A property.
135
- */
136
- readonly property: 3;
137
- /**
138
- * Content
139
- */
140
- readonly content: 4;
141
- /**
142
- * A token list.
143
- */
144
- readonly tokenList: 5;
145
- /**
146
- * An event.
147
- */
148
- readonly event: 6;
149
145
  /**
150
146
  *
151
147
  * @param directive - The directive to assign the aspect to.
152
148
  * @param value - The value to base the aspect determination on.
149
+ * @remarks
150
+ * If a falsy value is provided, then the content aspect will be assigned.
153
151
  */
154
- readonly assign: (directive: Aspected, value: string) => void;
152
+ assignAspect(directive: Aspected, value?: string): void;
155
153
  }>;
156
154
  /**
157
- * The type of HTML aspect to target.
155
+ * Decorator: Defines an HTMLDirective.
156
+ * @param options - Provides options that specify the directive's application.
158
157
  * @public
159
158
  */
160
- export declare type Aspect = typeof Aspect[Exclude<keyof typeof Aspect, "assign" | "none">];
159
+ export declare function htmlDirective(options?: PartialHTMLDirectiveDefinition): (type: Constructable<HTMLDirective>) => void;
161
160
  /**
162
- * Represents something that applies to a specific aspect of the DOM.
161
+ * Captures a binding expression along with related information and capabilities.
162
+ *
163
163
  * @public
164
164
  */
165
- export interface Aspected {
165
+ export declare abstract class Binding<TSource = any, TReturn = any, TParent = any> {
166
+ evaluate: Expression<TSource, TReturn, TParent>;
167
+ policy?: DOMPolicy | undefined;
168
+ isVolatile: boolean;
166
169
  /**
167
- * The original source aspect exactly as represented in markup.
170
+ * Options associated with the binding.
168
171
  */
169
- sourceAspect: string;
172
+ options?: any;
170
173
  /**
171
- * The evaluated target aspect, determined after processing the source.
174
+ * Creates a binding.
175
+ * @param evaluate - Evaluates the binding.
176
+ * @param policy - The security policy to associate with this binding.
177
+ * @param isVolatile - Indicates whether the binding is volatile.
172
178
  */
173
- targetAspect: string;
179
+ constructor(evaluate: Expression<TSource, TReturn, TParent>, policy?: DOMPolicy | undefined, isVolatile?: boolean);
174
180
  /**
175
- * The type of aspect to target.
176
- */
177
- aspectType: Aspect;
178
- /**
179
- * A binding if one is associated with the aspect.
181
+ * Creates an observer capable of notifying a subscriber when the output of a binding changes.
182
+ * @param directive - The HTML Directive to create the observer for.
183
+ * @param subscriber - The subscriber to changes in the binding.
180
184
  */
181
- binding?: Binding;
185
+ abstract createObserver(directive: HTMLDirective, subscriber: Subscriber): ExpressionObserver<TSource, TReturn, TParent>;
182
186
  }
183
187
  /**
184
188
  * A base class used for attribute directives that don't need internal state.
185
189
  * @public
186
190
  */
187
- export declare abstract class StatelessAttachedAttributeDirective<T> implements HTMLDirective, ViewBehaviorFactory, ViewBehavior {
188
- protected options: T;
191
+ export declare abstract class StatelessAttachedAttributeDirective<TOptions> implements HTMLDirective, ViewBehaviorFactory, ViewBehavior {
192
+ protected options: TOptions;
189
193
  /**
190
- * The unique id of the factory.
194
+ * Opts out of JSON stringification.
195
+ * @internal
191
196
  */
192
- id: string;
193
- /**
194
- * The structural id of the DOM node to which the created behavior will apply.
195
- */
196
- nodeId: string;
197
+ toJSON: () => undefined;
197
198
  /**
198
199
  * Creates an instance of RefDirective.
199
200
  * @param options - The options to use in configuring the directive.
200
201
  */
201
- constructor(options: T);
202
- /**
203
- * Creates a behavior.
204
- * @param targets - The targets available for behaviors to be attached to.
205
- */
206
- createBehavior(targets: ViewBehaviorTargets): ViewBehavior;
202
+ constructor(options: TOptions);
207
203
  /**
208
204
  * Creates a placeholder string based on the directive's index within the template.
209
205
  * @param index - The index of the directive within the template.
@@ -212,15 +208,13 @@ export declare abstract class StatelessAttachedAttributeDirective<T> implements
212
208
  */
213
209
  createHTML(add: AddViewBehaviorFactory): string;
214
210
  /**
215
- * Bind this behavior to the source.
216
- * @param source - The source to bind to.
217
- * @param context - The execution context that the binding is operating within.
218
- * @param targets - The targets that behaviors in a view can attach to.
211
+ * Creates a behavior.
212
+ * @param targets - The targets available for behaviors to be attached to.
219
213
  */
220
- abstract bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
214
+ createBehavior(): ViewBehavior;
221
215
  /**
222
- * Unbinds this behavior from the source.
223
- * @param source - The source to unbind from.
216
+ * Bind this behavior.
217
+ * @param controller - The view controller that manages the lifecycle of this behavior.
224
218
  */
225
- abstract unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
219
+ abstract bind(controller: ViewController): void;
226
220
  }