@jfrolich/emotion-theming - npm Package Compare versions

Comparing version 9.2.10 to 9.2.11

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"),require("assert")):"function"==typeof define&&define.amd?define(["exports","prop-types","react","assert"],t):t(e.jfrolichEmotionTheming={},null,e.React,null)}(this,function(e,t,n,r){"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 o,u=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}}},c="__EMOTION_THEMING__",p=((o={})[c]=t.object,o),a=function(e){return"[object Object]"===Object.prototype.toString.call(e)};function h(e,t){if("function"==typeof e){var r=e(t);if(!a(r))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return r}if(!a(e))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return void 0===t?e:i({},t,e)}var f=function(o){function e(e,t){var r;return void 0!==(r=o.call(this,e,t)||this).context[c]&&(r.unsubscribeToOuterId=r.context[c].subscribe(function(e){r.outerTheme=e,void 0!==r.broadcast&&r.publish(r.props.theme)})),r.broadcast=u(h(r.props.theme,r.outerTheme)),r}s(e,o);var t=e.prototype;return t.getChildContext=function(){var e;return(e={})[c]={subscribe:this.broadcast.subscribe,unsubscribe:this.broadcast.unsubscribe},e},t.componentDidUpdate=function(e){e.theme!==r.throws.props.theme&&this.publish(this.props.theme)},t.componentWillUnmount=function(){var e=this.context[c];void 0!==e&&e.unsubscribe(this.unsubscribeToOuterId)},t.publish=function(e){this.broadcast.publish(h(e,this.outerTheme))},t.render=function(){return this.props.children?n.Children.only(this.props.children):null},e.childContextTypes=p,e.contextTypes=p,e}(n.Component);"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var l,b=(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})}(l={exports:{}},l.exports),l.exports);e.ThemeProvider=f,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.componentDidMount=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 n.createElement(o,i({theme:this.state.theme},this.props))},e}(n.Component);return t.displayName="WithTheme("+e+")",t.contextTypes=p,b(t,o)},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"),require("assert")):"function"==typeof define&&define.amd?define(["exports","prop-types","react","assert"],t):t(e.jfrolichEmotionTheming={},null,e.React,null)}(this,function(e,t,o,r){"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 u(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 n,c=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}}},p="__EMOTION_THEMING__",a=((n={})[p]=t.object,n),h=function(e){return"[object Object]"===Object.prototype.toString.call(e)};function f(e,t){if("function"==typeof e){var r=e(t);if(!h(r))throw new Error("[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!");return r}if(!h(e))throw new Error("[ThemeProvider] Please make your theme prop a plain object");return void 0===t?e:i({},t,e)}var l=function(n){function e(e,t){var r;return void 0!==(r=n.call(this,e,t)||this).context[p]&&(r.unsubscribeToOuterId=r.context[p].subscribe(function(e){r.outerTheme=e,void 0!==r.broadcast&&r.publish(r.props.theme)})),r.broadcast=c(f(r.props.theme,r.outerTheme)),r}s(e,n);var t=e.prototype;return t.getChildContext=function(){var e;return(e={})[p]={subscribe:this.broadcast.subscribe,unsubscribe:this.broadcast.unsubscribe},e},t.componentDidUpdate=function(e){e.theme!==r.throws.props.theme&&this.publish(this.props.theme)},t.componentWillUnmount=function(){var e=this.context[p];void 0!==e&&e.unsubscribe(this.unsubscribeToOuterId)},t.publish=function(e){this.broadcast.publish(f(e,this.outerTheme))},t.render=function(){return this.props.children?o.Children.only(this.props.children):null},e.childContextTypes=a,e.contextTypes=a,e}(o.Component);"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var b,d=(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,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]||a[u]||n&&n[u])){var c=b(r,u);try{h(t,u,c)}catch(e){}}}return t}return t})}(b={exports:{}},b.exports),b.exports);e.ThemeProvider=l,e.withTheme=function(n){var e=n.displayName||n.name||"Component",t=function(e){function t(){var e;return e.context[p],console.error("[withTheme] Please use ThemeProvider to be able to use withTheme"),u(e)}s(t,o.Component);var r=t.prototype;return r.componentDidMount=function(){this.mounted=!0},r.componentWillUnmount=function(){-1!==this.unsubscribeId&&this.context[p].unsubscribe(this.unsubscribeId)},r.render=function(){return o.createElement(n,i({theme:this.state.theme},this.props))},t}();return t.displayName="WithTheme("+e+")",t.contextTypes=a,d(t,n)},e.channel=p,e.contextTypes=a,e.createBroadcast=c,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=emotion.umd.min.js.map

