fix(ivy): `pipeBindV` takes an array of values (#24039)

PR Close #24039

packages/compiler/src/render3/view/template.ts

@@ -524,16 +524,16 @@ class ValueConverter extends AstMemoryEfficientTransformer {
     // Allocate one slot for the result plus one slot per pipe argument
     const pureFunctionSlot = this.allocatePureFunctionSlots(2 + pipe.args.length);
     const target = new PropertyRead(pipe.span, new ImplicitReceiver(pipe.span), slotPseudoLocal);
-    const bindingId = pipeBinding(pipe.args);
+    const {identifier, isVarLength} = pipeBindingCallInfo(pipe.args);
-    this.definePipe(pipe.name, slotPseudoLocal, slot, o.importExpr(bindingId));
+    this.definePipe(pipe.name, slotPseudoLocal, slot, o.importExpr(identifier));
-    const value = pipe.exp.visit(this);
+    const args: AST[] = [pipe.exp, ...pipe.args];
-    const args = this.visitAll(pipe.args);
+    const convertedArgs: AST[] =
+        isVarLength ? this.visitAll([new LiteralArray(pipe.span, args)]) : this.visitAll(args);
 
     return new FunctionCall(pipe.span, target, [
       new LiteralPrimitive(pipe.span, slot),
       new LiteralPrimitive(pipe.span, pureFunctionSlot),
-      value,
+      ...convertedArgs,
-      ...args,
     ]);
   }
 
@@ -566,8 +566,12 @@ class ValueConverter extends AstMemoryEfficientTransformer {
 // Pipes always have at least one parameter, the value they operate on
 const pipeBindingIdentifiers = [R3.pipeBind1, R3.pipeBind2, R3.pipeBind3, R3.pipeBind4];
 
-function pipeBinding(args: o.Expression[]): o.ExternalReference {
+function pipeBindingCallInfo(args: o.Expression[]) {
-  return pipeBindingIdentifiers[args.length] || R3.pipeBindV;
+  const identifier = pipeBindingIdentifiers[args.length];
+  return {
+    identifier: identifier || R3.pipeBindV,
+    isVarLength: !identifier,
+  };
 }
 
 const pureFunctionIdentifiers = [

packages/compiler/test/render3/r3_compiler_compliance_spec.ts

@@ -921,7 +921,7 @@ describe('compiler compliance', () => {
 
               @Component({
                 selector: 'my-app',
-                template: '{{name | myPipe:size | myPurePipe:size }}<p>{{ name | myPurePipe:size }}</p>'
+                template: '{{name | myPipe:size | myPurePipe:size }}<p>{{ name | myPipe:1:2:3:4:5 }}</p>'
               })
               export class MyApp {
                 name = 'World';
@@ -949,7 +949,10 @@ describe('compiler compliance', () => {
             });`;
 
         const MyAppDefinition = `
-            …
+            const $c0$ = ($a0$: any) => {
+              return [$a0$, 1, 2, 3, 4, 5];
+            };
+            // ...
             static ngComponentDef = $r3$.ɵdefineComponent({
               type: MyApp,
               selectors: [['my-app']],
@@ -961,13 +964,13 @@ describe('compiler compliance', () => {
                   $r3$.ɵPp(2, 'myPipe');
                   $r3$.ɵE(3, 'p');
                   $r3$.ɵT(4);
-                  $r3$.ɵPp(5, 'myPurePipe');
+                  $r3$.ɵPp(5, 'myPipe');
                   $r3$.ɵe();
-                  $r3$.ɵrS(9);
+                  $r3$.ɵrS(15);
                 }
                 if (rf & 2) {
                   $r3$.ɵt(0, $r3$.ɵi1('', $r3$.ɵpb2(1, 3, $r3$.ɵpb2(2, 6, ctx.name, ctx.size), ctx.size), ''));
-                  $r3$.ɵt(4, $r3$.ɵi1('', $r3$.ɵpb2(5, 9, ctx.name, ctx.size), ''));
+                  $r3$.ɵt(4, $r3$.ɵi1('', $r3$.ɵpbV(5, 13 , $r3$.ɵf1(15, $c0$, ctx.name)), ''));
                 }
               },
               pipes: [MyPurePipe, MyPipe]

packages/core/test/bundling/hello_world_r2/bundle.golden_symbols.json

@@ -3603,7 +3603,7 @@
     "name": "parseIntAutoRadix"
   },
   {
-    "name": "pipeBinding"
+    "name": "pipeBindingCallInfo"
   },
   {
     "name": "pipeBindingIdentifiers"