fix: update CDN bundle configurations, enable setTheme on globalThis

apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Decorator, StoryFn } from '@storybook/react-webpack5';
 import { FASTElement, customElement, html, attr } from '@microsoft/fast-element';
 import { teamsLightTheme, teamsDarkTheme, webLightTheme, webDarkTheme } from '@fluentui/tokens';
-import { setThemeFor } from '@fluentui/web-components';
+import { setTheme } from '@fluentui/web-components';
 
 const themes = [
   { id: 'web-light', label: 'Web Light', theme: webLightTheme },
@@ -36,7 +36,7 @@ export class FASTThemeDecorator extends FASTElement {
   connectedCallback() {
     super.connectedCallback();
     const theme = themes.find(value => value.id === this.fluentTheme)?.theme ?? defaultTheme.theme;
-    setThemeFor(this, theme);
+    setTheme(theme);
   }
 }
 

change/@fluentui-web-components-753b509c-f103-4d8f-8b15-4a88a784dd81.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: migrate to esbuild for CDN bundle, enable setTheme on globalThis",
+  "packageName": "@fluentui/web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -1,7 +1,6 @@
 import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
 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';
@@ -17,9 +16,11 @@ const themes = {
 };
 
 // This is needed in Playwright.
-Object.defineProperty(window, 'setTheme', { value: setTheme });
+// @ts-ignore - setTheme is set on globalThis.Fluent by the index-rollup bundle
+Object.defineProperty(window, 'Fluent', { value: globalThis.Fluent });
 
-setTheme(themes['web-light']);
+// @ts-ignore - setTheme is set on globalThis.Fluent by the index-rollup bundle
+Fluent.setTheme(themes['web-light']);
 
 export const globalTypes = {
   theme: {
@@ -63,7 +64,8 @@ export const decorators = [
      * @type {keyof typeof themes}
      */
     const theme = context.globals.theme || 'web-light';
-    setTheme(themes[theme]);
+    // @ts-ignore - setTheme is set on globalThis.Fluent by the index-rollup bundle
+    Fluent.setTheme(themes[theme]);
 
     // Set direction on the document body
     const dir = context.globals.dir || 'ltr';

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

@@ -3586,11 +3586,6 @@ export const roleForMenuItem: {
 // @public
 export function setTheme(theme: Theme | null, node?: Document | HTMLElement): void;
 
-// Warning: (ae-internal-missing-underscore) The name "setThemeFor" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal @deprecated (undocumented)
-export function setThemeFor(element: HTMLElement, theme: Theme | null): void;
-
 // @public
 export const shadow16 = "var(--shadow16)";
 

packages/web-components/package.json

@@ -30,6 +30,16 @@
   ],
   "exports": {
     ".": "./dist/esm/index.js",
+    "./web-components.js": "./dist/web-components.js",
+    "./web-components.min.js": "./dist/web-components.min.js",
+    "./web-components-all.js": {
+      "types": "./dist/web-components.d.ts",
+      "default": "./dist/web-components-all.js"
+    },
+    "./web-components-all.min.js": {
+      "types": "./dist/web-components.d.ts",
+      "default": "./dist/web-components-all.min.js"
+    },
     "./utils/behaviors/*.js": "./dist/esm/utils/behaviors/*.js",
     "./utils/*.js": "./dist/esm/utils/*.js",
     "./utilities.js": "./dist/esm/utils/index.js",
@@ -47,10 +57,14 @@
   },
   "sideEffects": [
     "define.*",
+    "define-all.*",
     "index-rollup.*",
+    "index-all-rollup.*",
     "./dist/esm/**/define.js",
     "./dist/web-components.js",
-    "./dist/web-components.min.js"
+    "./dist/web-components.min.js",
+    "./dist/web-components-all.js",
+    "./dist/web-components-all.min.js"
   ],
   "scripts": {
     "analyze": "cem analyze",
@@ -85,7 +99,8 @@
     "@wc-toolkit/cem-inheritance": "1.2.2",
     "@wc-toolkit/module-path-resolver": "1.0.0",
     "@wc-toolkit/type-parser": "1.0.3",
-    "chromedriver": "^125.0.0"
+    "chromedriver": "^125.0.0",
+    "rollup-plugin-fast-tagged-templates": "^1.0.2"
   },
   "dependencies": {
     "@fluentui/tokens": "1.0.0-alpha.23",

packages/web-components/rollup.config.js

@@ -1,12 +1,16 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonJS from 'rollup-plugin-commonjs';
 import esbuild, { minify } from 'rollup-plugin-esbuild';
-import transformTaggedTemplate from 'rollup-plugin-transform-tagged-template';
-import { transformCSSFragment, transformHTMLFragment } from './scripts/transform-fragments';
+import fastTaggedTemplates from 'rollup-plugin-fast-tagged-templates';
 
-const parserOptions = {
-  sourceType: 'module',
-};
+const plugins = [
+  nodeResolve({ browser: true }),
+  commonJS(),
+  esbuild({
+    tsconfig: './tsconfig.lib.json',
+  }),
+  fastTaggedTemplates(),
+];
 
 export default [
   {
@@ -22,22 +26,21 @@ export default [
         plugins: [minify()],
       },
     ],
-    plugins: [
-      nodeResolve({ browser: true }),
-      commonJS(),
-      esbuild({
-        tsconfig: './tsconfig.lib.json',
-      }),
-      transformTaggedTemplate({
-        tagsToProcess: ['css'],
-        transformer: transformCSSFragment,
-        parserOptions,
-      }),
-      transformTaggedTemplate({
-        tagsToProcess: ['html'],
-        transformer: transformHTMLFragment,
-        parserOptions,
-      }),
+    plugins,
+  },
+  {
+    input: 'src/index-all-rollup.ts',
+    output: [
+      {
+        file: 'dist/web-components-all.js',
+        format: 'esm',
+      },
+      {
+        file: 'dist/web-components-all.min.js',
+        format: 'esm',
+        plugins: [minify()],
+      },
     ],
+    plugins,
   },
 ];

packages/web-components/src/_docs/developer/migration.mdx

@@ -216,11 +216,16 @@ Due to web platform labelling constraints of the ShadowDOM, the labelling API fo
 </fluent-field>
 ```
 
-### setTheme
+### Bundles
+
+The package ships two CDN-ready bundles, each available in minified and non-minified versions:
 
-A more powerful and simpler set-theme API that allows setting themes at the element level.
+- **`web-components.js`** / **`web-components.min.js`** — Registers all components and exposes `Fluent.setTheme` on `globalThis`. This is the recommended bundle for most CDN and script-tag consumers.
+- **`web-components-all.js`** / **`web-components-all.min.js`** — Everything in the standard bundle, plus all named exports from the package (base classes, templates, styles, design tokens, and utilities). Use this if you need programmatic access to the full API surface from a CDN context.
+
+### setTheme
 
-- `setThemeFor()` is deprecated in favor of `setTheme( theme, element )`
+- `setTheme()` can set themes such as `setTheme(webLightTheme)` (defaults to document) or `setTheme(webDarkTheme, element)` to theme an element and its children
 - `setTheme()` can unset themes with `setTheme(null)` or `setTheme( null, element )`
 
 ### Case studies

packages/web-components/src/define-all.ts

@@ -0,0 +1,42 @@
+import './accordion-item/define.js';
+import './accordion/define.js';
+import './anchor-button/define.js';
+import './avatar/define.js';
+import './badge/define.js';
+import './button/define.js';
+import './checkbox/define.js';
+import './compound-button/define.js';
+import './counter-badge/define.js';
+import './dialog/define.js';
+import './dialog-body/define.js';
+import './divider/define.js';
+import './drawer/define.js';
+import './drawer-body/define.js';
+import './dropdown/define.js';
+import './field/define.js';
+import './image/define.js';
+import './label/define.js';
+import './link/define.js';
+import './listbox/define.js';
+import './menu-button/define.js';
+import './menu-item/define.js';
+import './menu-list/define.js';
+import './menu/define.js';
+import './message-bar/define.js';
+import './option/define.js';
+import './progress-bar/define.js';
+import './radio-group/define.js';
+import './radio/define.js';
+import './rating-display/define.js';
+import './slider/define.js';
+import './spinner/define.js';
+import './switch/define.js';
+import './tab/define.js';
+import './tablist/define.js';
+import './textarea/define.js';
+import './text-input/define.js';
+import './text/define.js';
+import './toggle-button/define.js';
+import './tooltip/define.js';
+import './tree/define.js';
+import './tree-item/define.js';

packages/web-components/src/index-all-rollup.ts

@@ -0,0 +1,11 @@
+import './define-all.js';
+
+// import setTheme for export on globalThis for CDN
+import { setTheme } from './theme/index.js';
+
+// Expose all exports from index.ts
+export * from './index.js';
+
+// Expose setTheme under Fluent namespace on globalThis for CDN/script-tag consumers
+// @ts-expect-error - CDN bundle intentionally sets globals
+globalThis.Fluent = { ...globalThis.Fluent, setTheme };

packages/web-components/src/index-rollup.ts

@@ -1,43 +1,8 @@
-import './accordion-item/define.js';
-import './accordion/define.js';
-import './anchor-button/define.js';
-import './avatar/define.js';
-import './badge/define.js';
-import './button/define.js';
-import './checkbox/define.js';
-import './compound-button/define.js';
-import './counter-badge/define.js';
-import './dialog/define.js';
-import './dialog-body/define.js';
-import './divider/define.js';
-import './drawer/define.js';
-import './drawer-body/define.js';
-import './dropdown/define.js';
-import './field/define.js';
-import './image/define.js';
-import './label/define.js';
-import './link/define.js';
-import './listbox/define.js';
-import './menu-button/define.js';
-import './menu-item/define.js';
-import './menu-list/define.js';
-import './menu/define.js';
-import './message-bar/define.js';
-import './option/define.js';
-import './progress-bar/define.js';
-import './radio-group/define.js';
-import './radio/define.js';
-import './rating-display/define.js';
-import './slider/define.js';
-import './spinner/define.js';
-import './switch/define.js';
-import './tab/define.js';
-import './tablist/define.js';
-import './textarea/define.js';
-import './text-input/define.js';
-import './text/define.js';
-import './toggle-button/define.js';
-import './tooltip/define.js';
-import './tree/define.js';
-import './tree-item/define.js';
-export { setTheme } from './theme/set-theme.js';
+import './define-all.js';
+
+// import setTheme for export on globalThis for CDN
+import { setTheme } from './theme/index.js';
+
+// Expose setTheme under Fluent namespace on globalThis for CDN/script-tag consumers
+// @ts-expect-error - CDN bundle intentionally sets globals
+globalThis.Fluent = { ...globalThis.Fluent, setTheme };

packages/web-components/src/index.ts

@@ -310,7 +310,7 @@ export {
   TextWeight,
 } from './text/index.js';
 export * from './theme/design-tokens.js';
-export { setTheme, setThemeFor, type Theme } from './theme/index.js';
+export { setTheme, type Theme } from './theme/index.js';
 export {
   ToggleButton,
   ToggleButtonAppearance,

packages/web-components/src/theme/index.ts

@@ -384,4 +384,4 @@ export {
   shadow28Brand,
   shadow64Brand,
 } from './design-tokens.js';
-export { setTheme, setThemeFor, type Theme } from './set-theme.js';
+export { setTheme, type Theme } from './set-theme.js';

packages/web-components/src/theme/set-theme.ts

@@ -214,11 +214,3 @@ function forceRepaint(element: HTMLElement) {
 
   element.style.setProperty(name, currentValue);
 }
-
-/**
- * @internal
- * @deprecated Use `setTheme(theme, element)` instead.
- */
-export function setThemeFor(element: HTMLElement, theme: Theme | null) {
-  setThemePropertiesOnElement(theme, element);
-}

packages/web-components/test/harness/src/main.ts

@@ -12,6 +12,7 @@ import '../../../src/index-rollup.js';
 
 setTheme(webLightTheme);
 
+// Expose directly on window for Playwright test access
 Object.defineProperty(window, 'setTheme', {
   value: setTheme,
 });