[react-jss] Add flow typings

packages/jss/src/index.js

@@ -20,7 +20,7 @@ import type {JssOptions} from './types'
  * Export types for better typing inside plugins and integrations.
  */
 export type {
-  StyleSheetOptions,
+  StyleSheetFactoryOptions,
   JssValue,
   JssOptions,
   JssStyle,

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

@@ -1,30 +1,30 @@
 {
   "dist/react-jss.js": {
-    "bundled": 236824,
-    "minified": 65331,
-    "gzipped": 17972
+    "bundled": 237551,
+    "minified": 65553,
+    "gzipped": 18041
   },
   "dist/react-jss.min.js": {
-    "bundled": 201522,
-    "minified": 55978,
-    "gzipped": 15787
+    "bundled": 202242,
+    "minified": 56196,
+    "gzipped": 15853
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 17646,
-    "minified": 7319,
-    "gzipped": 2579
+    "bundled": 18288,
+    "minified": 7484,
+    "gzipped": 2645
   },
   "dist/react-jss.esm.js": {
-    "bundled": 17160,
-    "minified": 6889,
-    "gzipped": 2485,
+    "bundled": 17802,
+    "minified": 7054,
+    "gzipped": 2548,
     "treeshaked": {
       "rollup": {
-        "code": 1908,
+        "code": 2057,
         "import_statements": 214
       },
       "webpack": {
-        "code": 3079
+        "code": 3228
       }
     }
   }

packages/react-jss/src/JssProvider.js

@@ -1,11 +1,23 @@
-import {Component, Children} from 'react'
+// @flow
+import {Component, Children, type Element, type ElementType} from 'react'
 import PropTypes from 'prop-types'
+import type {Jss, generateClassName as GenerateClassNameType, SheetsRegistry} from 'jss'
 import {createGenerateClassNameDefault} from './jss'
 import * as ns from './ns'
 import contextTypes from './contextTypes'
 import propTypes from './propTypes'
+import type {Context} from './types'
 
-export default class JssProvider extends Component {
+type Props = {
+  jss?: Jss,
+  registry?: SheetsRegistry,
+  generateClassName?: GenerateClassNameType,
+  classNamePrefix?: string,
+  disableStylesGeneration?: boolean,
+  children: Element<ElementType>
+}
+
+export default class JssProvider extends Component<Props> {
   static propTypes = {
     ...propTypes,
     generateClassName: PropTypes.func,
@@ -22,7 +34,7 @@ export default class JssProvider extends Component {
   // 1. Check if there is a value passed over props.
   // 2. If value was passed, we set it on the child context.
   // 3. If value was not passed, we proxy parent context (default context behaviour).
-  getChildContext() {
+  getChildContext(): Context {
     const {
       registry,
       classNamePrefix,
@@ -31,7 +43,7 @@ export default class JssProvider extends Component {
       disableStylesGeneration
     } = this.props
     const sheetOptions = this.context[ns.sheetOptions] || {}
-    const context = {[ns.sheetOptions]: sheetOptions}
+    const context: Context = {[ns.sheetOptions]: sheetOptions}
 
     if (registry) {
       context[ns.sheetsRegistry] = registry
@@ -73,6 +85,12 @@ export default class JssProvider extends Component {
     return context
   }
 
+  registry: SheetsRegistry
+
+  managers: {}
+
+  generateClassName: GenerateClassNameType
+
   render() {
     return Children.only(this.props.children)
   }

packages/react-jss/src/compose.js

@@ -1,3 +1,5 @@
+// @flow
+import type {Classes} from 'jss'
 /**
  * Adds `composes` property to each top level rule
  * in order to have a composed class name for dynamic style sheets.
@@ -21,7 +23,7 @@
  * @param {Object} styles dynamic styles object without static properties
  * @return {Object|null}
  */
-export default (staticClasses, dynamicClasses) => {
+export default (staticClasses: Classes, dynamicClasses: Classes) => {
   const combinedClasses = {...staticClasses}
 
   for (const name in dynamicClasses) {

packages/react-jss/src/contextTypes.js

@@ -1,3 +1,4 @@
+// @flow
 import PropTypes from 'prop-types'
 import * as ns from './ns'
 import propTypes from './propTypes'

packages/react-jss/src/createHoc.js

@@ -1,11 +1,22 @@
-import React, {Component} from 'react'
+// @flow
+import React, {Component, type ComponentType} from 'react'
 import PropTypes from 'prop-types'
 import defaultTheming 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,
+  StylesOrThemer,
+  InnerProps,
+  OuterProps,
+  Context,
+  SubscriptionId
+} from './types'
 
 const env = process.env.NODE_ENV
 
@@ -32,7 +43,18 @@ const dynamicStylesNs = Math.random()
  *
  */
 
-const getStyles = (stylesOrCreator, theme) => {
+type InjectedProps = {
+  classes?: {},
+  theme?: Theme,
+  sheet?: {}
+}
+type State = {
+  theme: Theme,
+  dynamicSheet?: StyleSheet,
+  classes: {}
+}
+
+const getStyles = (stylesOrCreator: StylesOrThemer, theme: Theme) => {
   if (typeof stylesOrCreator !== 'function') {
     return stylesOrCreator
   }
@@ -57,60 +79,68 @@ let managersCounter = 0
 /**
  * Wrap a Component into a JSS Container Component.
  *
+ * IProps: Props of the InnerComponent.
+ * OProps: The Outer props the HOC accepts.
+ *
  * @param {Object|Function} stylesOrCreator
  * @param {Component} InnerComponent
  * @param {Object} [options]
  * @return {Component}
  */
-export default (stylesOrCreator, InnerComponent, options = {}) => {
+export default function createHOC<
+  IProps: InnerProps,
+  C: ComponentType<IProps>,
+  OProps: OuterProps<IProps, C>
+>(stylesOrCreator: StylesOrThemer, InnerComponent: C, options: Options): ComponentType<OProps> {
   const isThemingEnabled = typeof stylesOrCreator === 'function'
   const {theming = defaultTheming, inject, jss: optionsJss, ...sheetOptions} = options
   const injectMap = inject ? toMap(inject) : defaultInjectProps
   const {themeListener} = theming
   const displayName = getDisplayName(InnerComponent)
-  const defaultClassNamePrefix = env === 'production' ? undefined : `${displayName}-`
+  const defaultClassNamePrefix = env === 'production' ? '' : `${displayName}-`
   const noTheme = {}
   const managerId = managersCounter++
   const manager = new SheetsManager()
-  const defaultProps = {...InnerComponent.defaultProps}
+  // $FlowFixMe defaultProps are not defined in React$Component
+  const defaultProps: InjectedProps = {...InnerComponent.defaultProps}
   delete defaultProps.classes
 
-  class Jss extends Component {
+  class Jss extends Component<OProps, State> {
     static displayName = `Jss(${displayName})`
     static InnerComponent = InnerComponent
     static contextTypes = {
       ...contextTypes,
-      ...(isThemingEnabled && themeListener.contextTypes)
+      ...(isThemingEnabled ? themeListener.contextTypes : {})
     }
     static propTypes = {
       innerRef: PropTypes.func
     }
     static defaultProps = defaultProps
 
-    constructor(props, context) {
+    constructor(props: OProps, context: Context) {
       super(props, context)
       const theme = isThemingEnabled ? themeListener.initial(context) : noTheme
 
-      this.state = this.createState({theme}, props)
+      this.state = this.createState({theme, classes: {}}, props)
     }
 
     componentWillMount() {
       this.manage(this.state)
     }
 
     componentDidMount() {
-      if (isThemingEnabled) {
+      if (themeListener && isThemingEnabled) {
         this.unsubscribeId = themeListener.subscribe(this.context, this.setTheme)
       }
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    componentWillReceiveProps(nextProps: OProps, nextContext: Context) {
       this.context = nextContext
       const {dynamicSheet} = this.state
       if (dynamicSheet) dynamicSheet.update(nextProps)
     }
 
-    componentWillUpdate(nextProps, nextState) {
+    componentWillUpdate(nextProps: OProps, nextState: State) {
       if (isThemingEnabled && this.state.theme !== nextState.theme) {
         const newState = this.createState(nextState, nextProps)
         this.manage(newState)
@@ -119,15 +149,15 @@ export default (stylesOrCreator, InnerComponent, options = {}) => {
       }
     }
 
-    componentDidUpdate(prevProps, prevState) {
+    componentDidUpdate(prevProps: OProps, prevState: State) {
       // 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() {
-      if (this.unsubscribeId) {
+      if (themeListener && this.unsubscribeId) {
         themeListener.unsubscribe(this.context, this.unsubscribeId)
       }
 
@@ -137,9 +167,11 @@ export default (stylesOrCreator, InnerComponent, options = {}) => {
       }
     }
 
-    setTheme = theme => this.setState({theme})
+    setTheme = (theme: Theme) => this.setState({theme})
+    unsubscribeId: SubscriptionId
+    context: Context
 
-    createState({theme, dynamicSheet}, {classes: userClasses}) {
+    createState({theme, dynamicSheet}: State, {classes: userClasses}): State {
       const contextSheetOptions = this.context[ns.sheetOptions]
       if (contextSheetOptions && contextSheetOptions.disableStylesGeneration) {
         return {theme, dynamicSheet, classes: {}}
@@ -161,9 +193,11 @@ export default (stylesOrCreator, InnerComponent, options = {}) => {
           classNamePrefix
         })
         this.manager.add(theme, staticSheet)
+        // $FlowFixMe Cannot add random fields to instance of class StyleSheet
         staticSheet[dynamicStylesNs] = getDynamicStyles(styles)
       }
 
+      // $FlowFixMe Cannot access random fields on instance of class StyleSheet
       const dynamicStyles = staticSheet[dynamicStylesNs]
 
       if (dynamicStyles) {
@@ -176,6 +210,7 @@ export default (stylesOrCreator, InnerComponent, options = {}) => {
         })
       }
 
+      // $FlowFixMe InnerComponent can be class or stateless, the latter doesn't have a defaultProps property
       const defaultClasses = InnerComponent.defaultProps
         ? InnerComponent.defaultProps.classes
         : undefined
@@ -194,7 +229,7 @@ export default (stylesOrCreator, InnerComponent, options = {}) => {
       return {theme, dynamicSheet, classes}
     }
 
-    manage({theme, dynamicSheet}) {
+    manage({theme, dynamicSheet}: State) {
       const contextSheetOptions = this.context[ns.sheetOptions]
       if (contextSheetOptions && contextSheetOptions.disableStylesGeneration) {
         return
@@ -231,8 +266,7 @@ export default (stylesOrCreator, InnerComponent, options = {}) => {
 
     render() {
       const {theme, dynamicSheet, classes} = this.state
-      const {innerRef, ...props} = this.props
-
+      const {innerRef, ...props}: OProps = this.props
       const sheet = dynamicSheet || this.manager.get(theme)
 
       if (injectMap.sheet && !props.sheet) props.sheet = sheet

packages/react-jss/src/getDisplayName.js

@@ -1 +1,5 @@
-export default Component => Component.displayName || Component.name || 'Component'
+// @flow
+import type {ComponentType} from 'react'
+
+export default <P>(Component: ComponentType<P>) =>
+  Component.displayName || Component.name || 'Component'

packages/react-jss/src/index.js

@@ -1,3 +1,4 @@
+// @flow
 export {ThemeProvider, withTheme, createTheming} from 'theming'
 export {default as JssProvider} from './JssProvider'
 export {