Merge f1458d3 into ac3b05b

flow-typed/npm/prop-types_vx.x.x.js

@@ -0,0 +1,80 @@
+// flow-typed signature: 15f1dbaabcfdc41488335743c4ebcc75
+// flow-typed version: <<STUB>>/prop-types_v15.5.10/flow_v0.44.2
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'prop-types'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'prop-types' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'prop-types/checkPropTypes' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/factory' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/factoryWithThrowingShims' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/factoryWithTypeCheckers' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/lib/ReactPropTypesSecret' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/prop-types' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/prop-types.min' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'prop-types/checkPropTypes.js' {
+  declare module.exports: $Exports<'prop-types/checkPropTypes'>;
+}
+declare module 'prop-types/factory.js' {
+  declare module.exports: $Exports<'prop-types/factory'>;
+}
+declare module 'prop-types/factoryWithThrowingShims.js' {
+  declare module.exports: $Exports<'prop-types/factoryWithThrowingShims'>;
+}
+declare module 'prop-types/factoryWithTypeCheckers.js' {
+  declare module.exports: $Exports<'prop-types/factoryWithTypeCheckers'>;
+}
+declare module 'prop-types/index' {
+  declare module.exports: $Exports<'prop-types'>;
+}
+declare module 'prop-types/index.js' {
+  declare module.exports: $Exports<'prop-types'>;
+}
+declare module 'prop-types/lib/ReactPropTypesSecret.js' {
+  declare module.exports: $Exports<'prop-types/lib/ReactPropTypesSecret'>;
+}
+declare module 'prop-types/prop-types.js' {
+  declare module.exports: $Exports<'prop-types/prop-types'>;
+}
+declare module 'prop-types/prop-types.min.js' {
+  declare module.exports: $Exports<'prop-types/prop-types.min'>;
+}

flow-typed/npm/theming_vx.x.x.js

@@ -0,0 +1,165 @@
+// flow-typed signature: 0b2dbbd7a0e7a4a61efa8f5cb564e5d5
+// flow-typed version: <<STUB>>/theming_v1.1.0/flow_v0.44.2
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'theming'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'theming' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'theming/dist/cjs/channel' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/create-theme-listener' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/create-theme-provider' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/create-with-theme' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/index' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/channel' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/create-theme-listener' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/create-theme-provider' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/create-with-theme' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/index' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/channel' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-listener' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-listener.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-provider' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-provider.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-with-theme' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-with-theme.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/index.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/test-helpers' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'theming/dist/cjs/channel.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/channel'>;
+}
+declare module 'theming/dist/cjs/create-theme-listener.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/create-theme-listener'>;
+}
+declare module 'theming/dist/cjs/create-theme-provider.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/create-theme-provider'>;
+}
+declare module 'theming/dist/cjs/create-with-theme.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/create-with-theme'>;
+}
+declare module 'theming/dist/cjs/index.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/index'>;
+}
+declare module 'theming/dist/esm/channel.js' {
+  declare module.exports: $Exports<'theming/dist/esm/channel'>;
+}
+declare module 'theming/dist/esm/create-theme-listener.js' {
+  declare module.exports: $Exports<'theming/dist/esm/create-theme-listener'>;
+}
+declare module 'theming/dist/esm/create-theme-provider.js' {
+  declare module.exports: $Exports<'theming/dist/esm/create-theme-provider'>;
+}
+declare module 'theming/dist/esm/create-with-theme.js' {
+  declare module.exports: $Exports<'theming/dist/esm/create-with-theme'>;
+}
+declare module 'theming/dist/esm/index.js' {
+  declare module.exports: $Exports<'theming/dist/esm/index'>;
+}
+declare module 'theming/src/channel.js' {
+  declare module.exports: $Exports<'theming/src/channel'>;
+}
+declare module 'theming/src/create-theme-listener.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-listener'>;
+}
+declare module 'theming/src/create-theme-listener.test.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-listener.test'>;
+}
+declare module 'theming/src/create-theme-provider.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-provider'>;
+}
+declare module 'theming/src/create-theme-provider.test.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-provider.test'>;
+}
+declare module 'theming/src/create-with-theme.js' {
+  declare module.exports: $Exports<'theming/src/create-with-theme'>;
+}
+declare module 'theming/src/create-with-theme.test.js' {
+  declare module.exports: $Exports<'theming/src/create-with-theme.test'>;
+}
+declare module 'theming/src/index.js' {
+  declare module.exports: $Exports<'theming/src/index'>;
+}
+declare module 'theming/src/index.test.js' {
+  declare module.exports: $Exports<'theming/src/index.test'>;
+}
+declare module 'theming/src/test-helpers.js' {
+  declare module.exports: $Exports<'theming/src/test-helpers'>;
+}

