Update to theming v2.2.0

Author: Henri Beck

packages/react-jss/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/react-jss.js": {
-    "bundled": 147358,
-    "minified": 48843,
-    "gzipped": 14467
+    "bundled": 147575,
+    "minified": 48891,
+    "gzipped": 14498
   },
   "dist/react-jss.min.js": {
-    "bundled": 112534,
-    "minified": 38141,
-    "gzipped": 11760
+    "bundled": 112751,
+    "minified": 38190,
+    "gzipped": 11783
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 16580,
-    "minified": 6957,
-    "gzipped": 2412
+    "bundled": 16900,
+    "minified": 7025,
+    "gzipped": 2444
   },
   "dist/react-jss.esm.js": {
-    "bundled": 16112,
-    "minified": 6567,
-    "gzipped": 2306,
+    "bundled": 16417,
+    "minified": 6620,
+    "gzipped": 2335,
     "treeshaked": {
       "rollup": {
         "code": 1896,

packages/react-jss/package.json

@@ -43,6 +43,6 @@
     "jss": "^9.7.0",
     "jss-preset-default": "^4.3.0",
     "prop-types": "^15.6.0",
-    "theming": "^2.1.2"
+    "theming": "^2.2.0"
   }
 }

packages/react-jss/src/createHoc.js

@@ -2,7 +2,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React, {Component, type ComponentType} from 'react'
 import PropTypes from 'prop-types'
-import {withTheme} from 'theming'
+import {ThemeContext} from 'theming'
 import type {StyleSheet} from 'jss'
 import jss, {getDynamicStyles, SheetsManager} from './jss'
 import compose from './compose'
@@ -126,22 +126,15 @@ export default function createHOC<
       if (isThemingEnabled && this.props.theme !== prevProps.theme) {
         const newState = this.createState()
         this.manage(newState)
-        this.manager.unmanage(prevProps.theme)
+        this.unmanage(prevProps, prevState)
+
         // eslint-disable-next-line react/no-did-update-set-state
         this.setState(newState)
       }
-
-      // We remove previous dynamicSheet only after new one was created to avoid FOUC.
-      if (prevState.dynamicSheet !== this.state.dynamicSheet && prevState.dynamicSheet) {
-        this.jss.removeStyleSheet(prevState.dynamicSheet)
-      }
     }
 
     componentWillUnmount() {
-      this.manager.unmanage(this.theme)
-      if (this.state.dynamicSheet) {
-        this.jss.removeStyleSheet(this.state.dynamicSheet)
-      }
+      this.unmanage(this.props, this.state)
     }
 
     get theme() {
@@ -209,15 +202,29 @@ export default function createHOC<
       return null
     }
 
-    manage({dynamicSheet, staticSheet}: State) {
+    manage(state: State) {
+      const {dynamicSheet, staticSheet} = state
       const registry = this.context[ns.sheetsRegistry]
 
       this.manager.manage(this.theme)
-      if (staticSheet && registry) registry.add(staticSheet)
+      if (staticSheet && registry) {
+        registry.add(staticSheet)
+      }
 
-      if (dynamicSheet !== null) {
+      if (dynamicSheet) {
         dynamicSheet.update(this.props).attach()
-        if (registry) registry.add(dynamicSheet)
+
+        if (registry) {
+          registry.add(dynamicSheet)
+        }
+      }
+    }
+
+    unmanage(prevProps, prevState) {
+      this.manager.unmanage(prevProps.theme)
+
+      if (prevState.dynamicSheet) {
+        this.jss.removeStyleSheet(prevState.dynamicSheet)
       }
     }
 
@@ -255,7 +262,8 @@ export default function createHOC<
 
     render() {
       const {dynamicSheet, classes, staticSheet} = this.state
-      const {innerRef, theme, ...props}: OuterPropsType = this.props
+      // $FlowFixMe: Flow complains for no reason...
+      const {innerRef, theme, ...props} = this.props
       const sheet = dynamicSheet || staticSheet
 
       if (injectMap.sheet && !props.sheet && sheet) props.sheet = sheet
@@ -269,9 +277,16 @@ export default function createHOC<
   }
 
   if (isThemingEnabled || injectMap.theme) {
-    return theming
-      ? theming.withTheme(Jss, {forwardInnerRef: true})
-      : withTheme(Jss, {forwardInnerRef: true})
+    const ThemeConsumer = (theming && theming.context.Consumer) || ThemeContext.Consumer
+
+    // eslint-disable-next-line no-inner-declarations
+    function ContextSubscribers(props) {
+      return <ThemeConsumer>{theme => <Jss theme={theme} {...props} />}</ThemeConsumer>
+    }
+
+    ContextSubscribers.InnerComponent = InnerComponent
+
+    return ContextSubscribers
   }
 
   return Jss

packages/react-jss/src/types.js

@@ -6,7 +6,7 @@ import {type Theming} from 'theming'
 export type Theme = {}
 
 export type Options = {
-  theming?: Theming,
+  theming?: Theming<Theme>,
   inject?: Array<'classes' | 'themes' | 'sheet'>,
   jss?: Jss
 } & StyleSheetFactoryOptions

packages/react-jss/tests/theming.js

@@ -245,7 +245,7 @@ describe('React-JSS: theming', () => {
       node
     )
 
-    expect(document.querySelectorAll('style').length).to.equal(2)
+    expect(document.querySelectorAll('style').length).to.equal(1)
 
     render(
       <div>
@@ -275,7 +275,7 @@ describe('React-JSS: theming', () => {
       node
     )
 
-    expect(document.querySelectorAll('style').length).to.equal(4)
+    expect(document.querySelectorAll('style').length).to.equal(3)
 
     render(
       <div>
@@ -319,7 +319,7 @@ describe('React-JSS: theming', () => {
       node
     )
 
-    expect(document.querySelectorAll('style').length).to.equal(2)
+    expect(document.querySelectorAll('style').length).to.equal(1)
   })
 
   it('two themed instances w/ dynamic props w/ different themes = 4 styles, same theme update = 3 styles', () => {
@@ -349,7 +349,7 @@ describe('React-JSS: theming', () => {
       node
     )
 
-    expect(document.querySelectorAll('style').length).to.equal(4)
+    expect(document.querySelectorAll('style').length).to.equal(3)
   })
 
   it('with JssProvider should render two different sheets', () => {

yarn.lock

@@ -8760,10 +8760,10 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-theming@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/theming/-/theming-2.1.2.tgz#f5a3353168b713f1becc0351bd35a6d4599d6b25"
-  integrity sha512-AUS4S1WwukBHTh3R6k4gQJoF07BhyRcT5c1nIsuJXRBkZiFnPc3ev5VE5/EoInWYseR772kGthgIOW61GgyDUw==
+theming@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/theming/-/theming-2.2.0.tgz#64fe667afc5fb742060dd084fe4af6fac1227a97"
+  integrity sha512-S+augXK6352pVHzuo3usMWpPMDZGYywhQkqwhhgHBaXt5nAohzbItm4ptBsXXDZZ5fN+BIlGGmf1ADI7Q/DduQ==
   dependencies:
     "@types/react" "^16.4.18"
     create-react-context "^0.2.3"