@shopify/react-async - npm Package Compare versions

Comparing version 0.0.0-snapshot-20230206232325 to 0.0.0-snapshot-20230425154318

build/cjs/context/prefetch.js

@@ -13,3 +13,2 @@ 'use strict';
   constructor(registered) {
-    this.registered = void 0;
     this.registered = new Set(registered);
@@ -16,0 +15,0 @@ }

build/cjs/Prefetcher.js

@@ -14,2 +14,3 @@ 'use strict';
 const INTENTION_DELAY_MS = 150;
+const SENSITIVITY = 15;
 
@@ -20,6 +21,16 @@ class ConnectedPrefetcher extends React__default["default"].PureComponent {
     this.state = {};
-    this.timeout = void 0;
-    this.timeoutUrl = void 0;
     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 +54,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 +112,7 @@ target,
 
-    this.handlePointerEnter = ({
-      target
-    }) => {
+    this.handlePointerEnter = event => {
+      const {
+        target
+      } = event;
+
       if (target == null) {
@@ -108,8 +140,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 +193,6 @@ };
       handler: this.handlePointerLeave
+    }), /*#__PURE__*/React__default["default"].createElement(EventListener.EventListener, {
+      passive: true,
+      event: "mousemove",
+      handler: this.handleMouseMove
     })) : null;
@@ -225,1 +267,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/cjs/PrefetchRoute.js

