Skip to content

Commit 0818671

Browse files
break-stuffBurton Smithmicahgodbolt
authored
feat(web-components): create custom elements manifest for web components project (#34283)
Co-authored-by: Burton Smith <burtonsmith@microsoft.com> Co-authored-by: Micah Godbolt <mgodbolt@microsoft.com>
1 parent fafc255 commit 0818671

52 files changed

Lines changed: 355 additions & 27 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Added custom elements manifest to project and included it in published package",
4+
"packageName": "@fluentui/web-components",
5+
"email": "burtonsmith@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

packages/web-components/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
test-results/
2+
custom-elements.json

packages/web-components/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,14 @@ import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components';
7676
ButtonDefinition.define(FluentDesignSystem.registry);
7777
```
7878

79+
## Developer Experience
80+
81+
For convenience we have included a [CEM (custom elements manifest)](https://github.com/webcomponents/custom-elements-manifest) at the root of the project.
82+
83+
```js
84+
import CEM from '@fluentui/custom-elements.json' with { type: 'json' };
85+
```
86+
7987
## Development
8088

8189
To start the component development environment, run `yarn start`.
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { modulePathResolverPlugin } from '@wc-toolkit/module-path-resolver';
2+
import { cemValidatorPlugin } from '@wc-toolkit/cem-validator';
3+
import { getTsProgram, typeParserPlugin } from '@wc-toolkit/type-parser';
4+
import { cemInheritancePlugin } from '@wc-toolkit/cem-inheritance';
5+
6+
export default {
7+
/** Globs to analyze */
8+
globs: ['src/**/*.ts'],
9+
/** Globs to exclude */
10+
exclude: [
11+
'_docs/**/*',
12+
'src/**/*.bench.ts',
13+
'src/**/*.definition.ts',
14+
'src/**/*.options.ts',
15+
'src/**/*.spec.ts',
16+
'src/**/*.stories.ts',
17+
'src/**/*.styles.ts',
18+
'src/**/*.template.ts',
19+
'src/**/define.ts',
20+
'src/**/index.ts',
21+
],
22+
/** Enable special handling for fast */
23+
fast: true,
24+
/** Provide custom plugins */
25+
plugins: [
26+
modulePathResolverPlugin({
27+
modulePathTemplate: (modulePath, name, tagName) => `./dist/esm/${getFolderName(name)}/${getFileName(name)}`,
28+
definitionPathTemplate: (modulePath, name, tagName) => `./dist/esm/${getFolderName(name)}/define.js`,
29+
typeDefinitionPathTemplate: (modulePath, name, tagName) => `./dist/dts/${getFolderName(name)}/index.d.ts`,
30+
}),
31+
typeParserPlugin(),
32+
cemInheritancePlugin(),
33+
cemValidatorPlugin({
34+
rules: {
35+
packageJson: {
36+
main: 'off',
37+
module: 'off',
38+
types: 'off',
39+
},
40+
manifest: {
41+
schemaVersion: 'off',
42+
},
43+
},
44+
}),
45+
],
46+
47+
/** Overrides default module creation: */
48+
overrideModuleCreation({ ts, globs }) {
49+
const program = getTsProgram(ts, globs, 'tsconfig.json');
50+
return program.getSourceFiles().filter(sf => globs.find(glob => sf.fileName.includes(glob)));
51+
},
52+
};
53+
54+
function getFolderName(baseName) {
55+
// Convert "BaseAccordionItem" to "accordion-item"
56+
return baseName
57+
.replace(/^Base/, '') // Remove the "Base" prefix
58+
.replace(/([a-z])([A-Z])/g, '$1-$2') // Convert camelCase to kebab-case
59+
.toLowerCase();
60+
}
61+
62+
function getFileName(baseName) {
63+
// Convert "BaseAccordionItem" to "accordion-item"
64+
const kebabCaseName = baseName
65+
.replace(/^Base/, '') // Remove the "Base" prefix
66+
.replace(/([a-z])([A-Z])/g, '$1-$2') // Convert camelCase to kebab-case
67+
.toLowerCase();
68+
69+
// Construct the file path
70+
return `${kebabCaseName}${baseName.includes('Base') ? '.base' : ''}.js`;
71+
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3751,7 +3751,7 @@ export { styles as MenuButtonStyles }
37513751

37523752
// Warning: (ae-missing-release-tag) "Switch" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
37533753
//
3754-
// @public (undocumented)
3754+
// @public
37553755
export class Switch extends BaseCheckbox {
37563756
constructor();
37573757
}
@@ -3988,7 +3988,7 @@ export type TextAlign = ValuesOf<typeof TextAlign>;
39883988

39893989
// Warning: (ae-missing-release-tag) "TextArea" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
39903990
//
3991-
// @public (undocumented)
3991+
// @public
39923992
export class TextArea extends BaseTextArea {
39933993
appearance: TextAreaAppearance;
39943994
block: boolean;
@@ -4296,7 +4296,7 @@ export const TooltipTemplate: ViewTemplate<Tooltip, any>;
42964296

42974297
// Warning: (ae-missing-release-tag) "TreeItem" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
42984298
//
4299-
// @public (undocumented)
4299+
// @public
43004300
export class TreeItem extends BaseTreeItem {
43014301
appearance: TreeItemAppearance;
43024302
// @internal
@@ -4472,7 +4472,7 @@ export const zIndexPriority = "var(--zIndexPriority)";
44724472

44734473
// Warnings were encountered during analysis:
44744474
//
4475-
// dist/dts/accordion-item/accordion-item.d.ts:11:5 - (ae-forgotten-export) The symbol "StaticallyComposableHTML" needs to be exported by the entry point index.d.ts
4475+
// dist/dts/accordion-item/accordion-item.d.ts:14:5 - (ae-forgotten-export) The symbol "StaticallyComposableHTML" needs to be exported by the entry point index.d.ts
44764476

44774477
// (No @packageDocumentation comment for this package)
44784478

packages/web-components/package.json

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"dist/dts/",
2424
"dist/esm/",
2525
"dist/*.js",
26-
"dist/*.d.ts"
26+
"dist/*.d.ts",
27+
"custom-elements.json"
2728
],
2829
"exports": {
2930
".": {
@@ -76,14 +77,15 @@
7677
"./dist/web-components.min.js"
7778
],
7879
"scripts": {
80+
"analyze": "cem analyze",
7981
"verify-packaging": "node ./scripts/verify-packaging",
8082
"type-check": "node ./scripts/type-check",
8183
"benchmark": "yarn clean && yarn compile:benchmark && yarn compile && node ./scripts/run-benchmarks",
8284
"compile": "node ./scripts/compile",
8385
"compile:benchmark": "rollup -c rollup.bench.js",
8486
"clean": "node ./scripts/clean dist",
8587
"generate-api": "api-extractor run --local",
86-
"build": "yarn compile && yarn rollup -c && yarn generate-api",
88+
"build": "yarn compile && yarn rollup -c && yarn generate-api && yarn analyze",
8789
"lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext .ts",
8890
"lint:fix": "eslint . --ext .ts --fix",
8991
"format": "prettier -w src/**/*.{ts,html} --ignore-path ../../.prettierignore",
@@ -96,11 +98,16 @@
9698
"e2e:local": "node ./scripts/e2e.js --ui"
9799
},
98100
"devDependencies": {
101+
"@custom-elements-manifest/analyzer": "0.10.4",
99102
"@fluentui/scripts-api-extractor": "*",
100103
"@microsoft/fast-element": "2.0.0",
101104
"@tensile-perf/web-components": "~0.2.0",
102105
"@storybook/html": "7.6.20",
103106
"@storybook/html-webpack5": "7.6.20",
107+
"@wc-toolkit/cem-validator": "1.0.3",
108+
"@wc-toolkit/cem-inheritance": "1.0.4",
109+
"@wc-toolkit/module-path-resolver": "1.0.0",
110+
"@wc-toolkit/type-parser": "1.0.3",
104111
"chromedriver": "^125.0.0"
105112
},
106113
"dependencies": {
@@ -119,5 +126,6 @@
119126
"patch"
120127
],
121128
"tag": "beta"
122-
}
129+
},
130+
"customElements": "./custom-elements.json"
123131
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item
88

99
/**
1010
* Accordion Item configuration options
11+
*
12+
* @tag fluent-accordion-item
13+
*
1114
* @public
1215
*/
1316
export type AccordionItemOptions = StartEndOptions<AccordionItem> & {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { AccordionExpandMode } from './accordion.options.js';
77
* An Accordion Custom HTML Element
88
* Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
99
*
10+
* @tag fluent-accordion
11+
*
1012
* @slot - The default slot for the accordion items
1113
* @fires change - Fires a custom 'change' event when the active item changes
1214
*

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize } from './a
88

99
/**
1010
* Anchor configuration options
11+
*
12+
* @tag fluent-anchor-button
13+
*
1114
* @public
1215
*/
1316
export type AnchorOptions = StartEndOptions<AnchorButton>;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import {
1414
* An Avatar Custom HTML Element.
1515
* Based on BaseAvatar and includes style and layout specific attributes
1616
*
17+
* @tag fluent-avatar
18+
*
1719
* @public
1820
*/
1921
export class Avatar extends BaseAvatar {

0 commit comments

Comments
 (0)