Use new context API #1894

alexandernanberg · 2018-08-06T18:39:46Z

This is just to get the ball rolling with the new context API

Pretty happy with how the ThemeProvider turned out, a lot cleaner. I'll continue working on this and hopefully fully landing this PR.

~~Enzyme does not support the react > 16.3 yet so it's hard to test this until that gets fixed~~. We probably want to use a polyfill for this as well, like create-react-context unless we drop React < 16.3 support

No hard feelings if you decide not to use this!

quantizor · 2018-08-06T18:56:34Z

Good start! Let's remove that memoize-one dep that looks to have slipped in.

At this point for 4.0 I think we will just plan to drop old React support and just target 16.4+ to keep things easy.

alexandernanberg · 2018-08-06T19:04:02Z

Oh I actually just forgot to use the memoize function, we need to either memoize the getContext method or move the context to state because otherwise we'll provide a new context value each render which will make consumers update when they might not need to.

Cool, nice to save some KBs as well! 👍

quantizor · 2018-08-06T19:04:57Z

Let's use state and recalculate upon prop change by hard equality

alexandernanberg · 2018-08-06T19:14:01Z

Okay, although I think using the memoized approach is a bit cleaner and simpler, because then you don't need to recalculate in getDerivedPropsFromState. But either way is fine

Edit: Btw I think this is really useful info https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization

alexandernanberg · 2018-08-07T14:16:04Z

I think the ThemeProvider should work now 😮

Switched the test to react-testing-library because enzyme wasn't working (no react 16.3+ compability). If you don't want to switch over entirely to react-testing-library we could migrate back later.

Left the memoization for now but should be fairly simple to change if you'd still like that

alexandernanberg · 2018-08-07T17:52:43Z

src/models/StyledComponent.js

