@umituz/react-native-design-system 4.25.112 → 4.25.114

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.112",
-  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
+  "version": "4.25.114",
+  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities - TanStack persistence now fully lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "sideEffects": false,
@@ -172,6 +172,10 @@
     "react-native-svg": "^15.12.1",
     "rn-emoji-keyboard": "^1.7.0"
   },
+  "optionalDependencies": {
+    "@tanstack/query-async-storage-persister": "^5.0.0",
+    "@tanstack/react-query-persist-client": "^5.0.0"
+  },
   "keywords": [
     "react-native",
     "design-system",

package/src/tanstack/index.ts

@@ -81,7 +81,6 @@ export {
 } from './infrastructure/config/QueryClientConfig';
 
 export {
-  createPersister,
   clearPersistedCache,
   getPersistedCacheSize,
   type PersisterFactoryOptions,

package/src/tanstack/infrastructure/config/PersisterConfig.ts

@@ -3,12 +3,11 @@
  * Infrastructure layer - AsyncStorage persistence setup
  *
  * General-purpose persistence configuration for any React Native app
+ * Lazy loads TanStack persistence packages to reduce bundle size
  */
 
-import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import { storageService } from '../../../storage';
 import { DEFAULT_GC_TIME } from '../../domain/constants/CacheDefaults';
-import type { Persister } from '@tanstack/react-query-persist-client';
 
 /**
  * Persister factory options
@@ -42,73 +41,6 @@ export interface PersisterFactoryOptions {
   throttleTime?: number;
 }
 
-/**
- * Create an AsyncStorage persister for TanStack Query
- *
- * @example
- * ```typescript
- * const persister = createPersister({
- *   keyPrefix: 'myapp',
- *   maxAge: 24 * 60 * 60 * 1000, // 24 hours
- *   busterVersion: '1',
- * });
- * ```
- */
-export function createPersister(options: PersisterFactoryOptions = {}): Persister {
-  const {
-    keyPrefix = 'tanstack-query',
-    maxAge = DEFAULT_GC_TIME.LONG,
-    busterVersion = '1',
-    throttleTime = 1000,
-  } = options;
-
-  return createAsyncStoragePersister({
-    storage: storageService,
-    key: `${keyPrefix}-cache`,
-    throttleTime,
-    serialize: (data: unknown) => {
-      // Add metadata for cache validation
-      const persistData = {
-        version: busterVersion,
-        timestamp: Date.now(),
-        data,
-      };
-      return JSON.stringify(persistData);
-    },
-    deserialize: (cachedString: string) => {
-      try {
-        const parsed = JSON.parse(cachedString);
-
-        // Validate cache version
-        if (parsed.version !== busterVersion) {
-          if (__DEV__) {
-            console.warn(
-              `[TanStack Query] Cache version mismatch. Expected: ${busterVersion}, Got: ${parsed.version}`,
-            );
-          }
-          return undefined;
-        }
-
-        // Validate cache age
-        const age = Date.now() - parsed.timestamp;
-        if (age > maxAge) {
-          if (__DEV__) {
-            console.warn(`[TanStack Query] Cache age exceeded maxAge: ${maxAge}ms`);
-          }
-          return undefined;
-        }
-
-        return parsed.data;
-      } catch (error) {
-        if (__DEV__) {
-          console.error('[TanStack Query] Error deserializing cache:', error);
-        }
-        return undefined;
-      }
-    },
-  });
-}
-
 /**
  * Clear all persisted cache data
  * Useful for logout or cache reset scenarios

package/src/tanstack/infrastructure/providers/TanstackProvider.tsx

@@ -1,65 +1,90 @@
-import React, { useState } from 'react';
+import React, { useState, lazy, Suspense } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
-import type { Persister } from '@tanstack/react-query-persist-client';
 import { createQueryClient, type QueryClientFactoryOptions } from '../config/QueryClientConfig';
-import { createPersister, type PersisterFactoryOptions } from '../config/PersisterConfig';
 import { setGlobalQueryClient } from '../config/QueryClientSingleton';
 import { DevMonitor } from '../monitoring/DevMonitor';
 
+// Lazy load TanStack persistence packages
+const PersistQueryClientProvider = lazy(() =>
+  import('@tanstack/react-query-persist-client').then(m => ({ default: m.PersistQueryClientProvider }))
+);
+
+// Lazy load persister creation
+async function loadPersister(options: any) {
+  const { createAsyncStoragePersister } = await import('@tanstack/query-async-storage-persister');
+  const { storageService } = await import('../../../storage');
+  const { DEFAULT_GC_TIME } = await import('../../domain/constants/CacheDefaults');
+
+  const {
+    keyPrefix = 'tanstack-query',
+    maxAge = DEFAULT_GC_TIME.LONG,
+    busterVersion = '1',
+    throttleTime = 1000,
+  } = options;
+
+  return createAsyncStoragePersister({
+    storage: storageService,
+    key: `${keyPrefix}-cache`,
+    throttleTime,
+    serialize: (data: unknown) => {
+      const persistData = {
+        version: busterVersion,
+        timestamp: Date.now(),
+        data,
+      };
+      return JSON.stringify(persistData);
+    },
+    deserialize: (cachedString: string) => {
+      try {
+        const parsed = JSON.parse(cachedString);
+        if (parsed.version !== busterVersion) {
+          if (__DEV__) {
+            console.warn(
+              `[TanStack Query] Cache version mismatch. Expected: ${busterVersion}, Got: ${parsed.version}`,
+            );
+          }
+          return undefined;
+        }
+        const age = Date.now() - parsed.timestamp;
+        if (age > maxAge) {
+          if (__DEV__) {
+            console.warn(`[TanStack Query] Cache age exceeded maxAge: ${maxAge}ms`);
+          }
+          return undefined;
+        }
+        return parsed.data;
+      } catch (error) {
+        if (__DEV__) {
+          console.error('[TanStack Query] Error deserializing cache:', error);
+        }
+        return undefined;
+      }
+    },
+  });
+}
+
+/**
+ * Persister factory options
+ */
+export interface PersisterFactoryOptions {
+  keyPrefix?: string;
+  maxAge?: number;
+  busterVersion?: string;
+  throttleTime?: number;
+}
+
 /**
  * TanStack provider props
  */
 export interface TanstackProviderProps {
-  /**
-   * Child components
-   */
   children: React.ReactNode;
-
-  /**
-   * Custom QueryClient instance
-   * If not provided, a default one will be created
-   */
-  queryClient?: QueryClient;
-
-  /**
-   * QueryClient configuration options
-   * Only used if queryClient is not provided
-   */
+  queryClient?: any;
   queryClientOptions?: QueryClientFactoryOptions;
-
-  /**
-   * Enable AsyncStorage persistence
-   * @default true
-   */
   enablePersistence?: boolean;
-
-  /**
-   * Enable DevMonitor logging (development only)
-   * @default false
-   */
   enableDevTools?: boolean;
-
-  /**
-   * Custom persister instance
-   * Only used if enablePersistence is true
-   */
-  persister?: Persister;
-
-  /**
-   * Persister configuration options
-   * Only used if enablePersistence is true and persister is not provided
-   */
+  persister?: any;
   persisterOptions?: PersisterFactoryOptions;
-
-  /**
-   * Callback when persistence is successfully restored
-   */
   onPersistSuccess?: () => void;
-
-  /**
-   * Callback when persistence restoration fails
-   */
   onPersistError?: () => void;
 }
 
@@ -89,30 +114,44 @@ export function TanstackProvider({
     return client;
   });
 
-  // Create persister if persistence is enabled
-  const [persister] = useState(() => {
+  // Create persister if persistence is enabled and provided
+  const [persister, setPersister] = useState<any>(() => {
     if (!enablePersistence) return undefined;
-    return providedPersister ?? createPersister(persisterOptions);
+    return providedPersister;
   });
 
+  // Load persister asynchronously if needed
+  React.useEffect(() => {
+    if (enablePersistence && !providedPersister && !persister) {
+      loadPersister(persisterOptions).then(setPersister);
+    }
+  }, [enablePersistence, providedPersister, persister, persisterOptions]);
+
   // Without persistence
-  if (!enablePersistence || !persister) {
+  if (!enablePersistence) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  }
+
+  // With persistence - wait for persister to load
+  if (!persister) {
     return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
   }
 
-  // With persistence
+  // With persistence - lazy load PersistQueryClientProvider
   return (
-    <PersistQueryClientProvider
-      client={queryClient}
-      persistOptions={{
-        persister,
-        maxAge: persisterOptions?.maxAge,
-        buster: persisterOptions?.busterVersion,
-      }}
-      onSuccess={onPersistSuccess}
-      onError={onPersistError}
-    >
-      {children}
-    </PersistQueryClientProvider>
+    <Suspense fallback={<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>}>
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{
+          persister,
+          maxAge: persisterOptions?.maxAge,
+          buster: persisterOptions?.busterVersion,
+        }}
+        onSuccess={onPersistSuccess}
+        onError={onPersistError}
+      >
+        {children}
+      </PersistQueryClientProvider>
+    </Suspense>
   );
 }