@shopify/react-async - npm Package Compare versions

Comparing version 5.1.1 to 5.2.0

build/cjs/Prefetcher.js

@@ -14,2 +14,3 @@ 'use strict';
 const INTENTION_DELAY_MS = 150;
+const SENSITIVITY = 15;
 
@@ -23,3 +24,15 @@ class ConnectedPrefetcher extends React__default["default"].PureComponent {
     this.prefetchAgressively = shouldPrefetchAggressively();
+    this.iX = 0;
+    this.iY = 0;
+    this.fX = 0;
+    this.fY = 0;
 
+    this.handleMouseMove = ({
+      clientX,
+      clientY
+    }) => {
+      this.iX = clientX;
+      this.iY = clientY;
+    };
+
     this.handlePressStart = ({
@@ -43,2 +56,21 @@ target
 
+    this.compare = url => {
+      const {
+        iX,
+        iY
+      } = this;
+      this.clearTimeout(); // Calculate the change of the mouse position
+      // If it is smaller than the sensitivity, we can assume that the user is intending on visiting the link
+
+      if (Math.hypot(this.fX - iX, this.fY - iY) < SENSITIVITY) {
+        this.setState({
+          url
+        });
+      } else {
+        this.fX = iX;
+        this.fY = iY;
+        this.timeout = setTimeout(() => this.compare(url), INTENTION_DELAY_MS);
+      }
+    };
+
     this.handlePointerLeave = ({
@@ -82,5 +114,7 @@ target,
 
-    this.handlePointerEnter = ({
-      target
-    }) => {
+    this.handlePointerEnter = event => {
+      const {
+        target
+      } = event;
+
       if (target == null) {
@@ -108,8 +142,14 @@ return;
 
-      this.timeoutUrl = url;
+      this.timeoutUrl = url; // If the event is a mouse event, record initial mouse position upon entering the element
+
       this.timeout = setTimeout(() => {
         this.clearTimeout();
-        this.setState({
-          url
-        });
+
+        if ('clientX' in event && 'clientY' in event) {
+          this.compare(url);
+        } else {
+          this.setState({
+            url
+          });
+        }
       }, INTENTION_DELAY_MS);
@@ -155,2 +195,6 @@ };
       handler: this.handlePointerLeave
+    }), /*#__PURE__*/React__default["default"].createElement(EventListener.EventListener, {
+      passive: true,
+      event: "mousemove",
+      handler: this.handleMouseMove
     })) : null;
@@ -225,1 +269,2 @@ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(EventListener.EventListener, {
 exports.Prefetcher = Prefetcher;
+exports.SENSITIVITY = SENSITIVITY;

build/ts/Prefetcher.d.ts

@@ -7,4 +7,5 @@ /// <reference types="react" />
 export declare const INTENTION_DELAY_MS = 150;
+export declare const SENSITIVITY = 15;
 export declare function Prefetcher(props: Omit<Props, 'manager'>): JSX.Element;
 export {};
 //# sourceMappingURL=Prefetcher.d.ts.map

package.json

 {
   "name": "@shopify/react-async",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Tools for creating powerful, asynchronously-loaded React components",

No alert changes

Improved metrics

Total package byte prevSize

113432

3.26%

Lines of code

1870

4.35%

No dependency changes