@aerostack/sdk-react 0.6.6 → 0.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aerostack/sdk-react",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "author": "Aerostack",
   "type": "module",
   "repository": {
@@ -41,7 +41,7 @@
     "typescript-eslint": "^8.26.0"
   },
   "dependencies": {
-    "@aerostack/sdk-web": "^0.6.6"
+    "@aerostack/sdk-web": "^0.6.8"
   },
   "exports": {
     ".": {

package/src/context.tsx

@@ -1,8 +1,9 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import { SDK } from '@aerostack/sdk-web';
+import { RealtimeClient } from '@aerostack/sdk-web/sdk/realtime.js';
 
 export interface AerostackContextType {
-    sdk: SDK;
+    sdk: SDK & { realtime?: RealtimeClient };
     projectId: string;
 }
 
@@ -10,12 +11,14 @@ const AerostackContext = createContext<AerostackContextType | null>(null);
 
 export interface AerostackProviderProps {
     projectId: string;
+    apiKey?: string;
     baseUrl?: string;
     children: React.ReactNode;
 }
 
 export const AerostackProvider: React.FC<AerostackProviderProps> = ({
     projectId,
+    apiKey,
     baseUrl = 'https://api.aerostack.ai/v1',
     children,
 }) => {
@@ -26,10 +29,24 @@ export const AerostackProvider: React.FC<AerostackProviderProps> = ({
             if (mod.setProjectId) mod.setProjectId(projectId);
         });
 
-        return new SDK({
+        const client = new SDK({
             serverURL: baseUrl,
+            apiKeyAuth: apiKey,
         });
-    }, [baseUrl, projectId]);
+
+        // Instantiate RealtimeClient and attach it to the SDK instance
+        // so that useSubscription and App code can access 'sdk.realtime'
+        const realtime = new RealtimeClient({
+            baseUrl,
+            projectId,
+            apiKey,
+        });
+
+        // Expose realtime on the SDK instance
+        (client as any).realtime = realtime;
+
+        return client as SDK & { realtime: RealtimeClient };
+    }, [baseUrl, projectId, apiKey]);
 
     const value = useMemo(() => ({
         sdk,

package/src/hooks/useSubscription.ts

@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useAerostack } from '../context.js';
+
 export interface RealtimeSubscriptionOptions {
     event?: 'INSERT' | 'UPDATE' | 'DELETE' | '*';
     filter?: Record<string, any>;
@@ -19,6 +20,9 @@ export function useSubscription<T = any>(
     const [data, setData] = useState<T | null>(null);
     const [error, setError] = useState<Error | null>(null);
     const [loading, setLoading] = useState(true);
+    // Fix A15: Stable reference for options to prevent re-render loops
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
 
     useEffect(() => {
         let isMounted = true;
@@ -30,7 +34,7 @@ export function useSubscription<T = any>(
             return;
         }
 
-        const channel = realtime.channel(topic, options);
+        const channel = realtime.channel(topic, optionsRef.current);
 
         const setup = async () => {
             try {
@@ -54,13 +58,29 @@ export function useSubscription<T = any>(
 
         setup();
 
+        // Fix 1.5: Properly unsubscribe on cleanup
         return () => {
             isMounted = false;
-            // Note: We don't automatically disconnect the global client,
-            // but we could unsubscribe from the channel if needed.
-            // channel.unsubscribe();
+            channel.unsubscribe();
         };
-    }, [sdk, topic, JSON.stringify(options)]);
+    }, [sdk, topic]);
 
     return { data, error, loading };
 }
+
+/**
+ * Hook to observe the realtime connection status
+ */
+export function useRealtimeStatus() {
+    const { sdk } = useAerostack();
+    const realtime = (sdk as any).realtime;
+    const [status, setStatus] = useState<string>(realtime?.status ?? 'idle');
+
+    useEffect(() => {
+        if (!realtime || !realtime.onStatusChange) return;
+        const unsub = realtime.onStatusChange((s: string) => setStatus(s));
+        return unsub;
+    }, [realtime]);
+
+    return status;
+}

package/src/index.ts

@@ -3,6 +3,7 @@ export * from './hooks/useAuth.js';
 export * from './hooks/useDb.js';
 export * from './hooks/useAI.js';
 export * from './hooks/useCache.js';
+export * from './hooks/useSubscription.js';
 
 // Re-export core types and client for convenience
 import { SDK, SDKOptions } from '@aerostack/sdk-web';

package/test-realtime-import.ts

@@ -0,0 +1,2 @@
+import { RealtimeClient } from '@aerostack/sdk-web/sdk/realtime';
+console.log(RealtimeClient);