@shopify/react-intersection-observer - npm Package Compare versions

Comparing version 2.1.3 to 2.1.4

build/ts/hooks.js

@@ -1,10 +0,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useValueTracking = exports.useIntersection = void 0;
-var tslib_1 = require("tslib");
 /* eslint-disable react-hooks/exhaustive-deps */
-var react_1 = require("react");
-var utilities_1 = require("./utilities");
-var types_1 = require("./types");
-var emptyBoundingClientRect = {
+import { useState, useRef, useEffect } from 'react';
+import { isSupported } from './utilities';
+import { UnsupportedBehavior } from './types';
+const emptyBoundingClientRect = {
     bottom: 0,
@@ -18,11 +14,10 @@ height: 0,
     y: 0,
-    toJSON: function () { },
+    toJSON: () => { },
 };
-function useIntersection(_a) {
-    var _b = _a === void 0 ? {} : _a, root = _b.root, rootMargin = _b.rootMargin, threshold = _b.threshold, _c = _b.unsupportedBehavior, unsupportedBehavior = _c === void 0 ? types_1.UnsupportedBehavior.TreatAsIntersecting : _c;
-    var node = react_1.useRef(null);
-    var lastNode = react_1.useRef(null);
-    var observer = react_1.useRef(null);
-    var lastObserver = react_1.useRef(null);
-    var _d = tslib_1.__read(react_1.useState(function () { return ({
+export function useIntersection({ root, rootMargin, threshold, unsupportedBehavior = UnsupportedBehavior.TreatAsIntersecting, } = {}) {
+    const node = useRef(null);
+    const lastNode = useRef(null);
+    const observer = useRef(null);
+    const lastObserver = useRef(null);
+    const [intersectionEntry, setIntersectingEntry] = useState(() => ({
         boundingClientRect: emptyBoundingClientRect,
@@ -35,18 +30,15 @@ intersectionRatio: 0,
         time: Date.now(),
-    }); }), 2), intersectionEntry = _d[0], setIntersectingEntry = _d[1];
-    react_1.useEffect(function () {
-        if (!utilities_1.isSupported()) {
+    }));
+    useEffect(() => {
+        if (!isSupported()) {
             return;
         }
-        var resolvedRoot = typeof root === 'string' ? document.querySelector(root) : root;
-        var intersectionObserver = new IntersectionObserver(function (_a) {
-            var _b = tslib_1.__read(_a, 1), entry = _b[0];
-            return setIntersectingEntry(entry);
-        }, {
+        const resolvedRoot = typeof root === 'string' ? document.querySelector(root) : root;
+        const intersectionObserver = new IntersectionObserver(([entry]) => setIntersectingEntry(entry), {
             root: resolvedRoot,
-            rootMargin: rootMargin,
-            threshold: threshold,
+            rootMargin,
+            threshold,
         });
         observer.current = intersectionObserver;
-        return function () {
+        return () => {
             intersectionObserver.disconnect();
@@ -59,3 +51,3 @@ };
     ]);
-    react_1.useEffect(function () {
+    useEffect(() => {
         if (lastNode.current === node.current &&
@@ -69,7 +61,7 @@ lastObserver.current === observer.current) {
         }
-        if (!utilities_1.isSupported() &&
-            unsupportedBehavior === types_1.UnsupportedBehavior.TreatAsIntersecting) {
-            var boundingClientRect = node.current.getBoundingClientRect();
+        if (!isSupported() &&
+            unsupportedBehavior === UnsupportedBehavior.TreatAsIntersecting) {
+            const boundingClientRect = node.current.getBoundingClientRect();
             setIntersectingEntry({
-                boundingClientRect: boundingClientRect,
+                boundingClientRect,
                 intersectionRatio: 1,
@@ -88,3 +80,3 @@ intersectionRect: boundingClientRect,
         }
-        return function () {
+        return () => {
             if (lastNode.current == null ||
@@ -101,6 +93,5 @@ lastObserver.current == null ||
 }
-exports.useIntersection = useIntersection;
-function useValueTracking(value, onChange) {
-    var tracked = react_1.useRef(value);
-    var oldValue = tracked.current;
+export function useValueTracking(value, onChange) {
+    const tracked = useRef(value);
+    const oldValue = tracked.current;
     if (value !== oldValue) {
@@ -111,3 +102,2 @@ tracked.current = value;
 }
-exports.useValueTracking = useValueTracking;
 /* eslint-enable react-hooks/exhaustive-deps */

build/ts/index.js

@@ -1,8 +0,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var IntersectionObserver_1 = require("./IntersectionObserver");
-Object.defineProperty(exports, "IntersectionObserver", { enumerable: true, get: function () { return IntersectionObserver_1.IntersectionObserver; } });
-var types_1 = require("./types");
-Object.defineProperty(exports, "UnsupportedBehavior", { enumerable: true, get: function () { return types_1.UnsupportedBehavior; } });
-var hooks_1 = require("./hooks");
-Object.defineProperty(exports, "useIntersection", { enumerable: true, get: function () { return hooks_1.useIntersection; } });
+export { IntersectionObserver } from './IntersectionObserver';
+export { UnsupportedBehavior } from './types';
+export { useIntersection } from './hooks';

build/ts/IntersectionObserver.js

@@ -1,17 +0,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntersectionObserver = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
-var hooks_1 = require("./hooks");
-exports.IntersectionObserver = react_1.default.memo(function IntersectionObserver(_a) {
-    var children = _a.children, root = _a.root, rootMargin = _a.rootMargin, threshold = _a.threshold, unsupportedBehavior = _a.unsupportedBehavior, _b = _a.wrapperComponent, Wrapper = _b === void 0 ? 'div' : _b, onIntersectionChange = _a.onIntersectionChange;
-    var _c = tslib_1.__read(hooks_1.useIntersection({
-        root: root,
-        rootMargin: rootMargin,
-        threshold: threshold,
-        unsupportedBehavior: unsupportedBehavior,
-    }), 2), intersection = _c[0], ref = _c[1];
-    hooks_1.useValueTracking(intersection, function (newValue) { return onIntersectionChange(newValue); });
-    return react_1.default.createElement(Wrapper, { ref: ref }, children);
+import React from 'react';
+import { useIntersection, useValueTracking } from './hooks';
+export const IntersectionObserver = React.memo(function IntersectionObserver({ children, root, rootMargin, threshold, unsupportedBehavior, wrapperComponent: Wrapper = 'div', onIntersectionChange, }) {
+    const [intersection, ref] = useIntersection({
+        root,
+        rootMargin,
+        threshold,
+        unsupportedBehavior,
+    });
+    useValueTracking(intersection, newValue => onIntersectionChange(newValue));
+    return React.createElement(Wrapper, { ref }, children);
 });

build/ts/types.js

@@ -1,8 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UnsupportedBehavior = void 0;
-var UnsupportedBehavior;
+export var UnsupportedBehavior;
 (function (UnsupportedBehavior) {
     UnsupportedBehavior[UnsupportedBehavior["Ignore"] = 0] = "Ignore";
     UnsupportedBehavior[UnsupportedBehavior["TreatAsIntersecting"] = 1] = "TreatAsIntersecting";
-})(UnsupportedBehavior = exports.UnsupportedBehavior || (exports.UnsupportedBehavior = {}));
+})(UnsupportedBehavior || (UnsupportedBehavior = {}));

build/ts/utilities.js

@@ -1,5 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isSupported = void 0;
-function isSupported() {
+export function isSupported() {
     return (typeof window !== 'undefined' &&
@@ -10,2 +7,1 @@ 'IntersectionObserver' in window &&
 }
-exports.isSupported = isSupported;

CHANGELOG.md

@@ -8,4 +8,12 @@ # Changelog
 
-## [2.1.2] - 2021-03-03
+<!-- ## Unreleased -->
 
+## 2.1.4 - 2021-04-13
+
+### Changed
+
+- Removed dependency on tslib, as we no-longer compile with `tsc`. [#1829](https://github.com/Shopify/quilt/pull/1829)
+
+## 2.1.2 - 2021-03-03
+
 ### Fixed
@@ -15,3 +23,3 @@
 
-## [2.1.0] - 2020-12-18
+## 2.1.0 - 2020-12-18
 
@@ -22,11 +30,11 @@ ### Added
 
-## [2.0.16] - 2020-10-20
+## 2.0.16 - 2020-10-20
 
 - Added `tslib@^1.14.1` in the list of dependencies. [#1657](https://github.com/Shopify/quilt/pull/1657)
 
-## [2.0.8] - 2019-10-31
+## 2.0.8 - 2019-10-31
 
 - Change `useIntersection` hook behaviour to set and distribute the `IntersectionObserverEntry` object directly
 
-## [2.0.0] - 2019-04-09
+## 2.0.0 - 2019-04-09
 
@@ -39,4 +47,4 @@ This library now requires React 16.8.
 
-## [1.0.0]
+## 1.0.0
 
 Initial release.

index.js

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

package.json

 {
   "name": "@shopify/react-intersection-observer",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "license": "MIT",
@@ -8,5 +8,2 @@ "description": "A React wrapper around the Intersection Observer API",
   "types": "index.d.ts",
-  "scripts": {
-    "build": "tsc --p tsconfig.json"
-  },
   "sideEffects": false,
@@ -47,6 +44,3 @@ "publishConfig": {
     }
-  },
-  "dependencies": {
-    "tslib": "^1.14.1"
   }
 }

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

Dependency count

1

decreased by-50%

Worsened metrics

Total package byte prevSize

42064

decreased by-4.01%

Lines of code

669

decreased by-3.88%

Dependency changes

• - Removedtslib@^1.14.1

• - Removedtslib@1.14.1(transitive)