refactor(core): expose Binding for easier use of inputBinding (angular#61351)

When passing bindings as arguments or storing them before use in
`createComponent`, it's handy to be able to reference this type.

The current workaround is to use `ReturnType<typeof inputBinding>`.

PR Close angular#61351

Author: hybrist

goldens/public-api/core/index.api.md

@@ -179,6 +179,12 @@ export interface BaseResourceOptions<T, R> {
     params?: () => R;
 }
 
+// @public
+export interface Binding {
+    // (undocumented)
+    readonly [BINDING]: unknown;
+}
+
 // @public
 export function booleanAttribute(value: unknown): boolean;
 

packages/core/src/core.ts

@@ -113,7 +113,7 @@ export {
   afterNextRender,
   ɵFirstAvailable,
 } from './render3/after_render/hooks';
-export {inputBinding, outputBinding, twoWayBinding} from './render3/dynamic_bindings';
+export {Binding, inputBinding, outputBinding, twoWayBinding} from './render3/dynamic_bindings';
 export {ApplicationConfig, mergeApplicationConfig} from './application/application_config';
 export {makeStateKey, StateKey, TransferState} from './transfer_state';
 export {booleanAttribute, numberAttribute} from './util/coercion';

packages/core/src/render3/component_ref.ts

@@ -16,7 +16,7 @@ import {
 import {Injector} from '../di/injector';
 import {EnvironmentInjector} from '../di/r3_injector';
 import {RuntimeError, RuntimeErrorCode} from '../errors';
-import {Type, Writable} from '../interface/type';
+import {Type} from '../interface/type';
 import {
   ComponentFactory as AbstractComponentFactory,
   ComponentRef as AbstractComponentRef,
@@ -80,7 +80,7 @@ import {getComponentLViewByIndex, getTNode} from './util/view_utils';
 import {elementLikeEndFirstCreatePass, elementLikeStartFirstCreatePass} from './view/elements';
 import {ViewRef} from './view_ref';
 import {createLView, createTView, getInitialLViewFlagsFromDef} from './view/construction';
-import {BINDING, Binding, DirectiveWithBindings} from './dynamic_bindings';
+import {BINDING, Binding, BindingInternal, DirectiveWithBindings} from './dynamic_bindings';
 import {NG_REFLECT_ATTRS_FLAG, NG_REFLECT_ATTRS_FLAG_DEFAULT} from '../ng_reflect';
 
 export class ComponentFactoryResolver extends AbstractComponentFactoryResolver {
@@ -375,16 +375,16 @@ function createRootTView(
   let varsToAllocate = 0;
 
   if (componentBindings) {
-    for (const binding of componentBindings) {
+    for (const binding of componentBindings as BindingInternal[]) {
       varsToAllocate += binding[BINDING].requiredVars;
 
       if (binding.create) {
-        (binding as Writable<Binding>).targetIdx = 0;
+        (binding as BindingInternal).targetIdx = 0;
         (creationBindings ??= []).push(binding);
       }
 
       if (binding.update) {
-        (binding as Writable<Binding>).targetIdx = 0;
+        (binding as BindingInternal).targetIdx = 0;
         (updateBindings ??= []).push(binding);
       }
     }
@@ -394,16 +394,16 @@ function createRootTView(
     for (let i = 0; i < directives.length; i++) {
       const directive = directives[i];
       if (typeof directive !== 'function') {
-        for (const binding of directive.bindings) {
+        for (const binding of directive.bindings as BindingInternal[]) {
           varsToAllocate += binding[BINDING].requiredVars;
           const targetDirectiveIdx = i + 1;
           if (binding.create) {
-            (binding as Writable<Binding>).targetIdx = targetDirectiveIdx;
+            (binding as BindingInternal).targetIdx = targetDirectiveIdx;
             (creationBindings ??= []).push(binding);
           }
 
           if (binding.update) {
-            (binding as Writable<Binding>).targetIdx = targetDirectiveIdx;
+            (binding as BindingInternal).targetIdx = targetDirectiveIdx;
             (updateBindings ??= []).push(binding);
           }
         }
@@ -458,21 +458,21 @@ function getRootTViewTemplate(
 
   return (flags) => {
     if (flags & RenderFlags.Create && creationBindings) {
-      for (const binding of creationBindings) {
+      for (const binding of creationBindings as BindingInternal[]) {
         binding.create!();
       }
     }
 
     if (flags & RenderFlags.Update && updateBindings) {
-      for (const binding of updateBindings) {
+      for (const binding of updateBindings as BindingInternal[]) {
         binding.update!();
       }
     }
   };
 }
 
 function isInputBinding(binding: Binding): boolean {
-  const kind = binding[BINDING].kind;
+  const kind = (binding as BindingInternal)[BINDING].kind;
   return kind === 'input' || kind === 'twoWay';
 }
 

packages/core/src/render3/dynamic_bindings.ts

@@ -25,13 +25,17 @@ export const BINDING: unique symbol = /* @__PURE__ */ Symbol('BINDING');
  * For example, `inputBinding('value', () => 123)` creates an input binding.
  */
 export interface Binding {
+  readonly [BINDING]: unknown;
+}
+
+export interface BindingInternal extends Binding {
   readonly [BINDING]: {
     readonly kind: string;
     readonly requiredVars: number;
   };
 
   /** Target index (in a view's registry) to which to apply the binding. */
-  readonly targetIdx?: number;
+  targetIdx?: number;
 
   /** Callback that will be invoked during creation. */
   create?(): void;
@@ -52,8 +56,8 @@ export interface DirectiveWithBindings<T> {
 }
 
 // These are constant between all the bindings so we can reuse the objects.
-const INPUT_BINDING_METADATA: Binding[typeof BINDING] = {kind: 'input', requiredVars: 1};
-const OUTPUT_BINDING_METADATA: Binding[typeof BINDING] = {kind: 'output', requiredVars: 0};
+const INPUT_BINDING_METADATA: BindingInternal[typeof BINDING] = {kind: 'input', requiredVars: 1};
+const OUTPUT_BINDING_METADATA: BindingInternal[typeof BINDING] = {kind: 'output', requiredVars: 0};
 
 // TODO(pk): this is a sketch of an input binding instruction that still needs some cleanups
 // - take an index of a directive on TNode (as matched), review all the index mappings that we need to do
@@ -111,9 +115,9 @@ function inputBindingUpdate(targetDirectiveIdx: number, publicName: string, valu
 export function inputBinding(publicName: string, value: () => unknown): Binding {
   // Note: ideally we would use a class here, but it seems like they
   // don't get tree shaken when constructed by a function like this.
-  const binding: Binding = {
+  const binding: BindingInternal = {
     [BINDING]: INPUT_BINDING_METADATA,
-    update: () => inputBindingUpdate(binding.targetIdx!, publicName, value()),
+    update: () => inputBindingUpdate((binding as BindingInternal).targetIdx!, publicName, value()),
   };
 
   return binding;
@@ -143,7 +147,7 @@ export function inputBinding(publicName: string, value: () => unknown): Binding
 export function outputBinding<T>(eventName: string, listener: (event: T) => unknown): Binding {
   // Note: ideally we would use a class here, but it seems like they
   // don't get tree shaken when constructed by a function like this.
-  const binding: Binding = {
+  const binding: BindingInternal = {
     [BINDING]: OUTPUT_BINDING_METADATA,
     create: () => {
       const lView = getLView<{} | null>();
@@ -178,8 +182,10 @@ export function outputBinding<T>(eventName: string, listener: (event: T) => unkn
  * ```
  */
 export function twoWayBinding(publicName: string, value: WritableSignal<unknown>): Binding {
-  const input = inputBinding(publicName, value);
-  const output = outputBinding(publicName + 'Change', (eventValue) => value.set(eventValue));
+  const input = inputBinding(publicName, value) as BindingInternal;
+  const output = outputBinding(publicName + 'Change', (eventValue) =>
+    value.set(eventValue),
+  ) as BindingInternal;
 
   // We take advantage of inputs only having a `create` block and outputs only having an `update`
   // block by passing them through directly instead of creating dedicated functions here. This
@@ -188,16 +194,17 @@ export function twoWayBinding(publicName: string, value: WritableSignal<unknown>
   ngDevMode && assertNotDefined(input.create, 'Unexpected `create` callback in inputBinding');
   ngDevMode && assertNotDefined(output.update, 'Unexpected `update` callback in outputBinding');
 
-  return {
+  const binding: BindingInternal = {
     [BINDING]: {
       kind: 'twoWay',
       requiredVars: input[BINDING].requiredVars + output[BINDING].requiredVars,
     },
     set targetIdx(idx: number) {
-      (input as Writable<Binding>).targetIdx = idx;
-      (output as Writable<Binding>).targetIdx = idx;
+      (input as Writable<BindingInternal>).targetIdx = idx;
+      (output as Writable<BindingInternal>).targetIdx = idx;
     },
     create: output.create,
     update: input.update,
   };
+  return binding;
 }