aesthetic - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1

CHANGELOG.md

@@ -0,1 +1,5 @@
+# 2.3.1 - 04/19/18
+#### 🐞 Fixed
+* Moved initial style transformation to the constructor to avoid possible race conditions.
+
 # 2.3.0 - 04/17/18
@@ -2,0 +6,0 @@ #### 🚀 New

esm/style.js

@@ -1,7 +0,7 @@
-import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import _defineProperty from 'babel-runtime/helpers/defineProperty';
+import _extends from 'babel-runtime/helpers/extends';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
+import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
 import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
 import _inherits from 'babel-runtime/helpers/inherits';
@@ -59,28 +59,36 @@ /**
 
-      function StyledComponent() {
-        var _ref, _this$state;
+      _createClass(StyledComponent, null, [{
+        key: 'extendStyles',
+        value: function extendStyles() {
+          var customStyleSheet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+          var extendOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-        var _temp, _this, _ret;
+          if ("production" !== process.env.NODE_ENV) {
+            if (!extendable) {
+              throw new Error(styleName + ' is not extendable.');
+            }
+          }
 
+          return style(aesthetic, customStyleSheet, _extends({}, options, extendOptions, {
+            extendFrom: styleName
+          }))(Component);
+        }
+      }]);
+
+      function StyledComponent(props, context) {
         _classCallCheck(this, StyledComponent);
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+        var _this = _possibleConstructorReturn(this, (StyledComponent.__proto__ || Object.getPrototypeOf(StyledComponent)).call(this, props, context));
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = StyledComponent.__proto__ || Object.getPrototypeOf(StyledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = (_this$state = {
-          firstMount: true
-        }, _defineProperty(_this$state, stylesPropName, {}), _defineProperty(_this$state, 'themeName', ''), _defineProperty(_this$state, themePropName, {}), _this$state), _temp), _possibleConstructorReturn(_this, _ret);
+        _this.state = _this.transformStyles(_this.getThemeName(props));
+        return _this;
       }
 
       _createClass(StyledComponent, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {
-          this.transformStyles();
-        }
-      }, {
         key: 'componentDidUpdate',
         value: function componentDidUpdate(prevProps) {
-          if (this.getThemeName(this.props) !== this.getThemeName(prevProps)) {
-            this.transformStyles();
+          var themeName = this.getThemeName(this.props);
+
+          if (themeName !== this.getThemeName(prevProps)) {
+            this.setState(this.transformStyles(themeName));
           }
@@ -95,12 +103,6 @@ }
         key: 'transformStyles',
-        value: function transformStyles() {
-          var themeName = this.getThemeName(this.props);
+        value: function transformStyles(themeName) {
+          var _ref;
 
-          if (this.state.firstMount || themeName !== this.state.themeName) {
-            var _setState;
-
-            this.setState((_setState = {
-              firstMount: false
-            }, _defineProperty(_setState, stylesPropName, aesthetic.createStyleSheet(styleName, themeName, this.props)), _defineProperty(_setState, 'themeName', themeName), _defineProperty(_setState, themePropName, themeName ? aesthetic.getTheme(themeName) : {}), _setState));
-          }
+          return _ref = {}, _defineProperty(_ref, stylesPropName, aesthetic.createStyleSheet(styleName, themeName, this.props)), _defineProperty(_ref, 'themeName', themeName), _defineProperty(_ref, themePropName, themeName ? aesthetic.getTheme(themeName) : {}), _ref;
         }
@@ -110,6 +112,2 @@ }, {
         value: function render() {
-          var _state = this.state,
-              firstMount = _state.firstMount,
-              state = _objectWithoutProperties(_state, ['firstMount']);
-
           var _props = this.props,
@@ -123,20 +121,4 @@ wrappedRef = _props.wrappedRef,
 
-          return React.createElement(Component, _extends({}, props, state));
+          return React.createElement(Component, _extends({}, props, this.state));
         }
-      }], [{
-        key: 'extendStyles',
-        value: function extendStyles() {
-          var customStyleSheet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-          var extendOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-          if ("production" !== process.env.NODE_ENV) {
-            if (!extendable) {
-              throw new Error(styleName + ' is not extendable.');
-            }
-          }
-
-          return style(aesthetic, customStyleSheet, _extends({}, options, extendOptions, {
-            extendFrom: styleName
-          }))(Component);
-        }
       }]);
@@ -143,0 +125,0 @@

lib/style.js

@@ -7,6 +7,2 @@ 'use strict';
 
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
@@ -20,2 +16,6 @@
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
@@ -25,2 +25,6 @@
 
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
 var _createClass2 = require('babel-runtime/helpers/createClass');
@@ -30,6 +34,2 @@
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
 var _inherits2 = require('babel-runtime/helpers/inherits');
@@ -104,29 +104,36 @@
       (0, _inherits3.default)(StyledComponent, _ParentComponent);
+      (0, _createClass3.default)(StyledComponent, null, [{
+        key: 'extendStyles',
+        value: function extendStyles() {
+          var customStyleSheet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+          var extendOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-      function StyledComponent() {
-        var _ref, _this$state;
+          if ("production" !== process.env.NODE_ENV) {
+            if (!extendable) {
+              throw new Error(styleName + ' is not extendable.');
+            }
+          }
 
-        var _temp, _this, _ret;
+          return style(aesthetic, customStyleSheet, (0, _extends3.default)({}, options, extendOptions, {
+            extendFrom: styleName
+          }))(Component);
+        }
+      }]);
 
+      function StyledComponent(props, context) {
         (0, _classCallCheck3.default)(this, StyledComponent);
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+        var _this = (0, _possibleConstructorReturn3.default)(this, (StyledComponent.__proto__ || Object.getPrototypeOf(StyledComponent)).call(this, props, context));
 
-        return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = StyledComponent.__proto__ || Object.getPrototypeOf(StyledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = (_this$state = {
-          firstMount: true
-        }, (0, _defineProperty3.default)(_this$state, stylesPropName, {}), (0, _defineProperty3.default)(_this$state, 'themeName', ''), (0, _defineProperty3.default)(_this$state, themePropName, {}), _this$state), _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+        _this.state = _this.transformStyles(_this.getThemeName(props));
+        return _this;
       }
 
       (0, _createClass3.default)(StyledComponent, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {
-          this.transformStyles();
-        }
-      }, {
         key: 'componentDidUpdate',
         value: function componentDidUpdate(prevProps) {
-          if (this.getThemeName(this.props) !== this.getThemeName(prevProps)) {
-            this.transformStyles();
+          var themeName = this.getThemeName(this.props);
+
+          if (themeName !== this.getThemeName(prevProps)) {
+            this.setState(this.transformStyles(themeName));
           }
@@ -141,12 +148,6 @@ }
         key: 'transformStyles',
-        value: function transformStyles() {
-          var themeName = this.getThemeName(this.props);
+        value: function transformStyles(themeName) {
+          var _ref;
 
-          if (this.state.firstMount || themeName !== this.state.themeName) {
-            var _setState;
-
-            this.setState((_setState = {
-              firstMount: false
-            }, (0, _defineProperty3.default)(_setState, stylesPropName, aesthetic.createStyleSheet(styleName, themeName, this.props)), (0, _defineProperty3.default)(_setState, 'themeName', themeName), (0, _defineProperty3.default)(_setState, themePropName, themeName ? aesthetic.getTheme(themeName) : {}), _setState));
-          }
+          return _ref = {}, (0, _defineProperty3.default)(_ref, stylesPropName, aesthetic.createStyleSheet(styleName, themeName, this.props)), (0, _defineProperty3.default)(_ref, 'themeName', themeName), (0, _defineProperty3.default)(_ref, themePropName, themeName ? aesthetic.getTheme(themeName) : {}), _ref;
         }
@@ -156,5 +157,2 @@ }, {
         value: function render() {
-          var _state = this.state,
-              firstMount = _state.firstMount,
-              state = (0, _objectWithoutProperties3.default)(_state, ['firstMount']);
           var _props = this.props,
@@ -169,20 +167,4 @@ wrappedRef = _props.wrappedRef,
 
-          return _react2.default.createElement(Component, (0, _extends3.default)({}, props, state));
+          return _react2.default.createElement(Component, (0, _extends3.default)({}, props, this.state));
         }
-      }], [{
-        key: 'extendStyles',
-        value: function extendStyles() {
-          var customStyleSheet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-          var extendOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-          if ("production" !== process.env.NODE_ENV) {
-            if (!extendable) {
-              throw new Error(styleName + ' is not extendable.');
-            }
-          }
-
-          return style(aesthetic, customStyleSheet, (0, _extends3.default)({}, options, extendOptions, {
-            extendFrom: styleName
-          }))(Component);
-        }
       }]);
@@ -189,0 +171,0 @@ return StyledComponent;

package.json

 {
   "name": "aesthetic",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Aesthetic is a powerful React library for styling components through the use of adapters.",
@@ -5,0 +5,0 @@ "keywords": [

src/style.js

@@ -125,16 +125,14 @@ /**
 
-      state = {
-        firstMount: true,
-        [stylesPropName]: {},
-        themeName: '',
-        [themePropName]: {},
-      };
+      // eslint-disable-next-line flowtype/no-weak-types
+      constructor(props: StyleProps, context: any) {
+        super(props, context);
 
-      componentDidMount() {
-        this.transformStyles();
+        this.state = this.transformStyles(this.getThemeName(props));
       }
 
       componentDidUpdate(prevProps: StyleProps) {
-        if (this.getThemeName(this.props) !== this.getThemeName(prevProps)) {
-          this.transformStyles();
+        const themeName = this.getThemeName(this.props);
+
+        if (themeName !== this.getThemeName(prevProps)) {
+          this.setState(this.transformStyles(themeName));
         }
@@ -150,17 +148,11 @@ }
 
-      transformStyles() {
-        const themeName = this.getThemeName(this.props);
-
-        if (this.state.firstMount || themeName !== this.state.themeName) {
-          this.setState({
-            firstMount: false,
-            [stylesPropName]: aesthetic.createStyleSheet(styleName, themeName, this.props),
-            themeName,
-            [themePropName]: themeName ? aesthetic.getTheme(themeName) : {},
-          });
-        }
+      transformStyles(themeName: string): StyleState {
+        return {
+          [stylesPropName]: aesthetic.createStyleSheet(styleName, themeName, this.props),
+          themeName,
+          [themePropName]: themeName ? aesthetic.getTheme(themeName) : {},
+        };
       }
 
       render(): React$Node {
-        const { firstMount, ...state } = this.state;
         const { wrappedRef, ...props } = this.props;
@@ -173,3 +165,3 @@
 
-        return <Component {...props} {...state} />;
+        return <Component {...props} {...this.state} />;
       }
@@ -176,0 +168,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

113058

decreased by-1.5%

Lines of code

2673

decreased by-1.47%

No dependency changes