Open
Description
Area
React Components (@fluentui/react-components)
Describe the feature that you would like added
ATM our public APIs rely on TypeScript inference.
Example:
// Source
export const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => { ... }
⬇️ tsc emit ⬇️
// Emit
export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentProps<FluentProviderSlots>, "dir"> & {
applyStylesToPortals?: boolean | undefined;
customStyleHooks_unstable?: Partial<{
useAccordionHeaderStyles_unstable: (state: unknown) => void;
useAccordionItemStyles_unstable: (state: unknown) => void;
useAccordionPanelStyles_unstable: (state: unknown) => void;
useAccordionStyles_unstable: (state: unknown) => void;
useAvatarStyles_unstable: (state: unknown) => void;
useAvatarGroupStyles_unstable: (state: unknown) => void;
useAvatarGroupItemStyles_unstable: (state: unknown) => void;
useAvatarGroupPopoverStyles_unstable: (state: unknown) => void;
useBadgeStyles_unstable: (state: unknown) => void;
useCounterBadgeStyles_unstable: (state: unknown) => void;
useCardHeaderStyles_unstable: (state: unknown) => void;
useCardStyles_unstable: (state: unknown) => void;
useCardFooterStyles_unstable: (state: unknown) => void;
}>
}
This introduces various drawbacks:
- when TSC and API-Extractor emit changes during migration to new versions it affects every v9 package
- rolluped index.d.ts files are becoming bigger as inferred types are usually exapnded, if TSC cannot find proper type alias
- significant perf impact on emitting
.d.ts
The ask here is to mitigate these drawbacks
Solution proposal:
we can enforce these behaviours via existing lint rules
- https://typescript-eslint.io/rules/explicit-module-boundary-types
- https://typescript-eslint.io/rules/explicit-function-return-type
After that is implemented and setup - we can enable --isolatedDeclarations tsc emit that is also supported by swc cli (via jsc.experimental.emitIsolatedDts
)
- both js and d.ts emitted by 1 tool 💪
// Source
- export const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => { ... }
+ export const FluentProvider: ForwardRefComponent<FluentProviderProps> = React.forwardRef((props, ref) => {}
⬇️ tsc emit ⬇️
// Emit
- export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentProps<FluentProviderSlots>, "dir"> & {
+ export declare const FluentProvider: Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {
applyStylesToPortals?: boolean | undefined;
+ customStyleHooks_unstable?: FluentProviderCustomStyleHooks;
- customStyleHooks_unstable?: Partial<{
- useAccordionHeaderStyles_unstable: (state: unknown) => void;
- useAccordionItemStyles_unstable: (state: unknown) => void;
- useAccordionPanelStyles_unstable: (state: unknown) => void;
- useAccordionStyles_unstable: (state: unknown) => void;
- useAvatarStyles_unstable: (state: unknown) => void;
- useAvatarGroupStyles_unstable: (state: unknown) => void;
- useAvatarGroupItemStyles_unstable: (state: unknown) => void;
- useAvatarGroupPopoverStyles_unstable: (state: unknown) => void;
- useBadgeStyles_unstable: (state: unknown) => void;
- useCounterBadgeStyles_unstable: (state: unknown) => void;
- useCardHeaderStyles_unstable: (state: unknown) => void;
- useCardStyles_unstable: (state: unknown) => void;
- useCardFooterStyles_unstable: (state: unknown) => void;
}>
}
Additional context
- chore(react-provider): Updating
FluentProvider
types to avoid implicit import in API definition #33590 (comment) - [Feature]: create
eslint
rule to enforce style hook API consistency #30385
Have you discussed this feature with our team
No response
Validations
- Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.
Priority
None