@uploadista/react-native-core 0.0.15-beta.1 → 0.0.15-beta.3

package/src/contexts/flow-manager-context.tsx

@@ -0,0 +1,230 @@
+import type { UploadistaEvent } from "@uploadista/client-core";
+import {
+  FlowManager,
+  type FlowManagerCallbacks,
+  type FlowUploadOptions,
+  type FlowUploadState,
+} from "@uploadista/client-core";
+import { EventType, type FlowEvent } from "@uploadista/core/flow";
+import { UploadEventType } from "@uploadista/core/types";
+import type { ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+} from "react";
+import { useUploadistaContext } from "../hooks/use-uploadista-context";
+
+/**
+ * Type guard to check if an event is a flow event
+ */
+function isFlowEvent(event: UploadistaEvent): event is FlowEvent {
+  const flowEvent = event as FlowEvent;
+  return (
+    flowEvent.eventType === EventType.FlowStart ||
+    flowEvent.eventType === EventType.FlowEnd ||
+    flowEvent.eventType === EventType.FlowError ||
+    flowEvent.eventType === EventType.NodeStart ||
+    flowEvent.eventType === EventType.NodeEnd ||
+    flowEvent.eventType === EventType.NodePause ||
+    flowEvent.eventType === EventType.NodeResume ||
+    flowEvent.eventType === EventType.NodeError
+  );
+}
+
+/**
+ * Internal manager registry entry with ref counting
+ */
+interface ManagerEntry<TOutput> {
+  manager: FlowManager<unknown, TOutput>;
+  refCount: number;
+  flowId: string;
+}
+
+/**
+ * Context value providing access to flow managers
+ */
+interface FlowManagerContextValue {
+  /**
+   * Get or create a flow manager for the given flow ID.
+   * Increments ref count - must call releaseManager when done.
+   *
+   * @param flowId - Unique identifier for the flow
+   * @param callbacks - Callbacks for state changes and lifecycle events
+   * @param options - Flow configuration options
+   * @returns FlowManager instance
+   */
+  getManager: <TOutput = unknown>(
+    flowId: string,
+    callbacks: FlowManagerCallbacks<TOutput>,
+    options: FlowUploadOptions<TOutput>,
+  ) => FlowManager<unknown, TOutput>;
+
+  /**
+   * Release a flow manager reference.
+   * Decrements ref count and cleans up when reaching zero.
+   *
+   * @param flowId - Unique identifier for the flow to release
+   */
+  releaseManager: (flowId: string) => void;
+}
+
+const FlowManagerContext = createContext<FlowManagerContextValue | undefined>(
+  undefined,
+);
+
+/**
+ * Props for FlowManagerProvider
+ */
+interface FlowManagerProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provider that manages FlowManager instances with ref counting and event routing.
+ * Ensures managers persist across component re-renders and are only cleaned up
+ * when all consuming components unmount.
+ *
+ * This provider should be nested inside UploadistaProvider to access the upload client
+ * and event subscription system.
+ *
+ * @example
+ * ```tsx
+ * <UploadistaProvider baseUrl="https://api.example.com" storageId="default">
+ *   <FlowManagerProvider>
+ *     <App />
+ *   </FlowManagerProvider>
+ * </UploadistaProvider>
+ * ```
+ */
+export function FlowManagerProvider({ children }: FlowManagerProviderProps) {
+  const { client, subscribeToEvents } = useUploadistaContext();
+  const managersRef = useRef(
+    new Map<string, ManagerEntry<unknown>>(),
+  );
+
+  // Subscribe to all events and route to appropriate managers
+  useEffect(() => {
+    const unsubscribe = subscribeToEvents((event: UploadistaEvent) => {
+      // Route flow events to all managers (they filter by jobId internally)
+      if (isFlowEvent(event)) {
+        for (const entry of managersRef.current.values()) {
+          entry.manager.handleFlowEvent(event);
+        }
+        return;
+      }
+
+      // Route upload progress events to all managers
+      if (
+        "type" in event &&
+        event.type === UploadEventType.UPLOAD_PROGRESS &&
+        "data" in event
+      ) {
+        const uploadEvent = event as {
+          type: UploadEventType;
+          uploadId: string;
+          data: { progress: number; total: number | null };
+        };
+
+        for (const entry of managersRef.current.values()) {
+          entry.manager.handleUploadProgress(
+            uploadEvent.uploadId,
+            uploadEvent.data.progress,
+            uploadEvent.data.total,
+          );
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [subscribeToEvents]);
+
+  const getManager = useCallback(
+    <TOutput,>(
+      flowId: string,
+      callbacks: FlowManagerCallbacks<TOutput>,
+      options: FlowUploadOptions<TOutput>,
+    ): FlowManager<unknown, TOutput> => {
+      const existing = managersRef.current.get(flowId);
+
+      if (existing) {
+        // Increment ref count for existing manager
+        existing.refCount++;
+        return existing.manager as FlowManager<unknown, TOutput>;
+      }
+
+      // Create new manager using client from hook scope
+      const flowUploadFn = (
+        input: unknown,
+        flowConfig: FlowUploadOptions<TOutput>["flowConfig"],
+        internalOptions: unknown,
+      ) => {
+        return client.uploadWithFlow(input, flowConfig, internalOptions);
+      };
+
+      const manager = new FlowManager<unknown, TOutput>(
+        flowUploadFn,
+        callbacks,
+        options,
+      );
+
+      managersRef.current.set(flowId, {
+        manager: manager as FlowManager<unknown, unknown>,
+        refCount: 1,
+        flowId,
+      });
+
+      return manager;
+    },
+    [client],
+  );
+
+  const releaseManager = useCallback((flowId: string) => {
+    const existing = managersRef.current.get(flowId);
+    if (!existing) return;
+
+    existing.refCount--;
+
+    // Clean up when no more refs
+    if (existing.refCount <= 0) {
+      existing.manager.cleanup();
+      managersRef.current.delete(flowId);
+    }
+  }, []);
+
+  return (
+    <FlowManagerContext.Provider value={{ getManager, releaseManager }}>
+      {children}
+    </FlowManagerContext.Provider>
+  );
+}
+
+/**
+ * Hook to access the FlowManager context.
+ * Must be used within a FlowManagerProvider.
+ *
+ * @returns FlowManager context value with getManager and releaseManager functions
+ * @throws Error if used outside of FlowManagerProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { getManager, releaseManager } = useFlowManagerContext();
+ *   // Use to create managers...
+ * }
+ * ```
+ */
+export function useFlowManagerContext(): FlowManagerContextValue {
+  const context = useContext(FlowManagerContext);
+
+  if (context === undefined) {
+    throw new Error(
+      "useFlowManagerContext must be used within a FlowManagerProvider. " +
+        "Make sure to wrap your component tree with <FlowManagerProvider>.",
+    );
+  }
+
+  return context;
+}

package/src/hooks/use-flow-upload.ts

@@ -1,14 +1,12 @@
 import {
-  FlowManager,
+  type FlowManager,
   type FlowUploadState,
   type FlowUploadStatus,
-  type InternalFlowUploadOptions,
-  type UploadistaEvent,
 } from "@uploadista/client-core";
-import { EventType, type FlowEvent } from "@uploadista/core/flow";
+import type { TypedOutput } from "@uploadista/core/flow";
 import type { UploadFile } from "@uploadista/core/types";
-import { UploadEventType } from "@uploadista/core/types";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useFlowManagerContext } from "../contexts/flow-manager-context";
 import type { FilePickResult, UseFlowUploadOptions } from "../types";
 import { createBlobFromBuffer } from "../types/platform-types";
 import { useUploadistaContext } from "./use-uploadista-context";
@@ -16,23 +14,6 @@ import { useUploadistaContext } from "./use-uploadista-context";
 // Re-export types from core for convenience
 export type { FlowUploadState, FlowUploadStatus };
 
-/**
- * Type guard to check if an event is a flow event
- */
-function isFlowEvent(event: UploadistaEvent): event is FlowEvent {
-  const flowEvent = event as FlowEvent;
-  return (
-    flowEvent.eventType === EventType.FlowStart ||
-    flowEvent.eventType === EventType.FlowEnd ||
-    flowEvent.eventType === EventType.FlowError ||
-    flowEvent.eventType === EventType.NodeStart ||
-    flowEvent.eventType === EventType.NodeEnd ||
-    flowEvent.eventType === EventType.NodePause ||
-    flowEvent.eventType === EventType.NodeResume ||
-    flowEvent.eventType === EventType.NodeError
-  );
-}
-
 const initialState: FlowUploadState = {
   status: "idle",
   progress: 0,
@@ -51,7 +32,8 @@ const initialState: FlowUploadState = {
  * Hook for uploading files through a flow pipeline with full state management.
  * Provides upload progress tracking, flow execution monitoring, error handling, and abort functionality.
  *
- * Must be used within an UploadistaProvider.
+ * Must be used within FlowManagerProvider (which must be within UploadistaProvider).
+ * Flow events are automatically routed by the provider to the appropriate manager.
  *
  * @param options - Flow upload configuration
  * @returns Flow upload state and control methods
@@ -87,60 +69,57 @@ const initialState: FlowUploadState = {
  * ```
  */
 export function useFlowUpload(options: UseFlowUploadOptions) {
-  const context = useUploadistaContext();
-  const { client, fileSystemProvider } = context;
+  const { getManager, releaseManager } = useFlowManagerContext();
+  const { fileSystemProvider } = useUploadistaContext();
   const [state, setState] = useState<FlowUploadState>(initialState);
-  const managerRef = useRef<FlowManager<Blob, UploadFile> | null>(null);
+  const managerRef = useRef<FlowManager<unknown, UploadFile> | null>(null);
   const lastFileRef = useRef<FilePickResult | null>(null);
 
-  // Create FlowManager instance once (only recreate if client changes)
-  // Note: We don't include options in deps to avoid recreating the manager on every render
-  // The manager will use the latest options values through closures
+  // Store callbacks in refs so they can be updated without recreating the manager
+  const callbacksRef = useRef(options);
+
+  // Update refs on every render to capture latest callbacks
   useEffect(() => {
-    managerRef.current = new FlowManager(
-      async (
-        blob: Blob,
-        flowConfig: {
-          flowId: string;
-          storageId: string;
-          outputNodeId?: string;
-          metadata?: Record<string, string>;
-        },
-        internalOptions: InternalFlowUploadOptions,
-      ) => {
-        const result = await client.uploadWithFlow(blob, flowConfig, {
-          onJobStart: internalOptions.onJobStart,
-          onProgress: internalOptions.onProgress,
-          onChunkComplete: internalOptions.onChunkComplete,
-          onSuccess: internalOptions.onSuccess,
-          onError: internalOptions.onError,
-          onShouldRetry: internalOptions.onShouldRetry,
-        });
-        // Return only abort and pause (ignore jobId and return value)
-        return {
-          abort: async () => {
-            await result.abort();
-          },
-          pause: async () => {
-            await result.pause();
-            // Ignore the FlowJob return value
-          },
-        };
+    callbacksRef.current = options;
+  });
+
+  // Get or create manager from context when component mounts
+  // Manager lifecycle is now handled by FlowManagerProvider
+  useEffect(() => {
+    const flowId = options.flowId;
+
+    // Create stable callback wrappers that call the latest callbacks via refs
+    const stableCallbacks = {
+      onStateChange: setState,
+      onProgress: (_uploadId: string, bytesUploaded: number, totalBytes: number | null) => {
+        if (callbacksRef.current.onProgress) {
+          const progress = totalBytes
+            ? Math.round((bytesUploaded / totalBytes) * 100)
+            : 0;
+          callbacksRef.current.onProgress(progress, bytesUploaded, totalBytes);
+        }
       },
-      {
-        onStateChange: setState,
-        onProgress: options.onProgress
-          ? (_uploadId, bytesUploaded, totalBytes) => {
-              const progress = totalBytes
-                ? Math.round((bytesUploaded / totalBytes) * 100)
-                : 0;
-              options.onProgress?.(progress, bytesUploaded, totalBytes);
-            }
-          : undefined,
-        onChunkComplete: options.onChunkComplete,
-        onSuccess: options.onSuccess,
-        onError: options.onError,
+      onChunkComplete: (chunkSize: number, bytesAccepted: number, bytesTotal: number | null) => {
+        callbacksRef.current.onChunkComplete?.(chunkSize, bytesAccepted, bytesTotal);
       },
+      onFlowComplete: (outputs: TypedOutput[]) => {
+        callbacksRef.current.onFlowComplete?.(outputs);
+      },
+      onSuccess: (result: UploadFile) => {
+        callbacksRef.current.onSuccess?.(result);
+      },
+      onError: (error: Error) => {
+        callbacksRef.current.onError?.(error);
+      },
+      onAbort: () => {
+        callbacksRef.current.onAbort?.();
+      },
+    };
+
+    // Get manager from context (creates if doesn't exist, increments ref count)
+    managerRef.current = getManager(
+      flowId,
+      stableCallbacks,
       {
         flowConfig: {
           flowId: options.flowId,
@@ -154,48 +133,12 @@ export function useFlowUpload(options: UseFlowUploadOptions) {
       },
     );
 
+    // Release manager when component unmounts or flowId changes
     return () => {
-      managerRef.current?.cleanup();
+      releaseManager(flowId);
+      managerRef.current = null;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client]);
-
-  // Subscribe to events and forward them to the manager
-  useEffect(() => {
-    const unsubscribe = context.subscribeToEvents(
-      (event: UploadistaEvent) => {
-        // Handle flow events
-        if (isFlowEvent(event)) {
-          managerRef.current?.handleFlowEvent(event);
-          return;
-        }
-
-        // Handle upload progress events for this job's upload
-        const uploadEvent = event as {
-          type: string;
-          data?: { id: string; progress: number; total: number };
-          flow?: { jobId: string };
-        };
-
-        if (
-          uploadEvent.type === UploadEventType.UPLOAD_PROGRESS &&
-          uploadEvent.flow?.jobId === managerRef.current?.getJobId() &&
-          uploadEvent.data
-        ) {
-          const { progress: bytesUploaded, total: totalBytes } =
-            uploadEvent.data;
-
-          managerRef.current?.handleUploadProgress(
-            uploadEvent.data.id,
-            bytesUploaded,
-            totalBytes,
-          );
-        }
-      },
-    );
-
-    return unsubscribe;
-  }, [context]);
+  }, [options.flowId, options.storageId, options.outputNodeId, getManager, releaseManager]);
 
   const upload = useCallback(
     async (file: FilePickResult) => {

package/src/index.ts

@@ -40,6 +40,11 @@ export {
   UploadProgress,
   type UploadProgressProps,
 } from "./components";
+// Export contexts
+export {
+  FlowManagerProvider,
+  useFlowManagerContext,
+} from "./contexts/flow-manager-context";
 // Export hooks
 export {
   UploadistaContext,