@rpcbase/client 0.283.0 → 0.285.0

package/dist/utils/useApplyScroll.js

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useLocation } from "@rpcbase/router";
+function throttle(callback, limit) {
+    let wait = false;
+    return (...args) => {
+        if (!wait) {
+            callback(...args);
+            wait = true;
+            setTimeout(() => {
+                wait = false;
+            }, limit);
+        }
+    };
+}
+export function useApplyScroll() {
+    const location = useLocation();
+    const previousPathRef = useRef(location.pathname);
+    const isScrollingProgrammatically = useRef(false);
+    const scrollTimeoutRef = useRef(null);
+    const lastAppliedHashRef = useRef("");
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            lastAppliedHashRef.current = window.location.hash || "";
+        }
+    }, []);
+    useEffect(() => {
+        lastAppliedHashRef.current = location.hash || "";
+    }, [location.hash]);
+    const replaceHashSilently = useCallback((hash) => {
+        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);
+    }, []);
+    useEffect(() => {
+        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(() => {
+                const id = location.hash.substring(1);
+                const element = document.getElementById(id);
+                if (element) {
+                    markProgrammaticScroll();
+                    element.scrollIntoView({ behavior: "smooth" });
+                }
+            }, 100);
+            return;
+        }
+        if (!location.hash) {
+            return;
+        }
+        const id = location.hash.substring(1);
+        const element = document.getElementById(id);
+        if (element) {
+            markProgrammaticScroll();
+            element.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [location.hash, location.pathname, markProgrammaticScroll]);
+    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;
+            const checkPoint = scrollPosition + viewportHeight / 3;
+            let activeSectionId = null;
+            for (const section of sections) {
+                if (section.offsetTop <= checkPoint &&
+                    section.offsetTop + section.offsetHeight > checkPoint) {
+                    activeSectionId = section.id;
+                    break;
+                }
+            }
+            const newHash = activeSectionId ? `#${activeSectionId}` : "";
+            replaceHashSilently(newHash);
+        }, 150);
+        document.addEventListener("scroll", handleScroll);
+        return () => {
+            document.removeEventListener("scroll", handleScroll);
+            if (scrollTimeoutRef.current) {
+                clearTimeout(scrollTimeoutRef.current);
+                scrollTimeoutRef.current = null;
+            }
+        };
+    }, [replaceHashSilently]);
+    useEffect(() => {
+        const handleClick = (event) => {
+            const target = event.target;
+            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;
+            }
+            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, markProgrammaticScroll]);
+}

package/package.json

@@ -1,20 +1,40 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.283.0",
+  "version": "0.285.0",
   "type": "module",
