Skip to content

[Feature]: enforce explicit public API annotations via linter #33662

Open
@Hotell

Description

@Hotell

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

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

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

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions