Upgrade guppy to styled components v4

joshwcomeau / guppy

🐠A friendly application manager and task runner for React.js

ISC License

3.27k stars 154 forks source link

Upgrade guppy to styled components v4 #269

Closed rfbotto closed 5 years ago

rfbotto commented 5 years ago

Summary:

Replace injectGlobal by the new createGlobalStyle
Replace innerRef for ref
- This also made me have to use React.forwardRef in the TextInput component in order to be able to forward the ref through the wrapper. This lead to a flow error as the flow types are not up to date with React > 16.3, hence the addition of the $FlowFixMe annotation.
- This also made me have to declare the respective ref variables as maybe instance types (https://flow.org/en/docs/react/refs/) which in result led to some extra conditional checking before their usage.
Replace .extend for styled()
Update the Heading component to use the new as prop, instead of withComponent

rfbotto commented 5 years ago

Hey @joshwcomeau!

I hope you had a great time at React Boston, looking forward to seeing your whimsy talk! :)

I updated the PR with the changes you request. In the meantime, while https://github.com/joshwcomeau/guppy/pull/265 doesn't get merged, i will also try to investigate into the reason for the performance constraint with the usage of forwardRef in the TextInput.

joshwcomeau commented 5 years ago

Oh! Something really interesting: I was assuming the problem was with <CircularOutline>, since the only visible animation is the outline around the project icons in the sidebar... but when I disable that animation, the performance problem still exists in the profiling tools.

So, there's clearly a <Spring> somewhere re-rendering a bunch when it doesn't have to 🤔

Will continue looking later, but feel free to do some digging if it interests you :D

superhawk610 commented 5 years ago

I'm afraid master has diverged too substantially to be able to reasonably recover this PR. I'm going to open a new PR and do my best to cherry pick all novel contributions from this. @rfbotto please feel free to critique/add to the new PR - I will link it here when it's open.