@rpcbase/client 0.251.0 → 0.253.0

package/hooks.ts

@@ -0,0 +1 @@
+export * from "./src/hooks"

package/instrument.ts

@@ -15,23 +15,23 @@ if (isProduction) {
 
 
 if (isProduction) {
-  if (!import.meta.env.RB_PUBLIC_POSTHOG_KEY) {
+  if (import.meta.env.RB_PUBLIC_POSTHOG_KEY) {
+    posthog.init(import.meta.env.RB_PUBLIC_POSTHOG_KEY, {
+      api_host: "/ingest",
+      // request_
+      ui_host: "https://eu.posthog.com",
+      person_profiles: "always",
+      session_recording: {
+        maskAllInputs: false
+      },
+      capture_pageview: isProduction,
+      autocapture: isProduction,
+      disable_session_recording: !isProduction,
+    })
+  } else {
     console.warn("missing POSTHOG_KEY")
-    return
   }
 
-  posthog.init(import.meta.env.RB_PUBLIC_POSTHOG_KEY, {
-    api_host: "/ingest",
-    // request_
-    ui_host: "https://eu.posthog.com",
-    person_profiles: "always",
-    session_recording: {
-      maskAllInputs: false
-    },
-    capture_pageview: isProduction,
-    autocapture: isProduction,
-    disable_session_recording: !isProduction,
-  })
 
 } else {
   console.info("ℹ️ Not initializing posthog in development")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.251.0",
+  "version": "0.253.0",
   "type": "module",
   "main": "./src/index.ts",
   "scripts": {
@@ -14,6 +14,7 @@
       "files": [
         "package.json",
         "./instrument.ts",
+        "./hooks.ts",
         "src/**/*"
       ],
       "output": [],
@@ -28,7 +29,10 @@
   "dependencies": {
     "@sentry/react": "9.15.0",
     "@sentry/tracing": "7.120.3",
-    "axios": "1.9.0"
+    "axios": "1.9.0",
+    "fast-equals": "5.2.2",
+    "lodash": "4.17.21",
+    "react-use": "17.6.0"
   },
   "devDependencies": {}
 }

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useThrottledMeasure"

package/src/hooks/useThrottledMeasure.ts

@@ -0,0 +1,47 @@
+import {useState, useEffect, useRef, useCallback} from "react"
+import useMeasure from "react-use/lib/useMeasure"
+import _throttle from "lodash/throttle"
+import { isEqual } from "fast-equals"
+
+
+const DEFAULT_THROTTLE_TIME = 16
+
+export const useThrottledMeasure = (throttleDuration = DEFAULT_THROTTLE_TIME) => {
+  const hasInitialMeasure = useRef(false)
+
+  const [ref, measuredRect] = useMeasure()
+  const [rect, setRect] = useState(() => {
+    return {x: 0, y: 0, width: 0, height: 0, top: 0, left: 0, bottom: 0, right: 0}
+  })
+
+  const throttledSetRect = useCallback(
+    _throttle(
+      (newRect) => {
+        setRect((current) => {
+          return isEqual(current, newRect) ? current : newRect
+        })
+      },
+      throttleDuration,
+      {leading: true, trailing: true},
+    ),
+    [throttleDuration],
+  )
+
+  useEffect(() => {
+    if (measuredRect.width > 0 && !hasInitialMeasure.current) {
+      hasInitialMeasure.current = true
+      setRect((current) => {
+        return isEqual(current, measuredRect) ? current : measuredRect
+      })
+      return
+    }
+
+    throttledSetRect(measuredRect)
+
+    return () => {
+      throttledSetRect.cancel()
+    }
+  }, [measuredRect, throttledSetRect])
+
+  return [ref, rect]
+}