@rpcbase/client 0.282.0 → 0.283.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.282.0",
+  "version": "0.283.0",
   "type": "module",
   "main": "./src/index.ts",
   "scripts": {

package/src/utils/useApplyScroll.ts

@@ -1,5 +1,5 @@
-import { useEffect, useRef } from "react"
-import { useLocation, useNavigate } from "@rpcbase/router"
+import { useCallback, useEffect, useRef } from "react"
+import { useLocation } from "@rpcbase/router"
 
 
 function throttle(callback: (...args: any[]) => void, limit: number) {
@@ -17,91 +17,112 @@ function throttle(callback: (...args: any[]) => void, limit: number) {
 
 export function useApplyScroll() {
   const location = useLocation()
-  const navigate = useNavigate()
-  const locationRef = useRef(location)
   const previousPathRef = useRef(location.pathname)
+  const isScrollingProgrammatically = useRef(false)
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const lastAppliedHashRef = useRef("")
 
-  // Keep a ref to the latest location object to use in callbacks without re-binding them
   useEffect(() => {
-    locationRef.current = location
-  }, [location])
+    if (typeof window !== "undefined") {
+      lastAppliedHashRef.current = window.location.hash || ""
+    }
+  }, [])
 
-  const isScrollingProgrammatically = useRef(false)
-  const scrollTimeoutRef = useRef<NodeJS.Timeout>(null)
-  const isUpdatingHashFromSpy = useRef(false)
+  useEffect(() => {
+    lastAppliedHashRef.current = location.hash || ""
+  }, [location.hash])
+
+  const replaceHashSilently = useCallback((hash: string) => {
+    if (typeof window === "undefined") {
+      return
+    }
+    if (lastAppliedHashRef.current === hash) {
+      return
+    }
+    const base = `${window.location.pathname}${window.location.search}`
+    window.history.replaceState(window.history.state, "", `${base}${hash}`)
+    lastAppliedHashRef.current = hash
+  }, [])
+
+  const markProgrammaticScroll = useCallback(() => {
+    isScrollingProgrammatically.current = true
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current)
+    }
+    scrollTimeoutRef.current = setTimeout(() => {
+      isScrollingProgrammatically.current = false
+    }, 1000)
+  }, [])
 
-  // Effect for scrolling on path changes or hash changes
   useEffect(() => {
-    // If path has changed, scroll to top, or to new hash target
-    if (previousPathRef.current !== location.pathname) {
+    const pathChanged = previousPathRef.current !== location.pathname
+
+    if (pathChanged) {
       previousPathRef.current = location.pathname
+
       if (!location.hash) {
         window.scrollTo({ top: 0, left: 0, behavior: "auto" })
         return
       }
 
       setTimeout(() => {
-        if (!location.hash) return
         const id = location.hash.substring(1)
-        const el = document.getElementById(id)
-        if (el) el.scrollIntoView({ behavior: "smooth" })
+        const element = document.getElementById(id)
+        if (element) {
+          markProgrammaticScroll()
+          element.scrollIntoView({ behavior: "smooth" })
+        }
       }, 100)
 
       return
     }
 
-    // Don't scroll if the hash was just updated by our scroll spy
-    if (isUpdatingHashFromSpy.current) {
-      isUpdatingHashFromSpy.current = false
+    if (!location.hash) {
       return
     }
 
-    if (location.hash) {
-      const id = location.hash.substring(1)
-      const element = document.getElementById(id)
-      if (element) {
-        isScrollingProgrammatically.current = true
-        element.scrollIntoView({ behavior: "smooth" })
-
-        if (scrollTimeoutRef.current) {
-          clearTimeout(scrollTimeoutRef.current)
-        }
-        scrollTimeoutRef.current = setTimeout(() => {
-          isScrollingProgrammatically.current = false
-        }, 1000) // Block scroll spy for 1s after programmatic scroll
-      }
+    const id = location.hash.substring(1)
+    const element = document.getElementById(id)
+    if (element) {
+      markProgrammaticScroll()
+      element.scrollIntoView({ behavior: "smooth" })
     }
-  }, [location.pathname, location.hash])
+  }, [location.hash, location.pathname, markProgrammaticScroll])
 
-  // Effect for the scroll spy
   useEffect(() => {
+    if (typeof window === "undefined") {
+      return
+    }
+
     const handleScroll = throttle(() => {
       if (isScrollingProgrammatically.current) {
         return
       }
 
       const sections = Array.from(document.querySelectorAll("section[id]"))
+
+      if (sections.length === 0) {
+        replaceHashSilently("")
+        return
+      }
+
       const scrollPosition = window.scrollY
       const viewportHeight = window.innerHeight
-      // Determine the "active" section based on what's in the upper third of the viewport
       const checkPoint = scrollPosition + viewportHeight / 3
 
       let activeSectionId: string | null = null
       for (const section of sections) {
-        if (section.offsetTop <= checkPoint && section.offsetTop + section.offsetHeight > checkPoint) {
+        if (
+          section.offsetTop <= checkPoint &&
+          section.offsetTop + section.offsetHeight > checkPoint
+        ) {
           activeSectionId = section.id
           break
         }
       }
 
       const newHash = activeSectionId ? `#${activeSectionId}` : ""
-      const { pathname, search, hash } = locationRef.current
-
-      if (hash !== newHash) {
-        isUpdatingHashFromSpy.current = true
-        // Use replace to not pollute browser history
-        navigate(pathname + search + newHash, { replace: true })
-      }
+      replaceHashSilently(newHash)
     }, 150)
 
     document.addEventListener("scroll", handleScroll)
@@ -109,37 +130,40 @@ export function useApplyScroll() {
       document.removeEventListener("scroll", handleScroll)
       if (scrollTimeoutRef.current) {
         clearTimeout(scrollTimeoutRef.current)
+        scrollTimeoutRef.current = null
       }
     }
-  }, [navigate])
+  }, [replaceHashSilently])
 
-  // Effect to handle re-clicking on a link that is already in the hash
   useEffect(() => {
-    const handleClick = (e: MouseEvent) => {
-      const target = e.target as HTMLElement
-      const link = target.closest("a")
-
-      if (link && link.hash && link.pathname === location.pathname && link.hash === location.hash) {
-        const id = link.hash.substring(1)
-        const element = document.getElementById(id)
-        if (element) {
-          e.preventDefault()
-          e.stopPropagation()
-
-          isScrollingProgrammatically.current = true
-          element.scrollIntoView({ behavior: "smooth" })
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null
+      const link = target?.closest("a")
+      const currentHash =
+        typeof window !== "undefined"
+          ? window.location.hash
+          : location.hash || ""
+
+      if (
+        !link ||
+        !link.hash ||
+        link.pathname !== location.pathname ||
+        link.hash !== currentHash
+      ) {
+        return
+      }
 
-          if (scrollTimeoutRef.current) {
-            clearTimeout(scrollTimeoutRef.current)
-          }
-          scrollTimeoutRef.current = setTimeout(() => {
-            isScrollingProgrammatically.current = false
-          }, 1000)
-        }
+      const id = link.hash.substring(1)
+      const element = document.getElementById(id)
+      if (element) {
+        event.preventDefault()
+        event.stopPropagation()
+        markProgrammaticScroll()
+        element.scrollIntoView({ behavior: "smooth" })
       }
     }
 
     document.addEventListener("click", handleClick, true)
     return () => document.removeEventListener("click", handleClick, true)
-  }, [location.hash, location.pathname])
+  }, [location.hash, location.pathname, markProgrammaticScroll])
 }