fix: prevent duplicative array observation patch

change/@microsoft-fast-element-61a917d4-ac4b-4236-817a-ee3645338ea8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: prevent duplicative array observation patch",
+  "packageName": "@microsoft/fast-element",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -110,16 +110,25 @@ export function enableArrayObservation(): void {
         }
     );
 
-    const arrayProto = Array.prototype;
-    const pop = arrayProto.pop;
-    const push = arrayProto.push;
-    const reverse = arrayProto.reverse;
-    const shift = arrayProto.shift;
-    const sort = arrayProto.sort;
-    const splice = arrayProto.splice;
-    const unshift = arrayProto.unshift;
-
-    arrayProto.pop = function () {
+    const proto = Array.prototype;
+
+    // Don't patch Array if it has already been patched
+    // by another copy of fast-element.
+    if ((proto as any).$fastPatch) {
+        return;
+    }
+
+    (proto as any).$fastPatch = true;
+
+    const pop = proto.pop;
+    const push = proto.push;
+    const reverse = proto.reverse;
+    const shift = proto.shift;
+    const sort = proto.sort;
+    const splice = proto.splice;
+    const unshift = proto.unshift;
+
+    proto.pop = function () {
         const notEmpty = this.length > 0;
         const methodCallResult = pop.apply(this, arguments as any);
         const o = (this as any).$fastController as ArrayObserver;
@@ -131,7 +140,7 @@ export function enableArrayObservation(): void {
         return methodCallResult;
     };
 
-    arrayProto.push = function () {
+    proto.push = function () {
         const methodCallResult = push.apply(this, arguments as any);
         const o = (this as any).$fastController as ArrayObserver;
 
@@ -147,7 +156,7 @@ export function enableArrayObservation(): void {
         return methodCallResult;
     };
 
-    arrayProto.reverse = function () {
+    proto.reverse = function () {
         let oldArray;
         const o = (this as any).$fastController as ArrayObserver;
 
@@ -165,7 +174,7 @@ export function enableArrayObservation(): void {
         return methodCallResult;
     };
 
-    arrayProto.shift = function () {
+    proto.shift = function () {
         const notEmpty = this.length > 0;
         const methodCallResult = shift.apply(this, arguments as any);
         const o = (this as any).$fastController as ArrayObserver;
@@ -177,7 +186,7 @@ export function enableArrayObservation(): void {
         return methodCallResult;
     };
 
-    arrayProto.sort = function () {
+    proto.sort = function () {
         let oldArray;
         const o = (this as any).$fastController as ArrayObserver;
 
@@ -195,7 +204,7 @@ export function enableArrayObservation(): void {
         return methodCallResult;
     };
 
-    arrayProto.splice = function () {
+    proto.splice = function () {
         const methodCallResult = splice.apply(this, arguments as any);
         const o = (this as any).$fastController as ArrayObserver;
 
@@ -215,7 +224,7 @@ export function enableArrayObservation(): void {
         return methodCallResult;
     };
 
-    arrayProto.unshift = function () {
+    proto.unshift = function () {
         const methodCallResult = unshift.apply(this, arguments as any);
         const o = (this as any).$fastController as ArrayObserver;