refactor: separate update queue from DOM and fix architectural layers

change/@microsoft-fast-element-3a8ab9d7-d5fb-4e05-abe6-afc934737ac1.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "refactor: separate update queue from DOM and fix architectural layers",
+  "packageName": "@microsoft/fast-element",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@microsoft-fast-foundation-c0af75dd-e94b-4000-b0ed-0921f6208ce2.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update fast-foundation to not use deprecated APIs",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@microsoft-fast-react-wrapper-ea4834af-cf1c-4719-9912-e0f70b074157.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "fix: update fast-react-wrapper to not use deprecated APIs",
+  "packageName": "@microsoft/fast-react-wrapper",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/utilities/fast-react-wrapper/src/index.spec.tsx

@@ -1,4 +1,4 @@
-import { attr, customElement, DOM, FASTElement, html, nullableNumberConverter, observable } from '@microsoft/fast-element';
+import { attr, customElement, DOM, FASTElement, html, nullableNumberConverter, observable, Updates } from '@microsoft/fast-element';
 import React from "react";
 import ReactDOM from "react-dom";
 import { uniqueElementName } from '@microsoft/fast-foundation/testing';
@@ -298,7 +298,7 @@ for (const scenario of scenarios) {
         rnum: 5,
       });
 
-      await DOM.nextUpdate();
+      await Updates.next();
 
       const firstEl = el;
       expect(el.rbool).equal(true);
@@ -315,7 +315,7 @@ for (const scenario of scenarios) {
         rnum: 10,
       });
 
-      await DOM.nextUpdate();
+      await Updates.next();
 
       expect(firstEl).equal(el);
       expect(el.rbool).equal(false);

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

