@rpcbase/client 0.261.0 → 0.263.0

package/package.json

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

package/src/hooks/index.ts

@@ -1 +1,3 @@
 export * from "./useThrottledMeasure"
+export * from "./useApplyScroll"
+export * from "./useMediaQuery"

package/src/hooks/useApplyScroll.ts

@@ -0,0 +1,145 @@
+import { useEffect, useRef } from "react"
+import { useLocation, useNavigate } from "@rpcbase/router"
+
+
+function throttle(callback: (...args: any[]) => void, limit: number) {
+  let wait = false
+  return (...args: any[]) => {
+    if (!wait) {
+      callback(...args)
+      wait = true
+      setTimeout(() => {
+        wait = false
+      }, limit)
+    }
+  }
+}
+
+export function useApplyScroll() {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const locationRef = useRef(location)
+  const previousPathRef = useRef(location.pathname)
+
+  // Keep a ref to the latest location object to use in callbacks without re-binding them
+  useEffect(() => {
+    locationRef.current = location
+  }, [location])
+
+  const isScrollingProgrammatically = useRef(false)
+  const scrollTimeoutRef = useRef<NodeJS.Timeout>(null)
+  const isUpdatingHashFromSpy = useRef(false)
+
+  // 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) {
+      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" })
+      }, 100)
+
+      return
+    }
+
+    // Don't scroll if the hash was just updated by our scroll spy
+    if (isUpdatingHashFromSpy.current) {
+      isUpdatingHashFromSpy.current = false
+      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
+      }
+    }
+  }, [location.pathname, location.hash])
+
+  // Effect for the scroll spy
+  useEffect(() => {
+    const handleScroll = throttle(() => {
+      if (isScrollingProgrammatically.current) {
+        return
+      }
+
+      const sections = Array.from(document.querySelectorAll("section[id]"))
+      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) {
+          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 })
+      }
+    }, 150)
+
+    document.addEventListener("scroll", handleScroll)
+    return () => {
+      document.removeEventListener("scroll", handleScroll)
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current)
+      }
+    }
+  }, [navigate])
+
+  // 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" })
+
+          if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current)
+          }
+          scrollTimeoutRef.current = setTimeout(() => {
+            isScrollingProgrammatically.current = false
+          }, 1000)
+        }
+      }
+    }
+
+    document.addEventListener("click", handleClick, true)
+    return () => document.removeEventListener("click", handleClick, true)
+  }, [location.hash, location.pathname])
+}

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,31 @@
+import { useSyncExternalStore } from "react"
+
+
+const emptyUnsubscribe = () => {}
+
+export const useMediaQuery = (query: string): boolean => {
+  const isServer = typeof window === "undefined"
+
+  const subscribe = (callback: () => void) => {
+    if (isServer) return emptyUnsubscribe
+
+    const mql = window.matchMedia(query)
+
+    // Modern browsers
+    if (mql.addEventListener) {
+      mql.addEventListener("change", callback)
+      return () => mql.removeEventListener("change", callback)
+    }
+
+    // Legacy fallback
+    mql.addListener(callback)
+    return () => mql.removeListener(callback)
+  }
+
+  const getSnapshot = () => {
+    if (isServer) return false
+    return window.matchMedia(query).matches
+  }
+
+  return useSyncExternalStore(subscribe, getSnapshot, () => false)
+}