@quiltt/react 4.5.1 → 5.0.1

package/src/hooks/useSession.ts

@@ -42,13 +42,39 @@ export const useSession = (storageKey = 'session'): [Maybe<QuilttJWT> | undefine
     const expirationMS = session.claims.exp * 1000
     const expire = () => setToken(null)
 
+    const checkExpiration = () => {
+      if (Date.now() >= expirationMS) {
+        expire()
+        return true
+      }
+      return false
+    }
+
     // Clear immediately if already expired
-    if (Date.now() >= expirationMS) {
-      expire()
-    } else {
-      // Set timer to clear session at expiration time
-      sessionTimer.set(expire, expirationMS - Date.now())
-      return () => sessionTimer.clear(expire)
+    if (checkExpiration()) {
+      return
+    }
+
+    // Set timer to clear session at expiration time
+    sessionTimer.set(expire, expirationMS - Date.now())
+
+    // Also check expiration when tab becomes visible (handles idle sessions)
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        checkExpiration()
+      }
+    }
+
+    // Only add listener in browser environment
+    if (typeof document !== 'undefined') {
+      document.addEventListener('visibilitychange', handleVisibilityChange)
+    }
+
+    return () => {
+      sessionTimer.clear(expire)
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('visibilitychange', handleVisibilityChange)
+      }
     }
   }, [session, setToken])
 

package/src/hooks/useStorage.ts

@@ -52,23 +52,15 @@ export const useStorage = <T>(
   )
 
   useEffect(() => {
-    // Subscribe to storage changes and ensure state is synchronized
-    // Reruns when key or state changes to maintain consistency
-    GlobalStorage.subscribe(key, (newValue) => {
-      // Only update if the value is different from current state
-      if (newValue !== hookState) {
-        setHookState(newValue)
-      }
-    })
-
-    // Initial sync
-    const initialValue = getStorage()
-    if (initialValue !== hookState) {
-      setHookState(initialValue)
+    // Subscribe to storage changes from other sources (e.g., other hook instances, browser tabs)
+    const handleStorageChange = (newValue: Maybe<T> | undefined) => {
+      setHookState(newValue)
     }
 
-    return () => GlobalStorage.unsubscribe(key, setHookState)
-  }, [key, hookState, getStorage])
+    GlobalStorage.subscribe(key, handleStorageChange)
+
+    return () => GlobalStorage.unsubscribe(key, handleStorageChange)
+  }, [key])
 
   return [hookState, setStorage]
 }

package/src/index.ts

@@ -1,3 +1,64 @@
+// ============================================================================
+// Core Module - Apollo Client core functionality
+// ============================================================================
+export type {
+  ApolloQueryResult,
+  DocumentNode,
+  ErrorPolicy,
+  FetchPolicy,
+  NormalizedCacheObject,
+  OperationVariables,
+  TypedDocumentNode,
+  WatchQueryFetchPolicy,
+} from '@apollo/client'
+export {
+  ApolloClient,
+  gql,
+  InMemoryCache,
+  NetworkStatus,
+  ObservableQuery,
+} from '@apollo/client'
+// ============================================================================
+// Errors Module - Error handling utilities
+// ============================================================================
+export {
+  CombinedGraphQLErrors,
+  CombinedProtocolErrors,
+  LinkError,
+  LocalStateError,
+  ServerError,
+  ServerParseError,
+  UnconventionalError,
+} from '@apollo/client/errors'
+// ============================================================================
+// React Module - React hooks and components
+// ============================================================================
+export type {
+  MutationHookOptions,
+  MutationResult,
+  QueryHookOptions,
+  QueryResult,
+  SubscriptionHookOptions,
+  SubscriptionResult,
+} from '@apollo/client/react'
+export {
+  ApolloProvider,
+  createQueryPreloader,
+  skipToken,
+  useApolloClient,
+  useBackgroundQuery,
+  useFragment,
+  useLazyQuery,
+  useLoadableQuery,
+  useMutation,
+  useQuery,
+  useQueryRefHandlers,
+  useReactiveVar,
+  useReadQuery,
+  useSubscription,
+  useSuspenseQuery,
+} from '@apollo/client/react'
+export { MockedProvider } from '@apollo/client/testing/react'
 export * from '@quiltt/core'
 
 export * from './components'

package/src/providers/QuilttAuthProvider.tsx

@@ -3,11 +3,11 @@
 import type { FC, PropsWithChildren } from 'react'
 import { useEffect, useMemo, useRef } from 'react'
 
