spectacle icon indicating copy to clipboard operation
spectacle copied to clipboard

fix: resolve React 19 compatibility by replacing defaultProps with attrs

Open umxr opened this issue 5 months ago • 2 comments

Description

This PR fixes React 19 compatibility issues in Spectacle by replacing all usage of the deprecated defaultProps pattern with styled-components' attrs method.

React 19 removed support for defaultProps on function components, which was breaking components throughout the Spectacle codebase. While the issue was initially reported for the FullScreen component, investigation revealed that many other components (typography, table, and layout primitives) were also affected.

The solution follows the recommended approach from styled-components using the attrs method with function variant syntax, which allows props to override defaults while maintaining full backward compatibility.

Key Changes:

  • Replaced defaultProps with styled.component.attrs((props) => ({ ...defaults, ...props })) pattern
  • Fixed typography components: Text, Heading, Quote, OrderedList, UnorderedList, ListItem, Link, CodeSpan, ScalableText
  • Fixed table components: Table, TableHeader, TableBody, TableRow, TableCell
  • Fixed layout components: FlexBox, Grid
  • Maintained all existing functionality and APIs
  • Ensured props can still override defaults

Fixes #1350

Type of Change

  • [x] Bug fix (non-breaking change which fixes an issue)
  • [ ] New feature (non-breaking change which adds functionality)
  • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • [ ] This change requires a documentation update

How Has This Been Tested?

Comprehensive Testing Performed:

  1. All Existing Tests Pass: Ran the full test suite (18 test suites, 114 tests) - all passing
  2. CI Checks Pass: Ran pnpm run check:ci - all 26 scripts pass
  3. Build Verification: Ran pnpm run build - successful compilation
  4. React 19 Compatibility Test: Created and ran specific tests to verify:
    • FullScreen component renders with default size (24px) and custom sizes
    • All typography components render with proper defaults
    • Table components render correctly with attrs defaults
    • Layout components (FlexBox, Grid) work with default display properties
    • Props can override attrs defaults as expected

Test Configuration:

  • Node.js v22.15.1
  • React 19.1.0 compatibility verified
  • All components tested with styled-components theme provider
  • Verified both default behavior and prop override scenarios

Checklist: (Feel free to delete this section upon completion)

  • [x] I have included a changeset if this change will require a version change to one of the packages.
  • [x] I have performed a self-review of my own code
  • [x] I have commented my code, particularly in hard-to-understand areas
  • [ ] I have made corresponding changes to the documentation
  • [x] I have run pnpm run check:ci and all checks pass
  • [x] I have added tests that prove my fix is effective or that my feature works
  • [x] My changes generate no new warnings
  • [x] Any dependent changes have been merged and published in downstream modules

umxr avatar Jun 13 '25 22:06 umxr

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
spectacle-docs-website Ready Ready Preview Comment Sep 25, 2025 4:28pm

vercel[bot] avatar Jun 13 '25 22:06 vercel[bot]

🦋 Changeset detected

Latest commit: 2c858637a7b8534f21052cdf0e89eefa9d6b8401

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
spectacle Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

changeset-bot[bot] avatar Jun 13 '25 23:06 changeset-bot[bot]

@ryan-roemer any chance we can get this merged and a release pushed?

LegNeato avatar Sep 25 '25 04:09 LegNeato

Released in https://www.npmjs.com/package/spectacle/v/10.2.2

@LegNeato let us know how it goes if you get a chance to upgrade!

ryan-roemer avatar Sep 26 '25 20:09 ryan-roemer

Thank you! it seems to work. Some styling changed but I am not sure if that is on my end or yours. Thanks again!

LegNeato avatar Sep 27 '25 05:09 LegNeato