victory-stack - npm Package Compare versions

Comparing version 36.1.0 to 36.2.0

es/helper-methods.js

 import _orderBy from "lodash/orderBy";
 import _keys from "lodash/keys";
 import _assign from "lodash/assign";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import React from "react";
 import { Helpers, Scale, Wrapper } from "victory-core";
+import isEqual from "react-fast-compare";
 var fallbackProps = {
@@ -168,2 +182,34 @@ width: 450,
   };
+} // We need to remove sharedEvents in order to memoize the calculated data
+// With shared events, the props change on every event, and every value is re-calculated
+
+var withoutSharedEvents = function (props) {
+  var children = props.children;
+  var modifiedChildren = React.Children.toArray(children).map(function (child) {
+    return _objectSpread({}, child, {
+      props: Helpers.omit(child.props, ["sharedEvents"])
+    });
+  });
+  props.children = modifiedChildren;
+  return props;
+};
+
+export function useMemoizedProps(initialProps) {
+  var modifiedProps = withoutSharedEvents(initialProps);
+
+  var _React$useState = React.useState(modifiedProps),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      props = _React$useState2[0],
+      setProps = _React$useState2[1]; // React.memo uses shallow equality to compare objects. This way props
+  // will only be re-calculated when they change.
+
+
+  React.useEffect(function () {
+    if (!isEqual(modifiedProps, props)) {
+      setProps(modifiedProps);
+    }
+  }, [props, setProps, modifiedProps]);
+  return React.useMemo(function () {
+    return getCalculatedProps(props, props.children);
+  }, [props]);
 }
@@ -170,0 +216,0 @@

es/victory-stack.js

@@ -11,5 +11,5 @@ import _isEmpty from "lodash/isEmpty";
 import React from "react";
-import { Helpers, VictoryContainer, VictoryTheme, CommonProps, Wrapper, PropTypes as CustomPropTypes, useAnimationState, usePreviousProps } from "victory-core";
+import { Helpers, VictoryContainer, VictoryTheme, CommonProps, Wrapper, PropTypes as CustomPropTypes, Hooks } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
-import { getChildren, getCalculatedProps } from "./helper-methods";
+import { getChildren, useMemoizedProps } from "./helper-methods";
 import isEqual from "react-fast-compare";
@@ -26,6 +26,6 @@ var fallbackProps = {
 
-  var _useAnimationState = useAnimationState(),
-      setAnimationState = _useAnimationState.setAnimationState,
-      getAnimationProps = _useAnimationState.getAnimationProps,
-      getProps = _useAnimationState.getProps;
+  var _Hooks$useAnimationSt = Hooks.useAnimationState(),
+      setAnimationState = _Hooks$useAnimationSt.setAnimationState,
+      getAnimationProps = _Hooks$useAnimationSt.getAnimationProps,
+      getProps = _Hooks$useAnimationSt.getProps;
 
@@ -46,3 +46,3 @@ var props = getProps(initialProps);
   var childComponents = React.Children.toArray(modifiedProps.children);
-  var calculatedProps = getCalculatedProps(modifiedProps, childComponents);
+  var calculatedProps = useMemoizedProps(modifiedProps);
   var domain = calculatedProps.domain,
@@ -100,3 +100,3 @@ scale = calculatedProps.scale,
   }, [props]);
