radium - npm Package Compare versions

Comparing version 0.22.1 to 0.23.0

CHANGELOG.md

 # Radium Changelog
 
+## 0.23.0 (March 15, 2018)
+- Support ES7 arrow functions for React class methods. (#738)
+
 ## 0.22.1 (March 1, 2018)
@@ -17,3 +20,3 @@ - Fix `keyframes` bug from prefixed inline styles. (#973)
 ### Fixes
-- Fix `package.json:scrtips.postinstall` task to correctly work for git-based dependencies.
+- Fix `package.json:scripts.postinstall` task to correctly work for git-based dependencies.
 
@@ -20,0 +23,0 @@ ## 0.21.2 (January 25, 2018)

es/enhancer.js

@@ -26,2 +26,5 @@ var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
 
+var RADIUM_PROTO = void 0;
+var RADIUM_METHODS = void 0;
+
 function copyProperties(source, target) {
@@ -36,4 +39,10 @@ Object.getOwnPropertyNames(source).forEach(function (key) {
 
+// Handle scenarios of:
+// - Inherit from `React.Component` in any fashion
+//   See: https://github.com/FormidableLabs/radium/issues/738
+// - There's an explicit `render` field defined
 function isStateless(component) {
-  return !component.render && !(component.prototype && component.prototype.render);
+  var proto = component.prototype || {};
+
+  return !component.isReactComponent && !proto.isReactComponent && !component.render && !proto.render;
 }
@@ -84,8 +93,8 @@
   var component = configOrComposedComponent;
-  var ComposedComponent = component;
+  var _ComposedComponent = component;
 
   // Handle Native ES classes.
-  if (isNativeClass(ComposedComponent)) {
+  if (isNativeClass(_ComposedComponent)) {
     // Manually approximate babel's class transpilation, but _with_ a real `new` call.
-    ComposedComponent = function (OrigComponent) {
+    _ComposedComponent = function (OrigComponent) {
       function NewComponent() {
@@ -110,8 +119,8 @@ // Ordinarily, babel would produce something like:
       return NewComponent;
-    }(ComposedComponent);
+    }(_ComposedComponent);
   }
 
   // Handle stateless components
-  if (isStateless(ComposedComponent)) {
-    ComposedComponent = function (_Component) {
+  if (isStateless(_ComposedComponent)) {
+    _ComposedComponent = function (_Component) {
       _inherits(ComposedComponent, _Component);
@@ -135,17 +144,65 @@
 
-    ComposedComponent.displayName = component.displayName || component.name;
+    _ComposedComponent.displayName = component.displayName || component.name;
   }
 
-  var RadiumEnhancer = (_temp = _class = function (_ComposedComponent) {
-    _inherits(RadiumEnhancer, _ComposedComponent);
+  // Shallow copy composed if still original (we may mutate later).
+  if (_ComposedComponent === component) {
+    _ComposedComponent = function (_ComposedComponent2) {
+      _inherits(ComposedComponent, _ComposedComponent2);
 
+      function ComposedComponent() {
+        _classCallCheck(this, ComposedComponent);
+
+        return _possibleConstructorReturn(this, (ComposedComponent.__proto__ || Object.getPrototypeOf(ComposedComponent)).apply(this, arguments));
+      }
+
+      return ComposedComponent;
+    }(_ComposedComponent);
+  }
+
+  var RadiumEnhancer = (_temp = _class = function (_ComposedComponent3) {
+    _inherits(RadiumEnhancer, _ComposedComponent3);
+
     function RadiumEnhancer() {
       _classCallCheck(this, RadiumEnhancer);
 
-      var _this2 = _possibleConstructorReturn(this, (RadiumEnhancer.__proto__ || Object.getPrototypeOf(RadiumEnhancer)).apply(this, arguments));
+      var _this3 = _possibleConstructorReturn(this, (RadiumEnhancer.__proto__ || Object.getPrototypeOf(RadiumEnhancer)).apply(this, arguments));
 
-      _this2.state = _this2.state || {};
-      _this2.state._radiumStyleState = {};
-      _this2._radiumIsMounted = true;
-      return _this2;
+      _this3.state = _this3.state || {};
+      _this3.state._radiumStyleState = {};
+      _this3._radiumIsMounted = true;
+
+      var self = _this3;
+
+      // Handle es7 arrow functions on React class method names by detecting
+      // and transfering the instance method to original class prototype.
+      // (Using a copy of the class).
+      // See: https://github.com/FormidableLabs/radium/issues/738
+      RADIUM_METHODS.forEach(function (name) {
+        var thisDesc = Object.getOwnPropertyDescriptor(self, name);
+        var thisMethod = (thisDesc || {}).value;
+
+        // Only care if have instance method.
+        if (!thisMethod) {
+          return;
+        }
+
+        var radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);
+        var radiumProtoMethod = radiumDesc.value;
+        var superProtoMethod = _ComposedComponent.prototype[name];
+
+        // Allow transfer when:
+        // 1. have an instance method
+        // 2. the super class prototype doesn't have any method
+        // 3. it is not already the radium prototype's
+        if (!superProtoMethod && thisMethod !== radiumProtoMethod) {
+          // Transfer dynamic render component to Component prototype (copy).
+          Object.defineProperty(_ComposedComponent.prototype, name, thisDesc);
+
+          // Remove instance property, leaving us to have a contrived
+          // inheritance chain of (1) radium, (2) superclass.
+          delete self[name];
+        }
+      });
+      return _this3;
     }
@@ -234,4 +291,11 @@
     return RadiumEnhancer;
-  }(ComposedComponent), _class._isRadiumEnhanced = true, _temp);
+  }(_ComposedComponent), _class._isRadiumEnhanced = true, _temp);
 
+  // Lazy infer the method names of the Enhancer.
+
+  RADIUM_PROTO = RadiumEnhancer.prototype;
+  RADIUM_METHODS = Object.getOwnPropertyNames(RADIUM_PROTO).filter(function (n) {
+    return n !== 'constructor' && typeof RADIUM_PROTO[n] === 'function';
+  });
+
   // Class inheritance uses Object.create and because of __proto__ issues
@@ -241,3 +305,2 @@ // with IE <10 any static properties of the superclass aren't inherited and
   // See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below-
-
   copyProperties(component, RadiumEnhancer);
@@ -249,3 +312,3 @@
     // https://github.com/FormidableLabs/radium/issues/219.
-    copyProperties(ComposedComponent.prototype, RadiumEnhancer.prototype);
+    copyProperties(_ComposedComponent.prototype, RadiumEnhancer.prototype);
   }
@@ -252,0 +315,0 @@

lib/enhancer.js

@@ -47,2 +47,5 @@ 'use strict';
 
+var RADIUM_PROTO = void 0;
+var RADIUM_METHODS = void 0;
+
 function copyProperties(source, target) {
@@ -57,4 +60,10 @@ Object.getOwnPropertyNames(source).forEach(function (key) {
 
+// Handle scenarios of:
+// - Inherit from `React.Component` in any fashion
+//   See: https://github.com/FormidableLabs/radium/issues/738
+// - There's an explicit `render` field defined
 function isStateless(component) {
-  return !component.render && !(component.prototype && component.prototype.render);
+  var proto = component.prototype || {};
+
+  return !component.isReactComponent && !proto.isReactComponent && !component.render && !proto.render;
 }
@@ -105,8 +114,8 @@
   var component = configOrComposedComponent;
-  var ComposedComponent = component;
+  var _ComposedComponent = component;
 
   // Handle Native ES classes.
-  if (isNativeClass(ComposedComponent)) {
+  if (isNativeClass(_ComposedComponent)) {
     // Manually approximate babel's class transpilation, but _with_ a real `new` call.
-    ComposedComponent = function (OrigComponent) {
+    _ComposedComponent = function (OrigComponent) {
       function NewComponent() {
@@ -131,8 +140,8 @@ // Ordinarily, babel would produce something like:
       return NewComponent;
-    }(ComposedComponent);
+    }(_ComposedComponent);
   }
 
   // Handle stateless components
-  if (isStateless(ComposedComponent)) {
-    ComposedComponent = function (_Component) {
+  if (isStateless(_ComposedComponent)) {
+    _ComposedComponent = function (_Component) {
       _inherits(ComposedComponent, _Component);
@@ -156,17 +165,65 @@
 
-    ComposedComponent.displayName = component.displayName || component.name;
+    _ComposedComponent.displayName = component.displayName || component.name;
   }
 
-  var RadiumEnhancer = (_temp = _class = function (_ComposedComponent) {
-    _inherits(RadiumEnhancer, _ComposedComponent);
+  // Shallow copy composed if still original (we may mutate later).
+  if (_ComposedComponent === component) {
+    _ComposedComponent = function (_ComposedComponent2) {
+      _inherits(ComposedComponent, _ComposedComponent2);
 
+      function ComposedComponent() {
+        _classCallCheck(this, ComposedComponent);
+
+        return _possibleConstructorReturn(this, (ComposedComponent.__proto__ || Object.getPrototypeOf(ComposedComponent)).apply(this, arguments));
+      }
+
+      return ComposedComponent;
+    }(_ComposedComponent);
+  }
+
+  var RadiumEnhancer = (_temp = _class = function (_ComposedComponent3) {
+    _inherits(RadiumEnhancer, _ComposedComponent3);
+
     function RadiumEnhancer() {
       _classCallCheck(this, RadiumEnhancer);
 
-      var _this2 = _possibleConstructorReturn(this, (RadiumEnhancer.__proto__ || Object.getPrototypeOf(RadiumEnhancer)).apply(this, arguments));
+      var _this3 = _possibleConstructorReturn(this, (RadiumEnhancer.__proto__ || Object.getPrototypeOf(RadiumEnhancer)).apply(this, arguments));
 
-      _this2.state = _this2.state || {};
-      _this2.state._radiumStyleState = {};
-      _this2._radiumIsMounted = true;
-      return _this2;
+      _this3.state = _this3.state || {};
+      _this3.state._radiumStyleState = {};
+      _this3._radiumIsMounted = true;
+
+      var self = _this3;
+
+      // Handle es7 arrow functions on React class method names by detecting
+      // and transfering the instance method to original class prototype.
+      // (Using a copy of the class).
+      // See: https://github.com/FormidableLabs/radium/issues/738
+      RADIUM_METHODS.forEach(function (name) {
+        var thisDesc = Object.getOwnPropertyDescriptor(self, name);
+        var thisMethod = (thisDesc || {}).value;
+
+        // Only care if have instance method.
+        if (!thisMethod) {
+          return;
+        }
+
+        var radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);
+        var radiumProtoMethod = radiumDesc.value;
+        var superProtoMethod = _ComposedComponent.prototype[name];
+
+        // Allow transfer when:
+        // 1. have an instance method
+        // 2. the super class prototype doesn't have any method
+        // 3. it is not already the radium prototype's
+        if (!superProtoMethod && thisMethod !== radiumProtoMethod) {
+          // Transfer dynamic render component to Component prototype (copy).
+          Object.defineProperty(_ComposedComponent.prototype, name, thisDesc);
+
+          // Remove instance property, leaving us to have a contrived
+          // inheritance chain of (1) radium, (2) superclass.
+          delete self[name];
+        }
+      });
+      return _this3;
     }
@@ -255,4 +312,11 @@
     return RadiumEnhancer;
-  }(ComposedComponent), _class._isRadiumEnhanced = true, _temp);
+  }(_ComposedComponent), _class._isRadiumEnhanced = true, _temp);
 
+  // Lazy infer the method names of the Enhancer.
+
+  RADIUM_PROTO = RadiumEnhancer.prototype;
+  RADIUM_METHODS = Object.getOwnPropertyNames(RADIUM_PROTO).filter(function (n) {
+    return n !== 'constructor' && typeof RADIUM_PROTO[n] === 'function';
+  });
+
   // Class inheritance uses Object.create and because of __proto__ issues
@@ -262,3 +326,2 @@ // with IE <10 any static properties of the superclass aren't inherited and
   // See http://babeljs.io/docs/advanced/caveats/#classes-10-and-below-
-
   copyProperties(component, RadiumEnhancer);
@@ -270,3 +333,3 @@
     // https://github.com/FormidableLabs/radium/issues/219.
-    copyProperties(ComposedComponent.prototype, RadiumEnhancer.prototype);
+    copyProperties(_ComposedComponent.prototype, RadiumEnhancer.prototype);
   }
@@ -273,0 +336,0 @@

package.json

 {
   "name": "radium",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "A set of tools to manage inline styles on React elements",
@@ -5,0 +5,0 @@ "main": "index.js",

src/__tests__/radium-test.js

@@ -733,2 +733,62 @@ /* eslint-disable react/prop-types */
 
+  // Regression test: https://github.com/FormidableLabs/radium/issues/738
+  it('works with arrow-based render methods in components', () => {
+    class TestComponent extends Component {
+      render = () => {
+        return (
+          <div style={{color: 'blue', ':hover': {color: 'red'}}}>
+            {this.props.children}
+          </div>
+        );
+      };
+    }
+
+    const Wrapped = Radium(TestComponent);
+    const output = TestUtils.renderIntoDocument(<Wrapped>hello world</Wrapped>);
+
+    // Check prototype is not mutated.
+    expect(TestComponent.prototype).to.not.have.property('render');
+
+    const div = getElement(output, 'div');
+
+    expect(div.style.color).to.equal('blue');
+    expect(div.innerText).to.equal('hello world');
+
+    TestUtils.SimulateNative.mouseOver(div);
+
+    expect(div.style.color).to.equal('red');
+  });
+
+  // Regression test: https://github.com/FormidableLabs/radium/issues/738
+  it('works with arrow-based render methods in components with complex inheritence', () => {
+    class First extends Component {}
+    class Second extends First {}
+    class TestComponent extends Second {
+      render = () => {
+        return (
+          <div style={{color: 'blue', ':hover': {color: 'red'}}}>
+            {this.props.children}
+          </div>
+        );
+      };
+    }
+
+    const Wrapped = Radium(TestComponent);
+    const output = TestUtils.renderIntoDocument(<Wrapped>hello world</Wrapped>);
+
+    // Check prototypes are not mutated.
+    expect(First.prototype).to.not.have.property('render');
+    expect(Second.prototype).to.not.have.property('render');
+    expect(TestComponent.prototype).to.not.have.property('render');
+
+    const div = getElement(output, 'div');
+
+    expect(div.style.color).to.equal('blue');
+    expect(div.innerText).to.equal('hello world');
+
+    TestUtils.SimulateNative.mouseOver(div);
+
+    expect(div.style.color).to.equal('red');
+  });
+
   it('works fine if passing null, undefined, or false in style', () => {
@@ -735,0 +795,0 @@ const TestComponent = Radium(() => (

src/enhancer.js

@@ -20,2 +20,5 @@ /* @flow */
 
+let RADIUM_PROTO: Object;
+let RADIUM_METHODS;
+
 function copyProperties(source, target) {
@@ -33,5 +36,13 @@ Object.getOwnPropertyNames(source).forEach(key => {
 
+// Handle scenarios of:
+// - Inherit from `React.Component` in any fashion
+//   See: https://github.com/FormidableLabs/radium/issues/738
+// - There's an explicit `render` field defined
 function isStateless(component: Function): boolean {
-  return !component.render &&
-    !(component.prototype && component.prototype.render);
+  const proto = component.prototype || {};
+
+  return !component.isReactComponent &&
+    !proto.isReactComponent &&
+    !component.render &&
+    !proto.render;
 }
@@ -123,2 +134,7 @@
 
+  // Shallow copy composed if still original (we may mutate later).
+  if (ComposedComponent === component) {
+    ComposedComponent = class extends ComposedComponent {};
+  }
+
   class RadiumEnhancer extends ComposedComponent {
@@ -143,2 +159,35 @@ static _isRadiumEnhanced = true;
       this._radiumIsMounted = true;
+
+      const self: Object = this;
+
+      // Handle es7 arrow functions on React class method names by detecting
+      // and transfering the instance method to original class prototype.
+      // (Using a copy of the class).
+      // See: https://github.com/FormidableLabs/radium/issues/738
+      RADIUM_METHODS.forEach(name => {
+        const thisDesc = Object.getOwnPropertyDescriptor(self, name);
+        const thisMethod = (thisDesc || {}).value;
+
+        // Only care if have instance method.
+        if (!thisMethod) {
+          return;
+        }
+
+        const radiumDesc = Object.getOwnPropertyDescriptor(RADIUM_PROTO, name);
+        const radiumProtoMethod = radiumDesc.value;
+        const superProtoMethod = ComposedComponent.prototype[name];
+
+        // Allow transfer when:
+        // 1. have an instance method
+        // 2. the super class prototype doesn't have any method
+        // 3. it is not already the radium prototype's
+        if (!superProtoMethod && thisMethod !== radiumProtoMethod) {
+          // Transfer dynamic render component to Component prototype (copy).
+          Object.defineProperty(ComposedComponent.prototype, name, thisDesc);
+
+          // Remove instance property, leaving us to have a contrived
+          // inheritance chain of (1) radium, (2) superclass.
+          delete self[name];
+        }
+      });
     }
@@ -230,2 +279,8 @@
 
+  // Lazy infer the method names of the Enhancer.
+  RADIUM_PROTO = RadiumEnhancer.prototype;
+  RADIUM_METHODS = Object.getOwnPropertyNames(RADIUM_PROTO).filter(
+    n => n !== 'constructor' && typeof RADIUM_PROTO[n] === 'function'
+  );
+
   // Class inheritance uses Object.create and because of __proto__ issues
@@ -232,0 +287,0 @@ // with IE <10 any static properties of the superclass aren't inherited and

No alert changes

Improved metrics

Total package byte prevSize

719732

increased by1.66%

Lines of code

15577

increased by1.58%

No dependency changes