fix max call stack exceeded when setting token values from change han…

…dler (microsoft#6499)

* fixing issue and adding regression tests

* Change files

Co-authored-by: nicholasrice <nicholasrice@users.noreply.github.com>
Co-authored-by: Chris Holt <chhol@microsoft.com>
Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

change/@microsoft-fast-foundation-70a0ba72-9ead-4a9b-ba30-447ff173c577.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fixing bug in DesignToken causing RangeError",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "nicholasrice@users.noreply.github.com",
+  "dependentChangeType": "prerelease"
+}

packages/web-components/fast-foundation/src/design-token/core/design-token-node.pw.spec.ts

@@ -160,6 +160,23 @@ test.describe("DesignTokenNode", () => {
 
             expect(target.getTokenValue(token)).toEqual(14);
         });
+
+        test("should not throw when setting a token value from within a change handler", () => {
+            const node = new DesignTokenNode();
+            const tokenA = { $value: undefined };
+            const tokenB = { $value: undefined };
+
+            node.setTokenValue(tokenA, 12);
+            Observable.getNotifier(tokenA).subscribe({
+                handleChange(source, args) {
+                    node.setTokenValue(tokenB, 14);
+                },
+            });
+
+            expect(() => {
+                node.setTokenValue(tokenA, 13);
+            }).not.toThrow();
+        });
     });
     test.describe("setting a token to a derived value", () => {
         test("should support getting and setting falsey values", () => {
@@ -287,6 +304,23 @@ test.describe("DesignTokenNode", () => {
                 });
             }).toThrow();
         });
+
+        test("should not throw when setting a token derived value from within a change handler", () => {
+            const node = new DesignTokenNode();
+            const tokenA = { $value: undefined };
+            const tokenB = { $value: undefined };
+
+            node.setTokenValue(tokenA, 12);
+            Observable.getNotifier(tokenA).subscribe({
+                handleChange(source, args) {
+                    node.setTokenValue(tokenB, () => 12);
+                },
+            });
+
+            expect(() => {
+                node.setTokenValue(tokenA, 13);
+            }).not.toThrow();
+        });
     });
 
     test.describe("getting a token value", () => {

packages/web-components/fast-foundation/src/design-token/core/design-token-node.ts

@@ -240,11 +240,12 @@ export class DesignTokenNode {
      * Emit all queued notifications
      */
     private static notify() {
-        for (const record of this._notifications) {
+        const notifications = this._notifications;
+        this._notifications = [];
+
+        for (const record of notifications) {
             record.notify();
         }
-
-        this._notifications = [];
     }
 
     private static queueNotification(...records: DesignTokenChangeRecordImpl<any>[]) {