merge master

Author: kof

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

@@ -1,23 +1,23 @@
 {
   "dist/react-jss.js": {
-    "bundled": 124943,
-    "minified": 43246,
-    "gzipped": 13007
+    "bundled": 147373,
+    "minified": 48848,
+    "gzipped": 14465
   },
   "dist/react-jss.min.js": {
-    "bundled": 101535,
-    "minified": 36075,
-    "gzipped": 10916
+    "bundled": 112549,
+    "minified": 38146,
+    "gzipped": 11757
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 16617,
-    "minified": 6893,
-    "gzipped": 2410
+    "bundled": 16530,
+    "minified": 6928,
+    "gzipped": 2402
   },
   "dist/react-jss.esm.js": {
-    "bundled": 16063,
-    "minified": 6420,
-    "gzipped": 2295,
+    "bundled": 16058,
+    "minified": 6535,
+    "gzipped": 2297,
     "treeshaked": {
       "rollup": {
         "code": 1866,

packages/react-jss/package.json

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

packages/react-jss/src/createHoc.js

@@ -2,22 +2,14 @@
 /* eslint-disable react/destructuring-assignment */
 import React, {Component, type ComponentType} from 'react'
 import PropTypes from 'prop-types'
-import defaultTheming from 'theming'
+import {withTheme} from 'theming'
 import type {StyleSheet} from 'jss'
 import jss, {getDynamicStyles, SheetsManager} from './jss'
 import compose from './compose'
 import getDisplayName from './getDisplayName'
 import * as ns from './ns'
 import contextTypes from './contextTypes'
-import type {
-  Options,
-  Theme,
-  StylesOrCreator,
-  InnerProps,
-  OuterProps,
-  Context,
-  SubscriptionId
-} from './types'
+import type {Options, Theme, StylesOrCreator, InnerProps, OuterProps, Context} from './types'
 
 const env = process.env.NODE_ENV
 
@@ -44,11 +36,11 @@ const dynamicStylesNs = Math.random()
  *
  */
 
-type State = {
-  theme: Theme,
-  dynamicSheet?: StyleSheet,
+type State = {|
+  dynamicSheet: StyleSheet | null,
+  staticSheet: StyleSheet | null,
   classes: {}
-}
+|}
 
 const getStyles = (stylesOrCreator: StylesOrCreator, theme: Theme) => {
   if (typeof stylesOrCreator !== 'function') {
@@ -85,56 +77,56 @@ export default function createHOC<
   options: Options
 ): ComponentType<OuterPropsType> {
   const isThemingEnabled = typeof stylesOrCreator === 'function'
-  const {theming = defaultTheming, inject, jss: optionsJss, ...sheetOptions} = options
+  const {theming, inject, jss: optionsJss, ...sheetOptions} = options
   const injectMap = inject ? toMap(inject) : defaultInjectProps
-  const {themeListener} = theming
   const displayName = getDisplayName(InnerComponent)
   const defaultClassNamePrefix = env === 'production' ? '' : `${displayName}-`
   const noTheme = {}
   const managerId = managersCounter++
   const manager = new SheetsManager()
-  // $FlowFixMe defaultProps are not defined in React$Component
-  const defaultProps: InnerPropsType = {...InnerComponent.defaultProps}
-  delete defaultProps.classes
+
+  // $FlowFixMe: DefaultProps is missing in type definitions
+  const {classes: defaultClasses = {}, ...defaultProps} = {...InnerComponent.defaultProps}
 
   class Jss extends Component<OuterPropsType, State> {
     static displayName = `Jss(${displayName})`
 
     static InnerComponent = InnerComponent
 
-    static contextTypes = {
-      ...contextTypes,
-      ...(isThemingEnabled ? themeListener.contextTypes : {})
-    }
+    static contextTypes = contextTypes
 
     static propTypes = {
       innerRef: PropTypes.func
     }
 
-    static defaultProps = defaultProps
+    static defaultProps = {
+      ...defaultProps,
+      theme: noTheme
+    }
+
+    classNamePrefix: string = defaultClassNamePrefix
 
     constructor(props: OuterPropsType, context: Context) {
       super(props, context)
-      const theme = isThemingEnabled ? themeListener.initial(context) : noTheme
 
-      this.state = this.createState({theme, classes: {}}, props)
-      this.manage(this.state)
-    }
+      const contextSheetOptions = context[ns.sheetOptions]
 
-    componentDidMount() {
-      if (isThemingEnabled) {
-        this.unsubscribeId = themeListener.subscribe(this.context, this.setTheme)
+      if (contextSheetOptions && contextSheetOptions.classNamePrefix) {
+        this.classNamePrefix = contextSheetOptions.classNamePrefix + this.classNamePrefix
       }
+
+      this.state = this.createState()
+      this.manage(this.state)
     }
 
     componentDidUpdate(prevProps: OuterPropsType, prevState: State) {
       const {dynamicSheet} = this.state
       if (dynamicSheet) dynamicSheet.update(this.props)
 
-      if (isThemingEnabled && this.state.theme !== prevState.theme) {
-        const newState = this.createState(this.state, this.props)
+      if (isThemingEnabled && this.props.theme !== prevProps.theme) {
+        const newState = this.createState()
         this.manage(newState)
-        this.manager.unmanage(prevState.theme)
+        this.manager.unmanage(prevProps.theme)
         // eslint-disable-next-line react/no-did-update-set-state
         this.setState(newState)
       }
@@ -146,17 +138,15 @@ export default function createHOC<
     }
 
     componentWillUnmount() {
-      if (isThemingEnabled && this.unsubscribeId) {
-        themeListener.unsubscribe(this.context, this.unsubscribeId)
-      }
-
-      this.manager.unmanage(this.state.theme)
+      this.manager.unmanage(this.theme)
       if (this.state.dynamicSheet) {
         this.jss.removeStyleSheet(this.state.dynamicSheet)
       }
     }
 
-    setTheme = (theme: Theme) => this.setState({theme})
+    get theme() {
+      return isThemingEnabled ? this.props.theme : noTheme
+    }
 
     get jss() {
       return this.context[ns.jss] || optionsJss || jss
@@ -177,92 +167,99 @@ export default function createHOC<
       return manager
     }
 
-    manage({theme, dynamicSheet}: State) {
-      const contextSheetOptions = this.context[ns.sheetOptions]
-      if (contextSheetOptions && contextSheetOptions.disableStylesGeneration) {
-        return
-      }
-      const registry = this.context[ns.sheetsRegistry]
-
-      const staticSheet = this.manager.manage(theme)
-      if (registry) registry.add(staticSheet)
+    getStaticSheet() {
+      const theme = this.theme
+      let staticSheet = this.manager.get(theme)
 
-      if (dynamicSheet) {
-        dynamicSheet.update(this.props).attach()
-        if (registry) registry.add(dynamicSheet)
+      if (staticSheet) {
+        return staticSheet
       }
-    }
 
-    createState(state: State, {classes: userClasses}): State {
       const contextSheetOptions = this.context[ns.sheetOptions]
-      if (contextSheetOptions && contextSheetOptions.disableStylesGeneration) {
-        return {...state, classes: {}}
-      }
-
-      let classNamePrefix = defaultClassNamePrefix
-      let staticSheet = this.manager.get(state.theme)
-
-      if (contextSheetOptions && contextSheetOptions.classNamePrefix) {
-        classNamePrefix = contextSheetOptions.classNamePrefix + classNamePrefix
-      }
-
-      if (!staticSheet) {
-        const styles = getStyles(stylesOrCreator, state.theme)
-        staticSheet = this.jss.createStyleSheet(styles, {
-          ...sheetOptions,
-          ...contextSheetOptions,
-          meta: `${displayName}, ${isThemingEnabled ? 'Themed' : 'Unthemed'}, Static`,
-          classNamePrefix
-        })
-        this.manager.add(state.theme, staticSheet)
-        // $FlowFixMe Cannot add random fields to instance of class StyleSheet
-        staticSheet[dynamicStylesNs] = getDynamicStyles(styles)
-      }
+      const styles = getStyles(stylesOrCreator, theme)
+      staticSheet = this.jss.createStyleSheet(styles, {
+        ...sheetOptions,
+        ...contextSheetOptions,
+        meta: `${displayName}, ${isThemingEnabled ? 'Themed' : 'Unthemed'}, Static`,
+        classNamePrefix: this.classNamePrefix
+      })
+      this.manager.add(theme, staticSheet)
+      // $FlowFixMe Cannot add random fields to instance of class StyleSheet
+      staticSheet[dynamicStylesNs] = getDynamicStyles(styles)
+
+      return staticSheet
+    }
 
+    getDynamicSheet(staticSheet) {
       // $FlowFixMe Cannot access random fields on instance of class StyleSheet
       const dynamicStyles = staticSheet[dynamicStylesNs]
-      let dynamicSheet
 
       if (dynamicStyles) {
-        dynamicSheet = this.jss.createStyleSheet(dynamicStyles, {
+        const contextSheetOptions = this.context[ns.sheetOptions]
+
+        return this.jss.createStyleSheet(dynamicStyles, {
           ...sheetOptions,
           ...contextSheetOptions,
           meta: `${displayName}, ${isThemingEnabled ? 'Themed' : 'Unthemed'}, Dynamic`,
-          classNamePrefix,
+          classNamePrefix: this.classNamePrefix,
           link: true
         })
       }
 
-      // $FlowFixMe InnerComponent can be class or stateless, the latter doesn't have a defaultProps property
-      const defaultClasses = InnerComponent.defaultProps
-        ? InnerComponent.defaultProps.classes
-        : undefined
+      return null
+    }
+
+    manage({dynamicSheet, staticSheet}: State) {
+      const registry = this.context[ns.sheetsRegistry]
+
+      this.manager.manage(this.theme)
+      if (staticSheet && registry) registry.add(staticSheet)
+
+      if (dynamicSheet !== null) {
+        dynamicSheet.update(this.props).attach()
+        if (registry) registry.add(dynamicSheet)
+      }
+    }
+
+    computeClasses(staticSheet, dynamicSheet) {
       const jssClasses = dynamicSheet
         ? compose(
             staticSheet.classes,
             dynamicSheet.classes
           )
         : staticSheet.classes
-      const classes = {
+      return {
         ...defaultClasses,
         ...jssClasses,
-        ...userClasses
+        ...this.props.classes
       }
-
-      return {theme: state.theme, dynamicSheet, classes}
     }
 
-    unsubscribeId: SubscriptionId
+    createState(): State {
+      const contextSheetOptions = this.context[ns.sheetOptions]
+      if (contextSheetOptions && contextSheetOptions.disableStylesGeneration) {
+        return {
+          classes: {},
+          dynamicSheet: null,
+          staticSheet: null
+        }
+      }
+
+      const staticSheet = this.getStaticSheet()
+      const dynamicSheet = this.getDynamicSheet(staticSheet)
+
+      return {staticSheet, dynamicSheet, classes: this.computeClasses(staticSheet, dynamicSheet)}
+    }
 
     context: Context
 
     render() {
-      const {theme, dynamicSheet, classes} = this.state
-      const {innerRef, ...props}: OuterPropsType = this.props
-      const sheet = dynamicSheet || this.manager.get(theme)
+      const {dynamicSheet, classes, staticSheet} = this.state
+      const {innerRef, theme, ...props}: OuterPropsType = this.props
+      const sheet = dynamicSheet || staticSheet
 
-      if (injectMap.sheet && !props.sheet) props.sheet = sheet
-      if (isThemingEnabled && injectMap.theme && !props.theme) props.theme = theme
+      if (injectMap.sheet && !props.sheet && sheet) props.sheet = sheet
+      if (injectMap.theme) props.theme = theme
 
       // We have merged classes already.
       if (injectMap.classes) props.classes = classes
@@ -271,5 +268,11 @@ export default function createHOC<
     }
   }
 
+  if (isThemingEnabled || injectMap.theme) {
+    return theming
+      ? theming.withTheme(Jss, {forwardInnerRef: true})
+      : withTheme(Jss, {forwardInnerRef: true})
+  }
+
   return Jss
 }

packages/react-jss/src/types.js

@@ -1,23 +1,9 @@
 // @flow
-import type {StyleSheetFactoryOptions, Jss, SheetsRegistry, SheetsManager} from 'jss'
-import type {ComponentType, Node, ElementRef} from 'react'
+import type {StyleSheet, StyleSheetFactoryOptions, Jss, SheetsRegistry, SheetsManager} from 'jss'
+import type {Node, ElementRef} from 'react'
+import {type Theming} from 'theming'
 
 export type Theme = {}
-export type SubscriptionId = string
-type Theming = {
-  channel: string,
-  withTheme: <P>(comp: ComponentType<P>) => ComponentType<P & {theme: Theme}>,
-  ThemeProvider: ComponentType<{
-    theme: Theme | ((outerTheme: Theme) => Theme),
-    children: Node
-  }>,
-  themeListener: {
-    contextTypes: {},
-    initial: (context: {}) => Theme,
-    subscribe: (context: {}, cb: (theme: Theme) => void) => SubscriptionId,
-    unsubscribe: (context: {}, id: SubscriptionId) => void
-  }
-}
 
 export type Options = {
   theming?: Theming,
@@ -27,8 +13,8 @@ export type Options = {
 export type InnerProps = {
   children?: Node,
   classes?: {},
-  theme?: Theme,
-  sheet?: {}
+  theme: Theme,
+  sheet?: StyleSheet | null
 }
 // Needs to be hard coded for stricter types
 export type Context = {