@microsoft/fast-element 1.7.0 → 1.8.0

package/dist/fast-element.js

@@ -41,6 +41,41 @@ if ($global.trustedTypes === void 0) {
     createPolicy: (n, r) => r
   };
 }
+
+const propConfig = {
+  configurable: false,
+  enumerable: false,
+  writable: false
+};
+
+if ($global.FAST === void 0) {
+  Reflect.defineProperty($global, "FAST", Object.assign({
+    value: Object.create(null)
+  }, propConfig));
+}
+/**
+ * The FAST global.
+ * @internal
+ */
+
+
+const FAST = $global.FAST;
+
+if (FAST.getById === void 0) {
+  const storage = Object.create(null);
+  Reflect.defineProperty(FAST, "getById", Object.assign({
+    value(id, initialize) {
+      let found = storage[id];
+
+      if (found === void 0) {
+        found = initialize ? storage[id] = initialize() : null;
+      }
+
+      return found;
+    }
+
+  }, propConfig));
+}
 /**
  * A readonly, empty array.
  * @remarks
@@ -52,33 +87,75 @@ if ($global.trustedTypes === void 0) {
 
 const emptyArray = Object.freeze([]);
 
-const updateQueue = [];
-/* eslint-disable */
+const updateQueue = $global.FAST.getById(1
+/* updateQueue */
+, () => {
+  const tasks = [];
+  const pendingErrors = [];
 
-const fastHTMLPolicy = $global.trustedTypes.createPolicy("fast-html", {
-  createHTML: html => html
-});
-/* eslint-enable */
+  function throwFirstError() {
+    if (pendingErrors.length) {
+      throw pendingErrors.shift();
+    }
+  }
+
+  function tryRunTask(task) {
+    try {
+      task.call();
+    } catch (error) {
+      pendingErrors.push(error);
+      setTimeout(throwFirstError, 0);
+    }
+  }
 
-let htmlPolicy = fastHTMLPolicy; // We use a queue so we can ensure errors are thrown in order.
+  function process() {
+    const capacity = 1024;
+    let index = 0;
+
+    while (index < tasks.length) {
+      tryRunTask(tasks[index]);
+      index++; // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
+      // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
+      // grow, but to avoid an O(n) walk for every task we execute, we don't
+      // shift tasks off the queue after they have been executed.
+      // Instead, we periodically shift 1024 tasks off the queue.
+
+      if (index > capacity) {
+        // Manually shift all values starting at the index back to the
+        // beginning of the queue.
+        for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) {
+          tasks[scan] = tasks[scan + index];
+        }
 
-const pendingErrors = [];
+        tasks.length -= index;
+        index = 0;
+      }
+    }
 
-function throwFirstError() {
-  if (pendingErrors.length) {
-    throw pendingErrors.shift();
+    tasks.length = 0;
   }
-}
 
-function tryRunTask(task) {
-  try {
-    task.call();
-  } catch (error) {
-    pendingErrors.push(error);
-    setTimeout(throwFirstError, 0);
+  function enqueue(callable) {
+    if (tasks.length < 1) {
+      $global.requestAnimationFrame(process);
+    }
+
+    tasks.push(callable);
   }
-}
 
+  return Object.freeze({
+    enqueue,
+    process
+  });
+});
+/* eslint-disable */
+
+const fastHTMLPolicy = $global.trustedTypes.createPolicy("fast-html", {
+  createHTML: html => html
+});
+/* eslint-enable */
+
+let htmlPolicy = fastHTMLPolicy;
 const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
 /** @internal */
 
@@ -176,13 +253,7 @@ const DOM = Object.freeze({
    * Schedules DOM update work in the next async batch.
    * @param callable - The callable function or object to queue.
    */
-  queueUpdate(callable) {
-    if (updateQueue.length < 1) {
-      window.requestAnimationFrame(DOM.processUpdates);
-    }
-
-    updateQueue.push(callable);
-  },
+  queueUpdate: updateQueue.enqueue,
 
   /**
    * Immediately processes all work previously scheduled
@@ -191,40 +262,13 @@ const DOM = Object.freeze({
    * This also forces nextUpdate promises
    * to resolve.
    */
-  processUpdates() {
-    const capacity = 1024;
-    let index = 0;
-
-    while (index < updateQueue.length) {
-      tryRunTask(updateQueue[index]);
-      index++; // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
-      // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
-      // grow, but to avoid an O(n) walk for every task we execute, we don't
-      // shift tasks off the queue after they have been executed.
-      // Instead, we periodically shift 1024 tasks off the queue.
-
-      if (index > capacity) {
-        // Manually shift all values starting at the index back to the
-        // beginning of the queue.
-        for (let scan = 0, newLength = updateQueue.length - index; scan < newLength; scan++) {
-          updateQueue[scan] = updateQueue[scan + index];
-        }
-
-        updateQueue.length -= index;
-        index = 0;
-      }
-    }
-
-    updateQueue.length = 0;
-  },
+  processUpdates: updateQueue.process,
 
   /**
    * Resolves with the next DOM update.
    */
   nextUpdate() {
-    return new Promise(resolve => {
-      DOM.queueUpdate(resolve);
-    });
+    return new Promise(updateQueue.enqueue);
   },
 
   /**
@@ -484,69 +528,25 @@ class PropertyChangeNotifier {
 
 }
 
-const volatileRegex = /(:|&&|\|\||if)/;
-const notifierLookup = new WeakMap();
-const accessorLookup = new WeakMap();
-let watcher = void 0;
-
-let createArrayObserver = array => {
-  throw new Error("Must call enableArrayObservation before observing arrays.");
-};
-
-class DefaultObservableAccessor {
-  constructor(name) {
-    this.name = name;
-    this.field = `_${name}`;
-    this.callback = `${name}Changed`;
-  }
-
-  getValue(source) {
-    if (watcher !== void 0) {
-      watcher.watch(source, this.name);
-    }
-
-    return source[this.field];
-  }
-
-  setValue(source, newValue) {
-    const field = this.field;
-    const oldValue = source[field];
-
-    if (oldValue !== newValue) {
-      source[field] = newValue;
-      const callback = source[this.callback];
-
-      if (typeof callback === "function") {
-        callback.call(source, oldValue, newValue);
-      }
-      /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-
-
-      getNotifier(source).notify(this.name);
-    }
-  }
-
-}
 /**
  * Common Observable APIs.
  * @public
  */
 
+const Observable = FAST.getById(2
+/* observable */
+, () => {
+  const volatileRegex = /(:|&&|\|\||if)/;
+  const notifierLookup = new WeakMap();
+  const accessorLookup = new WeakMap();
+  const queueUpdate = DOM.queueUpdate;
+  let watcher = void 0;
+
+  let createArrayObserver = array => {
+    throw new Error("Must call enableArrayObservation before observing arrays.");
+  };
 
-const Observable = Object.freeze({
-  /**
-   * @internal
-   * @param factory - The factory used to create array observers.
-   */
-  setArrayObserverFactory(factory) {
-    createArrayObserver = factory;
-  },
-
-  /**
-   * Gets a notifier for an object or Array.
-   * @param source - The object or Array to get the notifier for.
-   */
-  getNotifier(source) {
+  function getNotifier(source) {
     let found = source.$fastController || notifierLookup.get(source);
 
     if (found === void 0) {
@@ -558,68 +558,9 @@ const Observable = Object.freeze({
     }
 
     return found;
-  },
-
-  /**
-   * Records a property change for a source object.
-   * @param source - The object to record the change against.
-   * @param propertyName - The property to track as changed.
-   */
-  track(source, propertyName) {
-    if (watcher !== void 0) {
-      watcher.watch(source, propertyName);
-    }
-  },
-
-  /**
-   * Notifies watchers that the currently executing property getter or function is volatile
-   * with respect to its observable dependencies.
-   */
-  trackVolatile() {
-    if (watcher !== void 0) {
-      watcher.needsRefresh = true;
-    }
-  },
-
-  /**
-   * Notifies subscribers of a source object of changes.
-   * @param source - the object to notify of changes.
-   * @param args - The change args to pass to subscribers.
-   */
-  notify(source, args) {
-    /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-    getNotifier(source).notify(args);
-  },
-
-  /**
-   * Defines an observable property on an object or prototype.
-   * @param target - The target object to define the observable on.
-   * @param nameOrAccessor - The name of the property to define as observable;
-   * or a custom accessor that specifies the property name and accessor implementation.
-   */
-  defineProperty(target, nameOrAccessor) {
-    if (typeof nameOrAccessor === "string") {
-      nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
-    }
-
-    this.getAccessors(target).push(nameOrAccessor);
-    Reflect.defineProperty(target, nameOrAccessor.name, {
-      enumerable: true,
-      get: function () {
-        return nameOrAccessor.getValue(this);
-      },
-      set: function (newValue) {
-        nameOrAccessor.setValue(this, newValue);
-      }
-    });
-  },
+  }
 
-  /**
-   * Finds all the observable accessors defined on the target,
-   * including its prototype chain.
-   * @param target - The target object to search for accessor on.
-   */
-  getAccessors(target) {
+  function getAccessors(target) {
     let accessors = accessorLookup.get(target);
 
     if (accessors === void 0) {
@@ -640,33 +581,253 @@ const Observable = Object.freeze({
     }
 
     return accessors;
-  },
+  }
 
-  /**
-   * Creates a {@link BindingObserver} that can watch the
-   * provided {@link Binding} for changes.
-   * @param binding - The binding to observe.
-   * @param initialSubscriber - An initial subscriber to changes in the binding value.
-   * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
-   */
-  binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
-    /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
-    return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
-  },
+  class DefaultObservableAccessor {
+    constructor(name) {
+      this.name = name;
+      this.field = `_${name}`;
+      this.callback = `${name}Changed`;
+    }
+
+    getValue(source) {
+      if (watcher !== void 0) {
+        watcher.watch(source, this.name);
+      }
+
+      return source[this.field];
+    }
+
+    setValue(source, newValue) {
+      const field = this.field;
+      const oldValue = source[field];
+
+      if (oldValue !== newValue) {
+        source[field] = newValue;
+        const callback = source[this.callback];
+
+        if (typeof callback === "function") {
+          callback.call(source, oldValue, newValue);
+        }
+
+        getNotifier(source).notify(this.name);
+      }
+    }
 
-  /**
-   * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
-   * on every evaluation of the value.
-   * @param binding - The binding to inspect.
-   */
-  isVolatileBinding(binding) {
-    return volatileRegex.test(binding.toString());
   }
 
+  class BindingObserverImplementation extends SubscriberSet {
+    constructor(binding, initialSubscriber, isVolatileBinding = false) {
+      super(binding, initialSubscriber);
+      this.binding = binding;
+      this.isVolatileBinding = isVolatileBinding;
+      this.needsRefresh = true;
+      this.needsQueue = true;
+      this.first = this;
+      this.last = null;
+      this.propertySource = void 0;
+      this.propertyName = void 0;
+      this.notifier = void 0;
+      this.next = void 0;
+    }
+
+    observe(source, context) {
+      if (this.needsRefresh && this.last !== null) {
+        this.disconnect();
+      }
+
+      const previousWatcher = watcher;
+      watcher = this.needsRefresh ? this : void 0;
+      this.needsRefresh = this.isVolatileBinding;
+      const result = this.binding(source, context);
+      watcher = previousWatcher;
+      return result;
+    }
+
+    disconnect() {
+      if (this.last !== null) {
+        let current = this.first;
+
+        while (current !== void 0) {
+          current.notifier.unsubscribe(this, current.propertyName);
+          current = current.next;
+        }
+
+        this.last = null;
+        this.needsRefresh = this.needsQueue = true;
+      }
+    }
+
+    watch(propertySource, propertyName) {
+      const prev = this.last;
+      const notifier = getNotifier(propertySource);
+      const current = prev === null ? this.first : {};
+      current.propertySource = propertySource;
+      current.propertyName = propertyName;
+      current.notifier = notifier;
+      notifier.subscribe(this, propertyName);
+
+      if (prev !== null) {
+        if (!this.needsRefresh) {
+          // Declaring the variable prior to assignment below circumvents
+          // a bug in Angular's optimization process causing infinite recursion
+          // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
+          let prevValue;
+          watcher = void 0;
+          /* eslint-disable-next-line */
+
+          prevValue = prev.propertySource[prev.propertyName];
+          watcher = this;
+
+          if (propertySource === prevValue) {
+            this.needsRefresh = true;
+          }
+        }
+
+        prev.next = current;
+      }
+
+      this.last = current;
+    }
+
+    handleChange() {
+      if (this.needsQueue) {
+        this.needsQueue = false;
+        queueUpdate(this);
+      }
+    }
+
+    call() {
+      if (this.last !== null) {
+        this.needsQueue = true;
+        this.notify(this);
+      }
+    }
+
+    records() {
+      let next = this.first;
+      return {
+        next: () => {
+          const current = next;
+
+          if (current === undefined) {
+            return {
+              value: void 0,
+              done: true
+            };
+          } else {
+            next = next.next;
+            return {
+              value: current,
+              done: false
+            };
+          }
+        },
+        [Symbol.iterator]: function () {
+          return this;
+        }
+      };
+    }
+
+  }
+
+  return Object.freeze({
+    /**
+     * @internal
+     * @param factory - The factory used to create array observers.
+     */
+    setArrayObserverFactory(factory) {
+      createArrayObserver = factory;
+    },
+
+    /**
+     * Gets a notifier for an object or Array.
+     * @param source - The object or Array to get the notifier for.
+     */
+    getNotifier,
+
+    /**
+     * Records a property change for a source object.
+     * @param source - The object to record the change against.
+     * @param propertyName - The property to track as changed.
+     */
+    track(source, propertyName) {
+      if (watcher !== void 0) {
+        watcher.watch(source, propertyName);
+      }
+    },
+
+    /**
+     * Notifies watchers that the currently executing property getter or function is volatile
+     * with respect to its observable dependencies.
+     */
+    trackVolatile() {
+      if (watcher !== void 0) {
+        watcher.needsRefresh = true;
+      }
+    },
+
+    /**
+     * Notifies subscribers of a source object of changes.
+     * @param source - the object to notify of changes.
+     * @param args - The change args to pass to subscribers.
+     */
+    notify(source, args) {
+      getNotifier(source).notify(args);
+    },
+
+    /**
+     * Defines an observable property on an object or prototype.
+     * @param target - The target object to define the observable on.
+     * @param nameOrAccessor - The name of the property to define as observable;
+     * or a custom accessor that specifies the property name and accessor implementation.
+     */
+    defineProperty(target, nameOrAccessor) {
+      if (typeof nameOrAccessor === "string") {
+        nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
+      }
+
+      getAccessors(target).push(nameOrAccessor);
+      Reflect.defineProperty(target, nameOrAccessor.name, {
+        enumerable: true,
+        get: function () {
+          return nameOrAccessor.getValue(this);
+        },
+        set: function (newValue) {
+          nameOrAccessor.setValue(this, newValue);
+        }
+      });
+    },
+
+    /**
+     * Finds all the observable accessors defined on the target,
+     * including its prototype chain.
+     * @param target - The target object to search for accessor on.
+     */
+    getAccessors,
+
+    /**
+     * Creates a {@link BindingObserver} that can watch the
+     * provided {@link Binding} for changes.
+     * @param binding - The binding to observe.
+     * @param initialSubscriber - An initial subscriber to changes in the binding value.
+     * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
+     */
+    binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
+      return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
+    },
+
+    /**
+     * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
+     * on every evaluation of the value.
+     * @param binding - The binding to inspect.
+     */
+    isVolatileBinding(binding) {
+      return volatileRegex.test(binding.toString());
+    }
+
+  });
 });
-const getNotifier = Observable.getNotifier;
-const trackVolatile = Observable.trackVolatile;
-const queueUpdate = DOM.queueUpdate;
 /**
  * Decorator: Defines an observable property on the target.
  * @param target - The target to define the observable on.
@@ -688,20 +849,26 @@ function observable(target, nameOrAccessor) {
 function volatile(target, name, descriptor) {
   return Object.assign({}, descriptor, {
     get: function () {
-      trackVolatile();
+      Observable.trackVolatile();
       return descriptor.get.apply(this);
     }
   });
 }
-let currentEvent = null;
-/**
- * @param event - The event to set as current for the context.
- * @internal
- */
+const contextEvent = FAST.getById(3
+/* contextEvent */
+, () => {
+  let current = null;
+  return {
+    get() {
+      return current;
+    },
 
-function setCurrentEvent(event) {
-  currentEvent = event;
-}
+    set(event) {
+      current = event;
+    }
+
+  };
+});
 /**
  * Provides additional contextual information available to behaviors and expressions.
  * @public
@@ -735,7 +902,7 @@ class ExecutionContext {
 
 
   get event() {
-    return currentEvent;
+    return contextEvent.get();
   }
   /**
    * Indicates whether the current item within a repeat context
@@ -782,6 +949,16 @@ class ExecutionContext {
   get isLast() {
     return this.index === this.length - 1;
   }
+  /**
+   * Sets the event for the current execution context.
+   * @param event - The event to set.
+   * @internal
+   */
+
+
+  static setEvent(event) {
+    contextEvent.set(event);
+  }
 
 }
 Observable.defineProperty(ExecutionContext.prototype, "index");
@@ -793,127 +970,6 @@ Observable.defineProperty(ExecutionContext.prototype, "length");
 
 const defaultExecutionContext = Object.seal(new ExecutionContext());
 
-class BindingObserverImplementation extends SubscriberSet {
-  constructor(binding, initialSubscriber, isVolatileBinding = false) {
-    super(binding, initialSubscriber);
-    this.binding = binding;
-    this.isVolatileBinding = isVolatileBinding;
-    this.needsRefresh = true;
-    this.needsQueue = true;
-    this.first = this;
-    this.last = null;
-    this.propertySource = void 0;
-    this.propertyName = void 0;
-    this.notifier = void 0;
-    this.next = void 0;
-  }
-
-  observe(source, context) {
-    if (this.needsRefresh && this.last !== null) {
-      this.disconnect();
-    }
-
-    const previousWatcher = watcher;
-    watcher = this.needsRefresh ? this : void 0;
-    this.needsRefresh = this.isVolatileBinding;
-    const result = this.binding(source, context);
-    watcher = previousWatcher;
-    return result;
-  }
-
-  disconnect() {
-    if (this.last !== null) {
-      let current = this.first;
-
-      while (current !== void 0) {
-        current.notifier.unsubscribe(this, current.propertyName);
-        current = current.next;
-      }
-
-      this.last = null;
-      this.needsRefresh = this.needsQueue = true;
-    }
-  }
-  /** @internal */
-
-
-  watch(propertySource, propertyName) {
-    const prev = this.last;
-    const notifier = getNotifier(propertySource);
-    const current = prev === null ? this.first : {};
-    current.propertySource = propertySource;
-    current.propertyName = propertyName;
-    current.notifier = notifier;
-    notifier.subscribe(this, propertyName);
-
-    if (prev !== null) {
-      if (!this.needsRefresh) {
-        // Declaring the variable prior to assignment below circumvents
-        // a bug in Angular's optimization process causing infinite recursion
-        // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
-        let prevValue;
-        watcher = void 0;
-        /* eslint-disable-next-line */
-
-        prevValue = prev.propertySource[prev.propertyName];
-        watcher = this;
-
-        if (propertySource === prevValue) {
-          this.needsRefresh = true;
-        }
-      }
-
-      prev.next = current;
-    }
-
-    this.last = current;
-  }
-  /** @internal */
-
-
-  handleChange() {
-    if (this.needsQueue) {
-      this.needsQueue = false;
-      queueUpdate(this);
-    }
-  }
-  /** @internal */
-
-
-  call() {
-    if (this.last !== null) {
-      this.needsQueue = true;
-      this.notify(this);
-    }
-  }
-
-  records() {
-    let next = this.first;
-    return {
-      next: () => {
-        const current = next;
-
-        if (current === undefined) {
-          return {
-            value: void 0,
-            done: true
-          };
-        } else {
-          next = next.next;
-          return {
-            value: current,
-            done: false
-          };
-        }
-      },
-      [Symbol.iterator]: function () {
-        return this;
-      }
-    };
-  }
-
-}
-
 /**
  * Instructs the template engine to apply behavior to a node.
  * @public
@@ -1276,9 +1332,9 @@ class BindingBehavior {
 
 
   handleEvent(event) {
-    setCurrentEvent(event);
+    ExecutionContext.setEvent(event);
     const result = this.binding(this.source, this.context);
-    setCurrentEvent(null);
+    ExecutionContext.setEvent(null);
 
     if (result !== true) {
       event.preventDefault();
@@ -2274,7 +2330,26 @@ const defaultShadowOptions = {
   mode: "open"
 };
 const defaultElementOptions = {};
-const fastDefinitions = new Map();
+const fastRegistry = FAST.getById(4
+/* elementRegistry */
+, () => {
+  const typeToDefinition = new Map();
+  return Object.freeze({
+    register(definition) {
+      if (typeToDefinition.has(definition.type)) {
+        return false;
+      }
+
+      typeToDefinition.set(definition.type, definition);
+      return true;
+    },
+
+    getByType(key) {
+      return typeToDefinition.get(key);
+    }
+
+  });
+});
 /**
  * Defines metadata for a FASTElement.
  * @public
@@ -2317,6 +2392,14 @@ class FASTElementDefinition {
     this.elementOptions = nameOrConfig.elementOptions === void 0 ? defaultElementOptions : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
     this.styles = nameOrConfig.styles === void 0 ? void 0 : Array.isArray(nameOrConfig.styles) ? ElementStyles.create(nameOrConfig.styles) : nameOrConfig.styles instanceof ElementStyles ? nameOrConfig.styles : ElementStyles.create([nameOrConfig.styles]);
   }
+  /**
+   * Indicates if this element has been defined in at least one registry.
+   */
+
+
+  get isDefined() {
+    return !!fastRegistry.getByType(this.type);
+  }
   /**
    * Defines a custom element based on this definition.
    * @param registry - The element registry to define the element in.
@@ -2326,7 +2409,7 @@ class FASTElementDefinition {
   define(registry = customElements) {
     const type = this.type;
 
-    if (!this.isDefined) {
+    if (fastRegistry.register(this)) {
       const attributes = this.attributes;
       const proto = type.prototype;
 
@@ -2338,8 +2421,6 @@ class FASTElementDefinition {
         value: this.observedAttributes,
         enumerable: true
       });
-      fastDefinitions.set(type, this);
-      this.isDefined = true;
     }
 
     if (!registry.get(this.name)) {
@@ -2348,17 +2429,14 @@ class FASTElementDefinition {
 
     return this;
   }
-  /**
-   * Gets the element definition associated with the specified type.
-   * @param type - The custom element type to retrieve the definition for.
-   */
-
-
-  static forType(type) {
-    return fastDefinitions.get(type);
-  }
 
 }
+/**
+ * Gets the element definition associated with the specified type.
+ * @param type - The custom element type to retrieve the definition for.
+ */
+
+FASTElementDefinition.forType = fastRegistry.getByType;
 
 const shadowRoots = new WeakMap();
 const defaultEventOptions = {
@@ -3434,7 +3512,10 @@ class ArrayObserver extends SubscriberSet {
     this.splices = void 0;
     this.needsQueue = true;
     this.call = this.flush;
-    source.$fastController = this;
+    Reflect.defineProperty(source, "$fastController", {
+      value: this,
+      enumerable: false
+    });
   }
 
   addSplice(splice) {
@@ -3498,16 +3579,26 @@ function enableArrayObservation() {
   Observable.setArrayObserverFactory(collection => {
     return new ArrayObserver(collection);
   });
-  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.$fastPatch) {
+    return;
+  }
+
+  Reflect.defineProperty(proto, "$fastPatch", {
+    value: 1,
+    enumerable: false
+  });
+  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);
     const o = this.$fastController;
@@ -3519,7 +3610,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.push = function () {
+  proto.push = function () {
     const methodCallResult = push.apply(this, arguments);
     const o = this.$fastController;
 
@@ -3530,7 +3621,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.reverse = function () {
+  proto.reverse = function () {
     let oldArray;
     const o = this.$fastController;
 
@@ -3548,7 +3639,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.shift = function () {
+  proto.shift = function () {
     const notEmpty = this.length > 0;
     const methodCallResult = shift.apply(this, arguments);
     const o = this.$fastController;
@@ -3560,7 +3651,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.sort = function () {
+  proto.sort = function () {
     let oldArray;
     const o = this.$fastController;
 
@@ -3578,7 +3669,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.splice = function () {
+  proto.splice = function () {
     const methodCallResult = splice.apply(this, arguments);
     const o = this.$fastController;
 
@@ -3589,7 +3680,7 @@ function enableArrayObservation() {
     return methodCallResult;
   };
 
-  arrayProto.unshift = function () {
+  proto.unshift = function () {
     const methodCallResult = unshift.apply(this, arguments);
     const o = this.$fastController;
 
@@ -4150,4 +4241,4 @@ function children(propertyOrOptions) {
   return new AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
 }
 
-export { $global, AttachedBehaviorHTMLDirective, AttributeDefinition, BindingBehavior, CSSDirective, ChildrenBehavior, Controller, DOM, ElementStyles, ExecutionContext, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Observable, PropertyChangeNotifier, RefBehavior, RepeatBehavior, RepeatDirective, SlottedBehavior, SubscriberSet, TargetedHTMLDirective, ViewTemplate, attr, booleanConverter, children, compileTemplate, css, cssPartial, customElement, defaultExecutionContext, elements, emptyArray, enableArrayObservation, html, nullableNumberConverter, observable, ref, repeat, setCurrentEvent, slotted, volatile, when };
+export { $global, AttachedBehaviorHTMLDirective, AttributeDefinition, BindingBehavior, CSSDirective, ChildrenBehavior, Controller, DOM, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Observable, PropertyChangeNotifier, RefBehavior, RepeatBehavior, RepeatDirective, SlottedBehavior, SubscriberSet, TargetedHTMLDirective, ViewTemplate, attr, booleanConverter, children, compileTemplate, css, cssPartial, customElement, defaultExecutionContext, elements, emptyArray, enableArrayObservation, html, nullableNumberConverter, observable, ref, repeat, slotted, volatile, when };