Skip to content

Commit bfadc50

Browse files
chrisdholtchrisdholt
authored
fix: separate base classes into individual files for better tree shaking support across tools (#33962)
1 parent b0005b5 commit bfadc50

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+4653
-4597
lines changed

‎change/@fluentui-web-components-0ba5f903-4a02-4a27-b448-e807692d2f90.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "fix: move base classes to a separate file and provide export paths for improved tree shaking",
4+
"packageName": "@fluentui/web-components",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/web-components/package.json

+4
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@
3434
"types": "./dist/dts/utils/index.d.ts",
3535
"default": "./dist/esm/utils/index.js"
3636
},
37+
"./*/base.js": {
38+
"types": "./dist/dts/*/*.base.d.ts",
39+
"default": "./dist/esm/*/*.base.js"
40+
},
3741
"./*/define.js": {
3842
"types": "./dist/dts/*/*.define.d.ts",
3943
"default": "./dist/esm/*/*.define.js"

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

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
2+
import { uniqueId } from '@microsoft/fast-web-utilities';
3+
import { toggleState } from '../utils/element-internals.js';
4+
5+
/**
6+
*
7+
* @slot start - Content positioned before heading in the collapsed state
8+
* @slot heading - Content which serves as the accordion item heading and text of the expand button
9+
* @slot - The default slot for accordion item content
10+
* @slot marker-expanded - The expanded icon
11+
* @slot marker-collapsed - The collapsed icon
12+
* @csspart heading - Wraps the button
13+
* @csspart button - The button which serves to invoke the item
14+
* @csspart content - The wrapper for the accordion item content
15+
*
16+
* @public
17+
*/
18+
export class BaseAccordionItem extends FASTElement {
19+
/**
20+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
21+
*
22+
* @internal
23+
*/
24+
public elementInternals: ElementInternals = this.attachInternals();
25+
26+
/**
27+
* Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
28+
* heading element.
29+
*
30+
* @public
31+
* @remarks
32+
* HTML attribute: heading-level
33+
*/
34+
@attr({
35+
attribute: 'heading-level',
36+
mode: 'fromView',
37+
converter: nullableNumberConverter,
38+
})
39+
public headinglevel: 1 | 2 | 3 | 4 | 5 | 6 = 2;
40+
41+
/**
42+
* Expands or collapses the item.
43+
*
44+
* @public
45+
* @remarks
46+
* HTML attribute: expanded
47+
*/
48+
@attr({ mode: 'boolean' })
49+
public expanded: boolean = false;
50+
51+
/**
52+
* Handles expanded changes
53+
* @param prev - previous value
54+
* @param next - next value
55+
*/
56+
public expandedChanged(prev: boolean, next: boolean): void {
57+
toggleState(this.elementInternals, 'expanded', next);
58+
}
59+
60+
/**
61+
* Disables an accordion item
62+
*
63+
* @public
64+
* @remarks
65+
* HTML attribute: disabled
66+
*/
67+
@attr({ mode: 'boolean' })
68+
public disabled: boolean = false;
69+
70+
/**
71+
* Handles disabled changes
72+
* @param prev - previous value
73+
* @param next - next value
74+
*/
75+
public disabledChanged(prev: boolean, next: boolean): void {
76+
toggleState(this.elementInternals, 'disabled', next);
77+
}
78+
79+
/**
80+
* The item ID
81+
*
82+
* @public
83+
* @remarks
84+
* HTML Attribute: id
85+
*/
86+
@attr
87+
public id: string = uniqueId('accordion-');
88+
89+
/**
90+
* @internal
91+
*/
92+
public expandbutton!: HTMLElement;
93+
}

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

+2-92
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
2-
import { uniqueId } from '@microsoft/fast-web-utilities';
1+
import { attr } from '@microsoft/fast-element';
32
import type { StaticallyComposableHTML } from '../utils/index.js';
43
import { StartEnd } from '../patterns/index.js';
54
import type { StartEndOptions } from '../patterns/index.js';
65
import { applyMixins } from '../utils/apply-mixins.js';
76
import { swapStates, toggleState } from '../utils/element-internals.js';
7+
import { BaseAccordionItem } from './accordion-item.base.js';
88
import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
99

1010
/**
@@ -16,96 +16,6 @@ export type AccordionItemOptions = StartEndOptions<AccordionItem> & {
1616
collapsedIcon?: StaticallyComposableHTML<AccordionItem>;
1717
};
1818

19-
/**
20-
*
21-
* @slot start - Content positioned before heading in the collapsed state
22-
* @slot heading - Content which serves as the accordion item heading and text of the expand button
23-
* @slot - The default slot for accordion item content
24-
* @slot marker-expanded - The expanded icon
25-
* @slot marker-collapsed - The collapsed icon
26-
* @csspart heading - Wraps the button
27-
* @csspart button - The button which serves to invoke the item
28-
* @csspart content - The wrapper for the accordion item content
29-
*
30-
* @public
31-
*/
32-
export class BaseAccordionItem extends FASTElement {
33-
/**
34-
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
35-
*
36-
* @internal
37-
*/
38-
public elementInternals: ElementInternals = this.attachInternals();
39-
40-
/**
41-
* Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
42-
* heading element.
43-
*
44-
* @public
45-
* @remarks
46-
* HTML attribute: heading-level
47-
*/
48-
@attr({
49-
attribute: 'heading-level',
50-
mode: 'fromView',
51-
converter: nullableNumberConverter,
52-
})
53-
public headinglevel: 1 | 2 | 3 | 4 | 5 | 6 = 2;
54-
55-
/**
56-
* Expands or collapses the item.
57-
*
58-
* @public
59-
* @remarks
60-
* HTML attribute: expanded
61-
*/
62-
@attr({ mode: 'boolean' })
63-
public expanded: boolean = false;
64-
65-
/**
66-
* Handles expanded changes
67-
* @param prev - previous value
68-
* @param next - next value
69-
*/
70-
public expandedChanged(prev: boolean, next: boolean): void {
71-
toggleState(this.elementInternals, 'expanded', next);
72-
}
73-
74-
/**
75-
* Disables an accordion item
76-
*
77-
* @public
78-
* @remarks
79-
* HTML attribute: disabled
80-
*/
81-
@attr({ mode: 'boolean' })
82-
public disabled: boolean = false;
83-
84-
/**
85-
* Handles disabled changes
86-
* @param prev - previous value
87-
* @param next - next value
88-
*/
89-
public disabledChanged(prev: boolean, next: boolean): void {
90-
toggleState(this.elementInternals, 'disabled', next);
91-
}
92-
93-
/**
94-
* The item ID
95-
*
96-
* @public
97-
* @remarks
98-
* HTML Attribute: id
99-
*/
100-
@attr
101-
public id: string = uniqueId('accordion-');
102-
103-
/**
104-
* @internal
105-
*/
106-
public expandbutton!: HTMLElement;
107-
}
108-
10919
/**
11020
* An Accordion Item Custom HTML Element.
11121
* Based on BaseAccordionItem and includes style and layout specific attributes

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
export { AccordionItem, BaseAccordionItem } from './accordion-item.js';
1+
export { BaseAccordionItem } from './accordion-item.base.js';
2+
export { AccordionItem } from './accordion-item.js';
23
export type { AccordionItemOptions } from './accordion-item.js';
34
export { AccordionItemSize, AccordionItemMarkerPosition } from './accordion-item.options.js';
45
export { styles as accordionItemStyles } from './accordion-item.styles.js';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Observable } from '@microsoft/fast-element';
22
import { attr, FASTElement, observable } from '@microsoft/fast-element';
3-
import { BaseAccordionItem } from '../accordion-item/accordion-item.js';
3+
import { BaseAccordionItem } from '../accordion-item/accordion-item.base.js';
44
import { AccordionExpandMode } from './accordion.options.js';
55

66
/**

0 commit comments

Comments
 (0)