Pr help/burtonsmith/add cem to wc library

change/@fluentui-web-components-712d19ac-cecc-4674-a955-28e95a3fb602.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Added custom elements manifest to project and included it in published package",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -54,6 +54,7 @@
     "@babel/types": "7.24.6",
     "@cactuslab/usepubsub": "^1.0.2",
     "@ctrl/tinycolor": "3.3.4",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
     "@cypress/react": "8.0.0",
     "@cypress/webpack-dev-server": "1.8.3",
     "@dnd-kit/core": "^6.0.8",
@@ -177,6 +178,10 @@
     "@types/yargs": "13.0.11",
     "@types/yargs-unparser": "2.0.1",
     "@typescript-eslint/rule-tester": "8.19.1",
+    "@wc-toolkit/cem-inheritance": "^1.0.4",
+    "@wc-toolkit/cem-validator": "^1.0.2",
+    "@wc-toolkit/module-path-resolver": "^1.0.0",
+    "@wc-toolkit/type-parser": "^1.0.3",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "ajv": "8.4.0",
     "autoprefixer": "10.2.1",

packages/web-components/.gitignore

@@ -1 +1,2 @@
 test-results/
+custom-elements.json

packages/web-components/README.md

@@ -76,6 +76,14 @@ import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components';
 ButtonDefinition.define(FluentDesignSystem.registry);
 ```
 
+## Developer Experience
+
+For convenience we have included a [CEM (custom elements manifest)](https://github.com/webcomponents/custom-elements-manifest).
+
+```js
+import CEM from '@fluentui/custom-elements.json';
+```
+
 ## Development
 
 To start the component development environment, run `yarn start`.

packages/web-components/custom-elements-manifest.config.js

@@ -0,0 +1,56 @@
+import { modulePathResolverPlugin } from '@wc-toolkit/module-path-resolver';
+import { cemValidatorPlugin } from '@wc-toolkit/cem-validator';
+import { getTsProgram, typeParserPlugin } from '@wc-toolkit/type-parser';
+import { cemInheritancePlugin } from '@wc-toolkit/cem-inheritance';
+
+export default {
+  /** Globs to analyze */
+  globs: ['src/**/*.ts'],
+  /** Globs to exclude */
+  exclude: [
+    '_docs/**/*',
+    'src/**/*.bench.ts',
+    'src/**/*.definition.ts',
+    'src/**/*.options.ts',
+    'src/**/*.spec.ts',
+    'src/**/*.stories.ts',
+    'src/**/*.styles.ts',
+    'src/**/*.template.ts',
+    'src/**/define.ts',
+    'src/**/index.ts',
+  ],
+  /** Enable special handling for fast */
+  fast: true,
+  /** Provide custom plugins */
+  plugins: [
+    modulePathResolverPlugin({
+      modulePathTemplate: (modulePath, name, tagName) => `./dist/esm/${getBaseTag(tagName)}/${getBaseTag(tagName)}.js`,
+      definitionPathTemplate: (modulePath, name, tagName) => `./dist/esm/${getBaseTag(tagName)}/define.js`,
+      typeDefinitionPathTemplate: (modulePath, name, tagName) => `./dist/dts/${getBaseTag(tagName)}/index.d.ts`,
+    }),
+    typeParserPlugin(),
+    cemInheritancePlugin(),
+    cemValidatorPlugin({
+      rules: {
+        packageJson: {
+          main: 'off',
+          module: 'off',
+          types: 'off',
+        },
+        manifest: {
+          schemaVersion: 'off',
+        },
+      },
+    }),
+  ],
+
+  /** Overrides default module creation: */
+  overrideModuleCreation({ ts, globs }) {
+    const program = getTsProgram(ts, globs, 'tsconfig.json');
+    return program.getSourceFiles().filter(sf => globs.find(glob => sf.fileName.includes(glob)));
+  },
+};
+
+function getBaseTag(tagName) {
+  return tagName?.replace('fluent-', '');
+}

packages/web-components/package.json

@@ -23,7 +23,8 @@
     "dist/dts/",
     "dist/esm/",
     "dist/*.js",
-    "dist/*.d.ts"
+    "dist/*.d.ts",
+    "custom-elements.json"
   ],
   "exports": {
     ".": {
@@ -76,14 +77,15 @@
     "./dist/web-components.min.js"
   ],
   "scripts": {
+    "analyze": "cem analyze",
     "verify-packaging": "node ./scripts/verify-packaging",
     "type-check": "node ./scripts/type-check",
     "benchmark": "yarn clean && yarn compile:benchmark && yarn compile && node ./scripts/run-benchmarks",
     "compile": "node ./scripts/compile",
     "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",
+    "build": "yarn compile && yarn rollup -c && yarn generate-api && yarn analyze",
     "lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
     "format": "prettier -w src/**/*.{ts,html} --ignore-path ../../.prettierignore",
@@ -96,11 +98,16 @@
     "e2e:local": "node ./scripts/e2e.js --ui"
   },
   "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
     "@fluentui/scripts-api-extractor": "*",
     "@microsoft/fast-element": "2.0.0",
     "@tensile-perf/web-components": "~0.2.0",
     "@storybook/html": "7.6.20",
     "@storybook/html-webpack5": "7.6.20",
+    "@wc-toolkit/cem-validator": "^1.0.2",
+    "@wc-toolkit/cem-inheritance": "^1.0.4",
+    "@wc-toolkit/module-path-resolver": "^1.0.0",
+    "@wc-toolkit/type-parser": "^1.0.3",
     "chromedriver": "^125.0.0"
   },
   "dependencies": {
@@ -119,5 +126,6 @@
       "patch"
     ],
     "tag": "beta"
-  }
+  },
+  "customElements": "./custom-elements.json"
 }

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

@@ -20,7 +20,8 @@ export type AccordionItemOptions = StartEndOptions<AccordionItem> & {
  * An Accordion Item Custom HTML Element.
  * Based on BaseAccordionItem and includes style and layout specific attributes
  *
- * @public
+ * @tag fluent-accordion-item
+ *
  */
 export class AccordionItem extends BaseAccordionItem {
   /**

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

@@ -7,6 +7,8 @@ import { AccordionExpandMode } from './accordion.options.js';
  * An Accordion Custom HTML Element
  * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
  *
+ * @tag fluent-accordion
+ *
  * @slot - The default slot for the accordion items
  * @fires change - Fires a custom 'change' event when the active item changes
  *

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

@@ -16,7 +16,8 @@ export type AnchorOptions = StartEndOptions<AnchorButton>;
  * An Anchor Custom HTML Element.
  * Based on BaseAnchor and includes style and layout specific attributes
  *
- * @public
+ * @tag fluent-anchor-button
+ *
  */
 export class AnchorButton extends BaseAnchor {
   /**

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

@@ -14,7 +14,8 @@ import {
  * An Avatar Custom HTML Element.
  * Based on BaseAvatar and includes style and layout specific attributes
  *
- * @public
+ * @tag fluent-avatar
+ *
  */
 export class Avatar extends BaseAvatar {
   /**

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

@@ -6,7 +6,9 @@ import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.opti
 
 /**
  * The base class used for constructing a fluent-badge custom element
- * @public
+ *
+ * @tag fluent-badge
+ *
  */
 export class Badge extends FASTElement {
   /**

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

@@ -9,9 +9,9 @@ import { ButtonFormTarget, ButtonType } from './button.options.js';
  * @slot start - Content which can be provided before the button content
  * @slot end - Content which can be provided after the button content
  * @slot - The default slot for button content
+ *
  * @csspart content - The button content container
  *
- * @public
  */
 export class BaseButton extends FASTElement {
   /**

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

@@ -9,7 +9,8 @@ import { ButtonAppearance, ButtonShape, ButtonSize } from './button.options.js';
  * A Button Custom HTML Element.
  * Based on BaseButton and includes style and layout specific attributes
  *
- * @public
+ * @tag fluent-button
+ *
  */
 export class Button extends BaseButton {
   /**

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

@@ -7,12 +7,14 @@ import { CheckboxShape, CheckboxSize } from './checkbox.options.js';
  * A Checkbox Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#checkbox | ARIA checkbox }.
  *
+ * @tag fluent-checkbox
+ *
  * @slot checked-indicator - The checked indicator
  * @slot indeterminate-indicator - The indeterminate indicator
+ *
  * @fires change - Emits a custom change event when the checked state changes
  * @fires input - Emits a custom input event when the checked state changes
  *
- * @public
  */
 export class Checkbox extends BaseCheckbox {
   /**

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

@@ -2,6 +2,8 @@ import { Button } from '../button/button.js';
 
 /**
  * The base class used for constructing a fluent-compound-button custom element
- * @public
+ *
+ * @tag fluent-compound-button
+ *
  */
 export class CompoundButton extends Button {}

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

@@ -11,7 +11,9 @@ import {
 
 /**
  * The base class used for constructing a fluent-badge custom element
- * @public
+ *
+ * @tag fluent-counter-badge
+ *
  */
 export class CounterBadge extends FASTElement {
   /**

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

@@ -2,8 +2,8 @@ import { attr, FASTElement } from '@microsoft/fast-element';
 /**
  * Dialog Body component that extends the FASTElement class.
  *
- * @public
- * @extends FASTElement
+ * @tag fluent-dialog-body
+ *
  */
 export class DialogBody extends FASTElement {
   /**

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

@@ -4,7 +4,8 @@ import { DialogType } from './dialog.options.js';
 /**
  * A Dialog Custom HTML Element.
  *
- * @public
+ * @tag fluent-dialog
+ *
  */
 export class Dialog extends FASTElement {
   /**

packages/web-components/src/divider/divider.ts

@@ -7,7 +7,8 @@ import { BaseDivider } from './divider.base.js';
  * A Divider Custom HTML Element.
  * Based on BaseDivider and includes style and layout specific attributes
  *
- * @public
+ * @tag fluent-divider
+ *
  */
 export class Divider extends BaseDivider {
   /**

packages/web-components/src/drawer-body/drawer-body.ts

@@ -2,7 +2,8 @@ import { FASTElement } from '@microsoft/fast-element';
 
 /**
  * A DrawerBody component to layout drawer content
- * @extends FASTElement
+ *
+ * @tag fluent-drawer-body
  *
  * @slot title - The title slot
  * @slot close - The close button slot
@@ -15,6 +16,5 @@ import { FASTElement } from '@microsoft/fast-element';
  *
  * @summary A component that provides a drawer body for displaying content in a side panel.
  *
- * @tag fluent-drawer-body
  */
 export class DrawerBody extends FASTElement {}

packages/web-components/src/drawer/drawer.ts

@@ -5,11 +5,7 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * A Drawer component that allows content to be displayed in a side panel. It can be rendered as modal or non-modal.
  * @extends FASTElement
  *
- * @attr {DrawerType} type - Determines whether the drawer should be displayed as modal, non-modal, or alert.
- * @attr {DrawerPosition} position - Sets the position of the drawer (start/end).
- * @attr {DrawerSize} size - Sets the size of the drawer (small/medium/large).
- * @attr {string} ariaDescribedby - The ID of the element that describes the drawer.
- * @attr {string} ariaLabelledby - The ID of the element that labels the drawer.
+ * @tag fluent-drawer
  *
  * @csspart dialog - The dialog element of the drawer.
  *
@@ -18,15 +14,7 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @fires toggle - Event emitted after the dialog's open state changes.
  * @fires beforetoggle - Event emitted before the dialog's open state changes.
  *
- * @method show - Method to show the drawer.
- * @method hide - Method to hide the drawer.
- * @method clickHandler - Handles click events on the drawer.
- * @method emitToggle - Emits an event after the dialog's open state changes.
- * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
- *
  * @summary A component that provides a drawer for displaying content in a side panel.
- *
- * @tag fluent-drawer
  */
 export class Drawer extends FASTElement {
   /**

packages/web-components/src/dropdown/dropdown.ts

@@ -6,11 +6,12 @@ import { DropdownAppearance, DropdownSize } from './dropdown.options.js';
 /**
  * The Fluent Dropdown Element. Implements {@link @microsoft/fast-foundation#BaseDropdown}.
  *
+ * @tag fluent-dropdown
+ *
  * @slot - The default slot. Accepts a {@link (Listbox:class)} element.
  * @slot indicator - The indicator slot.
  * @slot control - The control slot. This slot is automatically populated and should not be manually manipulated.
  *
- * @public
  */
 export class Dropdown extends BaseDropdown {
   /**

packages/web-components/src/field/field.ts

@@ -6,7 +6,8 @@ import { LabelPosition } from './field.options.js';
  * A Field Custom HTML Element.
  * Based on BaseField and includes style and layout specific attributes
  *
- * @public
+ * @tag fluent-field
+ *
  */
 export class Field extends BaseField {
   /**

packages/web-components/src/image/image.ts

@@ -4,7 +4,9 @@ import { ImageFit, ImageShape } from './image.options.js';
 
 /**
  * The base class used for constucting a fluent image custom element
- * @public
+ *
+ * @tag fluent-image
+ *
  */
 export class Image extends FASTElement {
   /**

packages/web-components/src/label/label.ts

@@ -4,7 +4,9 @@ import { LabelSize, LabelWeight } from './label.options.js';
 
 /**
  * The base class used for constructing a fluent-label custom element
- * @public
+ *
+ * @tag fluent-label
+ *
  */
 export class Label extends FASTElement {
   /**

packages/web-components/src/link/link.ts

@@ -7,11 +7,12 @@ import { LinkAppearance } from './link.options.js';
  * An Anchor Custom HTML Element.
  * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
  *
+ * @tag fluent-link
+ *
  * @slot start - Content which can be provided before the link content
  * @slot end - Content which can be provided after the link content
  * @slot - The default slot for link content
  *
- * @public
  */
 export class Link extends BaseAnchor {
   /**