-  var previousProps = usePreviousProps(initialProps);
+  var previousProps = Hooks.usePreviousProps(initialProps);
   React.useEffect(function () {
@@ -103,0 +103,0 @@ // This is called before dismount to keep state in sync

lib/helper-methods.js

@@ -7,2 +7,3 @@ "use strict";
 exports.getCalculatedProps = getCalculatedProps;
+exports.useMemoizedProps = useMemoizedProps;
 exports.getChildProps = getChildProps;
@@ -21,4 +22,18 @@ exports.getChildren = getChildren;
 
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var fallbackProps = {
@@ -187,2 +202,38 @@ width: 450,
   };
+} // We need to remove sharedEvents in order to memoize the calculated data
+// With shared events, the props change on every event, and every value is re-calculated
+
+
+var withoutSharedEvents = function (props) {
+  var children = props.children;
+
+  var modifiedChildren = _react.default.Children.toArray(children).map(function (child) {
+    return _objectSpread({}, child, {
+      props: _victoryCore.Helpers.omit(child.props, ["sharedEvents"])
+    });
+  });
+
+  props.children = modifiedChildren;
+  return props;
+};
+
+function useMemoizedProps(initialProps) {
+  var modifiedProps = withoutSharedEvents(initialProps);
+
+  var _React$useState = _react.default.useState(modifiedProps),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      props = _React$useState2[0],
+      setProps = _React$useState2[1]; // React.memo uses shallow equality to compare objects. This way props
+  // will only be re-calculated when they change.
+
+
+  _react.default.useEffect(function () {
+    if (!(0, _reactFastCompare.default)(modifiedProps, props)) {
+      setProps(modifiedProps);
+    }
+  }, [props, setProps, modifiedProps]);
+
+  return _react.default.useMemo(function () {
+    return getCalculatedProps(props, props.children);
+  }, [props]);
 }
@@ -189,0 +240,0 @@

lib/victory-stack.js

@@ -42,6 +42,6 @@ "use strict";
 
-  var _useAnimationState = (0, _victoryCore.useAnimationState)(),
-      setAnimationState = _useAnimationState.setAnimationState,
-      getAnimationProps = _useAnimationState.getAnimationProps,
-      getProps = _useAnimationState.getProps;
+  var _Hooks$useAnimationSt = _victoryCore.Hooks.useAnimationState(),
+      setAnimationState = _Hooks$useAnimationSt.setAnimationState,
+      getAnimationProps = _Hooks$useAnimationSt.getAnimationProps,
+      getProps = _Hooks$useAnimationSt.getProps;
 
@@ -66,3 +66,3 @@ var props = getProps(initialProps);
 
-  var calculatedProps = (0, _helperMethods.getCalculatedProps)(modifiedProps, childComponents);
+  var calculatedProps = (0, _helperMethods.useMemoizedProps)(modifiedProps);
   var domain = calculatedProps.domain,
@@ -123,3 +123,3 @@ scale = calculatedProps.scale,
 
-  var previousProps = (0, _victoryCore.usePreviousProps)(initialProps);
+  var previousProps = _victoryCore.Hooks.usePreviousProps(initialProps);
 
@@ -126,0 +126,0 @@ _react.default.useEffect(function () {

package.json

 {
   "name": "victory-stack",
-  "version": "36.1.0",
+  "version": "36.2.0",
   "description": "Stack Layout Component for Victory",
@@ -25,4 +25,4 @@ "keywords": [
     "react-fast-compare": "^2.0.0",
-    "victory-core": "^36.1.0",
-    "victory-shared-events": "^36.1.0"
+    "victory-core": "^36.2.0",
+    "victory-shared-events": "^36.2.0"
   },
@@ -36,3 +36,3 @@ "peerDependencies": {
   "sideEffects": false,
-  "gitHead": "038cd9b70d9ce54ac6b861014165583760734c99"
+  "gitHead": "00c362fcd3e8f3880e14d3ba42873c34dd69c577"
 }

src/helper-methods.js

@@ -6,2 +6,3 @@ /* eslint-disable func-style */
 import { Helpers, Scale, Wrapper } from "victory-core";
+import isEqual from "react-fast-compare";
 
@@ -164,2 +165,33 @@ const fallbackProps = {
 
+// We need to remove sharedEvents in order to memoize the calculated data
+// With shared events, the props change on every event, and every value is re-calculated
+const withoutSharedEvents = (props) => {
+  const { children } = props;
+  const modifiedChildren = React.Children.toArray(children).map((child) => {
+    return {
+      ...child,
+      props: Helpers.omit(child.props, ["sharedEvents"])
+    };
+  });
+  props.children = modifiedChildren;
+  return props;
+};
+
+export function useMemoizedProps(initialProps) {
+  const modifiedProps = withoutSharedEvents(initialProps);
+  const [props, setProps] = React.useState(modifiedProps);
+
+  // React.memo uses shallow equality to compare objects. This way props
+  // will only be re-calculated when they change.
+  React.useEffect(() => {
+    if (!isEqual(modifiedProps, props)) {
+      setProps(modifiedProps);
+    }
+  }, [props, setProps, modifiedProps]);
+
+  return React.useMemo(() => {
+    return getCalculatedProps(props, props.children);
+  }, [props]);
+}
+
 function getLabels(props, datasets, index) {
@@ -166,0 +198,0 @@ if (!props.labels) {

src/victory-stack.js

@@ -11,7 +11,6 @@ import { assign, defaults, isEmpty } from "lodash";
   PropTypes as CustomPropTypes,
-  useAnimationState,
-  usePreviousProps
+  Hooks
 } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
-import { getChildren, getCalculatedProps } from "./helper-methods";
+import { getChildren, useMemoizedProps } from "./helper-methods";
 import isEqual from "react-fast-compare";
@@ -29,3 +28,3 @@
   const { setAnimationState, getAnimationProps, getProps } =
-    useAnimationState();
+    Hooks.useAnimationState();
 
@@ -50,3 +49,3 @@ const props = getProps(initialProps);
   const childComponents = React.Children.toArray(modifiedProps.children);
-  const calculatedProps = getCalculatedProps(modifiedProps, childComponents);
+  const calculatedProps = useMemoizedProps(modifiedProps);
   const { domain, scale, style, origin } = calculatedProps;
@@ -118,3 +117,3 @@
 
-  const previousProps = usePreviousProps(initialProps);
+  const previousProps = Hooks.usePreviousProps(initialProps);
 
@@ -121,0 +120,0 @@ React.useEffect(() => {

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

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

942756

increased by1.55%

Lines of code

18168

increased by1.13%

Number of medium supply chain risk alerts

4

decreased by-20%

Dependency changes

• Updatedvictory-core@^36.2.0

• Updatedvictory-shared-events@^36.2.0