emotion-theming - npm Package Compare versions

Comparing version 9.2.5 to 9.2.6

dist/emotion.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["exports","prop-types","react"],t):t(e.emotionTheming={},null,e.React)}(this,function(e,t,o){"use strict";function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function s(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}function n(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}t=t&&t.hasOwnProperty("default")?t.default:t;var r,u=function(e){var n={},r=0,o=e;return{publish:function(e){for(var t in o=e,n){var r=n[t];void 0!==r&&r(o)}},subscribe:function(e){var t=r;return n[t]=e,r+=1,e(o),t},unsubscribe:function(e){n[e]=void 0}}},c="__EMOTION_THEMING__",p=((r={})[c]=t.object,r),h=function(e){return"[object Object]"===Object.prototype.toString.call(e)},a=function(t){function e(){var e;return(e=t.call(this)||this).getTheme=e.getTheme.bind(n(n(e))),e}s(e,t);var r=e.prototype;return r.componentWillMount=function(){var t=this;void 0!==this.context[c]&&(this.unsubscribeToOuterId=this.context[c].subscribe(function(e){t.outerTheme=e,void 0!==t.broadcast&&t.publish(t.props.theme)})),this.broadcast=u(this.getTheme(this.props.theme))},r.getChildContext=function(){var e;return(e={})[c]={subscribe:this.broadcast.subscribe,unsubscribe:this.broadcast.unsubscribe},e},r.componentWillReceiveProps=function(e){this.props.theme!==e.theme&&this.publish(e.theme)},r.componentWillUnmount=function(){var e=this.context[c];void 0!==e&&e.unsubscribe(this.unsubscribeToOuterId)},r.getTheme=function(e){if("function"==typeof e){var t=e(this.outerTheme);if(!h(t))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return t}if(!h(e))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return void 0===this.outerTheme?e:i({},this.outerTheme,e)},r.publish=function(e){this.broadcast.publish(this.getTheme(e))},r.render=function(){return this.props.children?o.Children.only(this.props.children):null},e.childContextTypes=p,e.contextTypes=p,e}(o.Component);"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var f,l=(function(e,t){var p,h,a,f,l,b,d,m;e.exports=(p={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},h={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},a=Object.defineProperty,f=Object.getOwnPropertyNames,l=Object.getOwnPropertySymbols,b=Object.getOwnPropertyDescriptor,d=Object.getPrototypeOf,m=d&&d(Object),function e(t,r,n){if("string"!=typeof r){if(m){var o=d(r);o&&o!==m&&e(t,o,n)}var i=f(r);l&&(i=i.concat(l(r)));for(var s=0;s<i.length;++s){var u=i[s];if(!(p[u]||h[u]||n&&n[u])){var c=b(r,u);try{a(t,u,c)}catch(e){}}}return t}return t})}(f={exports:{}},f.exports),f.exports);e.ThemeProvider=a,e.withTheme=function(n){var e=n.displayName||n.name||"Component",t=function(t){function e(e){return t.call(this,e)||this}s(e,t);var r=e.prototype;return r.componentWillMount=function(){var t=this,e=this.context[c];void 0!==e?this.unsubscribeId=e.subscribe(function(e){t.setState({theme:e})}):console.error("[withTheme] Please use ThemeProvider to be able to use withTheme")},r.componentWillUnmount=function(){-1!==this.unsubscribeId&&this.context[c].unsubscribe(this.unsubscribeId)},r.render=function(){return o.createElement(n,i({theme:this.state.theme},this.props))},e}(o.Component);return t.displayName="WithTheme("+e+")",t.contextTypes=p,l(t,n)},e.channel=c,e.contextTypes=p,e.createBroadcast=u,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["exports","prop-types","react"],t):t(e.emotionTheming={},null,e.React)}(this,function(e,t,n){"use strict";function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function s(e,t){e.prototype=Object.create(t.prototype),(e.prototype.constructor=e).__proto__=t}t=t&&t.hasOwnProperty("default")?t.default:t;var r,o=function(e){var o={},r=0,n=e;return{publish:function(e){for(var t in n=e,o){var r=o[t];void 0!==r&&r(n)}},subscribe:function(e){var t=r;return o[t]=e,r+=1,e(n),t},unsubscribe:function(e){o[e]=void 0}}},u="__EMOTION_THEMING__",c=((r={})[u]=t.object,r),p=function(e){return"[object Object]"===Object.prototype.toString.call(e)};function a(e,t){if("function"==typeof e){var r=e(t);if(!p(r))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return r}if(!p(e))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return void 0===t?e:i({},t,e)}var h=function(e){function t(){return e.apply(this,arguments)||this}s(t,e);var r=t.prototype;return r.componentWillMount=function(){var t=this;void 0!==this.context[u]&&(this.unsubscribeToOuterId=this.context[u].subscribe(function(e){t.outerTheme=e,void 0!==t.broadcast&&t.publish(t.props.theme)})),this.broadcast=o(a(this.props.theme,this.outerTheme))},r.getChildContext=function(){var e;return(e={})[u]={subscribe:this.broadcast.subscribe,unsubscribe:this.broadcast.unsubscribe},e},r.componentWillReceiveProps=function(e){this.props.theme!==e.theme&&this.publish(e.theme)},r.componentWillUnmount=function(){var e=this.context[u];void 0!==e&&e.unsubscribe(this.unsubscribeToOuterId)},r.publish=function(e){this.broadcast.publish(a(e,this.outerTheme))},r.render=function(){return this.props.children?n.Children.only(this.props.children):null},t.childContextTypes=c,t.contextTypes=c,t}(n.Component);"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var f,l=(function(e,t){var p,a,h,f,l,b,d,m;e.exports=(p={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},a={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},h=Object.defineProperty,f=Object.getOwnPropertyNames,l=Object.getOwnPropertySymbols,b=Object.getOwnPropertyDescriptor,d=Object.getPrototypeOf,m=d&&d(Object),function e(t,r,o){if("string"!=typeof r){if(m){var n=d(r);n&&n!==m&&e(t,n,o)}var i=f(r);l&&(i=i.concat(l(r)));for(var s=0;s<i.length;++s){var u=i[s];if(!(p[u]||a[u]||o&&o[u])){var c=b(r,u);try{h(t,u,c)}catch(e){}}}return t}return t})}(f={exports:{}},f.exports),f.exports);e.ThemeProvider=h,e.withTheme=function(o){var e=o.displayName||o.name||"Component",t=function(t){function e(e){return t.call(this,e)||this}s(e,t);var r=e.prototype;return r.componentWillMount=function(){var t=this,e=this.context[u];void 0!==e?this.unsubscribeId=e.subscribe(function(e){t.setState({theme:e})}):console.error("[withTheme] Please use ThemeProvider to be able to use withTheme")},r.componentWillUnmount=function(){-1!==this.unsubscribeId&&this.context[u].unsubscribe(this.unsubscribeId)},r.render=function(){return n.createElement(o,i({theme:this.state.theme},this.props))},e}(n.Component);return t.displayName="WithTheme("+e+")",t.contextTypes=c,l(t,o)},e.channel=u,e.contextTypes=c,e.createBroadcast=o,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=emotion.umd.min.js.map

dist/index.cjs.js

@@ -35,10 +35,2 @@ 'use strict';
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
 // https://github.com/styled-components/styled-components/blob/e05b3fe247e9d956bcde786cec376e32afb85bca/src/utils/create-broadcast.js
@@ -93,2 +85,25 @@ var createBroadcast = function createBroadcast(initialState) {
 
+// Get the theme from the props, supporting both (outerTheme) => {} as well as object notation
+function getTheme(theme, outerTheme) {
+  if (typeof theme === 'function') {
+    var mergedTheme = theme(outerTheme);
+
+    if (!isPlainObject(mergedTheme)) {
+      throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
+    }
+
+    return mergedTheme;
+  }
+
+  if (!isPlainObject(theme)) {
+    throw new Error('[ThemeProvider] Please make your theme prop a plain object');
+  }
+
+  if (outerTheme === undefined) {
+    return theme;
+  }
+
+  return _extends({}, outerTheme, theme);
+}
+
 var ThemeProvider =
@@ -100,7 +115,3 @@ /*#__PURE__*/
   function ThemeProvider() {
-    var _this;
-
-    _this = _Component.call(this) || this;
-    _this.getTheme = _this.getTheme.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    return _this;
+    return _Component.apply(this, arguments) || this;
   }
@@ -111,3 +122,3 @@
   _proto.componentWillMount = function componentWillMount() {
-    var _this2 = this;
+    var _this = this;
 
@@ -118,6 +129,6 @@ // If there is a ThemeProvider wrapper anywhere around this theme provider, merge this theme
       this.unsubscribeToOuterId = this.context[channel].subscribe(function (theme) {
-        _this2.outerTheme = theme;
+        _this.outerTheme = theme;
 
-        if (_this2.broadcast !== undefined) {
-          _this2.publish(_this2.props.theme);
+        if (_this.broadcast !== undefined) {
+          _this.publish(_this.props.theme);
         }
@@ -127,3 +138,3 @@ });
 
-    this.broadcast = createBroadcast(this.getTheme(this.props.theme));
+    this.broadcast = createBroadcast(getTheme(this.props.theme, this.outerTheme));
   };
@@ -152,29 +163,6 @@
     }
-  }; // Get the theme from the props, supporting both (outerTheme) => {} as well as object notation
-
-
-  _proto.getTheme = function getTheme(theme) {
-    if (typeof theme === 'function') {
-      var mergedTheme = theme(this.outerTheme);
-
-      if (!isPlainObject(mergedTheme)) {
-        throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
-      }
-
-      return mergedTheme;
-    }
-
-    if (!isPlainObject(theme)) {
-      throw new Error('[ThemeProvider] Please make your theme prop a plain object');
-    }
-
-    if (this.outerTheme === undefined) {
-      return theme;
-    }
-
-    return _extends({}, this.outerTheme, theme);
   };
 
   _proto.publish = function publish(theme) {
-    this.broadcast.publish(this.getTheme(theme));
+    this.broadcast.publish(getTheme(theme, this.outerTheme));
   };
@@ -181,0 +169,0 @@

dist/index.esm.js

@@ -29,10 +29,2 @@ import PropTypes from 'prop-types';
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
 // https://github.com/styled-components/styled-components/blob/e05b3fe247e9d956bcde786cec376e32afb85bca/src/utils/create-broadcast.js
@@ -87,2 +79,25 @@ var createBroadcast = function createBroadcast(initialState) {
 
+// Get the theme from the props, supporting both (outerTheme) => {} as well as object notation
+function getTheme(theme, outerTheme) {
+  if (typeof theme === 'function') {
+    var mergedTheme = theme(outerTheme);
+
+    if (!isPlainObject(mergedTheme)) {
+      throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
+    }
+
+    return mergedTheme;
+  }
+
+  if (!isPlainObject(theme)) {
+    throw new Error('[ThemeProvider] Please make your theme prop a plain object');
+  }
+
+  if (outerTheme === undefined) {
+    return theme;
+  }
+
+  return _extends({}, outerTheme, theme);
+}
+
 var ThemeProvider =
@@ -94,7 +109,3 @@ /*#__PURE__*/
   function ThemeProvider() {
-    var _this;
-
-    _this = _Component.call(this) || this;
-    _this.getTheme = _this.getTheme.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    return _this;
+    return _Component.apply(this, arguments) || this;
   }
@@ -105,3 +116,3 @@
   _proto.componentWillMount = function componentWillMount() {
-    var _this2 = this;
+    var _this = this;
 
@@ -112,6 +123,6 @@ // If there is a ThemeProvider wrapper anywhere around this theme provider, merge this theme
       this.unsubscribeToOuterId = this.context[channel].subscribe(function (theme) {
-        _this2.outerTheme = theme;
+        _this.outerTheme = theme;
 
-        if (_this2.broadcast !== undefined) {
-          _this2.publish(_this2.props.theme);
+        if (_this.broadcast !== undefined) {
+          _this.publish(_this.props.theme);
         }
@@ -121,3 +132,3 @@ });
 
-    this.broadcast = createBroadcast(this.getTheme(this.props.theme));
+    this.broadcast = createBroadcast(getTheme(this.props.theme, this.outerTheme));
   };
@@ -146,29 +157,6 @@
     }
-  }; // Get the theme from the props, supporting both (outerTheme) => {} as well as object notation
-
-
-  _proto.getTheme = function getTheme(theme) {
-    if (typeof theme === 'function') {
-      var mergedTheme = theme(this.outerTheme);
-
-      if (!isPlainObject(mergedTheme)) {
-        throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
-      }
-
-      return mergedTheme;
-    }
-
-    if (!isPlainObject(theme)) {
-      throw new Error('[ThemeProvider] Please make your theme prop a plain object');
-    }
-
-    if (this.outerTheme === undefined) {
-      return theme;
-    }
-
-    return _extends({}, this.outerTheme, theme);
   };
 
   _proto.publish = function publish(theme) {
-    this.broadcast.publish(this.getTheme(theme));
+    this.broadcast.publish(getTheme(theme, this.outerTheme));
   };
@@ -175,0 +163,0 @@

package.json

 {
   "name": "emotion-theming",
-  "version": "9.2.5",
+  "version": "9.2.6",
   "description": "A CSS-in-JS theming solution, inspired by styled-components",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

src/theme-provider.js

@@ -17,8 +17,27 @@ // @flow
 
+// Get the theme from the props, supporting both (outerTheme) => {} as well as object notation
+function getTheme(theme: Theme, outerTheme?: Object) {
+  if (typeof theme === 'function') {
+    const mergedTheme = theme(outerTheme)
+    if (!isPlainObject(mergedTheme)) {
+      throw new Error(
+        '[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'
+      )
+    }
+    return mergedTheme
+  }
+  if (!isPlainObject(theme)) {
+    throw new Error(
+      '[ThemeProvider] Please make your theme prop a plain object'
+    )
+  }
+
+  if (outerTheme === undefined) {
+    return theme
+  }
+
+  return { ...outerTheme, ...theme }
+}
+
 class ThemeProvider extends Component<Props> {
-  getTheme: ThemeProvider.prototype.getTheme
-  constructor() {
-    super()
-    this.getTheme = this.getTheme.bind(this)
-  }
   outerTheme: Object
@@ -40,3 +59,5 @@ broadcast: *
 
-    this.broadcast = createBroadcast(this.getTheme(this.props.theme))
+    this.broadcast = createBroadcast(
+      getTheme(this.props.theme, this.outerTheme)
+    )
   }
@@ -66,28 +87,4 @@
 
-  // Get the theme from the props, supporting both (outerTheme) => {} as well as object notation
-  getTheme(theme: Theme) {
-    if (typeof theme === 'function') {
-      const mergedTheme = theme(this.outerTheme)
-      if (!isPlainObject(mergedTheme)) {
-        throw new Error(
-          '[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'
-        )
-      }
-      return mergedTheme
-    }
-    if (!isPlainObject(theme)) {
-      throw new Error(
-        '[ThemeProvider] Please make your theme prop a plain object'
-      )
-    }
-
-    if (this.outerTheme === undefined) {
-      return theme
-    }
-
-    return { ...this.outerTheme, ...theme }
-  }
-
   publish(theme: Theme) {
-    this.broadcast.publish(this.getTheme(theme))
+    this.broadcast.publish(getTheme(theme, this.outerTheme))
   }
@@ -94,0 +91,0 @@

src/utils.js

@@ -12,2 +12,2 @@ // @flow
 
-export type Theme = Object | ((theme: Object) => Object)
+export type Theme = Object | ((theme?: Object) => Object)

No alert changes

Worsened metrics

Total package byte prevSize

59984

decreased by-2.37%

Lines of code

612

decreased by-3.01%

No dependency changes