-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
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: improve types for .attrs() #4288
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks really good!
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [styled-components](https://styled-components.com) ([source](https://togithub.com/styled-components/styled-components)) | [`6.1.8` -> `6.1.9`](https://renovatebot.com/diffs/npm/styled-components/6.1.8/6.1.9) | [![age](https://developer.mend.io/api/mc/badges/age/npm/styled-components/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/styled-components/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/styled-components/6.1.8/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/styled-components/6.1.8/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>styled-components/styled-components (styled-components)</summary> ### [`v6.1.9`](https://togithub.com/styled-components/styled-components/releases/tag/v6.1.9) [Compare Source](https://togithub.com/styled-components/styled-components/compare/v6.1.8...v6.1.9) #### What's Changed - fix: improve types for .attrs() by [@​uhyo](https://togithub.com/uhyo) in [styled-components/styled-components#4288 - fix(types): allow using a styled component as a key inside object styles in the web runtime by [@​iiroj](https://togithub.com/iiroj) in [styled-components/styled-components#4249 - Upgrading babel dependencies to latest to fix CVE-2023-45133 by [@​JesseObrien](https://togithub.com/JesseObrien) in [styled-components/styled-components#4214 #### New Contributors - [@​uhyo](https://togithub.com/uhyo) made their first contribution in [styled-components/styled-components#4288 - [@​iiroj](https://togithub.com/iiroj) made their first contribution in [styled-components/styled-components#4249 - [@​JesseObrien](https://togithub.com/JesseObrien) made their first contribution in [styled-components/styled-components#4214 **Full Changelog**: styled-components/styled-components@v6.1.8...v6.1.9 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/X-oss-byte/Nextjs).
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [styled-components](https://styled-components.com) ([source](https://togithub.com/styled-components/styled-components)) | [`6.1.8` -> `6.1.9`](https://renovatebot.com/diffs/npm/styled-components/6.1.8/6.1.9) | [![age](https://developer.mend.io/api/mc/badges/age/npm/styled-components/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/styled-components/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/styled-components/6.1.8/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/styled-components/6.1.8/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- > [!WARNING] > Some dependencies could not be looked up. Check the Dependency Dashboard for more information. --- ### Release Notes <details> <summary>styled-components/styled-components (styled-components)</summary> ### [`v6.1.9`](https://togithub.com/styled-components/styled-components/releases/tag/v6.1.9) [Compare Source](https://togithub.com/styled-components/styled-components/compare/v6.1.8...v6.1.9) #### What's Changed - fix: improve types for .attrs() by [@​uhyo](https://togithub.com/uhyo) in [styled-components/styled-components#4288 - fix(types): allow using a styled component as a key inside object styles in the web runtime by [@​iiroj](https://togithub.com/iiroj) in [styled-components/styled-components#4249 - Upgrading babel dependencies to latest to fix CVE-2023-45133 by [@​JesseObrien](https://togithub.com/JesseObrien) in [styled-components/styled-components#4214 #### New Contributors - [@​uhyo](https://togithub.com/uhyo) made their first contribution in [styled-components/styled-components#4288 - [@​iiroj](https://togithub.com/iiroj) made their first contribution in [styled-components/styled-components#4249 - [@​JesseObrien](https://togithub.com/JesseObrien) made their first contribution in [styled-components/styled-components#4214 **Full Changelog**: styled-components/styled-components@v6.1.8...v6.1.9 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/camunda/zeebe). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4zMjEuMiIsInVwZGF0ZWRJblZlciI6IjM3LjMyMS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJhdXRvbWVyZ2UiXX0=-->
….5) (#18133) [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [styled-components](https://styled-components.com) ([source](https://togithub.com/styled-components/styled-components)) | [`6.1.8` -> `6.1.9`](https://renovatebot.com/diffs/npm/styled-components/6.1.8/6.1.9) | [![age](https://developer.mend.io/api/mc/badges/age/npm/styled-components/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/styled-components/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/styled-components/6.1.8/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/styled-components/6.1.8/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>styled-components/styled-components (styled-components)</summary> ### [`v6.1.9`](https://togithub.com/styled-components/styled-components/releases/tag/v6.1.9) [Compare Source](https://togithub.com/styled-components/styled-components/compare/v6.1.8...v6.1.9) #### What's Changed - fix: improve types for .attrs() by [@​uhyo](https://togithub.com/uhyo) in [styled-components/styled-components#4288 - fix(types): allow using a styled component as a key inside object styles in the web runtime by [@​iiroj](https://togithub.com/iiroj) in [styled-components/styled-components#4249 - Upgrading babel dependencies to latest to fix CVE-2023-45133 by [@​JesseObrien](https://togithub.com/JesseObrien) in [styled-components/styled-components#4214 #### New Contributors - [@​uhyo](https://togithub.com/uhyo) made their first contribution in [styled-components/styled-components#4288 - [@​iiroj](https://togithub.com/iiroj) made their first contribution in [styled-components/styled-components#4249 - [@​JesseObrien](https://togithub.com/JesseObrien) made their first contribution in [styled-components/styled-components#4214 **Full Changelog**: styled-components/styled-components@v6.1.8...v6.1.9 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/camunda/zeebe). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4zMjEuMiIsInVwZGF0ZWRJblZlciI6IjM3LjMyMS4yIiwidGFyZ2V0QnJhbmNoIjoic3RhYmxlL29wZXJhdGUtOC41IiwibGFiZWxzIjpbImF1dG9tZXJnZSJdfQ==-->
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [styled-components](https://styled-components.com) ([source](https://togithub.com/styled-components/styled-components)) | [`6.1.8` -> `6.1.9`](https://renovatebot.com/diffs/npm/styled-components/6.1.8/6.1.9) | [![age](https://developer.mend.io/api/mc/badges/age/npm/styled-components/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/styled-components/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/styled-components/6.1.8/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/styled-components/6.1.8/6.1.9?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>styled-components/styled-components (styled-components)</summary> ### [`v6.1.9`](https://togithub.com/styled-components/styled-components/releases/tag/v6.1.9) [Compare Source](https://togithub.com/styled-components/styled-components/compare/v6.1.8...v6.1.9) #### What's Changed - fix: improve types for .attrs() by [@​uhyo](https://togithub.com/uhyo) in [styled-components/styled-components#4288 - fix(types): allow using a styled component as a key inside object styles in the web runtime by [@​iiroj](https://togithub.com/iiroj) in [styled-components/styled-components#4249 - Upgrading babel dependencies to latest to fix CVE-2023-45133 by [@​JesseObrien](https://togithub.com/JesseObrien) in [styled-components/styled-components#4214 #### New Contributors - [@​uhyo](https://togithub.com/uhyo) made their first contribution in [styled-components/styled-components#4288 - [@​iiroj](https://togithub.com/iiroj) made their first contribution in [styled-components/styled-components#4249 - [@​JesseObrien](https://togithub.com/JesseObrien) made their first contribution in [styled-components/styled-components#4214 **Full Changelog**: styled-components/styled-components@v6.1.8...v6.1.9 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/kula-app/OnLaunch). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4zMzEuMCIsInVwZGF0ZWRJblZlciI6IjM3LjMzMS4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119-->
@quantizor I'm trying to run |
Perhaps I'm missing something. It doesn't do what it's supposed to do though 🤷♂️ |
@AntonNiklasson I checked and confirmed that It's possible that I'm missing something though, so I recommend opening a new issue with concrete examples. I think I can take a look then, Unfortunately your 🤷♂️ doesn't carry enough information for now. |
I'm sorry for the rude tone in my previous comment @uhyo. That didn't come out the way I wanted it to. I really appreciate all the hard work you've put into this! I've been trying to reproduce it, I'll open a new issue if I find something. What I'm seeing right now is just that the props I explicitly set in |
No problem! Anyways I see that several new issues are already out there regarding the |
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [styled-components](https://styled-components.com) ([source](https://togithub.com/styled-components/styled-components)) | [`6.1.9` -> `6.1.10`](https://renovatebot.com/diffs/npm/styled-components/6.1.8/6.1.10) | [![age](https://developer.mend.io/api/mc/badges/age/npm/styled-components/6.1.10?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/styled-components/6.1.10?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/styled-components/6.1.8/6.1.10?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/styled-components/6.1.8/6.1.10?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>styled-components/styled-components (styled-components)</summary> ### [`v6.1.10`](https://togithub.com/styled-components/styled-components/compare/v6.1.9...cda9ccbfeb8e9e8962f38b486b4291c3847668d9) [Compare Source](https://togithub.com/styled-components/styled-components/compare/v6.1.9...v6.1.10) ### [`v6.1.9`](https://togithub.com/styled-components/styled-components/releases/tag/v6.1.9) [Compare Source](https://togithub.com/styled-components/styled-components/compare/v6.1.8...v6.1.9) #### What's Changed - fix: improve types for .attrs() by [@​uhyo](https://togithub.com/uhyo) in [styled-components/styled-components#4288 - fix(types): allow using a styled component as a key inside object styles in the web runtime by [@​iiroj](https://togithub.com/iiroj) in [styled-components/styled-components#4249 - Upgrading babel dependencies to latest to fix CVE-2023-45133 by [@​JesseObrien](https://togithub.com/JesseObrien) in [styled-components/styled-components#4214 #### New Contributors - [@​uhyo](https://togithub.com/uhyo) made their first contribution in [styled-components/styled-components#4288 - [@​iiroj](https://togithub.com/iiroj) made their first contribution in [styled-components/styled-components#4249 - [@​JesseObrien](https://togithub.com/JesseObrien) made their first contribution in [styled-components/styled-components#4214 **Full Changelog**: styled-components/styled-components@v6.1.8...v6.1.9 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/X-oss-byte/Nextjs).
@quantizor I saw you reverted the changes here. Is there another initiative to solve the typing for |
Will revisit later as a test release. I'm not keen to keep putting out problematic typing mainline releases... |
That makes sense! Perhaps it would be worth it to invest a bit into a types testing setup? I noticed there’s nothing in place when I played with #4306. |
There are a few type test files in the repo |
The issue is more about scale. This repo might be fine but a large one with hundreds or thousands of files will have entirely different compile performance... |
closes #4076
closes #4138
closes #4183
Hello, the above issue is blocking us from upgrading to v6, so here is a possible fix.
Improvement
The improvement brought by this PR can be seen in this example:
The part marked as
(NEW)
is made possible by this PR. Oncefoo
is provided through the.attrs
call, the resulting component (DivWithRequiredBar
) no longer requiresfoo
as a prop.Implementation
To achieve this, the
Styled
interface now has distinction between Outer props and Inner props:Thus the
Styled
interface now has newInnerProps
type attribute. It is usually same asOuterProps
, but the updatedattrs()
types can make them diverge.