@sylphx/lens-react 2.1.4 → 2.1.6

package/dist/index.js

@@ -1,7 +1,15 @@
 // src/context.tsx
 import { createContext, useContext } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
-var LensContext = createContext(null);
+var LENS_CONTEXT_KEY = Symbol.for("@sylphx/lens-react/context");
+function getOrCreateContext() {
+  const globalObj = globalThis;
+  if (!globalObj[LENS_CONTEXT_KEY]) {
+    globalObj[LENS_CONTEXT_KEY] = createContext(null);
+  }
+  return globalObj[LENS_CONTEXT_KEY];
+}
+var LensContext = getOrCreateContext();
 function LensProvider({ client, children }) {
   return /* @__PURE__ */ jsxDEV(LensContext.Provider, {
     value: client,
@@ -16,29 +24,57 @@ function useLensClient() {
   return client;
 }
 // src/hooks.ts
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+function queryReducer(state, action) {
+  switch (action.type) {
+    case "RESET":
+      return { data: null, loading: false, error: null };
+    case "START":
+      return { ...state, loading: true, error: null };
+    case "SUCCESS":
+      return { data: action.data, loading: false, error: null };
+    case "ERROR":
+      return { ...state, loading: false, error: action.error };
+    case "LOADING_DONE":
+      return { ...state, loading: false };
+    default:
+      return state;
+  }
+}
 function useQuery(selector, paramsOrDeps, options) {
   const client = useLensClient();
   const isAccessorMode = Array.isArray(paramsOrDeps);
   const paramsKey = !isAccessorMode ? JSON.stringify(paramsOrDeps) : null;
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
   const query = useMemo(() => {
     if (options?.skip)
       return null;
     if (isAccessorMode) {
-      const querySelector = selector;
+      const querySelector = selectorRef.current;
       return querySelector(client);
     }
-    const routeSelector = selector;
+    const routeSelector = selectorRef.current;
     const route = routeSelector(client);
     if (!route)
       return null;
     return route(paramsOrDeps);
-  }, isAccessorMode ? [client, options?.skip, ...paramsOrDeps] : [client, selector, paramsKey, options?.skip]);
+  }, isAccessorMode ? [client, options?.skip, ...paramsOrDeps] : [client, paramsKey, options?.skip]);
   const selectRef = useRef(options?.select);
   selectRef.current = options?.select;
-  const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(query != null && !options?.skip);
-  const [error, setError] = useState(null);
+  const initialState = {
+    data: null,
+    loading: query != null && !options?.skip,
+    error: null
+  };
+  const [state, dispatch] = useReducer(queryReducer, initialState);
   const mountedRef = useRef(true);
   const queryRef = useRef(query);
   queryRef.current = query;
@@ -48,32 +84,31 @@ function useQuery(selector, paramsOrDeps, options) {
   useEffect(() => {
     mountedRef.current = true;
     if (query == null) {
-      setData(null);
-      setLoading(false);
-      setError(null);
+      dispatch({ type: "RESET" });
       return;
     }
-    setLoading(true);
-    setError(null);
+    dispatch({ type: "START" });
     let hasReceivedData = false;
     const unsubscribe = query.subscribe((value) => {
       if (mountedRef.current) {
         hasReceivedData = true;
-        setData(transform(value));
-        setLoading(false);
+        dispatch({ type: "SUCCESS", data: transform(value) });
       }
     });
     query.then((value) => {
-      if (mountedRef.current && !hasReceivedData) {
-        setData(transform(value));
-      }
       if (mountedRef.current) {
-        setLoading(false);
+        if (!hasReceivedData) {
+          dispatch({ type: "SUCCESS", data: transform(value) });
+        } else {
+          dispatch({ type: "LOADING_DONE" });
+        }
       }
     }, (err) => {
       if (mountedRef.current) {
-        setError(err instanceof Error ? err : new Error(String(err)));
-        setLoading(false);
+        dispatch({
+          type: "ERROR",
+          error: err instanceof Error ? err : new Error(String(err))
+        });
       }
     });
     return () => {
@@ -85,21 +120,21 @@ function useQuery(selector, paramsOrDeps, options) {
     const currentQuery = queryRef.current;
     if (currentQuery == null)
       return;
-    setLoading(true);
-    setError(null);
+    dispatch({ type: "START" });
     currentQuery.then((value) => {
       if (mountedRef.current) {
-        setData(transform(value));
-        setLoading(false);
+        dispatch({ type: "SUCCESS", data: transform(value) });
       }
     }, (err) => {
       if (mountedRef.current) {
-        setError(err instanceof Error ? err : new Error(String(err)));
-        setLoading(false);
+        dispatch({
+          type: "ERROR",
+          error: err instanceof Error ? err : new Error(String(err))
+        });
       }
     });
   }, [transform]);
-  return { data, loading, error, refetch };
+  return { data: state.data, loading: state.loading, error: state.error, refetch };
 }
 function useMutation(selector) {
   const client = useLensClient();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sylphx/lens-react",
-	"version": "2.1.4",
+	"version": "2.1.6",
 	"description": "React bindings for Lens API framework",
 	"type": "module",
 	"main": "./dist/index.js",

package/src/context.tsx

@@ -2,20 +2,45 @@
  * @sylphx/lens-react - Context Provider
  *
  * Provides Lens client to React component tree.
+ *
+ * Uses global singleton pattern to ensure the same context is shared
+ * across multiple module instances (important for monorepos where
+ * the same package may be resolved to different paths).
  */
 
 import type { LensClient } from "@sylphx/lens-client";
 import { createContext, type ReactElement, type ReactNode, useContext } from "react";
 
 // =============================================================================
-// Context
+// Context (Global Singleton)
 // =============================================================================
 
 /**
- * Context for Lens client
+ * Global key for storing the singleton context.
+ * Using a Symbol ensures no collision with other globals.
+ */
+const LENS_CONTEXT_KEY = Symbol.for("@sylphx/lens-react/context");
+
+/**
+ * Get or create the global singleton context.
+ * This ensures that even if the module is loaded multiple times
+ * (common in monorepos), all instances share the same React context.
+ */
+function getOrCreateContext(): React.Context<LensClient<any, any> | null> {
+	const globalObj = globalThis as unknown as Record<symbol, React.Context<LensClient<any, any> | null>>;
+
+	if (!globalObj[LENS_CONTEXT_KEY]) {
+		globalObj[LENS_CONTEXT_KEY] = createContext<LensClient<any, any> | null>(null);
+	}
+
+	return globalObj[LENS_CONTEXT_KEY];
+}
+
+/**
+ * Context for Lens client (singleton)
  * Using any for internal storage to avoid type constraint issues
  */
-const LensContext = createContext<LensClient<any, any> | null>(null);
+const LensContext = getOrCreateContext();
 
 // =============================================================================
 // Provider

package/src/hooks.ts

@@ -27,7 +27,15 @@
  */
 
 import type { LensClient, MutationResult, QueryResult } from "@sylphx/lens-client";
-import { type DependencyList, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+	type DependencyList,
+	useCallback,
+	useEffect,
+	useMemo,
+	useReducer,
+	useRef,
+	useState,
+} from "react";
 import { useLensClient } from "./context.js";
 
 // =============================================================================
@@ -68,6 +76,40 @@ export interface UseQueryOptions<TData = unknown, TSelected = TData> {
 	select?: (data: TData) => TSelected;
 }
 
+// =============================================================================
+// Query State Reducer (for atomic state updates)
+// =============================================================================
+
+interface QueryState<T> {
+	data: T | null;
+	loading: boolean;
+	error: Error | null;
+}
+
+type QueryAction<T> =
+	| { type: "RESET" }
+	| { type: "START" }
+	| { type: "SUCCESS"; data: T }
+	| { type: "ERROR"; error: Error }
+	| { type: "LOADING_DONE" };
+
+function queryReducer<T>(state: QueryState<T>, action: QueryAction<T>): QueryState<T> {
+	switch (action.type) {
+		case "RESET":
+			return { data: null, loading: false, error: null };
+		case "START":
+			return { ...state, loading: true, error: null };
+		case "SUCCESS":
+			return { data: action.data, loading: false, error: null };
+		case "ERROR":
+			return { ...state, loading: false, error: action.error };
+		case "LOADING_DONE":
+			return { ...state, loading: false };
+		default:
+			return state;
+	}
+}
+
 /** Client type for callbacks */
 type Client = LensClient<any, any>;
 
@@ -184,6 +226,10 @@ export function useQuery<TParams, TResult, TSelected = TResult>(
 	// Stable params key for Route + Params mode
 	const paramsKey = !isAccessorMode ? JSON.stringify(paramsOrDeps) : null;
 
+	// Use ref to track selector - avoids needing useCallback from users
+	const selectorRef = useRef(selector);
+	selectorRef.current = selector;
+
 	// Create query - memoized based on route/params or deps
 	const query = useMemo(
 		() => {
@@ -191,11 +237,11 @@ export function useQuery<TParams, TResult, TSelected = TResult>(
 
 			if (isAccessorMode) {
 				// Accessor mode: selector returns QueryResult directly
-				const querySelector = selector as QuerySelector<TResult>;
+				const querySelector = selectorRef.current as QuerySelector<TResult>;
 				return querySelector(client);
 			}
 			// Route + Params mode: selector returns route function
-			const routeSelector = selector as RouteSelector<TParams, TResult>;
+			const routeSelector = selectorRef.current as RouteSelector<TParams, TResult>;
 			const route = routeSelector(client);
 			if (!route) return null;
 			return route(paramsOrDeps as TParams);
@@ -205,16 +251,20 @@ export function useQuery<TParams, TResult, TSelected = TResult>(
 			? // eslint-disable-next-line react-hooks/exhaustive-deps
 				[client, options?.skip, ...(paramsOrDeps as DependencyList)]
 			: // eslint-disable-next-line react-hooks/exhaustive-deps
-				[client, selector, paramsKey, options?.skip],
+				[client, paramsKey, options?.skip],
 	);
 
 	// Use ref for select to avoid it being a dependency
 	const selectRef = useRef(options?.select);
 	selectRef.current = options?.select;
 
-	const [data, setData] = useState<TSelected | null>(null);
-	const [loading, setLoading] = useState(query != null && !options?.skip);
-	const [error, setError] = useState<Error | null>(null);
+	// Use reducer for atomic state updates (prevents cascading re-renders)
+	const initialState: QueryState<TSelected> = {
+		data: null,
+		loading: query != null && !options?.skip,
+		error: null,
+	};
+	const [state, dispatch] = useReducer(queryReducer<TSelected>, initialState);
 
 	// Track mounted state
 	const mountedRef = useRef(true);
@@ -234,14 +284,11 @@ export function useQuery<TParams, TResult, TSelected = TResult>(
 
 		// Handle null/undefined query
 		if (query == null) {
-			setData(null);
-			setLoading(false);
-			setError(null);
+			dispatch({ type: "RESET" });
 			return;
 		}
 
-		setLoading(true);
-		setError(null);
+		dispatch({ type: "START" });
 
 		// Track if subscribe has provided data (to avoid duplicate updates from then)
 		let hasReceivedData = false;
@@ -250,8 +297,7 @@ export function useQuery<TParams, TResult, TSelected = TResult>(
 		const unsubscribe = query.subscribe((value) => {
 			if (mountedRef.current) {
 				hasReceivedData = true;
-				setData(transform(value));
-				setLoading(false);
+				dispatch({ type: "SUCCESS", data: transform(value) });
 			}
 		});
 
@@ -259,17 +305,20 @@ export function useQuery<TParams, TResult, TSelected = TResult>(
 		// Only setData if subscribe hasn't already provided data (one-shot queries)
 		query.then(
 			(value) => {
-				if (mountedRef.current && !hasReceivedData) {
-					setData(transform(value));
-				}
 				if (mountedRef.current) {
-					setLoading(false);
+					if (!hasReceivedData) {
+						dispatch({ type: "SUCCESS", data: transform(value) });
+					} else {
+						dispatch({ type: "LOADING_DONE" });
+					}
 				}
 			},
 			(err) => {
 				if (mountedRef.current) {
-					setError(err instanceof Error ? err : new Error(String(err)));
-					setLoading(false);
+					dispatch({
+						type: "ERROR",
+						error: err instanceof Error ? err : new Error(String(err)),
+					});
 				}
 			},
 		);
@@ -285,26 +334,26 @@ export function useQuery<TParams, TResult, TSelected = TResult>(
 		const currentQuery = queryRef.current;
 		if (currentQuery == null) return;
 
-		setLoading(true);
-		setError(null);
+		dispatch({ type: "START" });
 
 		currentQuery.then(
 			(value) => {
 				if (mountedRef.current) {
-					setData(transform(value));
-					setLoading(false);
+					dispatch({ type: "SUCCESS", data: transform(value) });
 				}
 			},
 			(err) => {
 				if (mountedRef.current) {
-					setError(err instanceof Error ? err : new Error(String(err)));
-					setLoading(false);
+					dispatch({
+						type: "ERROR",
+						error: err instanceof Error ? err : new Error(String(err)),
+					});
 				}
 			},
 		);
 	}, [transform]);
 
-	return { data, loading, error, refetch };
+	return { data: state.data, loading: state.loading, error: state.error, refetch };
 }
 
 // =============================================================================