Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Simplify EuiFlex generic types #7792

Merged
merged 3 commits into from
May 28, 2024

Conversation

tkajtoch
Copy link
Member

@tkajtoch tkajtoch commented May 28, 2024

Summary

Fixes #7783

This PR optimizes types used in EuiFlexItem and EuiFlexGroup to be resolved faster and more reliably.

We recently found out that the introduction of #7688 caused a significant increase in type-checking times in Kibana. The reason wasn't clear at first, but profiling tsc and running type checking with various type simplifications highlighted the primary error. The generic typing of these two components isn't at fault. It's actually the type inferencing and distributive conditionals used multiple times in the type resolution path and EUI types being combined into a single big eui.d.ts all added to the type checking execution time.

This PR addresses all of these by simplifying these types and fixes a bug where some global attributes (e.g., title) weren't recognized as a proper argument.

This PR shouldn't introduce any breaking changes since the new types can be considered less strict / looser.

QA

  1. Checkout latest Kibana main and run yarn kbn bootstrap and time node scripts/type_check --clean-cache
  2. Checkout this branch, build EUI and link it locally to kibana. Run yarn kbn bootstrap --no-validate and time node scripts/type_check --clean-cache again to confirm reduced type checking times

General checklist

  • Release checklist
    • A changelog entry exists and is marked appropriately.

@tkajtoch tkajtoch self-assigned this May 28, 2024
@tkajtoch tkajtoch requested a review from a team as a code owner May 28, 2024 10:48
@@ -155,6 +156,10 @@ generator.then(() => {
}
) // end 3.
.replace(/$/, `\n\n${buildEuiTokensObject()}`) // 4.
.replaceAll(
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dts-generator likes to expand all types and for some reason this causes longer type checking time

@@ -51,9 +52,7 @@ export const DIRECTIONS = [
] as const;
type FlexGroupDirection = (typeof DIRECTIONS)[number];

type ComponentPropType = ElementType<CommonProps>;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ElementType<CommonProps> caused the global attributes to not be added to the final type

>(
props: EuiFlexGroupProps<TComponent> & {
ref?: Ref<TComponentRef>;
}
) => ReturnType<typeof EuiFlexGroupInternal>) & { displayName?: string };
) => ReactElement) & { displayName?: string };
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This loosens the return type but shouldn't have any impact on consumers of these two components. In case a stricter type is needed for ref usage, there's the TComponentRef generic argument they may override

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

cc @tkajtoch

Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM - thanks for testing Kibana CI impact ahead of time!

@tkajtoch tkajtoch merged commit 1bbf8f3 into elastic:main May 28, 2024
5 checks passed
tkajtoch added a commit to elastic/kibana that referenced this pull request May 29, 2024
`v94.5.1` ⏩ `v94.5.2`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v94.5.2`](https://github.com/elastic/eui/releases/v94.5.2)

**Bug fixes**

- Fixed `EuiDatePicker` to more gracefully handle incorrectly formatted
`selected` Moment dates, instead of simply crashing
([#7784](elastic/eui#7784))
- Fixed `EuiFlexGroup` and `EuiFlexItem` types to correctly accept
global attribute props and simplify type resolution when used with
`styled()`-like wrappers
([#7792](elastic/eui#7792))
rshen91 pushed a commit to rshen91/kibana that referenced this pull request May 30, 2024
`v94.5.1` ⏩ `v94.5.2`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v94.5.2`](https://github.com/elastic/eui/releases/v94.5.2)

**Bug fixes**

- Fixed `EuiDatePicker` to more gracefully handle incorrectly formatted
`selected` Moment dates, instead of simply crashing
([elastic#7784](elastic/eui#7784))
- Fixed `EuiFlexGroup` and `EuiFlexItem` types to correctly accept
global attribute props and simplify type resolution when used with
`styled()`-like wrappers
([elastic#7792](elastic/eui#7792))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FlexItem does not accept HTMLAttributes like title anymore
4 participants