@code-hike/scroller - npm Package Compare versions

Comparing version 0.0.0-4adbd70 to 0.0.0-6a4ea1c

dist/index.cjs.js

@@ -66,16 +66,96 @@ 'use strict';
 
-var ObserverContext = React__default['default'].createContext(undefined);
+function debugEntries(entries) {
+    entries.forEach(showEntry);
+}
+function showEntry(entry) {
+    var _a;
+    var rootHeight = ((_a = entry.rootBounds) === null || _a === void 0 ? void 0 : _a.height) || 0;
+    addFlashingRect(entry.rootBounds, {
+        border: Math.min(10, rootHeight / 2) + "px solid " + iodOptions.rootColor,
+        overflow: "hidden",
+        boxSizing: "border-box",
+    });
+    addFlashingRect(entry.boundingClientRect, {
+        border: Math.min(10, entry.boundingClientRect.height / 2) + "px solid " + (entry.isIntersecting
+            ? iodOptions.enterColor
+            : iodOptions.exitColor),
+        overflow: "hidden",
+        boxSizing: "border-box",
+    });
+    addFlashingRect(entry.intersectionRect, {
+        backgroundColor: iodOptions.interColor,
+        zIndex: 2,
+    });
+}
+function addFlashingRect(bounds, style) {
+    if (style === void 0) { style = {}; }
+    var width = bounds.width, left = bounds.left, height = bounds.height, top = bounds.top;
+    var div = document.createElement("div");
+    div.style.position = "fixed";
+    div.style.width = width + "px";
+    div.style.left = left + "px";
+    div.style.top = top + "px";
+    div.style.height = height + "px";
+    div.style.pointerEvents = "none";
+    div.style.transition = "opacity 2s ease-in";
+    Object.assign(div.style, style);
+    requestAnimationFrame(function () {
+        return requestAnimationFrame(function () {
+            div.style.opacity = "0";
+        });
+    });
+    div.addEventListener("transitionend", function () {
+        document.body.removeChild(div);
+    });
+    document.body.appendChild(div);
+    return div;
+}
+var iodOptions = {
+    rootColor: "#9428AB",
+    enterColor: "#B35C00",
+    exitColor: "#035570",
+    interColor: "#9CAF00BB",
+};
+
 var useLayoutEffect = typeof window !== "undefined"
     ? React__default['default'].useLayoutEffect
     : React__default['default'].useEffect;
