feat(web-components): enable DSD/SSR support and testing

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

@@ -18,7 +18,6 @@
     "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",
     "tslib": "^2.1.0"
   }
 }

change/@fluentui-chart-web-components-8ab5a04f-bd00-487d-a7d5-0cd8b395e1bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: remove unused @microsoft/fast-element devDependency",
+  "packageName": "@fluentui/chart-web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-web-components-9e4886ef-09cc-426e-a4bf-b570d204e14b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: migrate test infrastructure to @microsoft/fast-test-harness with SSR/DSD support",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

package.json

@@ -71,6 +71,10 @@
     "@microsoft/api-extractor": "7.51.0",
     "@microsoft/api-extractor-model": "7.31.2",
     "@microsoft/eslint-plugin-sdl": "1.0.1",
+    "@microsoft/fast-build": "0.6.0",
+    "@microsoft/fast-html": "1.0.0-alpha.52",
+    "@microsoft/fast-element": "2.10.4",
+    "@microsoft/fast-test-harness": "0.1.0",
     "@microsoft/focusgroup-polyfill": "^1.4.1",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",

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

@@ -61,7 +61,6 @@
     "test:dev": "node ./scripts/e2e.js"
   },
   "devDependencies": {
-    "@microsoft/fast-element": "2.0.0",
     "@tensile-perf/web-components": "~0.2.2",
     "@storybook/html": "9.1.17",
     "@storybook/html-vite": "9.1.17",

packages/web-components/.gitignore

@@ -1,2 +1,3 @@
 test-results/
 custom-elements.json
+public/fluent-tokens.css

packages/web-components/package.json

@@ -36,10 +36,13 @@
     "./theme/*.js": "./dist/esm/theme/*.js",
     "./*/base.js": "./dist/esm/*/*.base.js",
     "./*/define.js": "./dist/esm/*/define.js",
+    "./*/define-async.js": "./dist/esm/*/define-async.js",
     "./*/definition.js": "./dist/esm/*/*.definition.js",
     "./*/options.js": "./dist/esm/*/*.options.js",
     "./*/styles.js": "./dist/esm/*/*.styles.js",
+    "./*/styles.css": "./dist/esm/*/*.styles.css",
     "./*/template.js": "./dist/esm/*/*.template.js",
+    "./*/template.html": "./dist/esm/*/*.template.html",
     "./*/index.js": "./dist/esm/*/index.js",
     "./*.js": "./dist/esm/*/define.js",
     "./custom-elements.json": "./custom-elements.json",
@@ -61,7 +64,11 @@
     "compile:benchmark": "rollup -c rollup.bench.js",
     "clean": "node ./scripts/clean dist",
     "generate-api": "api-extractor run --local",
-    "build": "yarn compile && yarn rollup -c && yarn generate-api && yarn analyze",
+    "build": "yarn compile && yarn build:rollup && yarn build:ssr && yarn generate-api && yarn analyze",
+    "build:ssr:templates": "fast-test-harness generate-templates --tag-prefix=fluent",
+    "build:ssr:styles": "fast-test-harness generate-stylesheets",
+    "build:ssr": "yarn build:ssr:templates && yarn build:ssr:styles",
+    "build:rollup": "rollup -c",
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
     "format": "prettier -w src/**/*.{ts,html} src/*.{ts,html} --ignore-path ../../.prettierignore",
@@ -76,7 +83,6 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.10.10",
-    "@microsoft/fast-element": "2.0.0",
     "@microsoft/focusgroup-polyfill": "^1.4.1",
     "@tensile-perf/web-components": "~0.2.2",
     "@storybook/html": "9.1.17",

packages/web-components/playwright.config.ts

@@ -1,35 +1,10 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-import { devices } from '@playwright/test';
+import defaultConfig from '@microsoft/fast-test-harness/playwright.config.mjs';
+import { defineConfig } from '@playwright/test';
 
-const config: PlaywrightTestConfig = {
-  reporter: process.env.CI ? 'github' : 'list',
-  retries: 3,
-  fullyParallel: process.env.CI ? false : true,
-  timeout: process.env.CI ? 10000 : 30000,
-  use: {
-    baseURL: 'http://localhost:5173',
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-  ],
-  webServer: {
-    command: 'yarn vite preview test/harness',
-    port: 5173,
-    reuseExistingServer: true,
-    stderr: 'pipe',
-    stdout: 'pipe',
-  },
-};
+const CI = process.env.CI === 'true';
 
-export default config;
+export default defineConfig({
+  ...defaultConfig,
+  reporter: CI ? 'github' : 'list',
+  testMatch: 'src/**/*.spec.ts',
+});

packages/web-components/rollup.config.js

@@ -22,6 +22,7 @@ export default [
         plugins: [minify()],
       },
     ],
