chore(web-components): Switch Storybook framework from html-webpack5 to html-vite

change/@fluentui-web-components-2dd018e1-9fde-44ea-b302-5473eb582511.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "switch storybook framework from html-webpack5 to html-vite",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -103,6 +103,7 @@
     "@storybook/react": "7.6.20",
     "@storybook/react-webpack5": "7.6.20",
     "@storybook/theming": "7.6.20",
+    "@storybook/html-vite": "7.6.20",
     "@swc/cli": "0.3.14",
     "@swc/core": "1.5.7",
     "@swc/helpers": "0.5.1",
@@ -224,7 +225,7 @@
     "enquirer": "2.3.6",
     "enzyme": "3.10.0",
     "enzyme-to-json": "3.6.2",
-    "esbuild": "0.20.1",
+    "esbuild": "0.24.2",
     "esbuild-loader": "4.1.0",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "18.2.1",
@@ -342,6 +343,7 @@
     "tslib": "2.6.3",
     "typescript": "5.3.3",
     "vinyl": "2.2.0",
+    "vite": "6.0.5",
     "webpack": "5.94.0",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
@@ -374,7 +376,7 @@
   },
   "resolutions": {
     "@types/jest-axe/axe-core": "4.7.2",
-    "esbuild": "0.20.1",
+    "esbuild": "0.24.2",
     "eslint": "8.57.0",
     "swc-loader": "^0.2.6",
     "prettier": "2.8.8",

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

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/html-vite';
+
+export default {
+  // helpers.stories.ts is a file that contains helper functions for stories,
+  // and should not be treated as a story itself.
+  stories: ['../src/**/!(helpers)*.stories.@(ts|mdx)'],
+  staticDirs: ['../public'],
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  framework: '@storybook/html-vite',
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+        viewport: false,
+        toolbars: false,
+        actions: true,
+      },
+    },
+  ],
+  docs: {
+    autodocs: true,
+  },
+} satisfies StorybookConfig;

packages/web-components/.storybook/manager.mjs → packages/web-components/.storybook/manager.ts

@@ -1,5 +1,5 @@
 import { addons } from '@storybook/manager-api';
-import webcomponentsTheme from './theme.mjs';
+import webcomponentsTheme from './theme.js';
 
 addons.setConfig({
   previewTabs: {

packages/web-components/.storybook/preview.mjs → packages/web-components/.storybook/preview.ts

@@ -1,11 +1,19 @@
+/// <reference types="vite/client" />
+
 import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
+import type { StoryContext } from '@storybook/html';
 import * as prettier from 'prettier';
 import prettierPluginHTML from 'prettier/parser-html.js';
 import { setTheme } from '../src/theme/set-theme.js';
-import webcomponentsTheme from './theme.mjs';
-
-import '../src/index-rollup.js';
 import './docs-root.css';
+import webcomponentsTheme from './theme.js';
+
+// Import all component definitions. This is a vite-specific feature:
+// https://vitejs.dev/guide/features.html#glob-import
+const modules = import.meta.glob(['../src/**/define.ts']);
+for (const path in modules) {
+  modules[path]();
+}
 
 const FAST_EXPRESSION_COMMENTS = /<!--((fast-\w+)\{.*\}\2)?-->/g; // Matches comments that contain FAST expressions
 
@@ -16,8 +24,8 @@ const themes = {
   'teams-dark': teamsDarkTheme,
 };
 
-function changeTheme(/** @type {Event} */ e) {
-  setTheme(themes[/** @type {keyof themes} */ (/** @type {HTMLInputElement}*/ (e.target).value)]);
+function changeTheme(e: Event) {
+  setTheme(themes[(e.target as HTMLSelectElement).value as keyof typeof themes]);
 }
 
 // This is needed in Playwright.
@@ -43,7 +51,7 @@ export const parameters = {
     source: {
       // To get around the inability to change Prettier options in the source addon, this transform function
       // imports the standalone Prettier and uses it to format the source with the desired options.
-      transform(/** @type {string} */ src, /** @type {import('@storybook/html').StoryContext} */ storyContext) {
+      transform(src: string, storyContext: StoryContext) {
         if (!src) {
           const fragment = storyContext.originalStoryFn(storyContext.allArgs, storyContext);
           if (!(fragment instanceof DocumentFragment) && !(fragment instanceof HTMLElement)) {

packages/web-components/.storybook/theme.mjs → packages/web-components/.storybook/theme.ts

@@ -20,7 +20,7 @@ export default create({
 
   // Typography
   fontBase:
-      '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;',
+    '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;',
   fontCode: 'monospace',
 
   // Text colors
@@ -32,4 +32,3 @@ export default create({
   inputTextColor: 'black',
   inputBorderRadius: 4,
 });
-

packages/web-components/.storybook/tsconfig.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "allowJs": true,
     "checkJs": true,
-    "noEmit": true,
-    "types": ["node"]
+    "noEmit": true
   },
   "include": ["*", "../public", "../src/**/*.stories.*"]
 }

packages/web-components/package.json

@@ -92,8 +92,6 @@
   "devDependencies": {
     "@microsoft/fast-element": "2.0.0",
     "@tensile-perf/web-components": "~0.2.0",
-    "@storybook/html": "7.6.20",
-    "@storybook/html-webpack5": "7.6.20",
     "chromedriver": "^125.0.0"
   },
   "dependencies": {

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

@@ -20,7 +20,7 @@ test.describe('Menu', () => {
     const element = page.locator('fluent-menu');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -40,7 +40,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -62,7 +62,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -89,7 +89,7 @@ test.describe('Menu', () => {
     const menuList = element.locator('fluent-menu-list');
     const menuItems = menuList.locator('fluent-menu-item');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -116,7 +116,7 @@ test.describe('Menu', () => {
     const menuList = element.locator('fluent-menu-list');
     const menuItems = menuList.locator('fluent-menu-item');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -144,7 +144,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
         <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -170,7 +170,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
         <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -197,7 +197,7 @@ test.describe('Menu', () => {
     const menuList = element.locator('fluent-menu-list');
     const menuItems = menuList.locator('fluent-menu-item');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
         <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -225,7 +225,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
         <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -261,7 +261,7 @@ test.describe('Menu', () => {
     const menuButton = element.locator('fluent-menu-button');
     const menuList = element.locator('fluent-menu-list');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
         <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -296,7 +296,7 @@ test.describe('Menu', () => {
     const menuList = element.locator('fluent-menu-list');
     const menuItems = menuList.locator('fluent-menu-item');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger">Toggle Menu</fluent-menu-button>
         <fluent-menu-list>
@@ -348,7 +348,7 @@ test.describe('Menu', () => {
     const element = page.locator('fluent-menu');
     const menuButton = element.locator('fluent-menu-button');
 
-    page.setContent(/* html */ `
+    await page.setContent(/* html */ `
       <fluent-menu>
         <fluent-menu-button appearance="primary" slot="trigger" icon-only></fluent-menu-button>
         <fluent-button appearance="primary" slot="primary-action">Primary Action</fluent-menu-button>