-import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider.js'
-import { InMemoryCache, QuilttClient } from '@quiltt/core'
+import { ApolloProvider } from '@apollo/client/react'
+import { createVersionLink, InMemoryCache, QuilttClient } from '@quiltt/core'
 
 import { useQuilttSession } from '@/hooks'
-import { isDeepEqual } from '@/utils'
+import { getPlatformInfo, isDeepEqual } from '@/utils'
 
 export type QuilttAuthProviderProps = PropsWithChildren & {
   /** A custom QuilttClient instance to use instead of the default */
@@ -30,6 +30,12 @@ export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({
   const { session, importSession } = useQuilttSession()
   const previousSessionRef = useRef(session)
   const previousTokenRef = useRef<string | undefined>(undefined)
+  const importSessionRef = useRef(importSession)
+
+  // Keep importSession ref up to date
+  useEffect(() => {
+    importSessionRef.current = importSession
+  }, [importSession])
 
   // Memoize the client to avoid unnecessary re-renders
   const apolloClient = useMemo(
@@ -37,6 +43,7 @@ export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({
       graphqlClient ||
       new QuilttClient({
         cache: new InMemoryCache(),
+        versionLink: createVersionLink(getPlatformInfo()),
       }),
     [graphqlClient]
   )
@@ -44,13 +51,13 @@ export const QuilttAuthProvider: FC<QuilttAuthProviderProps> = ({
   // Import passed in token (only if value has changed)
   useEffect(() => {
     if (token && token !== previousTokenRef.current) {
-      importSession(token)
+      importSessionRef.current(token)
       previousTokenRef.current = token
     } else if (!token) {
       // Reset ref when token becomes undefined to allow re-import of same token later
       previousTokenRef.current = undefined
     }
-  }, [token, importSession])
+  }, [token])
 
   // Reset Client Store when session changes (using deep comparison)
   useEffect(() => {

package/src/providers/QuilttProvider.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { useMemo } from 'react'
 
 import { QuilttProviderRender } from '@/contexts/QuilttProviderRender'
 
@@ -20,8 +21,11 @@ export const QuilttProvider: FC<QuilttProviderProps> = ({
   // Will produce false positives for valid patterns like: <QuilttProvider><MyPage /></QuilttProvider>
   // where MyPage renders SDK components (which is correct usage).
   // The flag-based approach is simple but imprecise - a proper solution would require render stack tracking.
+  // Memoize context value to prevent unnecessary re-renders
+  const renderContextValue = useMemo(() => ({ isRenderingProvider: true }), [])
+
   return (
-    <QuilttProviderRender.Provider value={{ isRenderingProvider: true }}>
+    <QuilttProviderRender.Provider value={renderContextValue}>
       <QuilttSettingsProvider clientId={clientId}>
         <QuilttAuthProvider token={token} graphqlClient={graphqlClient}>
           {children}

package/src/providers/QuilttSettingsProvider.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { FC, PropsWithChildren } from 'react'
-import { useState } from 'react'
+import { useMemo } from 'react'
 
 import { QuilttSettings } from '@/contexts/QuilttSettings'
 
@@ -11,11 +11,10 @@ export type QuilttSettingsProviderProps = PropsWithChildren & {
 }
 
 export const QuilttSettingsProvider: FC<QuilttSettingsProviderProps> = ({ clientId, children }) => {
-  const [_clientId] = useState(clientId)
+  // Memoize context value to prevent unnecessary re-renders
+  const contextValue = useMemo(() => ({ clientId }), [clientId])
 
-  return (
-    <QuilttSettings.Provider value={{ clientId: _clientId }}>{children}</QuilttSettings.Provider>
-  )
+  return <QuilttSettings.Provider value={contextValue}>{children}</QuilttSettings.Provider>
 }
 
 export default QuilttSettingsProvider

package/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './isDeepEqual'
+export * from './telemetry'

package/src/utils/telemetry.ts

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { getUserAgent as coreGetUserAgent, getBrowserInfo } from '@quiltt/core'
+
+// Re-export getBrowserInfo
+export { getBrowserInfo }
+
+/**
+ * Gets the React version from the runtime
+ */
+export const getReactVersion = (): string => {
+  return React.version || 'unknown'
+}
+
+/**
+ * Generates platform information string for React web
+ * Format: React/<version>; <browser>/<version>
+ */
+export const getPlatformInfo = (): string => {
+  const reactVersion = getReactVersion()
+  const browserInfo = getBrowserInfo()
+
+  return `React/${reactVersion}; ${browserInfo}`
+}
+
+/**
+ * Generates User-Agent string for React SDK
+ * Format: Quiltt/<sdk-version> (React/<react-version>; <browser>/<version>)
+ */
+export const getUserAgent = (sdkVersion: string): string => {
+  const platformInfo = getPlatformInfo()
+  return coreGetUserAgent(sdkVersion, platformInfo)
+}

package/dist/QuilttAuthProvider-12s-DE-ePRo_.js

@@ -1,205 +0,0 @@
-'use client';
-import { useCallback, useRef, useMemo, useEffect } from 'react';
-import { JsonWebTokenParse, QuilttClient, InMemoryCache } from '@quiltt/core';
-import '@apollo/client/react/hooks/useApolloClient.js';
-import './QuilttSettings-12s-BK-0SQME.js';
-import './useSession-12s-7GOn4sUn.js';
-import 'use-debounce';
-import './QuilttProviderRender-12s-DtQtubjL.js';
-import { jsx } from 'react/jsx-runtime';
-import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider.js';
-import { u as useQuilttSession } from './useQuilttSession-12s-sRvULtJv.js';
-
-const useAuthenticateSession = (auth, setSession)=>{
-    const authenticateSession = useCallback(async (payload, callbacks)=>{
-        const response = await auth.authenticate(payload);
-        switch(response.status){
-            case 201:
-                setSession(response.data.token);
-                if (callbacks.onSuccess) return callbacks.onSuccess();
-                break;
-            case 401:
-                if (callbacks.onFailure) return callbacks.onFailure();
-                break;
-            case 422:
-                if (callbacks.onError) return callbacks.onError(response.data);
-                break;
-            default:
-                throw new Error(`AuthAPI.authenticate: Unexpected response status ${response.status}`);
-        }
-    }, [
-        auth,
-        setSession
-    ]);
-    return authenticateSession;
-};
-
-const useIdentifySession = (auth, setSession)=>{
-    const identifySession = useCallback(async (payload, callbacks)=>{
-        const response = await auth.identify(payload);
-        switch(response.status){
-            case 201:
-                setSession(response.data.token);
-                if (callbacks.onSuccess) return callbacks.onSuccess();
-                break;
-            case 202:
-                if (callbacks.onChallenged) return callbacks.onChallenged();
-                break;
-            case 403:
-                if (callbacks.onForbidden) return callbacks.onForbidden();
-                break;
-            case 422:
-                if (callbacks.onError) return callbacks.onError(response.data);
-                break;
-            default:
-                throw new Error(`AuthAPI.identify: Unexpected response status ${response.status}`);
-        }
-    }, [
-        auth,
-        setSession
-    ]);
-    return identifySession;
-};
-
-/**
- * Optionally Accepts environmentId to validate session is from with your desired environment
- */ const useImportSession = (auth, session, setSession, environmentId)=>{
-    const importSession = useCallback(async (token)=>{
-        // Is there a token?
-        if (!token) return !!session;
-        // Is this token already imported?
-        if (session && session.token === token) return true;
-        const jwt = JsonWebTokenParse(token);
-        // Is this token a valid JWT?
-        if (!jwt) return false;
-        // Is this token within the expected environment?
-        if (environmentId && jwt.claims.eid !== environmentId) return false;
-        // Is this token active?
-        const response = await auth.ping(token);
-        switch(response.status){
-            case 200:
-                setSession(token);
-                return true;
-            case 401:
-                return false;
-            default:
-                throw new Error(`AuthAPI.ping: Unexpected response status ${response.status}`);
-        }
-    }, [
-        auth,
-        session,
-        setSession,
-        environmentId
-    ]);
-    return importSession;
-};
-
-const useRevokeSession = (auth, session, setSession)=>{
-    const revokeSession = useCallback(async ()=>{
-        if (!session) return;
-        await auth.revoke(session.token);
-        setSession(null);
-    }, [
-        auth,
-        session,
-        setSession
-    ]);
-    return revokeSession;
-};
-
-/**
- * Performs a deep equality comparison between two values
- *
- * This function recursively compares all properties to determine if they are equal.
- *
- * @example
- * ```ts
- * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } }) // true
- * isDeepEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 3 } }) // false
- * ```
- */ const isDeepEqual = (obj1, obj2)=>{
-    // Handle primitive types and null/undefined
-    if (obj1 === obj2) return true;
-    if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
-    // Handle special object types
-    if (obj1 instanceof Date && obj2 instanceof Date) {
-        return obj1.getTime() === obj2.getTime();
-    }
-    if (obj1 instanceof RegExp && obj2 instanceof RegExp) {
-        return obj1.toString() === obj2.toString();
-    }
-    if (obj1 instanceof Map && obj2 instanceof Map) {
-        if (obj1.size !== obj2.size) return false;
-        for (const [key, value] of obj1){
-            if (!obj2.has(key) || !isDeepEqual(value, obj2.get(key))) return false;
-        }
-        return true;
-    }
-    if (obj1 instanceof Set && obj2 instanceof Set) {
-        if (obj1.size !== obj2.size) return false;
-        const arr2 = Array.from(obj2);
-        for (const item of obj1){
-            if (!arr2.some((value)=>isDeepEqual(item, value))) return false;
-        }
-        return true;
-    }
-    // Handle arrays
-    if (Array.isArray(obj1) && Array.isArray(obj2)) {
-        if (obj1.length !== obj2.length) return false;
-        return obj1.every((value, index)=>isDeepEqual(value, obj2[index]));
-    }
-    // If one is array and other isn't, they're not equal
-    if (Array.isArray(obj1) || Array.isArray(obj2)) return false;
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-    if (keys1.length !== keys2.length) return false;
-    return keys1.every((key)=>{
-        return Object.hasOwn(obj2, key) && isDeepEqual(obj1[key], obj2[key]);
-    });
-};
-
-/**
- * If a token is provided, will validate the token against the api and then import
- * it into trusted storage. While this process is happening, the component is put
- * into a loading state and the children are not rendered to prevent race conditions
- * from triggering within the transitionary state.
- */ const QuilttAuthProvider = ({ graphqlClient, token, children })=>{
-    const { session, importSession } = useQuilttSession();
-    const previousSessionRef = useRef(session);
-    const previousTokenRef = useRef(undefined);
-    // Memoize the client to avoid unnecessary re-renders
-    const apolloClient = useMemo(()=>graphqlClient || new QuilttClient({
-            cache: new InMemoryCache()
-        }), [
-        graphqlClient
-    ]);
-    // Import passed in token (only if value has changed)
-    useEffect(()=>{
-        if (token && token !== previousTokenRef.current) {
-            importSession(token);
-            previousTokenRef.current = token;
-        } else if (!token) {
-            // Reset ref when token becomes undefined to allow re-import of same token later
-            previousTokenRef.current = undefined;
-        }
-    }, [
-        token,
-        importSession
-    ]);
-    // Reset Client Store when session changes (using deep comparison)
-    useEffect(()=>{
-        if (!isDeepEqual(session, previousSessionRef.current)) {
-            apolloClient.resetStore();
-            previousSessionRef.current = session;
-        }
-    }, [
-        session,
-        apolloClient
-    ]);
-    return /*#__PURE__*/ jsx(ApolloProvider, {
-        client: apolloClient,
-        children: children
-    });
-};
-
-export { QuilttAuthProvider as Q, useIdentifySession as a, useAuthenticateSession as b, useRevokeSession as c, isDeepEqual as i, useImportSession as u };

package/dist/useQuilttSession-12s-sRvULtJv.js

@@ -1,39 +0,0 @@
-'use client';
-import { useMemo, useCallback } from 'react';
-import { AuthAPI } from '@quiltt/core';
-import { u as useImportSession, a as useIdentifySession, b as useAuthenticateSession, c as useRevokeSession } from './QuilttAuthProvider-12s-DE-ePRo_.js';
-import { u as useQuilttSettings } from './useQuilttSettings-12s--rCJoNHD.js';
-import { u as useSession } from './useSession-12s-7GOn4sUn.js';
-
-const useQuilttSession = (environmentId)=>{
-    const { clientId } = useQuilttSettings();
-    const [session, setSession] = useSession();
-    const auth = useMemo(()=>new AuthAPI(clientId), [
-        clientId
-    ]);
-    const importSession = useImportSession(auth, session, setSession, environmentId);
-    const identifySession = useIdentifySession(auth, setSession);
-    const authenticateSession = useAuthenticateSession(auth, setSession);
-    const revokeSession = useRevokeSession(auth, session, setSession);
-    /**
-   * Forget current session.
-   * @param token specific token to forget, to help guard against async processes clearing the wrong session
-   */ const forgetSession = useCallback(async (token)=>{
-        if (!token || session && token && token === session.token) {
-            setSession(null);
-        }
-    }, [
-        session,
-        setSession
-    ]);
-    return {
-        session,
-        importSession,
-        identifySession,
-        authenticateSession,
-        revokeSession,
-        forgetSession
-    };
-};
-
-export { useQuilttSession as u };