@@ -13,7 +13,2 @@ 'use strict';
 class ConnectedPrefetchRoute extends React__default["default"].Component {
-  constructor(...args) {
-    super(...args);
-    this.unregister = void 0;
-  }
-
   componentDidMount() {
@@ -20,0 +15,0 @@ const {

build/ts/component.d.ts

@@ -1,4 +0,5 @@
-import { ReactNode, ComponentType } from 'react';
-import { ResolverOptions, DeferTiming } from '@shopify/async';
-import { AsyncComponentType } from './types';
+import type { ReactNode, ComponentType } from 'react';
+import type { ResolverOptions } from '@shopify/async';
+import { DeferTiming } from '@shopify/async';
+import type { AsyncComponentType } from './types';
 interface Options<Props extends object, PreloadOptions extends object = {}, PrefetchOptions extends object = {}, KeepFreshOptions extends object = {}> extends ResolverOptions<ComponentType<Props>> {
@@ -5,0 +6,0 @@ defer?: DeferTiming | ((props: Props) => boolean);

build/ts/context/assets.d.ts

 import React from 'react';
-import { EffectKind } from '@shopify/react-effect';
+import type { EffectKind } from '@shopify/react-effect';
 import { AssetTiming } from '../types';
@@ -4,0 +4,0 @@ export interface AssetSelector {

build/ts/hooks.d.ts

@@ -1,4 +0,4 @@
-import { Resolver } from '@shopify/async';
-import { IfAllOptionalKeys, NoInfer } from '@shopify/useful-types';
-import { AssetTiming, AsyncComponentType } from './types';
+import type { Resolver } from '@shopify/async';
+import type { IfAllOptionalKeys, NoInfer } from '@shopify/useful-types';
+import type { AssetTiming, AsyncComponentType } from './types';
 export type Preloadable<PreloadOptions extends object> = Pick<AsyncComponentType<any, any, PreloadOptions, any, any>, 'usePreload'>;
@@ -13,3 +13,3 @@ export type Prefetchable<PrefetchOptions extends object> = Pick<AsyncComponentType<any, any, any, PrefetchOptions, any>, 'usePrefetch'>;
     NoInfer<PreloadOptions>
-]>): ReturnType<typeof args[0]['usePreload']>;
+]>): ReturnType<(typeof args)[0]['usePreload']>;
 export declare function usePrefetch<PrefetchOptions extends object>(...args: IfAllOptionalKeys<PrefetchOptions, [
@@ -21,3 +21,3 @@ Prefetchable<PrefetchOptions>,
     NoInfer<PrefetchOptions>
-]>): ReturnType<typeof args[0]['usePrefetch']>;
+]>): ReturnType<(typeof args)[0]['usePrefetch']>;
 export declare function useKeepFresh<KeepFreshOptions extends object>(...args: IfAllOptionalKeys<KeepFreshOptions, [
@@ -29,3 +29,3 @@ KeepFreshable<KeepFreshOptions>,
     NoInfer<KeepFreshOptions>
-]>): ReturnType<typeof args[0]['useKeepFresh']>;
+]>): ReturnType<(typeof args)[0]['useKeepFresh']>;
 interface Options {
@@ -32,0 +32,0 @@ immediate?: boolean;

build/ts/Prefetcher.d.ts

 /// <reference types="react" />
-import { PrefetchManager } from './context/prefetch';
+import type { PrefetchManager } from './context/prefetch';
 interface Props {
@@ -7,4 +7,5 @@ manager: PrefetchManager;
 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

build/ts/PrefetchRoute.d.ts

 import React from 'react';
-import { PrefetchManager } from './context/prefetch';
+import type { PrefetchManager } from './context/prefetch';
 interface Props {
@@ -4,0 +4,0 @@ manager: PrefetchManager;

build/ts/provider.d.ts

@@ -1,4 +0,5 @@
-import React, { Context, ComponentType } from 'react';
-import { ResolverOptions } from '@shopify/async';
-import { AsyncComponentType } from './types';
+import type { Context, ComponentType } from 'react';
+import React from 'react';
+import type { ResolverOptions } from '@shopify/async';
+import type { AsyncComponentType } from './types';
 interface Options<Value> extends ResolverOptions<Value> {
@@ -5,0 +6,0 @@ }

build/ts/testing.d.ts

@@ -1,4 +0,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { AsyncAssetManager } from './context/assets';
 export declare function getUsedAssets(element: ReactElement<unknown>, ...args: Parameters<AsyncAssetManager['used']>): Promise<import("./context/assets").AssetSelector[]>;
 //# sourceMappingURL=testing.d.ts.map

build/ts/types.d.ts

@@ -1,4 +0,4 @@
-import { ReactElement } from 'react';
-import { Resolver } from '@shopify/async';
-import { IfAllOptionalKeys, NoInfer } from '@shopify/useful-types';
+import type { ReactElement } from 'react';
+import type { Resolver } from '@shopify/async';
+import type { IfAllOptionalKeys, NoInfer } from '@shopify/useful-types';
 export declare enum AssetTiming {
@@ -5,0 +5,0 @@ None = 1,

index.js

@@ -1,1 +0,1 @@
-module.exports = require("./build/cjs/index.js");
+module.exports = require("./build/cjs/index.js");

package.json

 {
   "name": "@shopify/react-async",
-  "version": "0.0.0-snapshot-20230206232325",
+  "version": "0.0.0-snapshot-20230425154318",
   "license": "MIT",
@@ -34,9 +34,9 @@ "description": "Tools for creating powerful, asynchronously-loaded React components",
   "dependencies": {
-    "@shopify/async": "^4.0.1",
-    "@shopify/react-effect": "^5.0.2",
-    "@shopify/react-hooks": "^3.0.2",
-    "@shopify/react-hydrate": "^3.0.6",
-    "@shopify/react-idle": "0.0.0-snapshot-20230206232325",
-    "@shopify/react-intersection-observer": "^4.0.2",
-    "@shopify/useful-types": "^5.1.1"
+    "@shopify/async": "^4.0.3",
+    "@shopify/react-effect": "^5.0.3",
+    "@shopify/react-hooks": "0.0.0-snapshot-20230425154318",
+    "@shopify/react-hydrate": "0.0.0-snapshot-20230425154318",
+    "@shopify/react-idle": "^3.1.2",
+    "@shopify/react-intersection-observer": "^4.0.4",
+    "@shopify/useful-types": "^5.1.2"
   },
@@ -43,0 +43,0 @@ "peerDependencies": {

testing.js

@@ -1,1 +0,1 @@
-module.exports = require("./build/cjs/testing.js");
+module.exports = require("./build/cjs/testing.js");

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

113303

increased by3.1%

Lines of code

1858

increased by3.91%

Dependency changes

• + Added@shopify/react-hooks@0.0.0-snapshot-20230425154318(transitive)

• + Added@shopify/react-hydrate@0.0.0-snapshot-20230425154318(transitive)

• + Added@shopify/react-idle@3.2.0(transitive)

• - Removed@shopify/react-hooks@3.2.04.1.2(transitive)

• - Removed@shopify/react-hydrate@3.1.4(transitive)

• - Removed@shopify/react-idle@0.0.0-snapshot-20230206232325(transitive)

• Updated@shopify/async@^4.0.3

• Updated@shopify/react-effect@^5.0.3

• Updated@shopify/react-hooks@0.0.0-snapshot-20230425154318

• Updated@shopify/react-hydrate@0.0.0-snapshot-20230425154318

• Updated@shopify/react-idle@^3.1.2

• Updated@shopify/react-intersection-observer@^4.0.4

• Updated@shopify/useful-types@^5.1.2