-  "main": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsc --watch",
+    "build": "wireit",
     "release": "wireit"
   },
   "wireit": {
+    "build": {
+      "command": "node ../../scripts/build-package.js client",
+      "files": [
+        "src/**/*",
+        "hooks.ts",
+        "instrument.ts",
+        "../../tsconfig.json",
+        "../../tsconfig.base.json",
+        "../../scripts/build-package.js"
+      ],
+      "output": [
+        "dist/"
+      ]
+    },
     "release": {
       "command": "../../scripts/publish.js",
-      "dependencies": [],
+      "dependencies": [
+        "build"
+      ],
       "files": [
         "package.json",
-        "./instrument.ts",
-        "./hooks.ts",
+        "hooks.ts",
+        "instrument.ts",
         "src/**/*"
       ],
       "output": [],
@@ -27,7 +47,7 @@
   },
   "peerDependencies": {},
   "dependencies": {
-    "axios": "1.9.0",
+    "axios": "1.13.2",
     "fast-equals": "5.2.2",
     "lodash": "4.17.21",
     "react-use": "17.6.0"

package/hooks.ts

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

package/instrument.ts

@@ -1,32 +0,0 @@
-import posthog from "posthog-js"
-
-
-const isProduction = import.meta.env.MODE === "production"
-
-
-if (isProduction) {
-  if (import.meta.env.RB_PUBLIC_POSTHOG_KEY) {
-    posthog.init(import.meta.env.RB_PUBLIC_POSTHOG_KEY, {
-      api_host: "/ingest",
-      ui_host: "https://eu.posthog.com",
-      person_profiles: "always",
-      session_recording: {
-        maskAllInputs: false
-      },
-      capture_pageview: isProduction,
-      capture_exceptions: {
-        capture_unhandled_errors: true,
-        capture_unhandled_rejections: true,
-        capture_console_errors: true,
-      },
-      autocapture: isProduction,
-      disable_session_recording: !isProduction,
-    })
-  } else {
-    console.warn("missing POSTHOG_KEY")
-  }
-
-
-} else {
-  console.info("ℹ️ Not initializing posthog in development")
-}

package/src/RootProvider/index.tsx

@@ -1,15 +0,0 @@
-import posthog from "posthog-js"
-import { PostHogProvider } from "posthog-js/react"
-
-import { useApplyScroll } from "../utils/useApplyScroll"
-
-
-export const RootProvider = ({children}) => {
-  useApplyScroll()
-
-  return (
-    <PostHogProvider client={posthog}>
-      {children}
-    </PostHogProvider>
-  )
-}

package/src/apiClient/getServerApiClient.ts

@@ -1,133 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Application, IRouter, Request, Response } from "express"
-
-// import { Ctx } from "@rpcbase/api"
-type Ctx = any
-
-
-export const getServerApiClient = async(app: Application) => {
-  const callRoute = async <TResponse = Record<string, unknown>>(
-    app: Application,
-    method: string,
-    path: string,
-    req: Partial<Request>,
-    res: Partial<Response>
-  ): Promise<TResponse> => {
-    return new Promise((resolve, reject) => {
-      let isEnded = false
-
-      const mockReq = {
-        ...req,
-        method: method.toUpperCase(),
-        url: path
-      } as Request
-
-      const mockRes = {
-        ...res,
-        json: (data: any) => {
-          if (!isEnded) {
-            isEnded = true
-            resolve(data)
-          }
-        },
-        status: (statusCode: number) => {
-          console.log("Status:", statusCode)
-          return mockRes
-        },
-      } as Response
-
-      const routerStack: any[] = (app.router as unknown as IRouter).stack
-
-      const firstApiMiddlewareIndex = routerStack.findIndex((layer) => layer.name === "__FIRST_API_MIDDLEWARE__")
-      if (!(firstApiMiddlewareIndex > -1)) {
-        throw new Error("middleware: __FIRST_API_MIDDLEWARE__ was not found in stack")
-      }
-
-      const apiStack = routerStack.slice(firstApiMiddlewareIndex + 1)
-
-      const processLayer = async (index: number) => {
-        if (index >= apiStack.length || isEnded) return
-
-        const layer = apiStack[index]
-
-        const isNonMatchingLayer = !layer.match(path)
-        if (isNonMatchingLayer) {
-          // console.log("not machthing route:", path, "to layer:", index, layer.name, layer, "reason: ", {isNonMatchingLayer})
-          await processLayer(index + 1)
-          return
-        }
-
-        const runHandler = async(handler: any) => new Promise<void>((resolveMiddleware, rejectMiddleware) => {
-          handler(mockReq, mockRes, (err?: any) => {
-            if (err) {
-              console.error("Middleware error:", err)
-              if (!isEnded) {
-                isEnded = true
-                rejectMiddleware(err)
-              }
-              return
-            }
-            resolveMiddleware()
-          })
-        })
-
-        if (layer.route) {
-          if (!layer.route.methods[method.toLowerCase()]) {
-            // console.log("not machthing route:", path, "to route layer:", index, layer.name, layer, "reason: method not matching")
-            await processLayer(index + 1)
-            return
-          }
-
-          if (layer.route.stack.length !== 1) {
-            throw new Error(`expected only one handler per route for route: ${layer.route.path}`)
-          }
-
-          await runHandler(layer.route.stack[0].handle)
-
-        } else {
-          await runHandler(layer.handle)
-        }
-
-        if (!isEnded) {
-          await processLayer(index + 1)
-        }
-      }
-
-      // AWAIT ??
-      processLayer(0)
-
-      // Set a timeout to prevent hanging
-      setTimeout(() => {
-        if (!isEnded) {
-          reject("Route handler timed out")
-        }
-      }, 30000)
-    })
-  }
-
-  const createMethod = (method: string) => {
-    return async <TResponse = Record<string, unknown>>(
-      path: string,
-      payload: Record<string, unknown>,
-      ctx?: Ctx,
-    ): Promise<TResponse> => {
-      if (!ctx) {
-        throw new Error("Context must be provided in SSR mode")
-      }
-
-      ctx.req.body = payload
-      return callRoute<TResponse>(app, method, path, ctx.req, ctx.res)
-    }
-  }
-
-  const apiClient = {
-    get: createMethod("get"),
-    post: createMethod("post"),
-    put: createMethod("put"),
-    delete: createMethod("delete")
-  }
-
-  return apiClient
-}
-
-export default getServerApiClient

package/src/apiClient/index.ts

@@ -1,86 +0,0 @@
-import type { Application } from "express"
-
-// import { Ctx } from "@rpcbase/api"
-type Ctx = any
-
-
-type ServerArgs = {
-  app: Application;
-};
-
-type PayloadNotCtx = Record<string, unknown> & {
-  [P in keyof Ctx]?: never;
-};
-
-type ApiClientMethod = <TResponse = Record<string, unknown>>(
-  path: string,
-  payload: PayloadNotCtx,
-  ctx?: Ctx,
-) => Promise<TResponse>;
-
-export type HttpMethod = "get" | "put" | "post" | "delete";
-type MethodRecord<T> = Record<HttpMethod, T>;
-
-export type ApiClient = MethodRecord<ApiClientMethod>;
-
-let apiClient: ApiClient
-
-export const initApiClient = async (args?: ServerArgs) => {
-  // @ts-expect-error -- Suppress TS2339: Property 'env' does not exist on type 'ImportMeta'
-  if (import.meta.env.SSR) {
-    if (!args) {
-      throw new Error("Server args must be provided in SSR mode")
-    }
-
-    const { getServerApiClient } = await import("./getServerApiClient")
-
-    apiClient = await getServerApiClient(args.app)
-  } else {
-    const axios = (await import("axios")).default
-
-    const axiosClient = axios.create({
-      baseURL: "/",
-      withCredentials: true,
-      headers: {
-        "Content-Type": "application/json",
-      },
-    })
-
-    const createMethod = (method: string): ApiClientMethod => {
-      return async <TResponse = Record<string, unknown>>(
-        path: string,
-        payload: PayloadNotCtx,
-        _ctx?: Ctx,
-      ): Promise<TResponse> => {
-        const config = {
-          method,
-          url: path,
-          data: payload,
-          headers: {
-            // ...(typeof ctxOrPath !== 'string' && {
-            //   // 'X-Custom-Header': ctxOrPath.someHeaderValue,
-            //   // ...ctxOrPath.additionalHeaders,
-            // }),
-          },
-        }
-
-        try {
-          const response = await axiosClient(config)
-          return response.data
-        } catch (error) {
-          console.log("AXIOS API ERROR", error)
-          throw error
-        }
-      }
-    }
-
-    apiClient = {
-      get: createMethod("get"),
-      put: createMethod("put"),
-      post: createMethod("post"),
-      delete: createMethod("delete"),
-    }
-  }
-}
-
-export { apiClient }

package/src/cleanupURL.ts

@@ -1,46 +0,0 @@
-const CLEANUP_WAIT_DELAY = 1000
-
-// Function to clean UTM params while preserving others
-export const cleanupURL = () => {
-  if (import.meta.env.SSR) {
-    return
-  }
-
-  const runCleanup = () => {
-    // Add a small delay before running cleanupURL
-    setTimeout(() => {
-      const url = new URL(window.location.href)
-      const params = new URLSearchParams(url.search)
-
-      // Get all current query parameter keys
-      const paramKeys = Array.from(params.keys())
-
-      // Remove any parameter starting with 'utm_'
-      paramKeys.forEach((key) => {
-        if (key.startsWith("utm_")) {
-          params.delete(key)
-        }
-      })
-
-      // Build the new URL: keep pathname and append remaining query params (if any)
-      const cleanUrl =
-        url.pathname +
-        (params.toString() ? "?" + params.toString() : "") +
-        url.hash
-
-      // Update the browser URL without reloading
-      window.history.replaceState({}, document.title, cleanUrl)
-    }, CLEANUP_WAIT_DELAY)
-  }
-
-  // If DOM is already loaded, schedule the cleanup
-  if (
-    document.readyState === "complete" ||
-    document.readyState === "interactive"
-  ) {
-    runCleanup()
-  } else {
-    // Otherwise wait for the DOM content to be loaded
-    document.addEventListener("DOMContentLoaded", runCleanup, { once: true })
-  }
-}

package/src/getFeatureFlag.ts

@@ -1,58 +0,0 @@
-import _snakeCase from "lodash/snakeCase"
-
-
-export const getFeatureFlag = async (
-  flag: string,
-): Promise<boolean | string | undefined> => {
-  const envKey = `RB_PUBLIC_FLAG_${_snakeCase(flag).toUpperCase()}`
-
-  if (import.meta.env.SSR) {
-    if (process.env[envKey] !== undefined) {
-      return process.env[envKey]
-    }
-
-    const startTime = performance.now()
-    const { PostHog } = await import("posthog-node")
-    const client = new PostHog(
-      process.env.RB_PUBLIC_POSTHOG_KEY!,
-      { host: "https://eu.i.posthog.com" },
-    )
-
-    const distinctId = "server"
-    console.log("TODO: NYI server side feature flags client distinctId")
-    const value = await client.getFeatureFlag(flag, distinctId)
-    const endTime = performance.now()
-    console.log(`SSR: Feature flag "${flag}" loaded in ${(endTime - startTime).toFixed(2)}ms`)
-
-    return value
-  } else {
-    if (import.meta.env[envKey] !== undefined) {
-      return import.meta.env[envKey]
-    }
-
-    const startTime = performance.now()
-    const { posthog } = await import("posthog-js")
-
-    let hasLoadedFeatureFlags = false
-
-    function waitForFeatureFlags(): Promise<void> {
-      return new Promise((resolve) => {
-        if (hasLoadedFeatureFlags) {
-          resolve()
-        } else {
-          posthog.onFeatureFlags(() => {
-            hasLoadedFeatureFlags = true
-            resolve()
-          })
-        }
-      })
-    }
-
-    await waitForFeatureFlags()
-    const endTime = performance.now()
-
-    console.log(`Client: Feature flag "${flag}" loaded in ${(endTime - startTime).toFixed(2)}ms`)
-
-    return posthog.getFeatureFlag(flag)
-  }
-}

package/src/hooks/index.ts

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

package/src/hooks/useMediaQuery.ts

@@ -1,31 +0,0 @@
-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)
-}

