add custom elements manifest

[brianchristopherbrady]

Previous Behavior

Fluent UI Web Components did not include a custom elements manifest (CEM) in its published package. Including a CEM provides several benefits:

• Improved Documentation: A CEM provides standardized metadata about web components, making it easier for developers to understand and use the components.
• Enhanced Tooling Support: Many modern tools and editors can leverage CEM to provide better code completion, linting, and other features that improve the developer experience.
• Easier Integration: With a CEM, integrating components into different frameworks (like React or Angular) becomes more straightforward as the manifest describes the API surface of the components.
• Consistency and Standards: Using a standardized format for component metadata helps maintain consistency across different libraries and projects, promoting better practices and interoperability.

New Behavior

• Installed "@custom-elements-manifest/analyzer": "^0.9.8": The custom-elements-manifest analyzer is now part of the project dependencies.
• Created and configured custom-elements-manifest.config.mjs: A configuration file for the custom-elements-manifest analyzer has been created and set up.
• Added generate-cem script to package.json: A script named generate-cem has been added to the package.json to generate the custom elements manifest.
• Added generate-cem command to the build script in package.json: The build process now includes the generate-cem command to ensure the custom elements manifest is generated during the build.

Example Configuration and Scripts in package.json

Here are the relevant parts of the package.json script updates::

 "scripts": {
    "generate-cem": "cem analyze --config custom-elements-manifest.config.js",
    "build": "yarn compile && yarn rollup -c && yarn generate-cem && yarn generate-api",
  },

custom-elements-manifest.config.mjs Example

Here is the configuration for the custom-elements-manifest analyzer:

export default {
  globs: [
    './src/**/*.ts',
    './src/**/*.template.ts',
    './src/**/*.styles.ts',
    './src/**/define.ts',
    './src/**/*.definition.ts',
    './src/fluent-design-system.ts',
  ],
  exclude: [
    './src/**/*.md',
    './src/index-rollup.ts',
    './src/index.ts',
    './src/**/*.spec.ts',
    './src/**/*.stories.ts',
    './src/theme/',
    './src/patterns/',
    './src/utils/',
    './src/helpers.tests.ts',
    './src/helpers.stories.ts',
    './src/utils/',
  ],
  outdir: './dist',
  packagejson: true,
  fast: true,
  plugins: [],
};

By including the CEM in the published package, Fluent UI Web Components now provide a richer and more integrated development experience, aligning with modern web development practices and standards.

[fabricteam]