+    context: 'window',
     plugins: [
       nodeResolve({ browser: true }),
       commonJS(),

packages/web-components/scripts/e2e.js

@@ -1,49 +1,16 @@
 /* eslint-env node */
-import { execSync, spawn } from 'node:child_process';
-
-const uiMode = process.argv.includes('--ui');
+import { execSync } from 'node:child_process';
 
 try {
-  const [major, minor, _patch] = process.versions.node.split('.').map(n => parseInt(n, 10));
-  let env = {};
-  if (major > 22 || (major === 22 && minor >= 18)) {
-    env = { NODE_OPTIONS: '--no-experimental-strip-types' };
-  }
-
-  // UI Mode runs Vite in development mode and Playwright in UI mode, in parallel
-  if (uiMode) {
-    const vite = spawn('vite', ['serve', 'test/harness'], { stdio: 'inherit' });
-    const playwright = spawn('playwright', ['test', '--ui'], {
-      stdio: 'inherit',
-      env: { ...env, ...process.env },
-    });
-
-    // Forward the exit codes if the child processes exit
-    vite.on('exit', code => process.exit(code));
-    playwright.on('exit', code => process.exit(code));
-
-    // Close the processes when the parent process exits
-    process.on('exit', () => {
-      vite.kill();
-      playwright.kill();
-      process.exit(0);
-    });
-
-    // Run both processes in parallel
-    Promise.all([vite, playwright]);
-  }
-
-  // E2E Mode first builds the test harness with Vite and then runs the tests with Playwright
-  if (!uiMode) {
-    // Build the test harness
-    execSync(`vite build test/harness`, { stdio: 'inherit' });
-
-    // Run the tests
-    execSync(`playwright test`, {
-      stdio: 'inherit',
-      env: { ...env, ...process.env },
-    });
-  }
+  // Generate the fluent tokens stylesheet before Playwright starts the server.
+  execSync(`node ./scripts/generate-tokens`, { stdio: 'inherit' });
+
+  // Run Playwright — the test harness server is spawned automatically
+  // via the webServer config in playwright.config.ts.
+  execSync(`playwright test ${process.argv.slice(2).join(' ')}`, {
+    stdio: 'inherit',
+    env: process.env,
+  });
 } catch (err) {
   console.error(err);
   process.exit(1);

packages/web-components/scripts/generate-tokens.js

@@ -1,37 +1,56 @@
-import fs from 'node:fs';
-import path from 'node:path';
+/**
+ * Generates design token artifacts from @fluentui/tokens:
+ *
+ * 1. src/theme/design-tokens.ts — TypeScript constants mapping token
+ *    names to CSS custom property var() references.
+ *
+ * 2. public/fluent-tokens.css — A plain CSS stylesheet with all token
+ *    values under :root, for SSR/DSD testing where JS setTheme() isn't
+ *    available.
+ */
 
-import chalk from 'chalk';
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
 
 import tokensPackage from '@fluentui/tokens';
 
-main();
-
-function main() {
-  console.log(tokensPackage);
+const { tokens, webLightTheme } = tokensPackage;
+const tokenNames = Object.keys(tokens);
+const rootDir = join(import.meta.dirname, '..');
 
-  const fluentTokens = Object.keys(tokensPackage.tokens);
-  const comment = '// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE\n';
+// ── 1. design-tokens.ts ─────────────────────────────────────────────────
 
-  const generatedTokens = fluentTokens.reduce((acc, t) => {
-    const token = `
+const tsContent =
+  '// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE\n' +
+  tokenNames
+    .map(
+      t =>
+        `
 /**
  * CSS custom property value for the {@link @fluentui/tokens#${t} | \`${t}\`} design token.
  * @public
  */
-export const ${t} = 'var(--${t})';
-`;
-    return acc + token;
-  }, '');
-
-  const dir = path.join(import.meta.dirname, '../src', 'theme');
-
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir, { recursive: true });
-  }
-
-  fs.writeFile(path.join(dir, 'design-tokens.ts'), comment + generatedTokens, err => {
-    if (err) throw err;
-    console.log(chalk.greenBright(`Design token file has been successfully created!`));
-  });
-}
+export const ${t} = 'var(--${t})';`,
+    )
+    .join('\n') +
+  '\n';
+
+const tsDir = join(rootDir, 'src', 'theme');
+mkdirSync(tsDir, { recursive: true });
+writeFileSync(join(tsDir, 'design-tokens.ts'), tsContent);
+console.log(`✔ ${tokenNames.length} token constants → src/theme/design-tokens.ts`);
+
+// ── 2. fluent-tokens.css ────────────────────────────────────────────────
+
+const cssContent =
+  '/* THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE */\n:root {\n' +
+  tokenNames
+    .filter(t => t in webLightTheme)
+    .map(t => `  --${t}: ${webLightTheme[t]};`)
+    .join('\n') +
+  '\n}\n';
+
+const cssDir = join(rootDir, 'public');
+mkdirSync(cssDir, { recursive: true });
+writeFileSync(join(cssDir, 'fluent-tokens.css'), cssContent);
+console.log(`✔ ${tokenNames.length} token properties → public/fluent-tokens.css`);

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

@@ -1,12 +1,12 @@
-import { expect, test } from '../../test/playwright/index.js';
+import { expect, test } from '@microsoft/fast-test-harness';
 import { AccordionItem } from './accordion-item.js';
 import { AccordionItemSize } from './accordion-item.options.js';
 
 test.describe('Accordion item', () => {
   test.use({
     innerHTML: 'Hello, World!',
     tagName: 'fluent-accordion-item',
-    waitFor: ['fluent-accordion-item'],
+    waitFor: ['fluent-accordion'],
   });
 
   test('should create with document.createElement()', async ({ page, fastPage }) => {

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

@@ -0,0 +1,8 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { AccordionItem } from './accordion-item.js';
+import { tagName } from './accordion-item.options.js';
+
+RenderableFASTElement(AccordionItem).defineAsync({
+  name: tagName,
+  templateOptions: 'defer-and-hydrate',
+});

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

@@ -1,9 +1,10 @@
-import { expect, test } from '../../test/playwright/index.js';
+import { expect, test } from '@microsoft/fast-test-harness';
 
 test.describe('Accordion', () => {
   test.use({
     innerHTML: 'Hello, World!',
     tagName: 'fluent-accordion',
+    waitFor: ['fluent-accordion-item'],
   });
 
   test('should create with document.createElement()', async ({ page, fastPage }) => {
@@ -437,7 +438,7 @@ test.describe('Accordion', () => {
         </fluent-accordion-item>
         <fluent-accordion-item>
           <div slot="heading">Accordion Item 2 Heading</div>
-          <fluent-checkbox>A checkbox as content</fluent-checkbox>
+          <input type="checkbox" />A checkbox as content
         </fluent-accordion-item>
       `,
     });
@@ -450,7 +451,7 @@ test.describe('Accordion', () => {
 
     await expect(item).toHaveAttribute('expanded');
 
-    const checkbox = item.locator('fluent-checkbox');
+    const checkbox = item.locator('input[type="checkbox"]');
 
     await checkbox.click();
 

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

@@ -0,0 +1,8 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { Accordion } from './accordion.js';
+import { tagName } from './accordion.options.js';
+
+RenderableFASTElement(Accordion).defineAsync({
+  name: tagName,
+  templateOptions: 'defer-and-hydrate',
+});