@atlaskit/drag-and-drop-hitbox - npm Package Compare versions

Comparing version 0.6.3 to 0.7.0

CHANGELOG.md

 # @atlaskit/drag-and-drop-hitbox
 
+## 0.7.0
+
+### Minor Changes
+
+- [`00434d087d7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/00434d087d7) - Tree item hitbox data is now memoized. This is helpful to reduce work for consumers who may take actions based on object reference changes.
+
+  If you are using `react` and putting tree item hitbox instructions into state, react will now only re-render when the content of the instruction changes.
+
 ## 0.6.3
@@ -4,0 +12,0 @@

dist/cjs/experimental/tree-item.js

@@ -11,2 +11,4 @@ "use strict";
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _excluded = ["block"];
@@ -118,5 +120,34 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 }
-function applyInstructionBlock(_ref3) {
-  var desired = _ref3.desired,
-    block = _ref3.block;
+function isShallowEqual(a, b) {
+  var aKeys = Object.keys(a).sort();
+  var bKeys = Object.keys(b).sort();
+  if (aKeys.length !== bKeys.length) {
+    return false;
+  }
+  return aKeys.every(function (key) {
+    return a[key] === b[key];
+  });
+}
+function areInstructionsEqual(a, b) {
+  // Shortcut
+  if (a.type !== b.type) {
+    return false;
+  }
+  if (a.type === 'instruction-blocked' && b.type === 'instruction-blocked') {
+    return areInstructionsEqual(a.desired, b.desired);
+  }
+  return isShallowEqual(a, b);
+}
+var memoizeInstruction = (0, _memoizeOne.default)(function (instruction) {
+  return instruction;
+}, function (_ref3, _ref4) {
+  var _ref5 = (0, _slicedToArray2.default)(_ref3, 1),
+    incoming = _ref5[0];
+  var _ref6 = (0, _slicedToArray2.default)(_ref4, 1),
+    existing = _ref6[0];
+  return areInstructionsEqual(incoming, existing);
+});
+function applyInstructionBlock(_ref7) {
+  var desired = _ref7.desired,
+    block = _ref7.block;
   if (block !== null && block !== void 0 && block.includes(desired.type) && desired.type !== 'instruction-blocked') {
@@ -131,15 +162,16 @@ var blocked = {
 }
-function attachInstruction(userData, _ref4) {
-  var block = _ref4.block,
-    rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
+function attachInstruction(userData, _ref8) {
+  var block = _ref8.block,
+    rest = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
   var desired = getInstruction(rest);
-  var instruction = applyInstructionBlock({
+  var withBlock = applyInstructionBlock({
     desired: desired,
     block: block
   });
-  return _objectSpread(_objectSpread({}, userData), {}, (0, _defineProperty2.default)({}, uniqueKey, instruction));
+  var memoized = memoizeInstruction(withBlock);
+  return _objectSpread(_objectSpread({}, userData), {}, (0, _defineProperty2.default)({}, uniqueKey, memoized));
 }
 function extractInstruction(userData) {
-  var _ref5;
-  return (_ref5 = userData[uniqueKey]) !== null && _ref5 !== void 0 ? _ref5 : null;
+  var _ref9;
+  return (_ref9 = userData[uniqueKey]) !== null && _ref9 !== void 0 ? _ref9 : null;
 }

dist/cjs/version.json

 {
 	"name": "@atlaskit/drag-and-drop-hitbox",
-	"version": "0.6.3",
+	"version": "0.7.0",
 	"sideEffects": false
 }

dist/es2019/experimental/tree-item.js

@@ -0,1 +1,2 @@
+import memoizeOne from 'memoize-one';
 // using a symbol so we can guarantee a key with a unique value
@@ -106,2 +107,21 @@ const uniqueKey = Symbol('tree-item-instruction');
 }
+function isShallowEqual(a, b) {
+  const aKeys = Object.keys(a).sort();
+  const bKeys = Object.keys(b).sort();
+  if (aKeys.length !== bKeys.length) {
+    return false;
+  }
+  return aKeys.every(key => a[key] === b[key]);
+}
+function areInstructionsEqual(a, b) {
+  // Shortcut
+  if (a.type !== b.type) {
+    return false;
+  }
+  if (a.type === 'instruction-blocked' && b.type === 'instruction-blocked') {
+    return areInstructionsEqual(a.desired, b.desired);
+  }
+  return isShallowEqual(a, b);
+}
+const memoizeInstruction = memoizeOne(instruction => instruction, ([incoming], [existing]) => areInstructionsEqual(incoming, existing));
 function applyInstructionBlock({
@@ -125,9 +145,10 @@ desired,
   const desired = getInstruction(rest);
-  const instruction = applyInstructionBlock({
+  const withBlock = applyInstructionBlock({
     desired,
     block
   });
+  const memoized = memoizeInstruction(withBlock);
   return {
     ...userData,
-    [uniqueKey]: instruction
+    [uniqueKey]: memoized
   };
@@ -134,0 +155,0 @@ }

dist/es2019/version.json

 {
 	"name": "@atlaskit/drag-and-drop-hitbox",
-	"version": "0.6.3",
+	"version": "0.7.0",
 	"sideEffects": false
 }

dist/esm/experimental/tree-item.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["block"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import memoizeOne from 'memoize-one';
 // using a symbol so we can guarantee a key with a unique value
@@ -109,5 +111,34 @@ var uniqueKey = Symbol('tree-item-instruction');
 }
-function applyInstructionBlock(_ref3) {
-  var desired = _ref3.desired,
-    block = _ref3.block;
+function isShallowEqual(a, b) {
+  var aKeys = Object.keys(a).sort();
+  var bKeys = Object.keys(b).sort();
+  if (aKeys.length !== bKeys.length) {
+    return false;
+  }
+  return aKeys.every(function (key) {
+    return a[key] === b[key];
+  });
+}
+function areInstructionsEqual(a, b) {
+  // Shortcut
+  if (a.type !== b.type) {
+    return false;
+  }
+  if (a.type === 'instruction-blocked' && b.type === 'instruction-blocked') {
+    return areInstructionsEqual(a.desired, b.desired);
+  }
+  return isShallowEqual(a, b);
+}
+var memoizeInstruction = memoizeOne(function (instruction) {
+  return instruction;
+}, function (_ref3, _ref4) {
+  var _ref5 = _slicedToArray(_ref3, 1),
+    incoming = _ref5[0];
+  var _ref6 = _slicedToArray(_ref4, 1),
+    existing = _ref6[0];
+  return areInstructionsEqual(incoming, existing);
+});
+function applyInstructionBlock(_ref7) {
+  var desired = _ref7.desired,
+    block = _ref7.block;
   if (block !== null && block !== void 0 && block.includes(desired.type) && desired.type !== 'instruction-blocked') {
@@ -122,15 +153,16 @@ var blocked = {
 }
-export function attachInstruction(userData, _ref4) {
-  var block = _ref4.block,
-    rest = _objectWithoutProperties(_ref4, _excluded);
+export function attachInstruction(userData, _ref8) {
+  var block = _ref8.block,
+    rest = _objectWithoutProperties(_ref8, _excluded);
   var desired = getInstruction(rest);
-  var instruction = applyInstructionBlock({
+  var withBlock = applyInstructionBlock({
     desired: desired,
     block: block
   });
-  return _objectSpread(_objectSpread({}, userData), {}, _defineProperty({}, uniqueKey, instruction));
+  var memoized = memoizeInstruction(withBlock);
+  return _objectSpread(_objectSpread({}, userData), {}, _defineProperty({}, uniqueKey, memoized));
 }
 export function extractInstruction(userData) {
-  var _ref5;
-  return (_ref5 = userData[uniqueKey]) !== null && _ref5 !== void 0 ? _ref5 : null;
+  var _ref9;
+  return (_ref9 = userData[uniqueKey]) !== null && _ref9 !== void 0 ? _ref9 : null;
 }

dist/esm/version.json

 {
 	"name": "@atlaskit/drag-and-drop-hitbox",
-	"version": "0.6.3",
+	"version": "0.7.0",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/drag-and-drop-hitbox",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "An addon for `@atlaskit/drag-and-drop` with helpers for attaching interaction information to a drop target when it is being dragged over",
@@ -39,3 +39,4 @@ "author": "Atlassian Pty Ltd",
     "@atlaskit/drag-and-drop": "^0.15.0",
-    "@babel/runtime": "^7.0.0"
+    "@babel/runtime": "^7.0.0",
+    "memoize-one": "^6.0.0"
   },
@@ -42,0 +43,0 @@ "peerDependencies": {},

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

Improved metrics

Total package byte prevSize

48123

increased by7.07%

Lines of code

901

increased by10.42%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedmemoize-one@^6.0.0

• + Addedmemoize-one@6.0.0(transitive)