dist/index.cjs.js

@@ -36,2 +36,10 @@ '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
@@ -184,24 +192,25 @@ var createBroadcast = function createBroadcast(initialState) {
 
-    function WithTheme(props) {
-      return _React$Component.call(this, props) || this;
-    }
+    function WithTheme() {
+      var _this;
 
-    var _proto = WithTheme.prototype;
+      var themeContext = _this.context[channel];
 
-    _proto.componentDidMount = function componentDidMount() {
-      var _this = this;
-
-      var themeContext = this.context[channel];
-
-      if (themeContext === undefined) {
+      {
         // eslint-disable-next-line no-console
         console.error('[withTheme] Please use ThemeProvider to be able to use withTheme');
-        return;
+        return _assertThisInitialized(_this);
       }
 
-      this.unsubscribeId = themeContext.subscribe(function (theme) {
-        _this.setState({
-          theme: theme
-        });
+      _this.unsubscribeId = themeContext.subscribe(function (theme) {
+        if (_this.mounted) ; else {
+          _this.state = theme;
+        }
       });
+      return _assertThisInitialized(_this);
+    }
+
+    var _proto = WithTheme.prototype;
+
+    _proto.componentDidMount = function componentDidMount() {
+      this.mounted = true;
     };
@@ -208,0 +217,0 @@

dist/index.esm.js

@@ -30,2 +30,10 @@ 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
@@ -178,24 +186,25 @@ var createBroadcast = function createBroadcast(initialState) {
 
-    function WithTheme(props) {
-      return _React$Component.call(this, props) || this;
-    }
+    function WithTheme() {
+      var _this;
 
-    var _proto = WithTheme.prototype;
+      var themeContext = _this.context[channel];
 
-    _proto.componentDidMount = function componentDidMount() {
-      var _this = this;
-
-      var themeContext = this.context[channel];
-
-      if (themeContext === undefined) {
+      {
         // eslint-disable-next-line no-console
         console.error('[withTheme] Please use ThemeProvider to be able to use withTheme');
-        return;
+        return _assertThisInitialized(_this);
       }
 
-      this.unsubscribeId = themeContext.subscribe(function (theme) {
-        _this.setState({
-          theme: theme
-        });
+      _this.unsubscribeId = themeContext.subscribe(function (theme) {
+        if (_this.mounted) ; else {
+          _this.state = theme;
+        }
       });
+      return _assertThisInitialized(_this);
+    }
+
+    var _proto = WithTheme.prototype;
+
+    _proto.componentDidMount = function componentDidMount() {
+      this.mounted = true;
     };
@@ -202,0 +211,0 @@

package.json

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

src/with-theme.js

@@ -13,3 +13,3 @@ // @flow
     unsubscribeId: number
-    componentDidMount() {
+    constructor() {
       const themeContext = this.context[channel]
@@ -24,6 +24,14 @@ if (themeContext === undefined) {
       this.unsubscribeId = themeContext.subscribe(theme => {
-        this.setState({ theme })
+        if (this.mounted) {
+          this.setState({ theme })
+        } else {
+          this.state = theme
+        }
       })
     }
 
+    componentDidMount() {
+      this.mounted = true
+    }
+
     componentWillUnmount() {
@@ -30,0 +38,0 @@ if (this.unsubscribeId !== -1) {

No alert changes

Improved metrics

Total package byte prevSize

44163

increased by1.48%

Lines of code

654

increased by3.32%

No dependency changes