chore(web-components): Upgrade Fluent Web Components to FAST Element v3

apps/vr-tests-web-components/package.json

@@ -18,7 +18,7 @@
     "html-react-parser": "4.0.0",
     "@fluentui/tokens": ">=1.0.0-alpha",
     "@fluentui/web-components": ">=3.0.0-alpha",
-    "@microsoft/fast-element": "^2.0.0",
+    "@microsoft/fast-element": "^3.0.0",
     "tslib": "^2.1.0"
   }
 }

change/@fluentui-chart-web-components-60dd95d5-d74f-488d-bd5c-3639e4e5fc02.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: upgrade to FAST Element v3",
+  "packageName": "@fluentui/chart-web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-web-components-33e6ef9c-36bb-4072-9bea-aadda8c76bea.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "refactor: migrate async definitions to fast-element v3 declarative API",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

package.json

@@ -72,10 +72,9 @@
     "@microsoft/api-extractor": "7.51.0",
     "@microsoft/api-extractor-model": "7.31.2",
     "@microsoft/eslint-plugin-sdl": "1.0.1",
-    "@microsoft/fast-build": "0.7.0",
-    "@microsoft/fast-element": "2.10.4",
-    "@microsoft/fast-html": "1.0.0-alpha.54",
-    "@microsoft/fast-test-harness": "0.3.1",
+    "@microsoft/fast-build": "0.9.0",
+    "@microsoft/fast-element": "3.0.0",
+    "@microsoft/fast-test-harness": "0.4.0",
     "@microsoft/focusgroup-polyfill": "1.5.0",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",

packages/charts/chart-web-components/package.json

@@ -78,7 +78,7 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.0.0"
+    "@microsoft/fast-element": "^3.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [

packages/web-components/docs/web-components.api.md

