feat: add two-way binding (#5995)

* feat: add two-way binding * test: add tests for previously created binding modes * test: add tests for two-way bindings * test: add event binding tests * Change files * fix: prevent memory leek in one-time events * fix: prevent clashing state for behaviors on the same node * fix: more internal consistency for binding state * fix: more consistency and prevent internal clobber of directive state Co-authored-by: EisenbergEffect <[email protected]>
microsoft · May 17, 2022 · 49c720c · 49c720c
1 parent ebdfeb9
commit 49c720c
Show file tree

Hide file tree

Showing 7 changed files with 605 additions and 46 deletions.
diff --git a/change/@microsoft-fast-element-812c3a96-4de5-4429-907a-86c354742b82.json b/change/@microsoft-fast-element-812c3a96-4de5-4429-907a-86c354742b82.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add two-way binding",
+  "packageName": "@microsoft/fast-element",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-element/docs/api-report.md b/packages/web-components/fast-element/docs/api-report.md
@@ -148,6 +148,7 @@ export interface CaptureType<TSource> {
 export class ChangeBinding extends UpdateBinding {
     constructor(directive: HTMLBindingDirective, updateTarget: UpdateTarget);
     bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    protected getObserver(target: Node): BindingObserver;
     // @internal (undocumented)
     handleChange(binding: Binding, observer: BindingObserver): void;
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
@@ -284,6 +285,12 @@ export type DecoratorAttributeConfiguration = Omit<AttributeConfiguration, "prop
 // @public
 export type DefaultBindingOptions = AddEventListenerOptions;
 
+// @public
+export type DefaultTwoWayBindingOptions = DefaultBindingOptions & {
+    changeEvent?: string;
+    fromView?: (value: any) => any;
+};
+
 // @public
 export const DOM: Readonly<{
     queueUpdate: (callable: Callable) => void;
@@ -533,6 +540,7 @@ export abstract class NodeObservationDirective<T extends NodeBehaviorOptions> ex
     protected computeNodes(target: any): Node[];
     protected abstract disconnect(target: any): void;
     protected abstract getNodes(target: any): Node[];
+    protected getSource(target: Node): any;
     protected abstract observe(target: any): void;
     unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
     protected updateTarget(source: any, value: ReadonlyArray<any>): void;
@@ -813,6 +821,23 @@ export type TrustedTypesPolicy = {
     createHTML(html: string): string;
 };
 
+// @public
+export const twoWay: BindingConfig<DefaultTwoWayBindingOptions> & BindingConfigResolver<DefaultTwoWayBindingOptions>;
+
+// @public
+export class TwoWayBinding extends ChangeBinding {
+    bind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+    static configure(settings: TwoWaySettings): void;
+    // @internal (undocumented)
+    handleEvent(event: Event): void;
+    unbind(source: any, context: ExecutionContext, targets: ViewBehaviorTargets): void;
+}
+
+// @public
+export interface TwoWaySettings {
+    determineChangeEvent(directive: HTMLBindingDirective, target: HTMLElement): string;
+}
+
 // Warning: (ae-internal-missing-underscore) The name "TypeDefinition" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal