fix(fast-element): every third subscriber not registered

packages/web-components/fast-element/docs/api-report.md

@@ -407,14 +407,12 @@ export class HTMLView implements ElementView, SyntheticView {
 // @public (undocumented)
 export const lastAttributeNameRegex: RegExp;
 
-// @public (undocumented)
+// @public
 export interface Notifier {
-    // (undocumented)
-    notify(source: any, args: any): void;
-    // (undocumented)
-    subscribe(subscriber: Subscriber, context?: any): void;
-    // (undocumented)
-    unsubscribe(subscriber: Subscriber, context?: any): void;
+    notify(args: any): void;
+    readonly source: any;
+    subscribe(subscriber: Subscriber, propertyToWatch?: any): void;
+    unsubscribe(subscriber: Subscriber, propertyToUnwatch?: any): void;
 }
 
 // @public (undocumented)
@@ -458,14 +456,14 @@ export type PartialFASTElementDefinition = {
     readonly elementOptions?: ElementDefinitionOptions;
 };
 
-// @public (undocumented)
+// @public
 export class PropertyChangeNotifier implements Notifier {
+    constructor(source: any);
+    notify(propertyName: string): void;
     // (undocumented)
-    notify(source: any, propertyName: string): void;
-    // (undocumented)
-    subscribe(subscriber: Subscriber, propertyName: string): void;
-    // (undocumented)
-    unsubscribe(subscriber: Subscriber, propertyName: string): void;
+    readonly source: any;
+    subscribe(subscriber: Subscriber, propertyToWatch: string): void;
+    unsubscribe(subscriber: Subscriber, propertyToUnwatch: string): void;
 }
 
 // @public (undocumented)
@@ -567,17 +565,17 @@ export interface StyleTarget {
 
 // @public
 export interface Subscriber {
-    // (undocumented)
     handleChange(source: any, args: any): void;
 }
 
 // @public
-export class SubscriberCollection implements Notifier {
-    // (undocumented)
-    notify(source: any, args: any): void;
+export class SubscriberSet implements Notifier {
+    constructor(source: any);
+    has(subscriber: Subscriber): boolean;
+    notify(args: any): void;
     // (undocumented)
+    readonly source: any;
     subscribe(subscriber: Subscriber): void;
-    // (undocumented)
     unsubscribe(subscriber: Subscriber): void;
 }
 

packages/web-components/fast-element/karma.conf.cjs

@@ -37,13 +37,23 @@ module.exports = function(config) {
       'source-map-support',
       'mocha',
     ],
+    plugins: [
+      require('karma-mocha'),
+      require('karma-mocha-reporter'),
+      require('karma-webpack'),
+      require('karma-source-map-support'),
+      require('karma-sourcemap-loader'),
+      require('karma-coverage-istanbul-reporter'),
+      require('karma-chrome-launcher'),
+      require('karma-firefox-launcher')
+    ],
     files: [
       `dist/esm/__test__/${setup}.js`,
     ],
     preprocessors: {
       [`dist/esm/__test__/${setup}.js`]: [
-        'webpack',
-        'sourcemap',
+          'webpack',
+          'sourcemap',
       ],
     },
     webpackMiddleware: {

packages/web-components/fast-element/package.json

@@ -27,9 +27,9 @@
     "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different",
     "eslint": "eslint . --ext .ts",
     "eslint:fix": "eslint . --ext .ts --fix",
-    "test": "npm run test-node:verbose -- --experimental-modules",
-    "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js dist/esm/**/*.spec.js -- --experimental-modules",
-    "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js dist/esm/**/*.spec.js -- --experimental-modules",
+    "test": "npm run test-node:verbose",
+    "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js' -- --experimental-modules",
+    "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js' -- --experimental-modules",
     "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage -- --experimental-modules",
     "test-chrome:verbose": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha -- --experimental-modules",
     "test-chrome:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js -- --experimental-modules",

packages/web-components/fast-element/src/attributes.ts

@@ -95,7 +95,7 @@ export class AttributeDefinition implements Accessor {
                 source[this.callbackName](oldValue, newValue);
             }
 
-            ((source as any).$fastController as Notifier).notify(source, this.name);
+            ((source as any).$fastController as Notifier).notify(this.name);
         }
     }
 

packages/web-components/fast-element/src/controller.ts

@@ -20,7 +20,7 @@ export class Controller extends PropertyChangeNotifier {
         public readonly element: HTMLElement,
         public readonly definition: FASTElementDefinition
     ) {
-        super();
+        super(element);
 
         const template = definition.template;
         const styles = definition.styles;

packages/web-components/fast-element/src/observation/array-observer.ts

@@ -1,6 +1,6 @@
 import { DOM } from "../dom.js";
 import { Observable } from "./observable.js";
-import { SubscriberCollection } from "./notifier.js";
+import { SubscriberSet } from "./notifier.js";
 import {
     calcSplices,
     newSplice,
@@ -29,17 +29,15 @@ function adjustIndex(changeRecord: Splice, array: any[]): Splice {
     return changeRecord;
 }
 
-export class ArrayObserver extends SubscriberCollection {
-    private collection: any[];
+export class ArrayObserver extends SubscriberSet {
     private oldCollection: any[] | undefined = void 0;
     private splices: any[] | undefined = void 0;
     private needsQueue: boolean = true;
     call: () => void = this.flush;
 
-    constructor(collection: any[]) {
-        super();
-        (collection as any).$fastController = this;
-        this.collection = collection;
+    constructor(source: any[]) {
+        super(source);
+        (source as any).$fastController = this;
     }
 
     public addSplice(splice: Splice): void {
@@ -78,17 +76,17 @@ export class ArrayObserver extends SubscriberCollection {
 
         const finalSplices =
             oldCollection === void 0
-                ? projectArraySplices(this.collection, splices!)
+                ? projectArraySplices(this.source, splices!)
                 : calcSplices(
-                      this.collection,
+                      this.source,
                       0,
-                      this.collection.length,
+                      this.source.length,
                       oldCollection,
                       0,
                       oldCollection.length
                   );
 
-        this.notify(this, finalSplices);
+        this.notify(finalSplices);
     }
 }