@@ -731,6 +731,8 @@ export class BaseField extends FASTElement {
     // (undocumented)
     setValidationStates(): void;
     // @internal
+    protected get slottedInputObserver(): MutationObserver;
+    // @internal
     slottedInputs: SlottableInput[];
     // @internal
     slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;

packages/web-components/package.json

@@ -48,6 +48,7 @@
     "./*/define.js": "./dist/esm/*/define.js",
     "./*/define-async.js": "./dist/esm/*/define-async.js",
     "./*/definition.js": "./dist/esm/*/*.definition.js",
+    "./*/definition-async.js": "./dist/esm/*/*.definition-async.js",
     "./*/options.js": "./dist/esm/*/*.options.js",
     "./*/styles.js": "./dist/esm/*/*.styles.js",
     "./*/styles.css": "./dist/esm/*/*.styles.css",
@@ -109,18 +110,12 @@
     "rollup-plugin-fast-tagged-templates": "^1.0.2"
   },
   "dependencies": {
-    "@fluentui/tokens": "1.0.0-alpha.23",
+    "@fluentui/tokens": "^1.0.0-alpha.23",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.0.0",
-    "@microsoft/fast-html": "^1.0.0-alpha.53",
-    "@microsoft/focusgroup-polyfill": "^1.4.1"
-  },
-  "peerDependenciesMeta": {
-    "@microsoft/fast-html": {
-      "optional": true
-    }
+    "@microsoft/fast-element": "^3.0.0",
+    "@microsoft/focusgroup-polyfill": "^1.5.0"
   },
   "beachball": {
     "disallowedChangeTypes": [

packages/web-components/src/accordion-item/accordion-item.definition-async.ts

@@ -1,15 +1,17 @@
-import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './accordion-item.options.js';
 
 /**
- * The async definition configuration for the fluent-accordion-item element.
+ * The async definition configuration for the `<fluent-accordion-item>` element.
  *
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
  * is provided as a deferred option to be hydrated later.
  */
-export const definition: PartialFASTElementDefinition = {
+export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
 };

packages/web-components/src/accordion-item/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './accordion-item.definition-async.js';
+import { declarativeDefinition } from './accordion-item.definition-async.js';
 import { AccordionItem } from './accordion-item.js';
 
-RenderableFASTElement(AccordionItem).defineAsync(definition);
+AccordionItem.define(declarativeDefinition);

packages/web-components/src/accordion/accordion.definition-async.ts

@@ -1,8 +1,9 @@
-import { type PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './accordion.options.js';
 
 /**
- * The async definition configuration for the fluent-accordion element.
+ * The async definition configuration for the `<fluent-accordion>` element.
  *
  * @public
  * @remarks
@@ -11,5 +12,6 @@ import { tagName } from './accordion.options.js';
  */
 export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
-} as const;
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
+};

packages/web-components/src/accordion/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
 import { declarativeDefinition } from './accordion.definition-async.js';
 import { Accordion } from './accordion.js';
 
-RenderableFASTElement(Accordion).defineAsync(declarativeDefinition);
+Accordion.define(declarativeDefinition);

packages/web-components/src/anchor-button/anchor-button.definition-async.ts

@@ -1,15 +1,17 @@
-import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './anchor-button.options.js';
 
 /**
- * The async definition configuration for the fluent-anchor-button element.
+ * The async definition configuration for the `<fluent-anchor-button>` element.
  *
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
  * is provided as a deferred option to be hydrated later.
  */
-export const definition: PartialFASTElementDefinition = {
+export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
 };

packages/web-components/src/anchor-button/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './anchor-button.definition-async.js';
+import { declarativeDefinition } from './anchor-button.definition-async.js';
 import { AnchorButton } from './anchor-button.js';
 
-RenderableFASTElement(AnchorButton).defineAsync(definition);
+AnchorButton.define(declarativeDefinition);

packages/web-components/src/avatar/avatar.definition-async.ts

@@ -1,15 +1,17 @@
-import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './avatar.options.js';
 
 /**
- * The async definition configuration for the fluent-avatar element.
+ * The async definition configuration for the `<fluent-avatar>` element.
  *
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
  * is provided as a deferred option to be hydrated later.
  */
-export const definition: PartialFASTElementDefinition = {
+export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
 };

packages/web-components/src/avatar/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './avatar.definition-async.js';
+import { declarativeDefinition } from './avatar.definition-async.js';
 import { Avatar } from './avatar.js';
 
-RenderableFASTElement(Avatar).defineAsync(definition);
+Avatar.define(declarativeDefinition);

packages/web-components/src/badge/badge.definition-async.ts

@@ -1,15 +1,17 @@
-import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './badge.options.js';
 
 /**
- * The async definition configuration for the fluent-badge element.
+ * The async definition configuration for the `<fluent-badge>` element.
  *
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
  * is provided as a deferred option to be hydrated later.
  */
-export const definition: PartialFASTElementDefinition = {
+export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
 };

packages/web-components/src/badge/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './badge.definition-async.js';
+import { declarativeDefinition } from './badge.definition-async.js';
 import { Badge } from './badge.js';
 
-RenderableFASTElement(Badge).defineAsync(definition);
+Badge.define(declarativeDefinition);

packages/web-components/src/button/button.definition-async.ts

@@ -1,15 +1,17 @@
-import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './button.options.js';
 
 /**
- * The async definition configuration for the fluent-button element.
+ * The async definition configuration for the `<fluent-button>` element.
  *
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
  * is provided as a deferred option to be hydrated later.
  */
-export const definition: PartialFASTElementDefinition = {
+export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
 };

packages/web-components/src/button/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './button.definition-async.js';
+import { declarativeDefinition } from './button.definition-async.js';
 import { Button } from './button.js';
 
-RenderableFASTElement(Button).defineAsync(definition);
+Button.define(declarativeDefinition);

packages/web-components/src/checkbox/checkbox.definition-async.ts

@@ -1,15 +1,17 @@
-import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './checkbox.options.js';
 
 /**
- * The async definition configuration for the fluent-checkbox element.
+ * The async definition configuration for the `<fluent-checkbox>` element.
  *
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
  * is provided as a deferred option to be hydrated later.
  */
-export const definition: PartialFASTElementDefinition = {
+export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
 };

packages/web-components/src/checkbox/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './checkbox.definition-async.js';
+import { declarativeDefinition } from './checkbox.definition-async.js';
 import { Checkbox } from './checkbox.js';
 
-RenderableFASTElement(Checkbox).defineAsync(definition);
+Checkbox.define(declarativeDefinition);

packages/web-components/src/compound-button/compound-button.definition-async.ts

@@ -1,15 +1,17 @@
-import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './compound-button.options.js';
 
 /**
- * The async definition configuration for the fluent-compound-button element.
+ * The async definition configuration for the `<fluent-compound-button>` element.
  *
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
  * is provided as a deferred option to be hydrated later.
  */
-export const definition: PartialFASTElementDefinition = {
+export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
 };

packages/web-components/src/compound-button/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './compound-button.definition-async.js';
+import { declarativeDefinition } from './compound-button.definition-async.js';
 import { CompoundButton } from './compound-button.js';
 
-RenderableFASTElement(CompoundButton).defineAsync(definition);
+CompoundButton.define(declarativeDefinition);

packages/web-components/src/counter-badge/counter-badge.definition-async.ts

@@ -1,15 +1,17 @@
-import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './counter-badge.options.js';
 
 /**
- * The async definition configuration for the fluent-counter-badge element.
+ * The async definition configuration for the `<fluent-counter-badge>` element.
  *
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
  * is provided as a deferred option to be hydrated later.
  */
-export const definition: PartialFASTElementDefinition = {
+export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
 };

packages/web-components/src/counter-badge/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './counter-badge.definition-async.js';
+import { declarativeDefinition } from './counter-badge.definition-async.js';
 import { CounterBadge } from './counter-badge.js';
 
-RenderableFASTElement(CounterBadge).defineAsync(definition);
+CounterBadge.define(declarativeDefinition);

packages/web-components/src/dialog-body/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './dialog-body.definition-async.js';
+import { declarativeDefinition } from './dialog-body.definition-async.js';
 import { DialogBody } from './dialog-body.js';
 
-RenderableFASTElement(DialogBody).defineAsync(definition);
+DialogBody.define(declarativeDefinition);

packages/web-components/src/dialog-body/dialog-body.definition-async.ts

@@ -1,15 +1,17 @@
-import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate, type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { tagName } from './dialog-body.options.js';
 
 /**
- * The async definition configuration for the fluent-dialog-body element.
+ * The async definition configuration for the `<fluent-dialog-body>` element.
  *
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
  * is provided as a deferred option to be hydrated later.
  */
-export const definition: PartialFASTElementDefinition = {
+export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  registry: FluentDesignSystem.registry,
+  template: declarativeTemplate(),
 };

packages/web-components/src/dialog/define-async.ts

@@ -1,5 +1,4 @@
-import { RenderableFASTElement } from '@microsoft/fast-html';
-import { definition } from './dialog.definition-async.js';
+import { declarativeDefinition } from './dialog.definition-async.js';
 import { Dialog } from './dialog.js';
 
-RenderableFASTElement(Dialog).defineAsync(definition);
+Dialog.define(declarativeDefinition);