@@ -110,7 +87,8 @@ class BaseStyledComponent extends Component<*, BaseState> {

  generateAndInjectStyles(theme: any, props: any) {
    const { attrs, componentStyle, warnTooManyClasses } = this.constructor
-    const styleSheet = this.context[CONTEXT_KEY] || StyleSheet.master
+    // const styleSheet = this.context[CONTEXT_KEY] || StyleSheet.master
+    const styleSheet = StyleSheet.master


I'm unsure what this previously was for, but I think it will be fine just assigning it to Stylesheet.master?

@kitten can you comment on this? I think it's okay

Oh just realized that that context comes from the StyleSheetManager, so I'll have to wrap it in a StyleSheetConsumer or similar to get the correct value

quantizor · 2018-08-07T20:07:13Z

src/models/StyledComponent.js

-    return createElement(target, propsForElement)
+    return (
+      <ThemeConsumer>
+        {({ theme } = {}) => {


Can you use the empty object from utils/empties?

Can we also cache this function somehow instead of recreating it every render?

If I use EMPTY_OBJECT I get a flow error though, so the best way might create a type for the context and not destructure it, right? I've not really worked with flow before so I might need some help on certain bits

Yeah good point, although I don't it's that expensive to recreate it

It's more about memory pressure. This is a hot path, so we want it to be as maximally-efficient as possible.

Makes sense, will refactor to take this into account!

alexandernanberg · 2018-08-08T13:56:36Z

src/models/ThemeProvider.js

+  getContext(theme: (outerTheme: ?Theme) => void, outerTheme?: Theme) {
+    return {
+      theme: this.getTheme(theme, outerTheme),
+    }


What if we instead of using setting context to { theme } we set it to theme without a wrapping object, we won't be able to add any other properties on the context but I don't think we will want that anyways?

alexandernanberg · 2018-08-09T10:01:09Z


Edit: Wow I actually used `this.target` instead of `this.constructor.target` 🤦‍♂️

alexandernanberg · 2018-08-09T17:07:37Z

Tests are passing 🎉

Would love to get some second opinions and feedback on this now @kitten @mxstbr @probablyup

quantizor · 2018-08-09T17:09:37Z

Nice! Ok so the last thing I want to do here is some performance analysis.

Specifically making sure we aren't regressing against current master. Could you rig up a test using ThemeProvider in the benchmark suite (it's in this repo under benchmarks.)

quantizor · 2018-08-09T17:11:56Z

Let's also switch this branch to be pointing at "develop" which is the 4.0 development branch I just made.

alexandernanberg · 2018-08-10T21:49:46Z

Okay so I’m not sure that I interpret the benchmark results correctly, is a high or low number better? First thought it was high=better but I just noticed the ms suffix which made me uncertain

Anything you want me to fix before this can get merged?

quantizor · 2018-08-11T00:59:56Z

Lower ms is better. I think @kitten is right though, there are a bunch of other changes we're going to make in this branch so perf analysis might be premature.

quantizor · 2018-08-11T01:01:57Z

package.json

@@ -150,7 +148,7 @@
    "typescript": "^2.4.1"
  },
  "peerDependencies": {
-    "react": ">= 0.14.0 < 17.0.0-0"
+    "react": ">= 16.3.0 < 17.0.0-0"


Let's just make this >= 16.3 for simplicity.

quantizor · 2018-08-11T01:03:28Z

src/hoc/withTheme.js

-      return React.createElement(Component, props)
+      return (
+        <ThemeConsumer>
+          {(theme?: Theme) => {


Let's cache the function on the class so it's not getting recreated per render.

quantizor · 2018-08-11T01:05:25Z

src/models/StyledComponent.js

+
+    return (
+      <StyleSheetConsumer>
+        {(styleSheet?: StyleSheet) => (


Same here, let's cache it on the class.

quantizor · 2018-08-11T01:05:56Z

src/models/StyledNativeComponent.js

-    return createElement(target, propsForElement, children)
+    return (
+      <ThemeConsumer>
+        {(theme?: Theme) => {


quantizor · 2018-08-11T01:08:26Z

src/models/ThemeProvider.js

+
+  constructor(props: Props) {
+    super(props)
+    this.getContext = memoize(this.getContext.bind(this))


Don't need to do constructor if you use this pattern on the class itself:

class ThemeProvider extends Component<Props> { getContext = memoize( (theme: (outerTheme: ?Theme) => void, outerTheme?: Theme) => this.getTheme(theme, outerTheme) ) }

Yeah I actually wrote it similar to that first, but refactored after reading this thread. I was worried about booth perf and that the output isn't the same. Example here.

However if you feel that that's not a problem I'll happily change

We use loose mode, so ends up looking more like this: https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=true&code_lz=PTAEBEFMGMBsEMBOlT1AW0gFwBYHsATVAZ1QDtQBLM4reM6FAB0TyckSwE8AoOeYqQBiePKADePUKABmo0AF5QACgCUigHyhoeGnliQAdLDwBzZQHI5eC6p4BfHk5CgAQtQLVTqDNnxEBcioaOgZmVnZOXn5BNyQJKW1dWkQAV2gsPEQ1BOlpXEpiQwAjeKUCotLEEo9lCtUAbkTHaUSqnMk8pL0DYzNLKtsm6Ud7IA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=react%2Cstage-2%2Cenv&prettier=false&targets=&version=6.26.0&envVersion=1.6.2

You can leave it though, I'll experiment with it both ways later

quantizor · 2018-08-11T01:10:10Z

This is looking great! Let's do this final cleanup pass and get it in!

alexandernanberg · 2018-08-11T09:30:40Z

Cool, in that case this PR actually outperforms the master branch, correct?

So I tested to use class properties instead of binding the function in the constructor and it performed worse :/ Feel free to try this yourself as well, in case I did something wrong.

Also tested to break out the inlined functions inside the render method, and that didn't seem to make any notable difference other than we run into the same problem described above.

It might be easier to get this in the develop branch and then iterate on these things?

quantizor · 2018-08-11T15:29:53Z

@alexandernanberg Yeah that's possibly true! We did make a lot of changes.

…ontext-api

quantizor · 2018-08-11T16:59:51Z

src/models/test/ThemeProvider.test.js

@@ -2,117 +2,93 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { shallow, render, mount } from 'enzyme'
-import ThemeProvider, { CHANNEL_NEXT, CONTEXT_CHANNEL_SHAPE  } from '../ThemeProvider'
+import ThemeProvider, { ThemeConsumer } from '../ThemeProvider'


Maybe instead of ThemeConsumer we should test this with the withTheme HOC and normal styled constructors instead. That way we are ensuring the external API doesn't change.

Okay so would this be OK or do we want to use expectCSSMatches function as it's done in theme.test.js?

it('should merge its theme with an outer theme', () => { const outerTheme = { main: 'black' } const innerTheme = { secondary: 'black' } const childrenSpy = jest.fn() const MyDiv = ({ theme }) => { childrenSpy(theme) return null } const MyDivWithTheme = withTheme(MyDiv) render( <ThemeProvider theme={outerTheme}> <ThemeProvider theme={innerTheme}> <MyDivWithTheme /> </ThemeProvider> </ThemeProvider> ) expect(childrenSpy).toHaveBeenCalledTimes(1) expect(childrenSpy).toHaveBeenCalledWith({ ...outerTheme, ...innerTheme, }) })

quantizor · 2018-08-11T17:00:59Z

I'm happy with this once the last testing point is resolved. Excellent work 👊

alexandernanberg · 2018-08-11T18:49:19Z

Superb! Thank you 😄

quantizor · 2018-08-12T06:57:54Z

It's going in!

mxstbr · 2018-08-12T06:58:16Z

Thank you so much for helping us improve styled-components! Based on our Community Guidelines every person that has a PR of any kind merged is offered an invitation to the styled-components organization—that is you right now!

Should you accept, you'll get write access to the main repository. (and a fancy styled-components logo on your GitHub profile!) You'll be able to label and close issues, merge pull requests, create new branches, etc. We want you to help us out with those things, so don't be scared to do them! Make sure to read our contribution and community guidelines, which explains all of this in more detail. Of course, if you have any questions just let me know!

alexandernanberg commented Aug 7, 2018

View reviewed changes

quantizor reviewed Aug 7, 2018

View reviewed changes

alexandernanberg commented Aug 8, 2018

View reviewed changes

quantizor mentioned this pull request Aug 9, 2018

4.0 Roadmap #1694

Closed

19 tasks

alexandernanberg changed the base branch from master to develop August 9, 2018 17:23

Alexander Nanberg added 16 commits August 9, 2018 19:24

Update ThemeProvider to use new context API

67d0719

Fix flow

4bf49d8

Set theme as context

6eb21b1

Fix nested ThemeProviders

f3f982c

Add ThemeProvider tests

56fcae6

Add missing propagation test

d98189d

Improve ThemeProvider propagation test

149dfce

Rename children spy function

4c21617

Add flow types

296dbb6

Upgrade withTheme to use new context

ee1b0eb

Migrate StyledComponent to use new context api

de18d77

Add ThemeContextShape type

aafba73

Cache ThemeConsumer render function

595fd7e

Upgrade enzyme and revert back tests

9ab91e0

Update lockfile

7a65bf5

Migrate StyleSheetManager

e98d4ae

Fix import statement

81471d6

alexandernanberg changed the title ~~[WIP] Use new React context API~~ Use new context API Aug 10, 2018

quantizor reviewed Aug 11, 2018

View reviewed changes

quantizor added the 4.0 label Aug 11, 2018

Change react peerDependency

3b9c2f1

Alexander Nanberg added 3 commits August 11, 2018 18:26

Rename variable

fdcc66e

Merge remote-tracking branch 'upstream/develop' into migrate-to-new-c…

c9e3f7a

…ontext-api

Add changelog entry

4a2ba4a

quantizor reviewed Aug 11, 2018

View reviewed changes

Alexander Nanberg added 3 commits August 11, 2018 19:05

Cleanup import statement

9f66bb7

Fix errors after merge

493624a

Refactor ThemeProvider test to use withTheme and styled

b862c51

quantizor merged commit f242f9a into styled-components:develop Aug 12, 2018

alexandernanberg deleted the migrate-to-new-context-api branch August 12, 2018 09:06

This was referenced Aug 12, 2018

Switch to new context API #1459

Closed

Remove usages of unsafe lifecycle methods #1655

Closed

Remove deprecated ThemeProvider channel #1618

Closed

Use new context API #1894

Use new context API #1894

Conversation

alexandernanberg commented Aug 6, 2018 • edited

quantizor commented Aug 6, 2018 • edited

alexandernanberg commented Aug 6, 2018

quantizor commented Aug 6, 2018

alexandernanberg commented Aug 6, 2018 • edited

alexandernanberg commented Aug 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexandernanberg commented Aug 9, 2018 • edited

alexandernanberg commented Aug 9, 2018

quantizor commented Aug 9, 2018

quantizor commented Aug 9, 2018

alexandernanberg commented Aug 10, 2018

quantizor commented Aug 11, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

quantizor commented Aug 11, 2018

alexandernanberg commented Aug 11, 2018

quantizor commented Aug 11, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

quantizor commented Aug 11, 2018

alexandernanberg commented Aug 11, 2018

quantizor commented Aug 12, 2018

mxstbr commented Aug 12, 2018

alexandernanberg commented Aug 6, 2018 •

edited

quantizor commented Aug 6, 2018 •

edited

alexandernanberg commented Aug 6, 2018 •

edited

alexandernanberg commented Aug 9, 2018 •

edited