@microsoft/fast-element 2.0.0-beta.15 → 2.0.0-beta.17

package/CHANGELOG.json

@@ -1,6 +1,36 @@
 {
   "name": "@microsoft/fast-element",
   "entries": [
+    {
+      "date": "Tue, 01 Nov 2022 23:26:26 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.17",
+      "version": "2.0.0-beta.17",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "roeisenb@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "a4982f452702a8fee67397767b603d4a67702b10",
+            "comment": "fix: prevent circular reference errors when stringifying DOM nodes controlled by FAST's rendering engine"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 28 Oct 2022 20:44:44 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.16",
+      "version": "2.0.0-beta.16",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "5b745b1fb3bf249a7a2d172b7fb69cb08694aadd",
+            "comment": "Fixed bug preventing main component stylesheet behaviors from being connected during connectedCallback"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 25 Oct 2022 20:24:32 GMT",
       "tag": "@microsoft/fast-element_v2.0.0-beta.15",

package/CHANGELOG.md

@@ -1,9 +1,25 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Tue, 25 Oct 2022 20:24:32 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Nov 2022 23:26:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0-beta.17
+
+Tue, 01 Nov 2022 23:26:26 GMT
+
+### Changes
+
+- fix: prevent circular reference errors when stringifying DOM nodes controlled by FAST's rendering engine (roeisenb@microsoft.com)
+
+## 2.0.0-beta.16
+
+Fri, 28 Oct 2022 20:44:44 GMT
+
+### Changes
+
+- Fixed bug preventing main component stylesheet behaviors from being connected during connectedCallback (nicholasrice@users.noreply.github.com)
+
 ## 2.0.0-beta.15
 
 Tue, 25 Oct 2022 20:24:32 GMT

package/dist/dts/components/element-controller.d.ts

@@ -21,7 +21,13 @@ export declare class ElementController<TElement extends HTMLElement = HTMLElemen
     private needsInitialization;
     private hasExistingShadowRoot;
     private _template;
-    private _isConnected;
+    private stage;
+    /**
+     * A guard against connecting behaviors multiple times
+     * during connect in scenarios where a behavior adds
+     * another behavior during it's connectedCallback
+     */
+    private guardBehaviorConnection;
     private behaviors;
     private _mainStyles;
     /**
@@ -53,7 +59,6 @@ export declare class ElementController<TElement extends HTMLElement = HTMLElemen
      * connected to the document.
      */
     get isConnected(): boolean;
-    private setIsConnected;
     /**
      * Gets/sets the template used to render the component.
      * @remarks
@@ -120,6 +125,11 @@ export declare class ElementController<TElement extends HTMLElement = HTMLElemen
      * Only emits events if connected.
      */
     emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): void | boolean;
+    /**
+     * Opts out of JSON stringification.
+     * @internal
+     */
+    toJSON: () => undefined;
     private renderTemplate;
     /**
      * Locates or creates a controller for the specified element.

package/dist/dts/templating/html-directive.d.ts

@@ -1,5 +1,5 @@
 import type { HostBehavior } from "../index.js";
-import type { Constructable } from "../interfaces.js";
+import { Constructable } from "../interfaces.js";
 import type { Subscriber } from "../observation/notifier.js";
 import { Expression, ExpressionController, ExpressionObserver } from "../observation/observable.js";
 /**
@@ -259,6 +259,11 @@ export declare abstract class StatelessAttachedAttributeDirective<TOptions> impl
      * The structural id of the DOM node to which the created behavior will apply.
      */
     nodeId: string;
+    /**
+     * Opts out of JSON stringification.
+     * @internal
+     */
+    toJSON: () => undefined;
     /**
      * Creates an instance of RefDirective.
      * @param options - The options to use in configuring the directive.

package/dist/dts/templating/node-observation.d.ts

@@ -36,7 +36,7 @@ export declare const elements: (selector?: string) => ElementsFilter;
  * Internally used by the SlottedDirective and the ChildrenDirective.
  */
 export declare abstract class NodeObservationDirective<T extends NodeBehaviorOptions> extends StatelessAttachedAttributeDirective<T> {
-    private sourceProperty;
+    private controllerProperty;
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.

package/dist/dts/templating/template.d.ts

@@ -75,6 +75,11 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
      * host that the template is being attached to.
      */
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent>;
+    /**
+     * Opts out of JSON stringification.
+     * @internal
+     */
+    toJSON: () => undefined;
 }
 /**
  * A marker interface used to capture types when interpolating Directive helpers

package/dist/dts/templating/view.d.ts

@@ -1,4 +1,4 @@
-import type { Disposable } from "../interfaces.js";
+import { Disposable } from "../interfaces.js";
 import { ExecutionContext, SourceLifetime } from "../observation/observable.js";
 import type { ViewBehaviorFactory, ViewBehaviorTargets, ViewController } from "./html-directive.js";
 /**
@@ -185,6 +185,11 @@ export declare class HTMLView<TSource = any, TParent = any> implements ElementVi
      * Unbinds a view's behaviors from its binding source.
      */
     unbind(): void;
+    /**
+     * Opts out of JSON stringification.
+     * @internal
+     */
+    toJSON: () => undefined;
     private evaluateUnbindables;
     /**
      * Efficiently disposes of a contiguous range of synthetic view instances.

package/dist/dts/testing/fakes.d.ts

@@ -7,6 +7,7 @@ export declare const Fake: Readonly<{
         onUnbind(object: any): void;
         source: TSource;
         targets: ViewBehaviorTargets;
+        toJSON: () => undefined;
         bind(source: TSource, context?: ExecutionContext<TParent_1>): void;
         unbind(): void;
     };

package/dist/esm/components/element-controller.js

@@ -1,4 +1,4 @@
-import "../interfaces.js";
+import { noop } from "../interfaces.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
 import { Observable, SourceLifetime } from "../observation/observable.js";
 import { FAST } from "../platform.js";
@@ -34,7 +34,13 @@ export class ElementController extends PropertyChangeNotifier {
         this.needsInitialization = true;
         this.hasExistingShadowRoot = false;
         this._template = null;
-        this._isConnected = false;
+        this.stage = 3 /* Stages.disconnected */;
+        /**
+         * A guard against connecting behaviors multiple times
+         * during connect in scenarios where a behavior adds
+         * another behavior during it's connectedCallback
+         */
+        this.guardBehaviorConnection = false;
         this.behaviors = null;
         this._mainStyles = null;
         /**
@@ -52,6 +58,11 @@ export class ElementController extends PropertyChangeNotifier {
          * If `null` then the element is managing its own rendering.
          */
         this.view = null;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
         this.source = element;
         this.definition = definition;
         const shadowOptions = definition.shadowOptions;
@@ -90,11 +101,7 @@ export class ElementController extends PropertyChangeNotifier {
      */
     get isConnected() {
         Observable.track(this, isConnectedPropertyName);
-        return this._isConnected;
-    }
-    setIsConnected(value) {
-        this._isConnected = value;
-        Observable.notify(this, isConnectedPropertyName);
+        return this.stage === 1 /* Stages.connected */;
     }
     /**
      * Gets/sets the template used to render the component.
@@ -169,7 +176,9 @@ export class ElementController extends PropertyChangeNotifier {
         if (count === 0) {
             targetBehaviors.set(behavior, 1);
             behavior.addedCallback && behavior.addedCallback(this);
-            if (behavior.connectedCallback && this.isConnected) {
+            if (behavior.connectedCallback &&
+                !this.guardBehaviorConnection &&
+                (this.stage === 1 /* Stages.connected */ || this.stage === 0 /* Stages.connecting */)) {
                 behavior.connectedCallback(this);
             }
         }