@@ -273,10 +273,8 @@ export type DefaultBindingOptions = {
 
 // @public
 export const DOM: Readonly<{
-    supportsAdoptedStyleSheets: boolean;
-    setUpdateMode: (isAsync: boolean) => void;
     queueUpdate: (callable: Callable) => void;
-    nextUpdate(): Promise<void>;
+    nextUpdate: () => Promise<void>;
     processUpdates: () => void;
     setAttribute(element: HTMLElement, attributeName: string, value: any): void;
     setBooleanAttribute(element: HTMLElement, attributeName: string, value: boolean): void;
@@ -304,6 +302,7 @@ export class ElementStyles {
     get strategy(): StyleStrategy;
     // @internal (undocumented)
     readonly styles: ReadonlyArray<ComposableStyles>;
+    static readonly supportsAdoptedStyleSheets: boolean;
     withBehaviors(...behaviors: Behavior<HTMLElement>[]): this;
     withStrategy(Strategy: ConstructibleStyleStrategy): this;
 }
@@ -776,6 +775,17 @@ export interface TypeRegistry<TDefinition extends TypeDefinition> {
     register(definition: TDefinition): boolean;
 }
 
+// @public
+export interface UpdateQueue {
+    enqueue(callable: Callable): void;
+    next(): Promise<void>;
+    process(): void;
+    setMode(isAsync: boolean): void;
+}
+
+// @public
+export const Updates: UpdateQueue;
+
 // @public
 export interface ValueConverter {
     fromView(value: any): any;

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

@@ -1,7 +1,8 @@
 import { Accessor, Observable } from "../observation/observable.js";
-import { DOM } from "../dom.js";
 import type { Notifier } from "../observation/notifier.js";
 import { isString } from "../interfaces.js";
+import { Updates } from "../observation/update-queue.js";
+import { DOM } from "../templating/dom.js";
 
 /**
  * Represents objects that can convert values to and from
@@ -223,7 +224,7 @@ export class AttributeDefinition implements Accessor {
             return;
         }
 
-        DOM.queueUpdate(() => {
+        Updates.enqueue(() => {
             guards.add(element);
 
             const latestValue = element[this.fieldName];

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

@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { DOM } from "../dom";
+import { ElementStyles } from "../index.debug";
 import type { Behavior } from "../observation/behavior";
 import { Observable } from "../observation/observable";
 import { css } from "../styles/css";
@@ -194,7 +194,7 @@ describe("The Controller", () => {
             expect(toHTML(element)).to.equal("b");
         });
 
-        if (DOM.supportsAdoptedStyleSheets) {
+        if (ElementStyles.supportsAdoptedStyleSheets) {
             it("sets no styles when none are provided", () => {
                 const { shadowRoot, controller } = createController();
 
@@ -289,7 +289,7 @@ describe("The Controller", () => {
             expect(toHTML(element)).to.equal("b");
         });
 
-        if (DOM.supportsAdoptedStyleSheets) {
+        if (ElementStyles.supportsAdoptedStyleSheets) {
             it("can dynamically change the styles", () => {
                 const { shadowRoot, controller } = createController({ styles: stylesA });
 

packages/web-components/fast-element/src/components/fast-definitions.spec.ts

@@ -1,5 +1,4 @@
 import { expect } from "chai";
-import { DOM } from "../dom";
 import { FASTElementDefinition } from "./fast-definitions";
 import { ElementStyles } from "../styles/element-styles";
 
@@ -71,7 +70,7 @@ describe("FASTElementDefinition", () => {
             expect(def.styles!.styles).to.contain(existingStyles2);
         });
 
-        if (DOM.supportsAdoptedStyleSheets) {
+        if (ElementStyles.supportsAdoptedStyleSheets) {
             it("can accept a CSSStyleSheet", () => {
                 const styles = new CSSStyleSheet();
                 const options = {

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

@@ -1,9 +1,4 @@
-export * from "./platform.js";
-export * from "./templating/template.js";
-export * from "./components/fast-element.js";
-export * from "./components/fast-definitions.js";
-export * from "./components/attributes.js";
-export * from "./components/controller.js";
+// Kernel
 export type {
     Callable,
     Constructable,
@@ -14,16 +9,25 @@ export type {
     TrustedTypes,
     TrustedTypesPolicy,
 } from "./interfaces.js";
-export * from "./templating/compiler.js";
-export * from "./styles/element-styles.js";
-export * from "./styles/css.js";
-export * from "./styles/css-directive.js";
+export * from "./platform.js";
+
+// Observation
 export * from "./observation/observable.js";
 export * from "./observation/notifier.js";
 export * from "./observation/array-change-records.js";
 export * from "./observation/array-observer.js";
-export * from "./dom.js";
+export * from "./observation/update-queue.js";
 export type { Behavior } from "./observation/behavior.js";
+
+// Styles
+export * from "./styles/element-styles.js";
+export * from "./styles/css.js";
+export * from "./styles/css-directive.js";
+
+// Templating
+export * from "./templating/dom.js";
+export * from "./templating/template.js";
+export * from "./templating/compiler.js";
 export { Markup, Parser } from "./templating/markup.js";
 export {
     bind,
@@ -43,3 +47,9 @@ export * from "./templating/slotted.js";
 export * from "./templating/children.js";
 export * from "./templating/view.js";
 export * from "./templating/node-observation.js";
+
+// Components
+export * from "./components/fast-element.js";
+export * from "./components/fast-definitions.js";
+export * from "./components/attributes.js";
+export * from "./components/controller.js";

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

@@ -1,4 +1,4 @@
-import { DOM } from "../dom.js";
+import { Updates } from "./update-queue.js";
 import { Splice } from "./array-change-records.js";
 import { SubscriberSet } from "./notifier.js";
 import type { Notifier } from "./notifier.js";
@@ -55,7 +55,7 @@ class ArrayObserver extends SubscriberSet {
     private enqueue(): void {
         if (this.needsQueue) {
             this.needsQueue = false;
-            DOM.queueUpdate(this);
+            Updates.enqueue(this);
         }
     }
 }