refactor(html-observers): handle task inside setValue

aurelia · Sep 13, 2020 · 2ac796d · 2ac796d
1 parent 9d1e795
commit 2ac796d
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 89 deletions.
diff --git a/packages/runtime-html/src/observation/attribute-ns-accessor.ts b/packages/runtime-html/src/observation/attribute-ns-accessor.ts
@@ -22,8 +22,7 @@ export class AttributeNSAccessor implements IAccessor<string | null> {
   public task: ITask | null = null;
   // ObserverType.Layout is not always true, it depends on the property
   // but for simplicity, always treat as such
-  public type: AccessorType = AccessorType.Node | AccessorType.Accessor | AccessorType.Layout;
-  public lastUpdate: number = 0;
+  public type: AccessorType = AccessorType.Node | AccessorType.Layout;
 
   public constructor(
     public readonly scheduler: IScheduler,
@@ -43,18 +42,13 @@ export class AttributeNSAccessor implements IAccessor<string | null> {
   }
 
   public setValue(newValue: string | null, flags: LifecycleFlags): void {
-    this.lastUpdate = Date.now();
     this.currentValue = newValue;
     this.hasChanges = newValue !== this.oldValue;
+    if (this.task != null) {
+      this.task.cancel();
+      this.task = null;
+    }
     this.flushChanges(flags);
-    // if ((flags & LifecycleFlags.fromBind) > 0 || this.persistentFlags === LifecycleFlags.noTargetObserverQueue) {
-    //   this.flushChanges(flags);
-    // } else if (this.persistentFlags !== LifecycleFlags.persistentTargetObserverQueue && this.task === null) {
-    //   this.task = this.scheduler.queueRenderTask(() => {
-    //     this.flushChanges(flags);
-    //     this.task = null;
-    //   });
-    // }
   }
 
   public flushChanges(flags: LifecycleFlags): void {
@@ -77,7 +71,7 @@ export class AttributeNSAccessor implements IAccessor<string | null> {
     //   }
     //   this.task = this.scheduler.queueRenderTask(() => this.flushChanges(flags), { persistent: true });
     // }
-    this.currentValue = this.oldValue = this.obj.getAttributeNS(this.namespace, this.propertyKey);
+    this.currentValue = this.obj.getAttributeNS(this.namespace, this.propertyKey);
     // this.flushChanges(flags);
   }
 

diff --git a/packages/runtime-html/src/observation/checked-observer.ts b/packages/runtime-html/src/observation/checked-observer.ts
@@ -50,7 +50,6 @@ export class CheckedObserver implements IAccessor {
   // ObserverType.Layout is not always true, it depends on the property
   // but for simplicity, always treat as such
   public type: AccessorType = AccessorType.Node | AccessorType.Observer | AccessorType.Layout;
-  public lastUpdate: number = 0;
 
   public collectionObserver?: ICollectionObserver<CollectionKind> = void 0;
   public valueObserver?: ValueAttributeObserver | SetterObserver = void 0;
@@ -72,18 +71,13 @@ export class CheckedObserver implements IAccessor {
   }
 
   public setValue(newValue: unknown, flags: LifecycleFlags): void {
-    this.lastUpdate = Date.now();
     this.currentValue = newValue;
     this.hasChanges = newValue !== this.oldValue;
+    if (this.task != null) {
+      this.task.cancel();
+      this.task = null;
+    }
     this.flushChanges(flags);
-    // if ((flags & LifecycleFlags.fromBind) === LifecycleFlags.fromBind || this.persistentFlags === LifecycleFlags.noTargetObserverQueue) {
-    //   this.flushChanges(flags);
-    // } else if (this.persistentFlags !== LifecycleFlags.persistentTargetObserverQueue && this.task === null) {
-    //   this.task = this.scheduler.queueRenderTask(() => {
-    //     this.flushChanges(flags);
-    //     this.task = null;
-    //   });
-    // }
   }
 
   public flushChanges(flags: LifecycleFlags): void {

diff --git a/packages/runtime-html/src/observation/class-attribute-accessor.ts b/packages/runtime-html/src/observation/class-attribute-accessor.ts
@@ -22,8 +22,7 @@ export class ClassAttributeAccessor implements IAccessor {
   public hasChanges: boolean = false;
   public isActive: boolean = false;
   public task: ITask | null = null;
-  public type: AccessorType = AccessorType.Node | AccessorType.Accessor | AccessorType.Layout;
-  public lastUpdate: number = 0;
+  public type: AccessorType = AccessorType.Node | AccessorType.Layout;
 
   public constructor(
     public readonly scheduler: IScheduler,
@@ -41,19 +40,15 @@ export class ClassAttributeAccessor implements IAccessor {
   }
 
   public setValue(newValue: unknown, flags: LifecycleFlags): void {
-    this.lastUpdate = Date.now();
     this.currentValue = newValue;
     this.hasChanges = newValue !== this.oldValue;
+    if (this.task != null) {
+      this.task.cancel();
+      this.task = null;
+    }
     this.flushChanges(flags);
-    // if ((flags & LifecycleFlags.fromBind) > 0 || this.persistentFlags === LifecycleFlags.noTargetObserverQueue) {
-    //   this.flushChanges(flags);
-    // } else if (this.persistentFlags !== LifecycleFlags.persistentTargetObserverQueue && this.task === null) {
-    //   this.task = this.scheduler.queueRenderTask(() => {
-    //     this.flushChanges(flags);
-    //     this.task = null;
-    //   });
-    // }
   }
+
   public flushChanges(flags: LifecycleFlags): void {
     if (this.hasChanges) {
       this.hasChanges = false;

diff --git a/packages/runtime-html/src/observation/data-attribute-accessor.ts b/packages/runtime-html/src/observation/data-attribute-accessor.ts
@@ -25,8 +25,7 @@ export class DataAttributeAccessor implements IAccessor<string | null> {
   public task: ITask | null = null;
   // ObserverType.Layout is not always true, it depends on the property
   // but for simplicity, always treat as such
-  public type: AccessorType = AccessorType.Node | AccessorType.Accessor | AccessorType.Layout;
-  public lastUpdate: number = 0;
+  public type: AccessorType = AccessorType.Node | AccessorType.Layout;
 
   public constructor(
     public readonly scheduler: IScheduler,
@@ -45,18 +44,13 @@ export class DataAttributeAccessor implements IAccessor<string | null> {
   }
 
   public setValue(newValue: string | null, flags: LifecycleFlags): void {
-    this.lastUpdate = Date.now();
     this.currentValue = newValue;
     this.hasChanges = newValue !== this.oldValue;
+    if (this.task != null) {
+      this.task.cancel();
+      this.task = null;
+    }
     this.flushChanges(flags);
-    // if ((flags & LifecycleFlags.fromBind) > 0 || this.persistentFlags === LifecycleFlags.noTargetObserverQueue) {
-    //   this.flushChanges(flags);
-    // } else if (this.persistentFlags !== LifecycleFlags.persistentTargetObserverQueue && this.task === null) {
-    //   this.task = this.scheduler.queueRenderTask(() => {
-    //     this.flushChanges(flags);
-    //     this.task = null;
-    //   });
-    // }
   }
 
   public flushChanges(flags: LifecycleFlags): void {
@@ -79,7 +73,7 @@ export class DataAttributeAccessor implements IAccessor<string | null> {
     //   }
     //   this.task = this.scheduler.queueRenderTask(() => this.flushChanges(flags), { persistent: true });
     // }
-    this.currentValue = this.oldValue = this.obj.getAttribute(this.propertyKey);
+    // this.currentValue = this.oldValue = this.obj.getAttribute(this.propertyKey);
     // this.flushChanges(flags);
   }
 

diff --git a/packages/runtime-html/src/observation/element-attribute-observer.ts b/packages/runtime-html/src/observation/element-attribute-observer.ts
@@ -42,7 +42,6 @@ export class AttributeObserver implements AttributeObserver, ElementMutationSubs
   // layout is not certain, depends on the attribute being flushed to owner element
   // but for simple start, always treat as such
   public type: AccessorType = AccessorType.Node | AccessorType.Observer | AccessorType.Layout;
-  public lastUpdate: number = 0;
 
   public constructor(
     public readonly scheduler: IScheduler,
@@ -62,18 +61,13 @@ export class AttributeObserver implements AttributeObserver, ElementMutationSubs
   }
 
   public setValue(newValue: unknown, flags: LifecycleFlags): void {
-    this.lastUpdate = Date.now();
     this.currentValue = newValue;
     this.hasChanges = newValue !== this.oldValue;
+    if (this.task != null) {
+      this.task.cancel();
+      this.task = null;
+    }
     this.flushChanges(flags);
-    // if ((flags & LifecycleFlags.fromBind) > 0 || this.persistentFlags === LifecycleFlags.noTargetObserverQueue) {
-    //   this.flushChanges(flags);
-    // } else if (this.persistentFlags !== LifecycleFlags.persistentTargetObserverQueue && this.task === null) {
-    //   this.task = this.scheduler.queueRenderTask(() => {
-    //     this.flushChanges(flags);
-    //     this.task = null;
-    //   });
-    // }
   }
 
   public flushChanges(flags: LifecycleFlags): void {

diff --git a/packages/runtime-html/src/observation/element-property-accessor.ts b/packages/runtime-html/src/observation/element-property-accessor.ts
@@ -24,8 +24,7 @@ export class ElementPropertyAccessor implements IAccessor {
   public task: ITask | null = null;
   // ObserverType.Layout is not always true, it depends on the property
   // but for simplicity, always treat as such
-  public type: AccessorType = AccessorType.Node | AccessorType.Accessor | AccessorType.Layout;
-  public lastUpdate: number = 0;
+  public type: AccessorType = AccessorType.Node | AccessorType.Layout;
 
   public constructor(
     public readonly scheduler: IScheduler,
@@ -43,7 +42,6 @@ export class ElementPropertyAccessor implements IAccessor {
   }
 
   public setValue(newValue: string | null, flags: LifecycleFlags): void {
-    this.lastUpdate = Date.now();
     this.currentValue = newValue;
     this.hasChanges = newValue !== this.oldValue;
     this.flushChanges(flags);

diff --git a/packages/runtime-html/src/observation/select-value-observer.ts b/packages/runtime-html/src/observation/select-value-observer.ts
@@ -49,7 +49,6 @@ export class SelectValueObserver implements IAccessor {
   // ObserverType.Layout is not always true
   // but for simplicity, always treat as such
   public type: AccessorType = AccessorType.Node | AccessorType.Observer | AccessorType.Layout;
-  public lastUpdate: number = 0;
 
   public arrayObserver?: ICollectionObserver<CollectionKind.array> = void 0;
   public nodeObserver?: MutationObserver = void 0;
@@ -72,18 +71,13 @@ export class SelectValueObserver implements IAccessor {
   }
 
   public setValue(newValue: unknown, flags: LifecycleFlags): void {
-    this.lastUpdate = Date.now();
     this.currentValue = newValue;
     this.hasChanges = newValue !== this.oldValue;
+    if (this.task != null) {
+      this.task.cancel();
+      this.task = null;
+    }
     this.flushChanges(flags);
-    // if ((flags & LifecycleFlags.fromBind) > 0 || this.persistentFlags === LifecycleFlags.noTargetObserverQueue) {
-    //   this.flushChanges(flags);
-    // } else if (this.persistentFlags !== LifecycleFlags.persistentTargetObserverQueue && this.task === null) {
-    //   this.task = this.scheduler.queueRenderTask(() => {
-    //     this.flushChanges(flags);
-    //     this.task = null;
-    //   });
-    // }
   }
 
   public flushChanges(flags: LifecycleFlags): void {

diff --git a/packages/runtime-html/src/observation/style-attribute-accessor.ts b/packages/runtime-html/src/observation/style-attribute-accessor.ts
@@ -20,8 +20,7 @@ export class StyleAttributeAccessor implements IAccessor {
 
   public hasChanges: boolean = false;
   public task: ITask | null = null;
-  public type: AccessorType = AccessorType.Node | AccessorType.Accessor | AccessorType.Layout;
-  public lastUpdate: number = 0;
+  public type: AccessorType = AccessorType.Node | AccessorType.Layout;
 
   public constructor(
     public readonly scheduler: IScheduler,
@@ -37,18 +36,9 @@ export class StyleAttributeAccessor implements IAccessor {
   }
 
   public setValue(newValue: unknown, flags: LifecycleFlags): void {
-    this.lastUpdate = Date.now();
     this.currentValue = newValue;
     this.hasChanges = newValue !== this.oldValue;
     this.flushChanges(flags);
-    // if ((flags & LifecycleFlags.fromBind) > 0 || this.persistentFlags === LifecycleFlags.noTargetObserverQueue) {
-    //   this.flushChanges(flags);
-    // } else if (this.persistentFlags !== LifecycleFlags.persistentTargetObserverQueue && this.task === null) {
-    //   this.task = this.scheduler.queueRenderTask(() => {
-    //     this.flushChanges(flags);
-    //     this.task = null;
-    //   });
-    // }
   }
 
   private getStyleTuplesFromString(currentValue: string): [string, string][] {

diff --git a/packages/runtime-html/src/observation/value-attribute-observer.ts b/packages/runtime-html/src/observation/value-attribute-observer.ts
@@ -31,7 +31,6 @@ export class ValueAttributeObserver implements IAccessor {
   // ObserverType.Layout is not always true, it depends on the element & property combo
   // but for simplicity, always treat as such
   public type: AccessorType = AccessorType.Node | AccessorType.Observer | AccessorType.Layout;
-  public lastUpdate: number = 0;
 
   public constructor(
     public readonly scheduler: IScheduler,
@@ -50,18 +49,13 @@ export class ValueAttributeObserver implements IAccessor {
   }
 
   public setValue(newValue: string | null, flags: LifecycleFlags): void {
-    this.lastUpdate = Date.now();
     this.currentValue = newValue;
     this.hasChanges = newValue !== this.oldValue;
+    if (this.task != null) {
+      this.task.cancel();
+      this.task = null;
+    }
     this.flushChanges(flags);
-    // if ((flags & LifecycleFlags.fromBind) > 0 || this.persistentFlags === LifecycleFlags.noTargetObserverQueue) {
-    //   this.flushChanges(flags);
-    // } else if (this.persistentFlags !== LifecycleFlags.persistentTargetObserverQueue && this.task === null) {
-    //   this.task = this.scheduler.queueRenderTask(() => {
-    //     this.flushChanges(flags);
-    //     this.task = null;
-    //   });
-    // }
   }
 
   public flushChanges(flags: LifecycleFlags): void {