@shopify/react-async - npm Package Compare versions

Comparing version 0.0.0-snapshot-20240308174203 to 0.0.0-snapshot-20240620045713

build/cjs/component.js

		@@ -38,3 +38,2 @@ 'use strict';
		const stylesTiming = deferred ? types.AssetTiming.CurrentPage : types.AssetTiming.Immediate;

		function Async(props) {
		@@ -54,9 +53,6 @@ const {
		} = React.useRef(reactHydrate.useHydrationManager().hydrated);

		if (error) {
		return renderError(error);
		}

		let loadingMarkup = null;

		if (progressivelyHydrated && !startedHydrated) {
		@@ -75,6 +71,4 @@ loadingMarkup = /#__PURE__/React__default["default"].createElement(Loader, {
		}

		let contentMarkup = null;
		const rendered = Component ? /#__PURE__/React__default["default"].createElement(Component, props) : null;

		if (progressivelyHydrated && !startedHydrated) {
		@@ -91,8 +85,5 @@ contentMarkup = rendered ? /#__PURE__/React__default["default"].createElement(reactHydrate.Hydrator, {
		}

		return /#__PURE__/React__default["default"].createElement(React__default["default"].Fragment, null, contentMarkup, loadingMarkup);
		}

		Async.displayName = `Async(${componentName})`;

		function usePreload(props) {
		@@ -107,3 +98,2 @@ const {
		load();

		if (customPreload) {
		@@ -114,3 +104,2 @@ customPreload();
		}

		function usePrefetch(props) {
		@@ -125,3 +114,2 @@ const {
		load();

		if (customPrefetch) {
		@@ -132,3 +120,2 @@ customPrefetch();
		}

		function useKeepFresh(props) {
		@@ -143,3 +130,2 @@ const {
		load();

		if (customKeepFresh) {
		@@ -150,3 +136,2 @@ customKeepFresh();
		}

		function Preload(options) {
		@@ -156,5 +141,3 @@ reactIdle.useIdleCallback(usePreload(options));
		}

		Preload.displayName = `Async.Preload(${displayName})`;

		function Prefetch(options) {
		@@ -167,5 +150,3 @@ const prefetch = usePrefetch(options);
		}

		Prefetch.displayName = `Async.Prefetch(${displayName})`;

		function KeepFresh(options) {
		@@ -175,3 +156,2 @@ reactIdle.useIdleCallback(useKeepFresh(options));
		}

		KeepFresh.displayName = `Async.KeepFresh(${displayName})`;
		@@ -213,14 +193,10 @@ const FinalComponent = Async;
		}

		function noopUse() {
		return () => {};
		}

		function noopRender() {
		return null;
		}

		const DEFAULT_DISPLAY_NAME = 'Component';
		const FILENAME_REGEX = /([^/]*)\.\w+$/;

		function displayNameFromId(id) {
		@@ -230,7 +206,5 @@ if (!id) {
		}

		const match = FILENAME_REGEX.exec(id);
		return match ? match[1] : DEFAULT_DISPLAY_NAME;
		}

		function defaultRenderError(error) {
		@@ -240,6 +214,4 @@ if (error) {
		}

		return null;
		}

		function Loader({
		@@ -264,7 +236,5 @@ defer,
		}, [defer, load, props]);

		if (typeof defer === 'function') {
		return null;
		}

		switch (defer) {
		@@ -275,3 +245,2 @@ case async.DeferTiming.Idle:
		});

		case async.DeferTiming.InViewport:
		@@ -282,3 +251,2 @@ return /#__PURE__/React__default["default"].createElement(reactIntersectionObserver.IntersectionObserver, {
		});

		default:
		@@ -285,0 +253,0 @@ return null;

build/cjs/context/assets.js

 @@ -23,7 +23,5 @@ 'use strict';
   used(timing = types.AssetTiming.Immediate) {
     const timingArray = Array.isArray(timing) ? timing : [timing];
     const assets = [];
     for (const [asset, {
 @@ -35,3 +33,2 @@ scripts,
       const stylesMatch = timingArray.includes(styles);
       if (stylesMatch || scriptsMatch) {
 @@ -45,6 +42,4 @@ assets.push({
     return assets;
   markAsUsed(id, timing = types.AssetTiming.Immediate) {
 @@ -54,3 +49,2 @@ const current = this.assets.get(id);
     const styles = typeof timing === 'object' ? timing.styles : timing;
     if (current == null) {
 @@ -73,3 +67,2 @@ this.assets.set(id, {
 @@ -76,0 +69,0 @@ const AsyncAssetContext = /*#__PURE__*/React__default["default"].createContext(null);

build/cjs/context/prefetch.js

 @@ -15,3 +15,2 @@ 'use strict';
   register(registration) {
 @@ -21,3 +20,2 @@ this.registered.add(registration);
 @@ -24,0 +22,0 @@ const PrefetchContext = /*#__PURE__*/React__default["default"].createContext(new PrefetchManager());

build/cjs/EventListener.js

		@@ -16,3 +16,2 @@ 'use strict';
		}

		componentDidUpdate({
		@@ -25,11 +24,8 @@ passive,
		}

		componentWillUnmount() {
		this.detachListener();
		}

		render() {
		return null;
		}

		attachListener() {
		@@ -47,3 +43,2 @@ const {
		}

		detachListener(prevProps) {
		@@ -57,5 +52,4 @@ const {
		}

		}

		exports.EventListener = EventListener;

build/cjs/hooks.js

		@@ -34,6 +34,4 @@ 'use strict';
		}

		try {
		const resolved = await resolver.resolve();

		if (mounted.current) {
		@@ -48,3 +46,2 @@ // It's important to use the function form of setValue here.
		}

		return resolved;
		@@ -55,3 +52,2 @@ } catch (error) {
		}

		return error;
		@@ -58,0 +54,0 @@ }

build/cjs/Prefetcher.js

		@@ -15,3 +15,2 @@ 'use strict';
		const SENSITIVITY = 15;

		class ConnectedPrefetcher extends React__default["default"].PureComponent {
		@@ -22,7 +21,8 @@ constructor(...args) {
		this.prefetchAgressively = shouldPrefetchAggressively();
		// Initial position of the mouse
		this.iX = 0;
		this.iY = 0;
		// Final position of the mouse
		this.fX = 0;
		this.fY = 0;

		this.handleMouseMove = ({
		@@ -35,3 +35,2 @@ clientX,
		};

		this.handlePressStart = ({
		@@ -41,9 +40,6 @@ target
		this.clearTimeout();

		if (target == null) {
		return;
		}

		const url = closestUrlFromNode(target);

		if (url != null) {
		@@ -55,3 +51,2 @@ this.setState({
		};

		this.compare = url => {
		@@ -62,5 +57,5 @@ const {
		} = this;
		this.clearTimeout(); // Calculate the change of the mouse position
		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) {
		@@ -76,3 +71,2 @@ this.setState({
		};

		this.handlePointerLeave = ({
		@@ -89,3 +83,2 @@ target,
		} = this;

		if (target == null) {
		@@ -95,17 +88,12 @@ if (timeout) {
		}

		return;
		}

		if (url == null && timeout == null) {
		return;
		}

		const closestUrl = closestUrlFromNode(target);
		const relatedUrl = relatedTarget && closestUrlFromNode(relatedTarget);

		if (timeout != null && urlsEqual(closestUrl, timeoutUrl) && !urlsEqual(relatedUrl, timeoutUrl)) {
		this.clearTimeout();
		}

		if (urlsEqual(closestUrl, url) && !urlsEqual(relatedUrl, url)) {
		@@ -117,3 +105,2 @@ this.setState({
		};

		this.handlePointerEnter = event => {
		@@ -123,7 +110,5 @@ const {
		} = event;

		if (target == null) {
		return;
		}

		const {
		@@ -134,7 +119,5 @@ timeoutUrl,
		const url = closestUrlFromNode(target);

		if (url == null) {
		return;
		}

		if (timeout) {
		@@ -147,8 +130,6 @@ if (urlsEqual(url, timeoutUrl)) {
		}

		this.timeoutUrl = url; // If the event is a mouse event, record initial mouse position upon entering the element

		this.timeoutUrl = url;
		// If the event is a mouse event, record initial mouse position upon entering the element
		this.timeout = setTimeout(() => {
		this.clearTimeout();

		if ('clientX' in event && 'clientY' in event) {
		@@ -164,3 +145,2 @@ this.compare(url);
		}

		render() {
		@@ -217,3 +197,2 @@ const {
		}

		clearTimeout() {
		@@ -226,5 +205,3 @@ if (this.timeout != null) {
		}

		}

		function Prefetcher(props) {
		@@ -235,11 +212,8 @@ return /#__PURE__/React__default["default"].createElement(prefetch.PrefetchContext.Consumer, null, manager => /#__PURE__/React__default["default"].createElement(ConnectedPrefetcher, Object.assign({}, props, {
		}

		function shouldPrefetchAggressively() {
		return typeof navigator === 'undefined' \|\| !('connection' in navigator) \|\| !navigator.connection.saveData;
		}

		function urlsEqual(first, second) {
		return first == null && first === second \|\| first != null && second != null && first.href === second.href;
		}

		function findMatches(records, url) {
		@@ -250,21 +224,16 @@ return [...records].filter(({
		}

		function matches(url, matcher) {
		return typeof matcher === 'string' ? matcher === url.pathname : matcher.test(url.pathname);
		}

		function closestUrlFromNode(element) {
		if (!(element instanceof HTMLElement)) {
		return undefined;
		} // data-href is a hack for resource list doing the <a> as a sibling
		}


		// data-href is a hack for resource list doing the <a> as a sibling
		const closestUrl = element.closest('[href], [data-href]');

		if (closestUrl == null \|\| !(closestUrl instanceof HTMLElement)) {
		return undefined;
		}

		const url = closestUrl.getAttribute('href') \|\| closestUrl.getAttribute('data-href');

		try {
		@@ -271,0 +240,0 @@ return url ? new URL(url, window.location.href) : undefined;

build/cjs/PrefetchRoute.js

		@@ -24,3 +24,2 @@ 'use strict';
		}

		componentWillUnmount() {
		@@ -31,9 +30,6 @@ if (this.unregister) {
		}

		render() {
		return null;
		}

		}

		function PrefetchRoute(props) {
		@@ -40,0 +36,0 @@ return /#__PURE__/React__default["default"].createElement(prefetch.PrefetchContext.Consumer, null, manager => /#__PURE__/React__default["default"].createElement(ConnectedPrefetchRoute, Object.assign({

build/cjs/provider.js

		@@ -23,10 +23,10 @@ 'use strict';
		});
		const Context = /#__PURE__/React__default["default"].createContext(null); // Just like a "normal" value returned from `createContext`, rendering
		const Context = /#__PURE__/React__default["default"].createContext(null);

		// Just like a "normal" value returned from `createContext`, rendering
		// the value itself is not supported. This component is just a placeholder
		// to provide a more useful error.

		function Root() {
		throw new Error('Do not attempt to render the result of calling `createAsyncContext()` directly. Render its `.Provider` component instead.');
		}

		function Provider(props) {
		@@ -46,7 +46,5 @@ const {
		}

		function Consumer(props) {
		return /#__PURE__/React__default["default"].createElement(Context.Consumer, props);
		}

		function usePreload() {
		@@ -57,3 +55,2 @@ return hooks.useAsync(resolver, {
		}

		function Preload() {
		@@ -64,3 +61,2 @@ const preload = usePreload();
		}

		function Prefetch() {
		@@ -73,3 +69,2 @@ const preload = usePreload();
		}

		const FinalComponent = Root;
		@@ -76,0 +71,0 @@ Reflect.defineProperty(FinalComponent, 'resolver', {

build/cjs/types.js

		@@ -6,3 +6,2 @@ 'use strict';
		exports.AssetTiming = void 0;

		(function (AssetTiming) {
		@@ -9,0 +8,0 @@ AssetTiming[AssetTiming["None"] = 1] = "None";

package.json

		{
		"name": "@shopify/react-async",
		"version": "0.0.0-snapshot-20240308174203",
		"version": "0.0.0-snapshot-20240620045713",
		"license": "MIT",
		@@ -31,15 +31,15 @@ "description": "Tools for creating powerful, asynchronously-loaded React components",
		"engines": {
		"node": "^14.17.0 \|\| >=16.0.0"
		"node": ">=18.12.0"
		},
		"dependencies": {
		"@shopify/async": "^4.0.3",
		"@shopify/react-effect": "^5.0.3",
		"@shopify/react-hooks": "0.0.0-snapshot-20240308174203",
		"@shopify/react-hydrate": "0.0.0-snapshot-20240308174203",
		"@shopify/react-idle": "^3.1.2",
		"@shopify/react-intersection-observer": "^4.0.4",
		"@shopify/useful-types": "^5.1.2"
		"@shopify/async": "^4.1.0",
		"@shopify/react-effect": "0.0.0-snapshot-20240620045713",
		"@shopify/react-hooks": "0.0.0-snapshot-20240620045713",
		"@shopify/react-hydrate": "0.0.0-snapshot-20240620045713",
		"@shopify/react-idle": "^3.2.0",
		"@shopify/react-intersection-observer": "^4.1.0",
		"@shopify/useful-types": "0.0.0-snapshot-20240620045713"
		},
		"peerDependencies": {
		"react": ">=16.8.0 <19.0.0"
		"react": ">=18.0.0 <19.0.0"
		},
		@@ -46,0 +46,0 @@ "files": [

build/esm/component.mjs