package.json

@@ -40,7 +40,9 @@
   "dependencies": {
     "is-react-prop": "^0.1.3",
     "jss": "^7.1.7",
-    "jss-preset-default": "^2.0.0"
+    "jss-preset-default": "^2.0.0",
+    "prop-types": "^15.5.10",
+    "theming": "^1.1.0"
   },
   "peerDependencies": {
     "react": ">=14"

src/styled.js

@@ -1,4 +1,6 @@
 import {Component, createElement} from 'react'
+import PropTypes from 'prop-types'
+import {themeListener, channel} from 'theming'
 
 import filterProps from './utils/filterProps'
 import composeClasses from './utils/composeClasses'
@@ -27,18 +29,25 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
   return class StyledElement extends Component {
     static tagName: string = tagName
     static style: ComponentStyleType = elementStyle
+    static contextTypes = {
+      [channel]: PropTypes.object
+    }
 
     props: StyledElementPropsType
+    sheet: JssSheet
+    state: {theme?: Object}
+    unsubscribe: ?Function
 
     dynamicTagName = ''
+    setTheme = (theme: Object) => this.setState({theme})
 
-    sheet: JssSheet
-
-    constructor(props: StyledElementPropsType) {
-      super(props)
+    constructor(props: StyledElementPropsType, context: *) {
+      super(props, context)
       if (!this.dynamicTagName && dynamicStyle) {
         this.dynamicTagName = availableDynamicTagNames.pop() || generateTagName(tagName)
       }
+
+      this.state = context[channel] ? {theme: themeListener.initial(context)} : {}
     }
 
     componentWillMount() {
@@ -57,27 +66,37 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
       }
 
       classMap[this.dynamicTagName] = classMap[this.dynamicTagName] || rulesIndex.slice(rulesTotal)
-      this.updateSheet(this.props)
+      this.updateSheet(this.props, this.state)
     }
 
-    componentWillReceiveProps(nextProps: StyledElementPropsType) {
-      if (dynamicStyle) this.updateSheet(nextProps)
+    componentWillUpdate(nextProps: StyledElementPropsType, nextState: *) {
+      if (dynamicStyle) this.updateSheet(nextProps, nextState)
+    }
+
+    componentDidMount() {
+      if (this.state.theme) {
+        this.unsubscribe = themeListener.subscribe(this.context, this.setTheme)
+      }
     }
 
     componentWillUnmount() {
       availableDynamicTagNames.push(this.dynamicTagName)
+
+      if (typeof this.unsubscribe === 'function') this.unsubscribe()
     }
 
-    updateSheet(props: StyledElementPropsType) {
+    updateSheet(props: StyledElementPropsType, state: *) {
       let rule
       let ruleIndex = 0
 
+      const styles = Object.assign({}, props, state)
+
       // nested styles become to flatten rules, so we need to update each nested rule
       for (ruleIndex; ruleIndex < classMap[this.dynamicTagName].length; ruleIndex++) {
         rule = classMap[this.dynamicTagName][ruleIndex]
 
-        if (rule.name) this.sheet.update(rule.name, props)
-        if (rule.rules) rule.rules.update(props)
+        if (rule.name) this.sheet.update(rule.name, styles)
+        if (rule.rules) rule.rules.update(styles)
       }
     }
 

src/tests/__snapshots__/functional.spec.jsx.snap

@@ -109,3 +109,35 @@ exports[`functional tests should use props on remount 2`] = `
   color: red;
 }"
 `;
+
+exports[`functional tests theming should update theme 1`] = `
+".button-1-id {
+  color: green;
+  background-color: white;
+}"
+`;
+
+exports[`functional tests theming should update theme 2`] = `
+".button-1-id {
+  color: yellow;
+  background-color: blue;
+}"
+`;
+
+exports[`functional tests theming should work with ThemeProvider 1`] = `
+".button-1-id {
+  color: red;
+  background-color: black;
+}"
+`;
+
+exports[`functional tests theming should work with nested ThemeProvider 1`] = `
+".button-1-id {
+  color: green;
+  background-color: white;
+}
+.button-2-id {
+  color: blue;
+  background-color: yellow;
+}"
+`;