feat(web-components): migrate to FAST Element v3

apps/vr-tests-web-components/.storybook/main.cjs

@@ -34,6 +34,10 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig}
     config.resolve.plugins = config.resolve.plugins ?? [];
     config.module = config.module ?? {};
     config.plugins = config.plugins ?? [];
+    config.experiments = {
+      ...(config.experiments ?? {}),
+      topLevelAwait: true,
+    };
 
     config.resolve.extensionAlias = {
       '.js': ['.js', '.ts', '.tsx'],
@@ -45,6 +49,7 @@ module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig}
     config.module.rules.push(
       {
         test: /\.([cm]?ts|tsx)$/,
+        type: 'javascript/esm',
         loader: 'ts-loader',
         sideEffects: true,
         options: {

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-rc.1",
     "tslib": "^2.1.0"
   }
 }

change/@fluentui-chart-web-components-50b97aae-ff24-4aca-9a91-390941c95e54.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update FAST Element peer dependency to v3.",
+  "packageName": "@fluentui/chart-web-components",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-web-components-1e295f01-c5f7-4b8f-b199-3a2502008645.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update FAST Element peer dependency to v3.",
+  "packageName": "@fluentui/web-components",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

package.json

@@ -73,7 +73,7 @@
     "@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-element": "3.0.0-rc.1",
     "@microsoft/fast-html": "1.0.0-alpha.54",
     "@microsoft/fast-test-harness": "0.3.1",
     "@microsoft/focusgroup-polyfill": "1.5.0",

packages/charts/chart-web-components/.storybook/main.cjs

@@ -19,6 +19,11 @@ module.exports =
       previewUrl: process.env.DEPLOY_PATH,
     },
     viteFinal: async config => {
+      config.build = {
+        ...(config.build || {}),
+        target: 'esnext',
+      };
+
       // Configure path aliases
       config.resolve = config.resolve || {};
       config.resolve.alias = {

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-rc.1"
   },
   "beachball": {
     "disallowedChangeTypes": [

packages/charts/chart-web-components/rollup.config.js

@@ -24,14 +24,15 @@ export default [
       {
         file: 'dist/chart-web-components.min.js',
         format: 'esm',
-        plugins: [minify()],
+        plugins: [minify({ target: 'es2022' })],
       },
     ],
     plugins: [
       nodeResolve({ browser: true }),
       commonJS(),
       esbuild({
         tsconfig: './tsconfig.lib.json',
+        target: 'es2022',
       }),
       transformTaggedTemplate({
         tagsToProcess: ['css'],

packages/charts/chart-web-components/src/donut-chart/donut-chart.definition.ts

@@ -8,7 +8,7 @@ import { template } from './donut-chart.template.js';
  * @remarks
  * HTML Element: `<fluent-donut-chart>`
  */
-export const definition = DonutChart.compose({
+export const definition = await DonutChart.compose({
   name: `${FluentDesignSystem.prefix}-donut-chart`,
   template,
   styles,

packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.definition.ts

@@ -10,7 +10,7 @@ import { template } from './horizontal-bar-chart.template.js';
  * @remarks
  * HTML Element: `<fluent-textarea>`
  */
-export const definition = HorizontalBarChart.compose({
+export const definition = await HorizontalBarChart.compose({
   name: `${FluentDesignSystem.prefix}-horizontal-bar-chart`,
   template,
   styles,

packages/web-components/.storybook/main.cjs

@@ -19,6 +19,11 @@ module.exports =
       previewUrl: process.env.DEPLOY_PATH,
     },
     viteFinal: async config => {
+      config.build = {
+        ...(config.build || {}),
+        target: 'esnext',
+      };
+
       // Configure path aliases
       config.resolve = config.resolve || {};
       config.resolve.alias = {

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

@@ -1200,7 +1200,7 @@ export const ButtonSize: {
 export type ButtonSize = ValuesOf<typeof ButtonSize>;
 
 // @public
-export const ButtonTemplate: ElementViewTemplate<BaseButton>;
+export const ButtonTemplate: ElementViewTemplate<Button>;
 
 // @public
 export const ButtonType: {
@@ -2850,7 +2850,7 @@ export type DropdownSize = ValuesOf<typeof DropdownSize>;
 export const DropdownStyles: ElementStyles;
 
 // @public
-export const DropdownTemplate: ElementViewTemplate<BaseDropdown>;
+export const DropdownTemplate: ElementViewTemplate<Dropdown>;
 
 // @public
 export const DropdownType: {
@@ -2892,7 +2892,7 @@ export type EndOptions<TSource = any, TParent = any> = {
 };
 
 // @public
-export function endSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: EndOptions<TSource, TParent>): CaptureType<TSource, TParent>;
+export function endSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: EndOptions<TSource, TParent>): CaptureType;
 
 // @public
 export class Field extends BaseField {
@@ -3907,7 +3907,7 @@ export type StartOptions<TSource = any, TParent = any> = {
 };
 
 // @public
-export function startSlotTemplate<TSource extends Pick<StartEnd, 'start'> = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType<TSource, TParent>;
+export function startSlotTemplate<TSource extends Pick<StartEnd, 'start'> = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType;
 
 // @public
 export const strokeWidthThick = "var(--strokeWidthThick)";

packages/web-components/package.json

@@ -113,15 +113,9 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@microsoft/fast-element": "^2.0.0",
-    "@microsoft/fast-html": "^1.0.0-alpha.53",
+    "@microsoft/fast-element": "^3.0.0-rc.1",
     "@microsoft/focusgroup-polyfill": "^1.4.1"
   },
-  "peerDependenciesMeta": {
-    "@microsoft/fast-html": {
-      "optional": true
-    }
-  },
   "beachball": {
     "disallowedChangeTypes": [
       "major",

packages/web-components/rollup.config.js

@@ -8,6 +8,7 @@ const plugins = [
   commonJS(),
   esbuild({
     tsconfig: './tsconfig.lib.json',
+    target: 'es2022',
   }),
   fastTaggedTemplates(),
 ];
@@ -23,7 +24,7 @@ export default [
       {
         file: 'dist/web-components.min.js',
         format: 'esm',
-        plugins: [minify()],
+        plugins: [minify({ target: 'es2022' })],
       },
     ],
     context: 'window',
@@ -39,7 +40,7 @@ export default [
       {
         file: 'dist/web-components-all.min.js',
         format: 'esm',
-        plugins: [minify()],
+        plugins: [minify({ target: 'es2022' })],
       },
     ],
     context: 'window',

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

@@ -1,4 +1,5 @@
 import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
 import { tagName } from './accordion-item.options.js';
 
 /**
@@ -7,9 +8,9 @@ import { tagName } from './accordion-item.options.js';
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
- * is provided as a deferred option to be hydrated later.
+ * is resolved from its SSR `<f-template>` by the declarative renderer.
  */
 export const definition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  template: declarativeTemplate(),
 };

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

@@ -9,7 +9,7 @@ import { template } from './accordion-item.template.js';
  * @remarks
  * HTML Element: \<fluent-accordion-item\>
  */
-export const definition = AccordionItem.compose({
+export const definition = await AccordionItem.compose({
   name: tagName,
   template,
   styles,

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 { AccordionItem } from './accordion-item.js';
 
-RenderableFASTElement(AccordionItem).defineAsync(definition);
+await AccordionItem.define(definition);

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

@@ -1,4 +1,5 @@
 import { type PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
 import { tagName } from './accordion.options.js';
 
 /**
@@ -7,9 +8,9 @@ import { tagName } from './accordion.options.js';
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
- * is provided as a deferred option to be hydrated later.
+ * is resolved from its SSR `<f-template>` by the declarative renderer.
  */
 export const declarativeDefinition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  template: declarativeTemplate(),
 } as const;

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

@@ -8,7 +8,7 @@ import { template } from './accordion.template.js';
  * @remarks
  * HTML Element: \<fluent-accordion\>
  */
-export const definition = Accordion.compose({
+export const definition = await Accordion.compose({
   name: tagName,
   template,
   styles,

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);
+await Accordion.define(declarativeDefinition);

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

@@ -1,4 +1,5 @@
 import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
 import { tagName } from './anchor-button.options.js';
 
 /**
@@ -7,9 +8,9 @@ import { tagName } from './anchor-button.options.js';
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
- * is provided as a deferred option to be hydrated later.
+ * is resolved from its SSR `<f-template>` by the declarative renderer.
  */
 export const definition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  template: declarativeTemplate(),
 };

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

@@ -8,7 +8,7 @@ import { template } from './anchor-button.template.js';
  * @remarks
  * HTML Element: \<fluent-anchor-button\>
  */
-export const definition = AnchorButton.compose({
+export const definition = await AnchorButton.compose({
   name: tagName,
   template,
   styles,

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 { AnchorButton } from './anchor-button.js';
 
-RenderableFASTElement(AnchorButton).defineAsync(definition);
+await AnchorButton.define(definition);

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

@@ -1,4 +1,5 @@
 import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
 import { tagName } from './avatar.options.js';
 
 /**
@@ -7,9 +8,9 @@ import { tagName } from './avatar.options.js';
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
- * is provided as a deferred option to be hydrated later.
+ * is resolved from its SSR `<f-template>` by the declarative renderer.
  */
 export const definition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  template: declarativeTemplate(),
 };

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

@@ -10,7 +10,7 @@ import { template } from './avatar.template.js';
  * @remarks
  * HTML Element: \<fluent-badge\>
  */
-export const definition = Avatar.compose({
+export const definition = await Avatar.compose({
   name: tagName,
   template,
   styles,

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 { Avatar } from './avatar.js';
 
-RenderableFASTElement(Avatar).defineAsync(definition);
+await Avatar.define(definition);

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

@@ -1,4 +1,5 @@
 import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
 import { tagName } from './badge.options.js';
 
 /**
@@ -7,9 +8,9 @@ import { tagName } from './badge.options.js';
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
- * is provided as a deferred option to be hydrated later.
+ * is resolved from its SSR `<f-template>` by the declarative renderer.
  */
 export const definition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  template: declarativeTemplate(),
 };

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

@@ -9,7 +9,7 @@ import { template } from './badge.template.js';
  * @remarks
  * HTML Element: \<fluent-badge\>
  */
-export const definition = Badge.compose({
+export const definition = await Badge.compose({
   name: tagName,
   template,
   styles,

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 { Badge } from './badge.js';
 
-RenderableFASTElement(Badge).defineAsync(definition);
+await Badge.define(definition);

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

@@ -1,4 +1,5 @@
 import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
 import { tagName } from './button.options.js';
 
 /**
@@ -7,9 +8,9 @@ import { tagName } from './button.options.js';
  * @public
  * @remarks
  * This is used in server-side rendering (SSR) scenarios where the template
- * is provided as a deferred option to be hydrated later.
+ * is resolved from its SSR `<f-template>` by the declarative renderer.
  */
 export const definition: PartialFASTElementDefinition = {
   name: tagName,
-  templateOptions: 'defer-and-hydrate',
+  template: declarativeTemplate(),
 };

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

@@ -10,7 +10,7 @@ import { template } from './button.template.js';
  * @remarks
  * HTML Element: `<fluent-button>`
  */
-export const definition = Button.compose({
+export const definition = await Button.compose({
   name: tagName,
   template,
   styles,