refactor(core): implement two-way instructions (angular#54252)

crisbeto · thePunderWoman · commit 3faf3e23d55b · 2024-02-07T16:36:04.000Z
Adds the implementations of the `twoWayProperty` and `twoWayListener` instructions. PR Close angular#54252
diff --git a/packages/core/src/render3/instructions/listener.ts b/packages/core/src/render3/instructions/listener.ts
@@ -113,7 +113,7 @@ function findExistingListener(
   return null;
 }
 
-function listenerInternal(
+export function listenerInternal(
     tView: TView, lView: LView<{}|null>, renderer: Renderer, tNode: TNode, eventName: string,
     listenerFn: (e?: any) => any, eventTargetResolver?: GlobalTargetResolver): void {
   const isTNodeDirectiveHost = isDirectiveHost(tNode);
diff --git a/packages/core/src/render3/instructions/two_way.ts b/packages/core/src/render3/instructions/two_way.ts
@@ -6,10 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {bindingUpdated} from '../bindings';
 import {SanitizerFn} from '../interfaces/sanitization';
+import {RENDERER} from '../interfaces/view';
+import {isSignal} from '../reactivity/api';
+import {isWritableSignal} from '../reactivity/signal';
+import {getCurrentTNode, getLView, getSelectedTNode, getTView, nextBindingIndex} from '../state';
 
-import {ɵɵlistener} from './listener';
-import {ɵɵproperty} from './property';
+import {listenerInternal} from './listener';
+import {elementPropertyInternal, storePropertyBindingMetadata} from './shared';
 
 
 /**
@@ -27,8 +32,21 @@ import {ɵɵproperty} from './property';
  */
 export function ɵɵtwoWayProperty<T>(
     propName: string, value: T, sanitizer?: SanitizerFn|null): typeof ɵɵtwoWayProperty {
-  // TODO(crisbeto): implement two-way specific logic.
-  ɵɵproperty(propName, value, sanitizer);
+  // TODO(crisbeto): perf impact of re-evaluating this on each change detection?
+  if (isSignal(value)) {
+    value = value() as T;
+  }
+
+  const lView = getLView();
+  const bindingIndex = nextBindingIndex();
+  if (bindingUpdated(lView, bindingIndex, value)) {
+    const tView = getTView();
+    const tNode = getSelectedTNode();
+    elementPropertyInternal(
+        tView, tNode, lView, propName, value, lView[RENDERER], sanitizer, false);
+    ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);
+  }
+
   return ɵɵtwoWayProperty;
 }
 
@@ -41,8 +59,9 @@ export function ɵɵtwoWayProperty<T>(
  * @codeGenApi
  */
 export function ɵɵtwoWayBindingSet<T>(target: unknown, value: T): boolean {
-  // TODO(crisbeto): implement this fully.
-  return false;
+  const canWrite = isWritableSignal(target);
+  canWrite && target.set(value);
+  return canWrite;
 }
 
 /**
@@ -55,6 +74,9 @@ export function ɵɵtwoWayBindingSet<T>(target: unknown, value: T): boolean {
  */
 export function ɵɵtwoWayListener(
     eventName: string, listenerFn: (e?: any) => any): typeof ɵɵtwoWayListener {
-  ɵɵlistener(eventName, listenerFn);
+  const lView = getLView<{}|null>();
+  const tView = getTView();
+  const tNode = getCurrentTNode()!;
+  listenerInternal(tView, lView, lView[RENDERER], tNode, eventName, listenerFn);
   return ɵɵtwoWayListener;
 }
diff --git a/packages/core/src/render3/reactivity/signal.ts b/packages/core/src/render3/reactivity/signal.ts
@@ -8,7 +8,7 @@
 
 import {createSignal, SIGNAL, SignalGetter, SignalNode, signalSetFn, signalUpdateFn} from '@angular/core/primitives/signals';
 
-import {Signal, ValueEqualityFn} from './api';
+import {isSignal, Signal, ValueEqualityFn} from './api';
 
 /**
  * A `Signal` with a value that can be mutated via a setter interface.
@@ -71,3 +71,10 @@ function signalAsReadonlyFn<T>(this: SignalGetter<T>): Signal<T> {
   }
   return node.readonlyFn;
 }
+
+/**
+ * Checks if the given `value` is a writeable signal.
+ */
+export function isWritableSignal(value: unknown): value is WritableSignal<unknown> {
+  return isSignal(value) && typeof (value as any).set === 'function';
+}

Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@ function findExistingListener(`
`113`	`113`	`return null;`
`114`	`114`	`}`
`115`	`115`
`116`		`-function listenerInternal(`
	`116`	`+export function listenerInternal(`
`117`	`117`	`tView: TView, lView: LView<{}\|null>, renderer: Renderer, tNode: TNode, eventName: string,`
`118`	`118`	`listenerFn: (e?: any) => any, eventTargetResolver?: GlobalTargetResolver): void {`
`119`	`119`	`const isTNodeDirectiveHost = isDirectiveHost(tNode);`