fix: optimize observers code (#385)

Author: thebuilder

package.json

@@ -146,7 +146,7 @@
     "@storybook/react": "^6.0.21",
     "@storybook/theming": "^6.0.21",
     "@testing-library/jest-dom": "^5.5.0",
-    "@testing-library/react": "^10.0.2",
+    "@testing-library/react": "^11.0.2",
     "@types/jest": "^26.0.12",
     "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.6",
@@ -165,7 +165,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.1.0",
-    "framer-motion": "^2.6.5",
+    "framer-motion": "^2.6.10",
     "husky": "^4.2.5",
     "intersection-observer": "^0.11.0",
     "jest": "^26.4.2",

src/observers.ts

@@ -31,17 +31,14 @@ function getRootId(root?: Element | null) {
  * @param options
  */
 export function optionsToId(options: IntersectionObserverInit) {
-  const values = Object.keys(options)
+  return Object.keys(options)
     .sort()
     .map((key) => {
-      let value = options[key];
-      if (key === 'root') {
-        value = getRootId(options.root);
-      }
-      return `${key}_${value}`;
-    });
-
-  return values.join('|');
+      return `${key}_${
+        key === 'root' ? getRootId(options.root) : options[key]
+      }`;
+    })
+    .join('|');
 }
 
 function createObserver(options: IntersectionObserverInit) {
@@ -57,13 +54,11 @@ function createObserver(options: IntersectionObserverInit) {
       entries.forEach((entry) => {
         // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.
         // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0
-        const inView = observer.thresholds.some((threshold) => {
-          return !entry.isIntersecting
-            ? // The intersectionRatio should be more than the threshold to be considered inside the viewport
-              entry.intersectionRatio > threshold
-            : // If we're not intersecting, make sure we accept `intersectionRatio` 0 as not inside the viewport
-              entry.intersectionRatio >= threshold;
-        });
+        const inView =
+          entry.isIntersecting &&
+          observer.thresholds.some(
+            (threshold) => entry.intersectionRatio > threshold,
+          );
 
         // @ts-ignore support IntersectionObserver v2
         if (options.trackVisibility && typeof entry.isVisible === 'undefined') {
@@ -73,7 +68,7 @@ function createObserver(options: IntersectionObserverInit) {
         }
 
         elements.get(entry.target)?.forEach((callback) => {
-          callback(inView && entry.isIntersecting, entry);
+          callback(inView, entry);
         });
       });
     }, options);

yarn.lock

@@ -1034,7 +1034,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -2067,7 +2067,7 @@
     "@svgr/plugin-svgo" "^5.4.0"
     loader-utils "^2.0.0"
 
-"@testing-library/dom@^7.22.3":
+"@testing-library/dom@^7.23.0":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.24.1.tgz#0e8acd042070f2c1b183fbfe5c0d38b3194ad3c0"
   integrity sha512-TemHWY59gvzcScGiE5eooZpzYk9GaED0TuuK4WefbIc/DQg0L5wOpnj7MIEeAGF3B7Ekf1kvmVnQ97vwz4Lmhg==
@@ -2094,13 +2094,13 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react@^10.0.2":
-  version "10.4.9"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.4.9.tgz#9faa29c6a1a217bf8bbb96a28bd29d7a847ca150"
-  integrity sha512-pHZKkqUy0tmiD81afs8xfiuseXfU/N7rAX3iKjeZYje86t9VaB0LrxYVa+OOsvkrveX5jCK3IjajVn2MbePvqA==
+"@testing-library/react@^11.0.2":
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.0.2.tgz#4588cc537085907bd1d98b531eb247dbbf57b1cc"
+  integrity sha512-iOuNNHt4ZgMH5trSKC4kaWDcKzUOf7e7KQIcu7xvGCd68/w1EegbW89F9T5sZ4IjS0gAXdvOfZbG9ESZ7YjOug==
   dependencies:
-    "@babel/runtime" "^7.10.3"
-    "@testing-library/dom" "^7.22.3"
+    "@babel/runtime" "^7.11.2"
+    "@testing-library/dom" "^7.23.0"
 
 "@types/anymatch@*":
   version "1.3.1"
@@ -6132,14 +6132,14 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-framer-motion@^2.6.5:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.6.9.tgz#6eee59a70e3715d2ec621bb41efd426736096c6e"
-  integrity sha512-BGKqzF7dt1i7myy6GtxfhLVoKvDwjVPk/YpxGiAKkR6WpsoIzQB5NdbwgAxe+soDHXtDEaukh53lt+dLXFg5Wg==
+framer-motion@^2.6.10:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.6.10.tgz#fe34f1961320874ddb9fc9e8fc7b7812d400e721"
+  integrity sha512-FXJCjntZoxl9wpCVJOsqZ8JvmiqvMZ/tgZrgI0IHfJ88RFnDH+rMjVwkYBILRZREJPjIz2MKPDSs43rabBdxcA==
   dependencies:
     framesync "^4.1.0"
     hey-listen "^1.0.8"
-    popmotion "9.0.0-rc.13"
+    popmotion "9.0.0-rc.14"
     style-value-types "^3.1.9"
     tslib "^1.10.0"
   optionalDependencies:
@@ -9527,10 +9527,10 @@ polished@^3.4.4:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
-[email protected].13:
-  version "9.0.0-rc.13"
-  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.13.tgz#0280968fb0dc3bd273cc3dbd4da24b01b6cfbcce"
-  integrity sha512-M8Ksx2THYrAUrptE5Ydd3jazQAMoXxqpClR/K8xK87v4UrJUTCb39kNar/ucJ4Rs7qPqPdVu+iqPKOJhpMylXQ==
+[email protected].14:
+  version "9.0.0-rc.14"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.14.tgz#e57351b7b85a3e42b7a16affbbd440138797c11f"
+  integrity sha512-zdMw1OSKjFBH+KKpZx7P+cGSUb3QCqg5QD12f6llucUeEFT+SDZYxvTY09JI23ZcJyzxgKFT1anbLq0eZ9bj3g==
   dependencies:
     framesync "^4.1.0"
     hey-listen "^1.0.8"