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

Do not build list of available slots when no error #7731

Merged
merged 1 commit into from
Feb 6, 2025

Conversation

jorrit
Copy link
Contributor

@jorrit jorrit commented Feb 6, 2025

An error was logged on my website because Intl.ListFormat was not available:

TypeError: undefined is not a constructor (evaluating 'new Intl.ListFormat()')
  at c(./node_modules/react-aria-components/dist/utils.mjs:76:1)
  at m(./node_modules/react-aria-components/dist/utils.mjs:87:1)

It seemed the site was accessed using Playwright, an automated browser. (https://github.com/microsoft/playwright, microsoft/playwright#23978).

Out of curiousity, I checked which react-aria code was using Intl.ListFormat and it seemed that the code in utils that caused this should not have run, as the list is only needed in case of errors.

I refactored the code so the list of available slots is only compiled in case the requested slot is not available. This is a small speed optimization, as there is no longer a new instance of Intl.ListFormat on every render.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

  1. Find a browser with no support for Intl.ListFormat.
  2. Create a component with subcomponents that use slots.
  3. Use an valid slot name.
  4. Notice that there is no error because missing Intl.ListFormat.

Copy link
Member

@snowystinger snowystinger left a comment

Choose a reason for hiding this comment

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

thanks for the optimization!

@reidbarber reidbarber added this pull request to the merge queue Feb 6, 2025
Merged via the queue into adobe:main with commit ac55911 Feb 6, 2025
29 of 30 checks passed
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.

3 participants