Fix intersection observer on Firefox

Author: pomber

package.json

@@ -15,7 +15,7 @@
     "build": "yarn wsrun -m --stages -c script build",
     "watch": "yarn wsrun -m -c script watch",
     "version": "yarn wsrun -m --serial -c script version",
-    "watch-package": "yarn wsrun -p '@code-hike/mini-editor' -r script watch ",
+    "watch-package": "yarn wsrun -p '@code-hike/scroller' -r script watch ",
     "publish-canary": "yarn wsrun -p '@code-hike/*' --exclude '@code-hike/build' --serial -c publish-canary",
     "build-site": "yarn build && yarn workspace site export",
     "storybook-watch": "yarn watch & yarn storybook start"

packages/scroller/src/index.tsx

@@ -1,110 +1,133 @@
-import React from "react";
+import React from "react"
 
-export { Scroller, Step };
+export { Scroller, Step }
 
-const ObserverContext = React.createContext<IntersectionObserver | undefined>(
-  undefined
-);
+const ObserverContext = React.createContext<
+  IntersectionObserver | undefined
+>(undefined)
+
+const useLayoutEffect =
+  typeof window !== "undefined"
+    ? React.useLayoutEffect
+    : React.useEffect
 
 type ScrollerProps = {
-  onStepChange: (stepIndex: number) => void;
-  children: React.ReactNode;
-  getRootMargin?: (vh: number) => string;
-};
+  onStepChange: (stepIndex: number) => void
+  children: React.ReactNode
+  getRootMargin?: (vh: number) => string
+}
 
 type StepElement = {
-  stepIndex: any;
-};
+  stepIndex: any
+}
 
 function defaultRootMargin(vh: number) {
-  return `-${vh / 2 - 2}px 0px`;
+  return `-${vh / 2 - 2}px 0px`
 }
 
 function Scroller({
   onStepChange,
   children,
   getRootMargin = defaultRootMargin,
 }: ScrollerProps) {
-  const [observer, setObserver] = React.useState<IntersectionObserver>();
-  const vh = useWindowHeight();
+  const [observer, setObserver] = React.useState<
+    IntersectionObserver
+  >()
+  const vh = useWindowHeight()
 
-  React.useLayoutEffect(() => {
-    const windowHeight = vh || 0;
-    const handleIntersect: IntersectionObserverCallback = (entries) => {
-      entries.forEach((entry) => {
+  useLayoutEffect(() => {
+    const windowHeight = vh || 0
+    const handleIntersect: IntersectionObserverCallback = entries => {
+      entries.forEach(entry => {
         if (entry.intersectionRatio > 0) {
-          // ref.current = entry.target.stepInfo
-          const stepElement = (entry.target as unknown) as StepElement;
-          onStepChange(+stepElement.stepIndex);
+          const stepElement = (entry.target as unknown) as StepElement
+          onStepChange(+stepElement.stepIndex)
         }
-      });
-      // console.log(entries[0].rootBounds, entries);
-      // const rrect = document.getElementById("root-rect")!;
-      // const bounds = entries[0].rootBounds;
-      // rrect.style.top = bounds?.top + "px";
-      // rrect.style.left = bounds?.left + "px";
-      // rrect.style.height = bounds?.height + "px";
-      // rrect.style.width = bounds?.width + "px";
-
-      // const irect = document.getElementById("entry-rect")!;
-      // const ibounds = entries[0].intersectionRect;
-      // irect.style.top = ibounds?.top + "px";
-      // irect.style.left = ibounds?.left + "px";
-      // irect.style.height = ibounds?.height + "px";
-      // irect.style.width = ibounds?.width + "px";
-    };
-    const observer = new IntersectionObserver(handleIntersect, {
-      rootMargin: getRootMargin(windowHeight),
-      threshold: 0.000001,
-      root: document as any,
-    });
-    setObserver(observer);
+      })
+    }
+    const observer = newIntersectionObserver(
+      handleIntersect,
+      getRootMargin(windowHeight)
+    )
+    setObserver(observer)
 
-    return () => observer.disconnect();
-  }, [vh]);
+    return () => observer.disconnect()
+  }, [vh])
 
   return (
     <ObserverContext.Provider value={observer}>
       {children}
     </ObserverContext.Provider>
-  );
+  )
+}
+
+function newIntersectionObserver(
+  handleIntersect: IntersectionObserverCallback,
+  rootMargin: string
+) {
+  try {
+    return new IntersectionObserver(handleIntersect, {
+      rootMargin,
+      threshold: 0.000001,
+      root: document as any,
+    })
+  } catch {
+    // 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,
+      threshold: 0.000001,
+    })
+  }
 }
 
-function Step({ as = "section", index, ...props }: { as: any; index: number }) {
-  const ref = React.useRef<HTMLElement>(null!);
-  const observer = React.useContext(ObserverContext);
+function Step({
+  as = "section",
+  index,
+  ...props
+}: {
+  as: any
+  index: number
+}) {
+  const ref = React.useRef<HTMLElement>(null!)
+  const observer = React.useContext(ObserverContext)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (observer) {
-      observer.observe(ref.current);
+      observer.observe(ref.current)
     }
-    return () => observer && observer.unobserve(ref.current);
-  }, [observer]);
+    return () => observer && observer.unobserve(ref.current)
+  }, [observer])
 
-  React.useLayoutEffect(() => {
-    const stepElement = (ref.current as unknown) as StepElement;
-    stepElement.stepIndex = index;
-  }, [index]);
+  useLayoutEffect(() => {
+    const stepElement = (ref.current as unknown) as StepElement
+    stepElement.stepIndex = index
+  }, [index])
 
-  return React.createElement(as, { ...props, ref });
+  return React.createElement(as, { ...props, ref })
 }
 
 function useWindowHeight() {
-  const isClient = typeof window === "object";
+  const isClient = typeof window === "object"
   function getHeight() {
-    return isClient ? document.documentElement.clientHeight : undefined;
+    return isClient
+      ? document.documentElement.clientHeight
+      : undefined
   }
-  const [windowHeight, setWindowHeight] = React.useState(getHeight);
+  const [windowHeight, setWindowHeight] = React.useState(
+    getHeight
+  )
   React.useEffect(() => {
     function handleResize() {
-      setWindowHeight(getHeight());
+      setWindowHeight(getHeight())
     }
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-  React.useLayoutEffect(() => {
-    // FIX when an horizontal scrollbar is added after the first layout
-    setWindowHeight(getHeight());
-  }, []);
-  return windowHeight;
+    window.addEventListener("resize", handleResize)
+    return () =>
+      window.removeEventListener("resize", handleResize)
+  }, [])
+  useLayoutEffect(() => {
+    // FIX when a horizontal scrollbar is added after the first layout
+    setWindowHeight(getHeight())
+  }, [])
+  return windowHeight
 }