Merge pull request #1289 from aurelia/fix/repeat-bb

packages/__tests__/3-runtime-html/repeat.vc.bb.spec.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-await-in-loop */
 import { IContainer } from '@aurelia/kernel';
-import { Aurelia, CustomElement, ICustomElementController, IPlatform, valueConverter } from '@aurelia/runtime-html';
+import { Aurelia, bindingBehavior, CustomElement, ICustomElementController, IPlatform, valueConverter } from '@aurelia/runtime-html';
 import { assert, TestContext } from '@aurelia/testing';
 import { createSpecFunction, TestExecutionContext, TestFunction } from '../util.js';
 
@@ -109,7 +109,7 @@ describe('repeat value-converter integration', function () {
     }
   }
 
-  @valueConverter('noop')
+  @bindingBehavior('noop')
   class NoopBindingBehavior { }
 
   const identityExpected = Array.from({ length: 10 }, (_, i) => `<span>${i + 1}</span>`).join('');
@@ -230,7 +230,7 @@ describe('repeat value-converter integration', function () {
       ],
     );
 
-    const noopBBTmplt = `<span repeat.for="item of arr | noop">\${item}</span>`;
+    const noopBBTmplt = `<span repeat.for="item of arr & noop">\${item}</span>`;
     yield new TestData(
       'array mutation - noop BB',
       noopBBTmplt,

packages/__tests__/3-runtime-html/repeater-custom-element.spec.ts

@@ -9,6 +9,7 @@ import {
   IPlatform,
   ICustomElementViewModel,
   ICustomElementController,
+  BindingBehavior,
 } from '@aurelia/runtime-html';
 import {
   assert,
@@ -45,7 +46,7 @@ describe(spec, function () {
     const container = ctx.container;
 
     const au = new Aurelia(container);
-    await au.register(...registrations)
+    await au.register(...registrations, BindingBehavior.define('keyed', class NoopKeyedBindingBehavior {}))
       .app({
         host,
         component: CustomElement.define({ name: 'app', isStrictBinding: true, template }, app ?? class { })

packages/runtime-html/src/renderer.ts

@@ -873,11 +873,9 @@ export class IteratorBindingRenderer implements IRenderer {
   ): void {
     const expr = ensureExpression(this._exprParser, instruction.from, ExpressionType.IsIterator);
     const binding = new PropertyBinding(expr, getTarget(target), instruction.to, BindingMode.toView, this._observerLocator, renderingCtrl.container, this._platform.domWriteQueue);
-    renderingCtrl.addBinding(binding);
-    // todo: fix bb + repeat
-    // renderingController.addBinding(expr.iterable.$kind === ExpressionKind.BindingBehavior
-    //   ? applyBindingBehavior(binding, expr.iterable, renderingController.container)
-    //   : binding);
+    renderingCtrl.addBinding(expr.iterable.$kind === ExpressionKind.BindingBehavior
+      ? applyBindingBehavior(binding, expr.iterable, renderingCtrl.container)
+      : binding);
   }
 }
 

packages/runtime-html/src/resources/template-controllers/promise.ts

@@ -212,7 +212,7 @@ export class FulfilledTemplateController implements ICustomAttributeViewModel {
   public readonly id: number = nextId('au$component');
   public readonly $controller!: ICustomAttributeController<this>; // This is set by the controller after this instance is constructed
 
-  @bindable({ mode: BindingMode.toView }) public value!: unknown;
+  @bindable({ mode: BindingMode.fromView }) public value!: unknown;
 
   public view: ISyntheticView;
 
@@ -260,7 +260,7 @@ export class RejectedTemplateController implements ICustomAttributeViewModel {
   public readonly id: number = nextId('au$component');
   public readonly $controller!: ICustomAttributeController<this>; // This is set by the controller after this instance is constructed
 
-  @bindable({ mode: BindingMode.toView }) public value!: unknown;
+  @bindable({ mode: BindingMode.fromView }) public value!: unknown;
 
   public view: ISyntheticView;
 

packages/runtime-html/src/resources/template-controllers/repeat.ts

@@ -189,6 +189,7 @@ export class Repeat<C extends Collection = unknown[]> implements ICustomAttribut
   }
 
   // todo: subscribe to collection from inner expression
+  /** @internal */
   private _checkCollectionObserver(flags: LF): void {
     const scope = this.$controller.scope;
 
@@ -215,6 +216,7 @@ export class Repeat<C extends Collection = unknown[]> implements ICustomAttribut
     }
   }
 
+  /** @internal */
   private _normalizeToArray(flags: LF): void {
     const items: Items<C> = this.items;
     if (items instanceof Array) {
@@ -232,6 +234,7 @@ export class Repeat<C extends Collection = unknown[]> implements ICustomAttribut
     this._normalizedItems = normalizedItems;
   }
 
+  /** @internal */
   private _activateAllViews(
     initiator: IHydratedController | null,
     flags: LF,
@@ -266,6 +269,7 @@ export class Repeat<C extends Collection = unknown[]> implements ICustomAttribut
     }
   }
 
+  /** @internal */
   private _deactivateAllViews(
     initiator: IHydratedController | null,
     flags: LF,
@@ -294,6 +298,7 @@ export class Repeat<C extends Collection = unknown[]> implements ICustomAttribut
     }
   }
 
+  /** @internal */
   private _deactivateAndRemoveViewsByKey(
     indexMap: IndexMap,
     flags: LF,
@@ -330,6 +335,7 @@ export class Repeat<C extends Collection = unknown[]> implements ICustomAttribut
     }
   }
 
+  /** @internal */
   private _createAndActivateAndSortViewsByKey(
     oldLength: number,
     indexMap: IndexMap,

packages/runtime-html/src/resources/template-controllers/switch.ts

@@ -85,10 +85,11 @@ export class Switch implements ICustomAttributeViewModel {
   }
 
   public caseChanged($case: Case, flags: LifecycleFlags): void {
-    this.queue(() => this.handleCaseChange($case, flags));
+    this.queue(() => this._handleCaseChange($case, flags));
   }
 
-  private handleCaseChange($case: Case, flags: LifecycleFlags): void | Promise<void> {
+  /** @internal */
+  private _handleCaseChange($case: Case, flags: LifecycleFlags): void | Promise<void> {
     const isMatch = $case.isMatch(this.value, flags);
     const activeCases = this.activeCases;
     const numActiveCases = activeCases.length;
@@ -97,7 +98,7 @@ export class Switch implements ICustomAttributeViewModel {
     if (!isMatch) {
       /** The previous match started with this; thus clear. */
       if (numActiveCases > 0 && activeCases[0].id === $case.id) {
-        return this.clearActiveCases(null, flags);
+        return this._clearActiveCases(null, flags);
       }
       /**
        * There are 2 different scenarios here:
@@ -129,10 +130,10 @@ export class Switch implements ICustomAttributeViewModel {
     }
 
     return onResolve(
-      this.clearActiveCases(null, flags, newActiveCases),
+      this._clearActiveCases(null, flags, newActiveCases),
       () => {
         this.activeCases = newActiveCases;
-        return this.activateCases(null, flags);
+        return this._activateCases(null, flags);
       }
     );
   }
@@ -155,17 +156,18 @@ export class Switch implements ICustomAttributeViewModel {
 
     return onResolve(
       this.activeCases.length > 0
-        ? this.clearActiveCases(initiator, flags, newActiveCases)
+        ? this._clearActiveCases(initiator, flags, newActiveCases)
         : void 0!,
       () => {
         this.activeCases = newActiveCases;
         if (newActiveCases.length === 0) { return; }
-        return this.activateCases(initiator, flags);
+        return this._activateCases(initiator, flags);
       }
     );
   }
 
-  private activateCases(initiator: IHydratedController | null, flags: LifecycleFlags): void | Promise<void> {
+  /** @internal */
+  private _activateCases(initiator: IHydratedController | null, flags: LifecycleFlags): void | Promise<void> {
     const controller = this.$controller;
     if (!controller.isActive) { return; }
 
@@ -183,7 +185,8 @@ export class Switch implements ICustomAttributeViewModel {
     return resolveAll(...cases.map(($case) => $case.activate(initiator, flags, scope)));
   }
 
-  private clearActiveCases(initiator: IHydratedController | null, flags: LifecycleFlags, newActiveCases: Case[] = []): void | Promise<void> {
+  /** @internal */
+  private _clearActiveCases(initiator: IHydratedController | null, flags: LifecycleFlags, newActiveCases: Case[] = []): void | Promise<void> {
     const cases = this.activeCases;
     const numCases = cases.length;