-function defaultRootMargin(vh) {
-    return "-" + (vh / 2 - 2) + "px 0px";
+function useWindowHeight() {
+    var isClient = typeof window === "object";
+    function getHeight() {
+        return isClient
+            ? document.documentElement.clientHeight
+            : undefined;
+    }
+    var _a = __read(React__default['default'].useState(getHeight), 2), windowHeight = _a[0], setWindowHeight = _a[1];
+    React__default['default'].useEffect(function () {
+        function handleResize() {
+            setWindowHeight(getHeight());
+        }
+        window.addEventListener("resize", handleResize);
+        return function () {
+            return window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    useLayoutEffect(function () {
+        // FIX when a horizontal scrollbar is added after the first layout
+        setWindowHeight(getHeight());
+    }, []);
+    return windowHeight;
 }
+
+var ObserverContext = React__default['default'].createContext(undefined);
+var useLayoutEffect$1 = typeof window !== "undefined"
+    ? React__default['default'].useLayoutEffect
+    : React__default['default'].useEffect;
 function Scroller(_a) {
-    var onStepChange = _a.onStepChange, children = _a.children, _b = _a.getRootMargin, getRootMargin = _b === void 0 ? defaultRootMargin : _b;
-    var _c = __read(React__default['default'].useState(), 2), observer = _c[0], setObserver = _c[1];
+    var onStepChange = _a.onStepChange, children = _a.children, _b = _a.getRootMargin, getRootMargin = _b === void 0 ? defaultRootMargin : _b, _c = _a.debug, debug = _c === void 0 ? false : _c;
+    var _d = __read(React__default['default'].useState(), 2), observer = _d[0], setObserver = _d[1];
     var vh = useWindowHeight();
-    useLayoutEffect(function () {
+    useLayoutEffect$1(function () {
         var windowHeight = vh || 0;
         var handleIntersect = function (entries) {
+            if (debug || window.chDebugScroller) {
+                debugEntries(entries);
+            }
             entries.forEach(function (entry) {
@@ -94,19 +174,2 @@ if (entry.intersectionRatio > 0) {
 }
-function newIntersectionObserver(handleIntersect, rootMargin) {
-    try {
-        return new IntersectionObserver(handleIntersect, {
-            rootMargin: rootMargin,
-            threshold: 0.000001,
-            root: document,
-        });
-    }
-    catch (_a) {
-        // firefox doesn't like passing `document` as the root
-        // it's a shame because it break the scroller inside iframes
-        return new IntersectionObserver(handleIntersect, {
-            rootMargin: rootMargin,
-            threshold: 0.000001,
-        });
-    }
-}
 function Step(_a) {
@@ -116,3 +179,3 @@ var _b = _a.as, as = _b === void 0 ? "section" : _b, index = _a.index, props = __rest(_a, ["as", "index"]);
     var observer = React__default['default'].useContext(ObserverContext);
-    useLayoutEffect(function () {
+    useLayoutEffect$1(function () {
         if (observer) {
@@ -123,3 +186,3 @@ observer.observe(ref.current);
     }, [observer]);
-    useLayoutEffect(function () {
+    useLayoutEffect$1(function () {
         var stepElement = ref.current;
@@ -130,27 +193,14 @@ stepElement.stepIndex = index;
 }
-function useWindowHeight() {
-    var isClient = typeof window === "object";
-    function getHeight() {
-        return isClient
-            ? document.documentElement.clientHeight
-            : undefined;
-    }
-    var _a = __read(React__default['default'].useState(getHeight), 2), windowHeight = _a[0], setWindowHeight = _a[1];
-    React__default['default'].useEffect(function () {
-        function handleResize() {
-            setWindowHeight(getHeight());
-        }
-        window.addEventListener("resize", handleResize);
-        return function () {
-            return window.removeEventListener("resize", handleResize);
-        };
-    }, []);
-    useLayoutEffect(function () {
-        // FIX when a horizontal scrollbar is added after the first layout
-        setWindowHeight(getHeight());
-    }, []);
-    return windowHeight;
+function newIntersectionObserver(handleIntersect, rootMargin) {
+    return new IntersectionObserver(handleIntersect, {
+        rootMargin: rootMargin,
+        threshold: 0.000001,
+        root: null,
+    });
 }
+function defaultRootMargin(vh) {
+    return "-" + (vh / 2 - 2) + "px 0px";
+}
 
 exports.Scroller = Scroller;
 exports.Step = Step;

dist/index.d.ts

@@ -7,4 +7,5 @@ import React from "react";
     getRootMargin?: (vh: number) => string;
+    debug?: boolean;
 };
-declare function Scroller({ onStepChange, children, getRootMargin, }: ScrollerProps): JSX.Element;
+declare function Scroller({ onStepChange, children, getRootMargin, debug, }: ScrollerProps): JSX.Element;
 declare function Step({ as, index, ...props }: {
@@ -11,0 +12,0 @@ as: any;

dist/index.esm.js

@@ -58,16 +58,96 @@ import React from 'react';
 
-var ObserverContext = React.createContext(undefined);
+function debugEntries(entries) {
+    entries.forEach(showEntry);
+}
+function showEntry(entry) {
+    var _a;
+    var rootHeight = ((_a = entry.rootBounds) === null || _a === void 0 ? void 0 : _a.height) || 0;
+    addFlashingRect(entry.rootBounds, {
+        border: Math.min(10, rootHeight / 2) + "px solid " + iodOptions.rootColor,
+        overflow: "hidden",
+        boxSizing: "border-box",
+    });
+    addFlashingRect(entry.boundingClientRect, {
+        border: Math.min(10, entry.boundingClientRect.height / 2) + "px solid " + (entry.isIntersecting
+            ? iodOptions.enterColor
+            : iodOptions.exitColor),
+        overflow: "hidden",
+        boxSizing: "border-box",
+    });
+    addFlashingRect(entry.intersectionRect, {
+        backgroundColor: iodOptions.interColor,
+        zIndex: 2,
+    });
+}
+function addFlashingRect(bounds, style) {
+    if (style === void 0) { style = {}; }
+    var width = bounds.width, left = bounds.left, height = bounds.height, top = bounds.top;
+    var div = document.createElement("div");
+    div.style.position = "fixed";
+    div.style.width = width + "px";
+    div.style.left = left + "px";
+    div.style.top = top + "px";
+    div.style.height = height + "px";
+    div.style.pointerEvents = "none";
+    div.style.transition = "opacity 2s ease-in";
+    Object.assign(div.style, style);
+    requestAnimationFrame(function () {
+        return requestAnimationFrame(function () {
+            div.style.opacity = "0";
+        });
+    });
+    div.addEventListener("transitionend", function () {
+        document.body.removeChild(div);
+    });
+    document.body.appendChild(div);
+    return div;
+}
+var iodOptions = {
+    rootColor: "#9428AB",
+    enterColor: "#B35C00",
+    exitColor: "#035570",
+    interColor: "#9CAF00BB",
+};
+
 var useLayoutEffect = typeof window !== "undefined"
     ? React.useLayoutEffect
     : React.useEffect;
-function defaultRootMargin(vh) {
-    return "-" + (vh / 2 - 2) + "px 0px";
+function useWindowHeight() {
+    var isClient = typeof window === "object";
+    function getHeight() {
+        return isClient
+            ? document.documentElement.clientHeight
+            : undefined;
+    }
+    var _a = __read(React.useState(getHeight), 2), windowHeight = _a[0], setWindowHeight = _a[1];
+    React.useEffect(function () {
+        function handleResize() {
+            setWindowHeight(getHeight());
+        }
+        window.addEventListener("resize", handleResize);
+        return function () {
+            return window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    useLayoutEffect(function () {
+        // FIX when a horizontal scrollbar is added after the first layout
+        setWindowHeight(getHeight());
+    }, []);
+    return windowHeight;
 }
+
+var ObserverContext = React.createContext(undefined);
+var useLayoutEffect$1 = typeof window !== "undefined"
+    ? React.useLayoutEffect
+    : React.useEffect;
 function Scroller(_a) {
-    var onStepChange = _a.onStepChange, children = _a.children, _b = _a.getRootMargin, getRootMargin = _b === void 0 ? defaultRootMargin : _b;
-    var _c = __read(React.useState(), 2), observer = _c[0], setObserver = _c[1];
+    var onStepChange = _a.onStepChange, children = _a.children, _b = _a.getRootMargin, getRootMargin = _b === void 0 ? defaultRootMargin : _b, _c = _a.debug, debug = _c === void 0 ? false : _c;
+    var _d = __read(React.useState(), 2), observer = _d[0], setObserver = _d[1];
     var vh = useWindowHeight();
-    useLayoutEffect(function () {
+    useLayoutEffect$1(function () {
         var windowHeight = vh || 0;
         var handleIntersect = function (entries) {
+            if (debug || window.chDebugScroller) {
+                debugEntries(entries);
+            }
             entries.forEach(function (entry) {
@@ -86,19 +166,2 @@ if (entry.intersectionRatio > 0) {
 }
-function newIntersectionObserver(handleIntersect, rootMargin) {
-    try {
-        return new IntersectionObserver(handleIntersect, {
-            rootMargin: rootMargin,
-            threshold: 0.000001,
-            root: document,
-        });
-    }
-    catch (_a) {
-        // firefox doesn't like passing `document` as the root
-        // it's a shame because it break the scroller inside iframes
-        return new IntersectionObserver(handleIntersect, {
-            rootMargin: rootMargin,
-            threshold: 0.000001,
-        });
-    }
-}
 function Step(_a) {
@@ -108,3 +171,3 @@ var _b = _a.as, as = _b === void 0 ? "section" : _b, index = _a.index, props = __rest(_a, ["as", "index"]);
     var observer = React.useContext(ObserverContext);
-    useLayoutEffect(function () {
+    useLayoutEffect$1(function () {
         if (observer) {
@@ -115,3 +178,3 @@ observer.observe(ref.current);
     }, [observer]);
-    useLayoutEffect(function () {
+    useLayoutEffect$1(function () {
         var stepElement = ref.current;
@@ -122,26 +185,13 @@ stepElement.stepIndex = index;
 }
-function useWindowHeight() {
-    var isClient = typeof window === "object";
-    function getHeight() {
-        return isClient
-            ? document.documentElement.clientHeight
-            : undefined;
-    }
-    var _a = __read(React.useState(getHeight), 2), windowHeight = _a[0], setWindowHeight = _a[1];
-    React.useEffect(function () {
-        function handleResize() {
-            setWindowHeight(getHeight());
-        }
-        window.addEventListener("resize", handleResize);
-        return function () {
-            return window.removeEventListener("resize", handleResize);
-        };
-    }, []);
-    useLayoutEffect(function () {
-        // FIX when a horizontal scrollbar is added after the first layout
-        setWindowHeight(getHeight());
-    }, []);
-    return windowHeight;
+function newIntersectionObserver(handleIntersect, rootMargin) {
+    return new IntersectionObserver(handleIntersect, {
+        rootMargin: rootMargin,
+        threshold: 0.000001,
+        root: null,
+    });
 }
+function defaultRootMargin(vh) {
+    return "-" + (vh / 2 - 2) + "px 0px";
+}
 
 export { Scroller, Step };

dist/index.js

@@ -66,16 +66,96 @@ (function (global, factory) {
 
-    var ObserverContext = React__default['default'].createContext(undefined);
+    function debugEntries(entries) {
+        entries.forEach(showEntry);
+    }
+    function showEntry(entry) {
+        var _a;
+        var rootHeight = ((_a = entry.rootBounds) === null || _a === void 0 ? void 0 : _a.height) || 0;
+        addFlashingRect(entry.rootBounds, {
+            border: Math.min(10, rootHeight / 2) + "px solid " + iodOptions.rootColor,
+            overflow: "hidden",
+            boxSizing: "border-box",
+        });
+        addFlashingRect(entry.boundingClientRect, {
+            border: Math.min(10, entry.boundingClientRect.height / 2) + "px solid " + (entry.isIntersecting
+                ? iodOptions.enterColor
+                : iodOptions.exitColor),
+            overflow: "hidden",
+            boxSizing: "border-box",
+        });
+        addFlashingRect(entry.intersectionRect, {
+            backgroundColor: iodOptions.interColor,
+            zIndex: 2,
+        });
+    }
+    function addFlashingRect(bounds, style) {
+        if (style === void 0) { style = {}; }
+        var width = bounds.width, left = bounds.left, height = bounds.height, top = bounds.top;
+        var div = document.createElement("div");
+        div.style.position = "fixed";
+        div.style.width = width + "px";
+        div.style.left = left + "px";
+        div.style.top = top + "px";
+        div.style.height = height + "px";
+        div.style.pointerEvents = "none";
+        div.style.transition = "opacity 2s ease-in";
+        Object.assign(div.style, style);
+        requestAnimationFrame(function () {
+            return requestAnimationFrame(function () {
+                div.style.opacity = "0";
+            });
+        });
+        div.addEventListener("transitionend", function () {
+            document.body.removeChild(div);
+        });
+        document.body.appendChild(div);
+        return div;
+    }
+    var iodOptions = {
+        rootColor: "#9428AB",
+        enterColor: "#B35C00",
+        exitColor: "#035570",
+        interColor: "#9CAF00BB",
+    };
+
     var useLayoutEffect = typeof window !== "undefined"
         ? React__default['default'].useLayoutEffect
         : React__default['default'].useEffect;
-    function defaultRootMargin(vh) {
-        return "-" + (vh / 2 - 2) + "px 0px";
+    function useWindowHeight() {
+        var isClient = typeof window === "object";
+        function getHeight() {
+            return isClient
+                ? document.documentElement.clientHeight
+                : undefined;
+        }
+        var _a = __read(React__default['default'].useState(getHeight), 2), windowHeight = _a[0], setWindowHeight = _a[1];
+        React__default['default'].useEffect(function () {
+            function handleResize() {
+                setWindowHeight(getHeight());
+            }
+            window.addEventListener("resize", handleResize);
+            return function () {
+                return window.removeEventListener("resize", handleResize);
+            };
+        }, []);
+        useLayoutEffect(function () {
+            // FIX when a horizontal scrollbar is added after the first layout
+            setWindowHeight(getHeight());
+        }, []);
+        return windowHeight;
     }
+
+    var ObserverContext = React__default['default'].createContext(undefined);
+    var useLayoutEffect$1 = typeof window !== "undefined"
+        ? React__default['default'].useLayoutEffect
+        : React__default['default'].useEffect;
     function Scroller(_a) {
-        var onStepChange = _a.onStepChange, children = _a.children, _b = _a.getRootMargin, getRootMargin = _b === void 0 ? defaultRootMargin : _b;
-        var _c = __read(React__default['default'].useState(), 2), observer = _c[0], setObserver = _c[1];
+        var onStepChange = _a.onStepChange, children = _a.children, _b = _a.getRootMargin, getRootMargin = _b === void 0 ? defaultRootMargin : _b, _c = _a.debug, debug = _c === void 0 ? false : _c;
+        var _d = __read(React__default['default'].useState(), 2), observer = _d[0], setObserver = _d[1];
         var vh = useWindowHeight();
-        useLayoutEffect(function () {
+        useLayoutEffect$1(function () {
             var windowHeight = vh || 0;
             var handleIntersect = function (entries) {
+                if (debug || window.chDebugScroller) {
+                    debugEntries(entries);
+                }
                 entries.forEach(function (entry) {
@@ -94,19 +174,2 @@ if (entry.intersectionRatio > 0) {
     }
-    function newIntersectionObserver(handleIntersect, rootMargin) {
-        try {
-            return new IntersectionObserver(handleIntersect, {
-                rootMargin: rootMargin,
-                threshold: 0.000001,
-                root: document,
-            });
-        }
-        catch (_a) {
-            // firefox doesn't like passing `document` as the root
-            // it's a shame because it break the scroller inside iframes
-            return new IntersectionObserver(handleIntersect, {
-                rootMargin: rootMargin,
-                threshold: 0.000001,
-            });
-        }
-    }
     function Step(_a) {
@@ -116,3 +179,3 @@ var _b = _a.as, as = _b === void 0 ? "section" : _b, index = _a.index, props = __rest(_a, ["as", "index"]);
         var observer = React__default['default'].useContext(ObserverContext);
-        useLayoutEffect(function () {
+        useLayoutEffect$1(function () {
             if (observer) {
@@ -123,3 +186,3 @@ observer.observe(ref.current);
         }, [observer]);
-        useLayoutEffect(function () {
+        useLayoutEffect$1(function () {
             var stepElement = ref.current;
@@ -130,25 +193,12 @@ stepElement.stepIndex = index;
     }
-    function useWindowHeight() {
-        var isClient = typeof window === "object";
-        function getHeight() {
-            return isClient
-                ? document.documentElement.clientHeight
-                : undefined;
-        }
-        var _a = __read(React__default['default'].useState(getHeight), 2), windowHeight = _a[0], setWindowHeight = _a[1];
-        React__default['default'].useEffect(function () {
-            function handleResize() {
-                setWindowHeight(getHeight());
-            }
-            window.addEventListener("resize", handleResize);
-            return function () {
-                return window.removeEventListener("resize", handleResize);
-            };
-        }, []);
-        useLayoutEffect(function () {
-            // FIX when a horizontal scrollbar is added after the first layout
-            setWindowHeight(getHeight());
-        }, []);
-        return windowHeight;
+    function newIntersectionObserver(handleIntersect, rootMargin) {
+        return new IntersectionObserver(handleIntersect, {
+            rootMargin: rootMargin,
+            threshold: 0.000001,
+            root: null,
+        });
     }
+    function defaultRootMargin(vh) {
+        return "-" + (vh / 2 - 2) + "px 0px";
+    }
 
@@ -155,0 +205,0 @@ exports.Scroller = Scroller;

package.json

 {
   "name": "@code-hike/scroller",
-  "version": "0.0.0-4adbd70",
+  "version": "0.0.0-6a4ea1c",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "typings": "dist/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

48223

increased by13.4%

Number of package files

8

increased by33.33%

Lines of code

939

increased by18.56%

No dependency changes