@@ -193,7 +202,7 @@ export class ElementController extends PropertyChangeNotifier {
         }
         if (count === 1 || force) {
             targetBehaviors.delete(behavior);
-            if (behavior.disconnectedCallback && this.isConnected) {
+            if (behavior.disconnectedCallback && this.stage !== 3 /* Stages.disconnected */) {
                 behavior.disconnectedCallback(this);
             }
             behavior.removedCallback && behavior.removedCallback(this);
@@ -254,9 +263,10 @@ export class ElementController extends PropertyChangeNotifier {
      * Runs connected lifecycle behavior on the associated element.
      */
     connect() {
-        if (this._isConnected) {
+        if (this.stage !== 3 /* Stages.disconnected */) {
             return;
         }
+        this.stage = 0 /* Stages.connecting */;
         // If we have any observables that were bound, re-apply their values.
         if (this.boundObservables !== null) {
             const element = this.source;
@@ -270,9 +280,11 @@ export class ElementController extends PropertyChangeNotifier {
         }
         const behaviors = this.behaviors;
         if (behaviors !== null) {
+            this.guardBehaviorConnection = true;
             for (const key of behaviors.keys()) {
                 key.connectedCallback && key.connectedCallback(this);
             }
+            this.guardBehaviorConnection = false;
         }
         if (this.needsInitialization) {
             this.renderTemplate(this.template);
@@ -282,16 +294,18 @@ export class ElementController extends PropertyChangeNotifier {
         else if (this.view !== null) {
             this.view.bind(this.source);
         }
-        this.setIsConnected(true);
+        this.stage = 1 /* Stages.connected */;
+        Observable.notify(this, isConnectedPropertyName);
     }
     /**
      * Runs disconnected lifecycle behavior on the associated element.
      */
     disconnect() {
-        if (!this._isConnected) {
+        if (this.stage !== 1 /* Stages.connected */) {
             return;
         }
-        this.setIsConnected(false);
+        this.stage = 2 /* Stages.disconnecting */;
+        Observable.notify(this, isConnectedPropertyName);
         if (this.view !== null) {
             this.view.unbind();
         }
@@ -301,6 +315,7 @@ export class ElementController extends PropertyChangeNotifier {
                 key.disconnectedCallback && key.disconnectedCallback(this);
             }
         }
+        this.stage = 3 /* Stages.disconnected */;
     }
     /**
      * Runs the attribute changed callback for the associated element.
@@ -323,7 +338,7 @@ export class ElementController extends PropertyChangeNotifier {
      * Only emits events if connected.
      */
     emit(type, detail, options) {
-        if (this._isConnected) {
+        if (this.stage === 1 /* Stages.connected */) {
             return this.source.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
         }
         return false;

package/dist/esm/observation/observable.js

@@ -1,4 +1,4 @@
-import { isFunction, isString, } from "../interfaces.js";
+import { isFunction, isString, noop, } from "../interfaces.js";
 import { createMetadataLocator, FAST } from "../platform.js";
 import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
@@ -79,6 +79,10 @@ export const Observable = FAST.getById(2 /* KernelServiceId.observable */, () =>
             this.propertyName = void 0;
             this.notifier = void 0;
             this.next = void 0;
+            /**
+             * Opts out of JSON stringification.
+             */
+            this.toJSON = noop;
         }
         setMode(isAsync) {
             this.isAsync = this.needsQueue = isAsync;

package/dist/esm/templating/binding-signal.js

@@ -1,4 +1,4 @@
-import { isString } from "../interfaces.js";
+import { isString, noop } from "../interfaces.js";
 import { Binding } from "./html-directive.js";
 const subscribers = Object.create(null);
 export const Signal = Object.freeze({
@@ -41,6 +41,11 @@ class SignalObserver {
         this.dataBinding = dataBinding;
         this.subscriber = subscriber;
         this.isNotBound = true;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
     }
     bind(controller) {
         if (this.isNotBound) {

package/dist/esm/templating/binding-two-way.js

@@ -1,4 +1,4 @@
-import { isString } from "../interfaces.js";
+import { isString, noop } from "../interfaces.js";
 import { Observable, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { Binding } from "./html-directive.js";
@@ -25,6 +25,11 @@ class TwoWayObserver {
         this.subscriber = subscriber;
         this.dataBinding = dataBinding;
         this.isNotBound = true;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
         this.notifier = Observable.binding(dataBinding.evaluate, this, dataBinding.isVolatile);
     }
     bind(controller) {

package/dist/esm/templating/binding.js

@@ -1,4 +1,4 @@
-import { isFunction } from "../interfaces.js";
+import { isFunction, noop } from "../interfaces.js";
 import { ExecutionContext, Observable, } from "../observation/observable.js";
 import { FAST } from "../platform.js";
 import { DOM } from "./dom.js";
@@ -19,6 +19,14 @@ class OnChangeBinding extends Binding {
     }
 }
 class OneTimeBinding extends Binding {
+    constructor() {
+        super(...arguments);
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
+    }
     createObserver() {
         return this;
     }

package/dist/esm/templating/children.js

@@ -1,4 +1,4 @@
-import { isString } from "../interfaces.js";
+import { isString, noop } from "../interfaces.js";
 import { HTMLDirective } from "./html-directive.js";
 import { NodeObservationDirective } from "./node-observation.js";
 /**
@@ -24,9 +24,13 @@ export class ChildrenDirective extends NodeObservationDirective {
      * @param target - The target to observe.
      */
     observe(target) {
-        var _a;
-        const observer = (_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = new MutationObserver(this.handleEvent));
-        observer.target = target;
+        let observer = target[this.observerProperty];
+        if (!observer) {
+            observer = new MutationObserver(this.handleEvent);
+            observer.toJSON = noop;
+            observer.target = target;
+            target[this.observerProperty] = observer;
+        }
         observer.observe(target, this.options);
     }
     /**

package/dist/esm/templating/html-directive.js

@@ -1,3 +1,4 @@
+import { noop } from "../interfaces.js";
 import { ExecutionContext, } from "../observation/observable.js";
 import { createTypeRegistry } from "../platform.js";
 import { Markup, nextId } from "./markup.js";
@@ -201,6 +202,11 @@ export class StatelessAttachedAttributeDirective {
          * The unique id of the factory.
          */
         this.id = nextId();
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.

package/dist/esm/templating/node-observation.js

@@ -18,7 +18,7 @@ export const elements = (selector) => selector
 export class NodeObservationDirective extends StatelessAttachedAttributeDirective {
     constructor() {
         super(...arguments);
-        this.sourceProperty = `${this.id}-s`;
+        this.controllerProperty = `${this.id}-c`;
     }
     /**
      * Bind this behavior to the source.
@@ -28,7 +28,7 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      */
     bind(controller) {
         const target = controller.targets[this.nodeId];
-        target[this.sourceProperty] = controller.source;
+        target[this.controllerProperty] = controller;
         this.updateTarget(controller.source, this.computeNodes(target));
         this.observe(target);
         controller.onUnbind(this);
@@ -43,7 +43,7 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
         const target = controller.targets[this.nodeId];
         this.updateTarget(controller.source, emptyArray);
         this.disconnect(target);
-        target[this.sourceProperty] = null;
+        target[this.controllerProperty] = null;
     }
     /**
      * Gets the data source for the target.
@@ -51,7 +51,7 @@ export class NodeObservationDirective extends StatelessAttachedAttributeDirectiv
      * @returns The source.
      */
     getSource(target) {
-        return target[this.sourceProperty];
+        return target[this.controllerProperty].source;
     }
     /**
      * Updates the source property with the computed nodes.

package/dist/esm/templating/template.js

@@ -1,4 +1,4 @@
-import { isFunction, isString } from "../interfaces.js";
+import { isFunction, isString, noop } from "../interfaces.js";
 import { bind, HTMLBindingDirective, oneTime } from "./binding.js";
 import { Compiler } from "./compiler.js";
 import { Aspect, Binding, HTMLDirective, } from "./html-directive.js";
@@ -15,6 +15,11 @@ export class ViewTemplate {
      */
     constructor(html, factories) {
         this.result = null;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
         this.html = html;
         this.factories = factories;
     }

package/dist/esm/templating/view.js

@@ -1,3 +1,4 @@
+import { noop } from "../interfaces.js";
 import { ExecutionContext, Observable, SourceLifetime, } from "../observation/observable.js";
 function removeNodeSequence(firstNode, lastNode) {
     const parent = firstNode.parentNode;
@@ -50,6 +51,11 @@ export class HTMLView {
          * The length of the current collection within a repeat context.
          */
         this.length = 0;
+        /**
+         * Opts out of JSON stringification.
+         * @internal
+         */
+        this.toJSON = noop;
         this.firstChild = fragment.firstChild;
         this.lastChild = fragment.lastChild;
     }

package/dist/esm/testing/fakes.js

@@ -1,4 +1,5 @@
 import { ExecutionContext, } from "../index.js";
+import { noop } from "../interfaces.js";
 export const Fake = Object.freeze({
     executionContext(parent, parentContext) {
         return {
@@ -83,6 +84,7 @@ export const Fake = Object.freeze({
             },
             source: null,
             targets,
+            toJSON: noop,
             bind(source, context = Fake.executionContext()) {
                 if (this.isBound) {
                     return;

package/dist/fast-element.d.ts

@@ -663,7 +663,13 @@ export declare class ElementController<TElement extends HTMLElement = HTMLElemen
     private needsInitialization;
     private hasExistingShadowRoot;
     private _template;
-    private _isConnected;
+    private stage;
+    /**
+     * A guard against connecting behaviors multiple times
+     * during connect in scenarios where a behavior adds
+     * another behavior during it's connectedCallback
+     */
+    private guardBehaviorConnection;
     private behaviors;
     private _mainStyles;
     /**
@@ -695,7 +701,6 @@ export declare class ElementController<TElement extends HTMLElement = HTMLElemen
      * connected to the document.
      */
     get isConnected(): boolean;
-    private setIsConnected;
     /**
      * Gets/sets the template used to render the component.
      * @remarks
@@ -755,6 +760,7 @@ export declare class ElementController<TElement extends HTMLElement = HTMLElemen
      * Only emits events if connected.
      */
     emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): void | boolean;
+    /* Excluded from this release type: toJSON */
     private renderTemplate;
     /**
      * Locates or creates a controller for the specified element.
@@ -1505,6 +1511,7 @@ export declare class HTMLView<TSource = any, TParent = any> implements ElementVi
      * Unbinds a view's behaviors from its binding source.
      */
     unbind(): void;
+    /* Excluded from this release type: toJSON */
     private evaluateUnbindables;
     /**
      * Efficiently disposes of a contiguous range of synthetic view instances.
@@ -1600,7 +1607,7 @@ export declare interface NodeBehaviorOptions<T = any> {
  * Internally used by the SlottedDirective and the ChildrenDirective.
  */
 export declare abstract class NodeObservationDirective<T extends NodeBehaviorOptions> extends StatelessAttachedAttributeDirective<T> {
-    private sourceProperty;
+    private controllerProperty;
     /**
      * Bind this behavior to the source.
      * @param source - The source to bind to.
@@ -2262,6 +2269,7 @@ export declare abstract class StatelessAttachedAttributeDirective<TOptions> impl
      * The structural id of the DOM node to which the created behavior will apply.
      */
     nodeId: string;
+    /* Excluded from this release type: toJSON */
     /**
      * Creates an instance of RefDirective.
      * @param options - The options to use in configuring the directive.
@@ -2684,6 +2692,7 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
      * host that the template is being attached to.
      */
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent>;
+    /* Excluded from this release type: toJSON */
 }
 
 /**