package/src/hooks/useThrottledMeasure.ts

@@ -1,49 +0,0 @@
-import {useState, useEffect, useRef, useCallback} from "react"
-import useMeasure from "react-use/lib/useMeasure"
-import _throttle from "lodash/throttle"
-import { deepEqual } from "fast-equals"
-
-
-const useMeasureHook = useMeasure.default || useMeasure
-
-const DEFAULT_THROTTLE_TIME = 16
-
-export const useThrottledMeasure = (throttleDuration = DEFAULT_THROTTLE_TIME) => {
-  const hasInitialMeasure = useRef(false)
-
-  const [ref, measuredRect] = useMeasureHook()
-  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 deepEqual(current, newRect) ? current : newRect
-        })
-      },
-      throttleDuration,
-      {leading: true, trailing: true},
-    ),
-    [throttleDuration],
-  )
-
-  useEffect(() => {
-    if (measuredRect.width > 0 && !hasInitialMeasure.current) {
-      hasInitialMeasure.current = true
-      setRect((current) => {
-        return deepEqual(current, measuredRect) ? current : measuredRect
-      })
-      return
-    }
-
-    throttledSetRect(measuredRect)
-
-    return () => {
-      throttledSetRect.cancel()
-    }
-  }, [measuredRect, throttledSetRect])
-
-  return [ref, rect]
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from "./apiClient"
-export * from "./initWithRoutes"
-export * from "./types"
-export * from "./getFeatureFlag"
-export * from "./RootProvider"