radium - npm Package Compare versions

Comparing version 0.23.0 to 0.24.0

CHANGELOG.md

 # Radium Changelog
 
+## 0.24.0 (March 29, 2018)
+- Fix `render` methods that return array of children or `React.Fragment`. (#950)
+- Upgrade tests to React 16.2 (for `Fragment` support)
+
 ## 0.23.0 (March 15, 2018)
@@ -4,0 +8,0 @@ - Support ES7 arrow functions for React class methods. (#738)

es/resolve-styles.js

@@ -27,3 +27,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 // Declare early for recursive helpers.
-var resolveStyles = null;
+var _resolveStyles5 = null;
 
@@ -61,3 +61,3 @@ var _shouldResolveStyles = function _shouldResolveStyles(component) {
 
-        var _resolveStyles = resolveStyles(component, result, config, existingKeyMap, true, extraStateKeyMap),
+        var _resolveStyles = _resolveStyles5(component, result, config, existingKeyMap, true, extraStateKeyMap),
             _element = _resolveStyles.element;
@@ -79,3 +79,3 @@
 
-    var _resolveStyles2 = resolveStyles(component, onlyChild, config, existingKeyMap, true, extraStateKeyMap),
+    var _resolveStyles2 = _resolveStyles5(component, onlyChild, config, existingKeyMap, true, extraStateKeyMap),
         _element2 = _resolveStyles2.element;
@@ -91,3 +91,3 @@
 
-      var _resolveStyles3 = resolveStyles(component, child, config, existingKeyMap, true, extraStateKeyMap),
+      var _resolveStyles3 = _resolveStyles5(component, child, config, existingKeyMap, true, extraStateKeyMap),
           _element3 = _resolveStyles3.element;
@@ -124,3 +124,3 @@
 
-      var _resolveStyles4 = resolveStyles(component, propValue, config, existingKeyMap, true, extraStateKeyMap),
+      var _resolveStyles4 = _resolveStyles5(component, propValue, config, existingKeyMap, true, extraStateKeyMap),
           _element4 = _resolveStyles4.element;
@@ -302,3 +302,3 @@
 /* eslint-disable max-params */
-resolveStyles = function resolveStyles(component, // ReactComponent, flow+eslint complaining
+_resolveStyles5 = function resolveStyles(component, // ReactComponent, flow+eslint complaining
 renderedElement) {
@@ -327,2 +327,20 @@ var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_CONFIG;
 
+  if (Array.isArray(renderedElement) && !renderedElement.props) {
+    var elements = renderedElement.map(function (element) {
+      // element is in-use, so remove from the extraStateKeyMap
+      if (extraStateKeyMap) {
+        var _key5 = getStateKey(element);
+        delete extraStateKeyMap[_key5];
+      }
+
+      // this element is an array of elements,
+      // so return an array of elements with resolved styles
+      return _resolveStyles5(component, element, config, existingKeyMap, shouldCheckBeforeResolve, extraStateKeyMap).element;
+    });
+    return {
+      extraStateKeyMap: extraStateKeyMap,
+      element: elements
+    };
+  }
+
   // ReactElement
@@ -341,4 +359,6 @@ if (!renderedElement ||
 
+  var children = renderedElement.props.children;
+
   var newChildren = _resolveChildren({
-    children: renderedElement.props.children,
+    children: children,
     component: component,
@@ -367,5 +387,5 @@ config: config,
   // If nothing changed, don't bother cloning the element. Might be a bit
-  // wasteful, as we add the sentinal to stop double-processing when we clone.
+  // wasteful, as we add the sentinel to stop double-processing when we clone.
   // Assume benign double-processing is better than unneeded cloning.
-  if (newChildren === renderedElement.props.children && newProps === renderedElement.props) {
+  if (newChildren === children && newProps === renderedElement.props) {
     return { extraStateKeyMap: extraStateKeyMap, element: renderedElement };
@@ -383,6 +403,6 @@ }
 if (process.env.NODE_ENV !== 'production') {
-  resolveStyles.__clearStateForTests = function () {
+  _resolveStyles5.__clearStateForTests = function () {
     globalState = {};
   };
-  resolveStyles.__setTestMode = function (isEnabled) {
+  _resolveStyles5.__setTestMode = function (isEnabled) {
     __isTestModeEnabled = isEnabled;
@@ -392,2 +412,2 @@ };
 
-export default resolveStyles;
+export default _resolveStyles5;

lib/resolve-styles.js

@@ -63,3 +63,3 @@ 'use strict';
 // Declare early for recursive helpers.
-var resolveStyles = null;
+var _resolveStyles5 = null;
 
@@ -97,3 +97,3 @@ var _shouldResolveStyles = function _shouldResolveStyles(component) {
 
-        var _resolveStyles = resolveStyles(component, result, config, existingKeyMap, true, extraStateKeyMap),
+        var _resolveStyles = _resolveStyles5(component, result, config, existingKeyMap, true, extraStateKeyMap),
             _element = _resolveStyles.element;
@@ -115,3 +115,3 @@
 
-    var _resolveStyles2 = resolveStyles(component, onlyChild, config, existingKeyMap, true, extraStateKeyMap),
+    var _resolveStyles2 = _resolveStyles5(component, onlyChild, config, existingKeyMap, true, extraStateKeyMap),
         _element2 = _resolveStyles2.element;
@@ -127,3 +127,3 @@
 
-      var _resolveStyles3 = resolveStyles(component, child, config, existingKeyMap, true, extraStateKeyMap),
+      var _resolveStyles3 = _resolveStyles5(component, child, config, existingKeyMap, true, extraStateKeyMap),
           _element3 = _resolveStyles3.element;
@@ -160,3 +160,3 @@
 
-      var _resolveStyles4 = resolveStyles(component, propValue, config, existingKeyMap, true, extraStateKeyMap),
+      var _resolveStyles4 = _resolveStyles5(component, propValue, config, existingKeyMap, true, extraStateKeyMap),
           _element4 = _resolveStyles4.element;
@@ -338,3 +338,3 @@
 /* eslint-disable max-params */
-resolveStyles = function resolveStyles(component, // ReactComponent, flow+eslint complaining
+_resolveStyles5 = function resolveStyles(component, // ReactComponent, flow+eslint complaining
 renderedElement) {
@@ -363,2 +363,20 @@ var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_CONFIG;
 
+  if (Array.isArray(renderedElement) && !renderedElement.props) {
+    var elements = renderedElement.map(function (element) {
+      // element is in-use, so remove from the extraStateKeyMap
+      if (extraStateKeyMap) {
+        var _key5 = (0, _getStateKey2.default)(element);
+        delete extraStateKeyMap[_key5];
+      }
+
+      // this element is an array of elements,
+      // so return an array of elements with resolved styles
+      return _resolveStyles5(component, element, config, existingKeyMap, shouldCheckBeforeResolve, extraStateKeyMap).element;
+    });
+    return {
+      extraStateKeyMap: extraStateKeyMap,
+      element: elements
+    };
+  }
+
   // ReactElement
@@ -377,4 +395,6 @@ if (!renderedElement ||
 
+  var children = renderedElement.props.children;
+
   var newChildren = _resolveChildren({
-    children: renderedElement.props.children,
+    children: children,
     component: component,
@@ -403,5 +423,5 @@ config: config,
   // If nothing changed, don't bother cloning the element. Might be a bit
-  // wasteful, as we add the sentinal to stop double-processing when we clone.
+  // wasteful, as we add the sentinel to stop double-processing when we clone.
   // Assume benign double-processing is better than unneeded cloning.
-  if (newChildren === renderedElement.props.children && newProps === renderedElement.props) {
+  if (newChildren === children && newProps === renderedElement.props) {
     return { extraStateKeyMap: extraStateKeyMap, element: renderedElement };
@@ -419,6 +439,6 @@ }
 if (process.env.NODE_ENV !== 'production') {
-  resolveStyles.__clearStateForTests = function () {
+  _resolveStyles5.__clearStateForTests = function () {
     globalState = {};
   };
-  resolveStyles.__setTestMode = function (isEnabled) {
+  _resolveStyles5.__setTestMode = function (isEnabled) {
     __isTestModeEnabled = isEnabled;
@@ -428,2 +448,2 @@ };
 
-exports.default = resolveStyles;
+exports.default = _resolveStyles5;

package.json

 {
   "name": "radium",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "A set of tools to manage inline styles on React elements",
@@ -93,5 +93,5 @@ "main": "index.js",
     "prettier": "^0.22.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "sinon": "^1.17.7",
@@ -98,0 +98,0 @@ "sinon-chai": "^2.8.0",

src/__tests__/radium-test.js

@@ -793,2 +793,70 @@ /* eslint-disable react/prop-types */
 
+  // Regression test: https://github.com/FormidableLabs/radium/issues/950
+  it('works with array children', () => {
+    class TestComponent extends Component {
+      render = () => {
+        return [
+          <div key="key0" style={{color: 'blue', ':hover': {color: 'red'}}}>
+            {this.props.children}
+          </div>,
+          <div key="key1" style={{color: 'yellow', ':hover': {color: 'green'}}}>
+            two
+          </div>
+        ];
+      };
+    }
+
+    const Wrapped = Radium(TestComponent);
+    const output = TestUtils.renderIntoDocument(<Wrapped>hello world</Wrapped>);
+
+    const divs = getElements(output, 'div');
+
+    expect(divs[0].style.color).to.equal('blue');
+    expect(divs[0].getAttribute('data-radium')).to.equal('true');
+    expect(divs[0].innerText).to.equal('hello world');
+    TestUtils.SimulateNative.mouseOver(divs[0]);
+    expect(divs[0].style.color).to.equal('red');
+
+    expect(divs[1].style.color).to.equal('yellow');
+    expect(divs[1].innerText).to.equal('two');
+    TestUtils.SimulateNative.mouseOver(divs[1]);
+    expect(divs[1].style.color).to.equal('green');
+  });
+
+  it('works with Fragments', () => {
+    class TestComponent extends Component {
+      render = () => {
+        return (
+          <React.Fragment>
+            <div key="key0" style={{color: 'blue', ':hover': {color: 'red'}}}>
+              {this.props.children}
+            </div>
+            <div
+              key="key1"
+              style={{color: 'yellow', ':hover': {color: 'green'}}}
+            >
+              two
+            </div>
+          </React.Fragment>
+        );
+      };
+    }
+
+    const Wrapped = Radium(TestComponent);
+    const output = TestUtils.renderIntoDocument(<Wrapped>hello world</Wrapped>);
+
+    const divs = getElements(output, 'div');
+
+    expect(divs[0].style.color).to.equal('blue');
+    expect(divs[0].getAttribute('data-radium')).to.equal('true');
+    expect(divs[0].innerText).to.equal('hello world');
+    TestUtils.SimulateNative.mouseOver(divs[0]);
+    expect(divs[0].style.color).to.equal('red');
+
+    expect(divs[1].style.color).to.equal('yellow');
+    expect(divs[1].innerText).to.equal('two');
+    TestUtils.SimulateNative.mouseOver(divs[1]);
+    expect(divs[1].style.color).to.equal('green');
+  });
+
   it('works fine if passing null, undefined, or false in style', () => {
@@ -837,3 +905,2 @@ const TestComponent = Radium(() => (
     const div = getElement(output, 'div');
-
     expect(div.style.color).to.equal('blue');
@@ -840,0 +907,0 @@ expect(div.innerText).to.equal('hello world');

src/resolve-styles.js

@@ -388,2 +388,27 @@ /* @flow */
 
+  if (Array.isArray(renderedElement) && !renderedElement.props) {
+    const elements = renderedElement.map(element => {
+      // element is in-use, so remove from the extraStateKeyMap
+      if (extraStateKeyMap) {
+        const key = getStateKey(element);
+        delete extraStateKeyMap[key];
+      }
+
+      // this element is an array of elements,
+      // so return an array of elements with resolved styles
+      return resolveStyles(
+        component,
+        element,
+        config,
+        existingKeyMap,
+        shouldCheckBeforeResolve,
+        extraStateKeyMap
+      ).element;
+    });
+    return {
+      extraStateKeyMap,
+      element: elements
+    };
+  }
+
   // ReactElement
@@ -404,4 +429,6 @@ if (
 
+  const children = renderedElement.props.children;
+
   const newChildren = _resolveChildren({
-    children: renderedElement.props.children,
+    children,
     component,
@@ -430,8 +457,5 @@ config,
   // If nothing changed, don't bother cloning the element. Might be a bit
-  // wasteful, as we add the sentinal to stop double-processing when we clone.
+  // wasteful, as we add the sentinel to stop double-processing when we clone.
   // Assume benign double-processing is better than unneeded cloning.
-  if (
-    newChildren === renderedElement.props.children &&
-    newProps === renderedElement.props
-  ) {
+  if (newChildren === children && newProps === renderedElement.props) {
     return {extraStateKeyMap, element: renderedElement};
@@ -438,0 +462,0 @@ }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

725240

increased by0.77%

Lines of code

15708

increased by0.84%

Worsened metrics

Number of medium supply chain risk alerts

5

increased by25%

No dependency changes