refactor(children): make children observation a binding (#1732)

* refactor(children): make children deco as a hook * refactor(children): remove children observers from custom element def * refactor(children): cleanup children observer related code, rename to binding * chore: fix test * refactor(observers): remove intermediate vars * refactor: ignore dev message coverage
aurelia · Apr 7, 2023 · 5bde983 · 5bde983
1 parent 3f37f8d
commit 5bde983
Show file tree

Hide file tree

Showing 35 changed files with 301 additions and 301 deletions.
diff --git a/examples/helloworld/rollup.config.js b/examples/helloworld/rollup.config.js
@@ -1,5 +1,5 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { terser } from '@rollup/plugin-terser';
+import terser from '@rollup/plugin-terser';
 
 /** @type {import('rollup').RollupOptions} */
 export default {

diff --git a/packages/__tests__/3-runtime-html/children-observer.spec.ts b/packages/__tests__/3-runtime-html/children-observer.spec.ts
@@ -143,6 +143,28 @@ describe('3-runtime-html/children-observer.spec.ts', function () {
 
       au.dispose();
     });
+
+    it('updates subscribers', async function () {
+      @customElement({
+        name: 'e-l',
+        template: 'child count: ${nodes.length}',
+        shadowOptions: { mode: 'open' }
+      })
+      class El {
+        @children('div') nodes: any[];
+      }
+      const { assertText } = createFixture(
+        '<e-l ref=el><div repeat.for="i of items">',
+        class App {
+          items = 3;
+        },
+        [El]
+      );
+
+      await new Promise(r => setTimeout(r, 50));
+
+      assertText('child count: 3');
+    });
   });
 
   function createAppAndStart(childrenOptions?: PartialChildrenDefinition) {

diff --git a/packages/__tests__/3-runtime-html/template-compiler.spec.ts b/packages/__tests__/3-runtime-html/template-compiler.spec.ts
@@ -678,7 +678,6 @@ describe('3-runtime-html/template-compiler.spec.ts', function () {
     cache: 0,
     dependencies: [],
     bindables: {},
-    childrenObservers: {},
     containerless: false,
     injectable: null,
     isStrictBinding: false,

diff --git a/packages/aurelia/src/index.ts b/packages/aurelia/src/index.ts
@@ -499,8 +499,7 @@ export {
   Bindable,
   coercer,
 
-  // PartialChildrenDefinition,
-  // ChildrenDefinition,
+  PartialChildrenDefinition,
   // Children,
   children,
 
@@ -683,7 +682,7 @@ export {
   // DefaultComponents as RuntimeHtmlDefaultComponents,
 
   // CompiledTemplate,
-  // ChildrenObserver,
+  ChildrenBinding,
   // IRenderer,
   // IInstructionTypeClassifier,
   // IRenderingEngine,

diff --git a/packages/runtime-html/src/aurelia.ts b/packages/runtime-html/src/aurelia.ts
@@ -39,6 +39,7 @@ export class Aurelia implements IDisposable {
     if (this._root == null) {
       if (this.next == null) {
         if (__DEV__)
+          /* istanbul ignore next */
           throw createError(`AUR0767: root is not defined`);
         else
           throw createError(`AUR0767`);
@@ -58,6 +59,7 @@ export class Aurelia implements IDisposable {
   ) {
     if (container.has(IAurelia, true)) {
       if (__DEV__)
+        /* istanbul ignore next */
         throw createError(`AUR0768: An instance of Aurelia is already registered with the container or an ancestor of it.`);
       else
         throw createError(`AUR0768`);
@@ -129,6 +131,7 @@ export class Aurelia implements IDisposable {
     if (!this.container.has(IPlatform, false)) {
       if (host.ownerDocument.defaultView === null) {
         if (__DEV__)
+          /* istanbul ignore next */
           throw createError(`AUR0769: Failed to initialize the platform object. The host element's ownerDocument does not have a defaultView`);
         else
           throw createError(`AUR0769`);
@@ -197,6 +200,7 @@ export class Aurelia implements IDisposable {
   public dispose(): void {
     if (this._isRunning || this._isStopping) {
       if (__DEV__)
+        /* istanbul ignore next */
         throw createError(`AUR0771: The aurelia instance must be fully stopped before it can be disposed`);
       else
         throw createError(`AUR0771`);

diff --git a/packages/runtime-html/src/binding/interpolation-binding.ts b/packages/runtime-html/src/binding/interpolation-binding.ts
@@ -21,7 +21,7 @@ import type {
   IsExpression, Scope
 } from '@aurelia/runtime';
 import type { IPlatform } from '../platform';
-import { isArray } from '../utilities';
+import { isArray, safeString } from '../utilities';
 import type { IBindingController } from './interfaces-bindings';
 
 const queueTaskOptions: QueueTaskOptions = {
@@ -346,7 +346,7 @@ export class ContentBinding implements IBinding, ICollectionSubscriber {
       target.textContent = '';
       target.parentNode?.insertBefore(value, target);
     } else {
-      target.textContent = String(value);
+      target.textContent = safeString(value);
     }
   }
 

diff --git a/packages/runtime-html/src/index.ts b/packages/runtime-html/src/index.ts
@@ -387,10 +387,8 @@ export {
 
 export {
   type PartialChildrenDefinition,
-  ChildrenDefinition,
-  Children,
   children,
-  ChildrenObserver,
+  ChildrenBinding,
 } from './templating/children';
 
 // These exports are temporary until we have a proper way to unit test them

diff --git a/packages/runtime-html/src/observation/element-attribute-observer.ts b/packages/runtime-html/src/observation/element-attribute-observer.ts
@@ -1,5 +1,5 @@
 import { subscriberCollection, AccessorType } from '@aurelia/runtime';
-import { createError, isString } from '../utilities';
+import { createError, isString, safeString } from '../utilities';
 
 import type {
   IObserver,
@@ -100,7 +100,7 @@ export class AttributeObserver implements AttributeObserver, ElementMutationSubs
           if (this._value == null) {
             this._obj.removeAttribute(this._attr);
           } else {
-            this._obj.setAttribute(this._attr, String(this._value));
+            this._obj.setAttribute(this._attr, safeString(this._value));
           }
         }
       }

diff --git a/packages/runtime-html/src/observation/observer-locator.ts b/packages/runtime-html/src/observation/observer-locator.ts
@@ -17,7 +17,7 @@ import { SelectValueObserver } from './select-value-observer';
 import { StyleAttributeAccessor } from './style-attribute-accessor';
 import { ISVGAnalyzer } from './svg-analyzer';
 import { ValueAttributeObserver } from './value-attribute-observer';
-import { createError, createLookup, isDataAttribute, isString, objectAssign } from '../utilities';
+import { createError, createLookup, isDataAttribute, isString, objectAssign, safeString } from '../utilities';
 import { aliasRegistration, singletonRegistration } from '../utilities-di';
 
 import type { IIndexable, IContainer } from '@aurelia/kernel';
@@ -348,9 +348,10 @@ export class NodeObserverLocator implements INodeObserverLocator {
       // consider:
       // - maybe add a adapter API to handle unknown obj/key combo
       if (__DEV__)
-        throw createError(`AUR0652: Unable to observe property ${String(key)}. Register observation mapping with .useConfig().`);
+        /* istanbul ignore next */
+        throw createError(`AUR0652: Unable to observe property ${safeString(key)}. Register observation mapping with .useConfig().`);
       else
-        throw createError(`AUR0652:${String(key)}`);
+        throw createError(`AUR0652:${safeString(key)}`);
     } else {
       // todo: probably still needs to get the property descriptor via getOwnPropertyDescriptor
       // but let's start with simplest scenario
@@ -373,7 +374,8 @@ export function getCollectionObserver(collection: unknown, observerLocator: IObs
 
 function throwMappingExisted(nodeName: string, key: PropertyKey): never {
   if (__DEV__)
-    throw createError(`AUR0653: Mapping for property ${String(key)} of <${nodeName} /> already exists`);
+    /* istanbul ignore next */
+    throw createError(`AUR0653: Mapping for property ${safeString(key)} of <${nodeName} /> already exists`);
   else
-    throw createError(`AUR0653:${String(key)}@${nodeName}`);
+    throw createError(`AUR0653:${safeString(key)}@${nodeName}`);
 }
diff --git a/packages/runtime-html/src/renderer.ts b/packages/runtime-html/src/renderer.ts
@@ -418,6 +418,7 @@ function getRefTarget(refHost: INode, refTargetName: string): object {
     case 'view':
       // todo: returns node sequences for fun?
       if (__DEV__)
+        /* istanbul ignore next */
         throw createError(`AUR0750: Not supported API`);
       else
         throw createError(`AUR0750`);
@@ -432,6 +433,7 @@ function getRefTarget(refHost: INode, refTargetName: string): object {
       const ceController = findElementControllerFor(refHost, { name: refTargetName });
       if (ceController === void 0) {
         if (__DEV__)
+          /* istanbul ignore next */
           throw createError(`AUR0751: Attempted to reference "${refTargetName}", but it was not found amongst the target's API.`);
         else
           throw createError(`AUR0751:${refTargetName}`);
@@ -579,6 +581,7 @@ export class CustomAttributeRenderer implements IRenderer {
         def = ctxContainer.find(CustomAttribute, instruction.res);
         if (def == null) {
           if (__DEV__)
+            /* istanbul ignore next */
             throw createError(`AUR0753: Attribute ${instruction.res} is not registered in ${(renderingCtrl as Controller)['name']}.`);
           else
             throw createError(`AUR0753:${instruction.res}@${(renderingCtrl as Controller)['name']}`);
@@ -657,6 +660,7 @@ export class TemplateControllerRenderer implements IRenderer {
         def = ctxContainer.find(CustomAttribute, instruction.res);
         if (def == null) {
           if (__DEV__)
+            /* istanbul ignore next */
             throw createError(`AUR0754: Attribute ${instruction.res} is not registered in ${(renderingCtrl as Controller)['name']}.`);
           else
             throw createError(`AUR0754:${instruction.res}@${(renderingCtrl as Controller)['name']}`);
@@ -1253,12 +1257,14 @@ class ViewFactoryProvider implements IResolver {
     const f = this.f;
     if (f === null) {
       if (__DEV__)
+        /* istanbul ignore next */
         throw createError(`AUR7055: Cannot resolve ViewFactory before the provider was prepared.`);
       else
         throw createError(`AUR7055`);
     }
     if (!isString(f.name) || f.name.length === 0) {
       if (__DEV__)
+        /* istanbul ignore next */
         throw createError(`AUR0756: Cannot resolve ViewFactory without a (valid) name.`);
       else
         throw createError(`AUR0756`);

diff --git a/packages/runtime-html/src/resources/binding-behavior.ts b/packages/runtime-html/src/resources/binding-behavior.ts
@@ -95,6 +95,7 @@ export const BindingBehavior = objectFreeze<BindingBehaviorKind>({
     const def = getOwnMetadata(bbBaseName, Type) as BindingBehaviorDefinition<T>;
     if (def === void 0) {
       if (__DEV__)
+        /* istanbul ignore next */
         throw createError(`AUR0151: No definition found for type ${Type.name}`);
       else
         throw createError(`AUR0151:${Type.name}`);

diff --git a/packages/runtime-html/src/resources/binding-behaviors/attr.ts b/packages/runtime-html/src/resources/binding-behaviors/attr.ts
@@ -10,6 +10,7 @@ export class AttrBindingBehavior implements BindingBehaviorInstance {
   public bind(_scope: Scope, binding: IBinding): void {
     if (!(binding instanceof PropertyBinding)) {
       if (__DEV__)
+        /* istanbul ignore next */
         throw createError(`AURxxxx: & attr can be only used on property binding. It's used on ${binding.constructor.name}`);
       else
         throw createError(`AURxxxx`);

diff --git a/packages/runtime-html/src/resources/binding-behaviors/self.ts b/packages/runtime-html/src/resources/binding-behaviors/self.ts
@@ -8,6 +8,7 @@ export class SelfBindingBehavior implements BindingBehaviorInstance {
   public bind(_scope: Scope, binding: ListenerBinding): void {
     if (!(binding instanceof ListenerBinding)) {
       if (__DEV__)
+        /* istanbul ignore next */
         throw createError(`AUR0801: Self binding behavior only supports listener binding via trigger/capture command.`);
       else
         throw createError(`AUR0801`);

diff --git a/packages/runtime-html/src/resources/binding-behaviors/signals.ts b/packages/runtime-html/src/resources/binding-behaviors/signals.ts
@@ -18,12 +18,14 @@ export class SignalBindingBehavior implements BindingBehaviorInstance {
   public bind(scope: Scope, binding: IConnectableBinding, ...names: string[]): void {
     if (!('handleChange' in binding)) {
       if (__DEV__)
+        /* istanbul ignore next */
         throw createError(`AUR0817: The signal behavior can only be used with bindings that have a "handleChange" method`);
       else
         throw createError(`AUR0817`);
     }
     if (names.length === 0) {
       if (__DEV__)
+        /* istanbul ignore next */
         throw createError(`AUR0818: At least one signal name must be passed to the signal behavior, e.g. "expr & signal:'my-signal'"`);
       else
         throw createError(`AUR0818`);

diff --git a/packages/runtime-html/src/resources/binding-command.ts b/packages/runtime-html/src/resources/binding-command.ts
@@ -151,20 +151,6 @@ export const BindingCommand = objectFreeze<BindingCommandKind>({
 
     return definition.Type as BindingCommandType<T>;
   },
-  // getDefinition<T extends Constructable>(Type: T): BindingCommandDefinition<T> {
-  //   const def = getOwnMetadata(cmdBaseName, Type);
-  //   if (def === void 0) {
-  //     if (__DEV__)
-  //       throw createError(`AUR0758: No definition found for type ${Type.name}`);
-  //     else
-  //       throw createError(`AUR0758:${Type.name}`);
-  //   }
-
-  //   return def;
-  // },
-  // annotate<K extends keyof PartialBindingCommandDefinition>(Type: Constructable, prop: K, value: PartialBindingCommandDefinition[K]): void {
-  //   defineMetadata(getAnnotationKeyFor(prop), value, Type);
-  // },
   getAnnotation: getCommandAnnotation,
 });
 

diff --git a/packages/runtime-html/src/resources/custom-attribute.ts b/packages/runtime-html/src/resources/custom-attribute.ts
@@ -185,6 +185,7 @@ export const getAttributeDefinition = <T extends Constructable>(Type: T | Functi
   const def = getOwnMetadata(caBaseName, Type) as CustomAttributeDefinition<T>;
   if (def === void 0) {
     if (__DEV__)
+      /* istanbul ignore next */
       throw createError(`No definition found for type ${Type.name}`);
     else
       throw createError(`AUR0759:${Type.name}`);

diff --git a/packages/runtime-html/src/resources/custom-attributes/focus.ts b/packages/runtime-html/src/resources/custom-attributes/focus.ts
@@ -73,7 +73,7 @@ export class Focus implements ICustomAttributeViewModel {
   /**
    * Invoked when the attribute is afterDetachChildren from the DOM.
    */
-  public afterDetachChildren(): void {
+  public detaching(): void {
     const el = this._element;
     el.removeEventListener('focus', this);
     el.removeEventListener('blur', this);
@@ -102,6 +102,8 @@ export class Focus implements ICustomAttributeViewModel {
 
   /**
    * Focus/blur based on current value
+   *
+   * @internal
    */
   private _apply(): void {
     const el = this._element;
@@ -116,7 +118,8 @@ export class Focus implements ICustomAttributeViewModel {
     }
   }
 
-  /** @internal */ private get _isElFocused(): boolean {
+  /** @internal */
+  private get _isElFocused(): boolean {
     return this._element === this._platform.document.activeElement;
   }
 }