dynamodb-reactive 0.1.1 → 0.1.4

package/dist/{chunk-KRZQWA2W.js → chunk-MI2ZLLB2.js}

@@ -1,8 +1,9 @@
-import { applyPatch } from 'fast-json-patch';
+import jsonpatch from 'fast-json-patch';
 import { createContext, useState, useEffect, useContext, useSyncExternalStore, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // ../client/src/patcher.ts
+var { applyPatch } = jsonpatch;
 function applyPatches(document, patches) {
   if (patches.length === 0) {
     return document;
@@ -46,6 +47,8 @@ var WebSocketManager = class {
   messageQueue = [];
   messageHandlers = /* @__PURE__ */ new Set();
   stateHandlers = /* @__PURE__ */ new Set();
+  _connectionId = null;
+  connectionIdResolvers = [];
   constructor(config) {
     this.config = {
       autoReconnect: true,
@@ -54,6 +57,23 @@ var WebSocketManager = class {
       ...config
     };
   }
+  /**
+   * Get the current connection ID (null if not connected)
+   */
+  get connectionId() {
+    return this._connectionId;
+  }
+  /**
+   * Wait for the connection ID to be available
+   */
+  waitForConnectionId() {
+    if (this._connectionId) {
+      return Promise.resolve(this._connectionId);
+    }
+    return new Promise((resolve) => {
+      this.connectionIdResolvers.push(resolve);
+    });
+  }
   /**
    * Get current connection state
    */
@@ -72,13 +92,12 @@ var WebSocketManager = class {
       const url = await this.buildUrl();
       this.ws = new WebSocket(url);
       this.ws.onopen = () => {
-        this.setState("connected");
         this.reconnectAttempts = 0;
-        this.flushMessageQueue();
-        this.config.onConnect?.();
+        this.ws?.send(JSON.stringify({ type: "init" }));
       };
       this.ws.onclose = (event) => {
         this.ws = null;
+        this._connectionId = null;
         this.setState("disconnected");
         this.config.onDisconnect?.();
         if (this.config.autoReconnect && !event.wasClean) {
@@ -92,6 +111,17 @@ var WebSocketManager = class {
       this.ws.onmessage = (event) => {
         try {
           const message = JSON.parse(event.data);
+          if (message.type === "connected") {
+            this._connectionId = message.connectionId;
+            this.setState("connected");
+            this.flushMessageQueue();
+            this.config.onConnect?.();
+            for (const resolve of this.connectionIdResolvers) {
+              resolve(message.connectionId);
+            }
+            this.connectionIdResolvers = [];
+            return;
+          }
           this.handleMessage(message);
         } catch (error) {
           console.error("Failed to parse WebSocket message:", error);
@@ -119,6 +149,7 @@ var WebSocketManager = class {
       this.ws.close(1e3, "Client disconnect");
       this.ws = null;
     }
+    this._connectionId = null;
     this.setState("disconnected");
   }
   /**
@@ -192,17 +223,34 @@ var WebSocketManager = class {
 };
 
 // ../client/src/client.ts
+var DEFAULT_HTTP_URL = "/api/reactive";
 function generateId() {
   return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 }
 var ReactiveClient = class {
   wsManager;
+  httpUrl;
+  authGetter;
+  headersGetter;
   subscriptions = /* @__PURE__ */ new Map();
   pendingCalls = /* @__PURE__ */ new Map();
   connectionState = "disconnected";
   stateListeners = /* @__PURE__ */ new Set();
+  // Stores original data for rollback when optimistic updates fail
+  optimisticUpdates = /* @__PURE__ */ new Map();
   constructor(config) {
     this.wsManager = new WebSocketManager(config);
+    this.httpUrl = config.httpUrl ?? DEFAULT_HTTP_URL;
+    if (typeof config.auth === "function") {
+      this.authGetter = config.auth;
+    } else if (config.auth) {
+      this.authGetter = () => config.auth;
+    }
+    if (typeof config.headers === "function") {
+      this.headersGetter = config.headers;
+    } else if (config.headers) {
+      this.headersGetter = () => config.headers;
+    }
     this.wsManager.onMessage((message) => this.handleMessage(message));
     this.wsManager.onStateChange((state) => {
       this.connectionState = state;
@@ -224,6 +272,17 @@ var ReactiveClient = class {
   disconnect() {
     this.wsManager.disconnect();
   }
+  /**
+   * Update the headers getter for HTTP requests.
+   * Useful for dynamically setting auth or user context headers.
+   */
+  setHeaders(headers) {
+    if (typeof headers === "function") {
+      this.headersGetter = headers;
+    } else {
+      this.headersGetter = () => headers;
+    }
+  }
   /**
    * Get current connection state
    */
@@ -238,7 +297,8 @@ var ReactiveClient = class {
     return () => this.stateListeners.delete(listener);
   }
   /**
-   * Subscribe to a procedure
+   * Subscribe to a procedure via HTTP.
+   * Snapshot is returned via HTTP, patches come via WebSocket.
    */
   subscribe(path, options = {}) {
     const id = generateId();
@@ -253,13 +313,14 @@ var ReactiveClient = class {
       options
     };
     this.subscriptions.set(id, state);
-    this.wsManager.send({
-      type: "subscribe",
-      subscriptionId: id,
-      path,
-      input: options.input
+    this.sendSubscribeRequest(id, path, options.input).catch((error) => {
+      state.error = error instanceof Error ? error : new Error(String(error));
+      state.loading = false;
+      this.notifySubscriptionListeners(id);
+      options.onError?.(state.error);
     });
     const subscription = {
+      id,
       get data() {
         return state.data;
       },
@@ -275,28 +336,165 @@ var ReactiveClient = class {
     return subscription;
   }
   /**
-   * Call a mutation procedure
+   * Send subscribe request via HTTP
    */
-  async call(path, input) {
-    const callId = generateId();
-    return new Promise((resolve, reject) => {
-      this.pendingCalls.set(callId, {
-        resolve,
-        reject
-      });
-      this.wsManager.send({
-        type: "call",
-        callId,
+  async sendSubscribeRequest(subscriptionId, path, input) {
+    const connectionId = await this.wsManager.waitForConnectionId();
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (this.headersGetter) {
+      const customHeaders = await this.headersGetter();
+      Object.assign(headers, customHeaders);
+    }
+    if (this.authGetter) {
+      const token = await this.authGetter();
+      headers["Authorization"] = `Bearer ${token}`;
+    }
+    const response = await fetch(this.httpUrl, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        type: "subscribe",
+        connectionId,
+        subscriptionId,
         path,
         input
+      })
+    });
+    if (!response.ok) {
+      throw new Error(
+        `Subscribe failed: ${response.status} ${response.statusText}`
+      );
+    }
+    const result = await response.json();
+    if (result.type === "error") {
+      throw new Error(result.message ?? "Unknown error");
+    }
+    if (result.type === "snapshot") {
+      this.handleSnapshot(subscriptionId, result.data);
+    }
+  }
+  /**
+   * Call a mutation procedure via HTTP with optimistic update support.
+   * All optimistic updates are applied INSTANTLY (before HTTP request).
+   */
+  async call(path, input, options) {
+    const invalidatesPath = options?.invalidates;
+    const updateType = options?.optimisticUpdate;
+    let targetSubscriptionId;
+    if (invalidatesPath) {
+      targetSubscriptionId = this.findSubscriptionByPath(invalidatesPath);
+    }
+    if (targetSubscriptionId) {
+      const state = this.subscriptions.get(targetSubscriptionId);
+      const currentData = state?.data;
+      if (updateType === "remove") {
+        const inputId = input.id;
+        if (inputId) {
+          this.applyOptimisticUpdate(targetSubscriptionId, (data) => {
+            if (!Array.isArray(data)) return data;
+            return data.filter((item) => item.id !== inputId);
+          });
+        }
+      } else if (updateType === "merge") {
+        const inputWithId = input;
+        if (inputWithId.id) {
+          this.applyOptimisticUpdate(targetSubscriptionId, (data) => {
+            if (!Array.isArray(data)) return data;
+            const idx = data.findIndex(
+              (item) => item.id === inputWithId.id
+            );
+            if (idx >= 0) {
+              return [
+                ...data.slice(0, idx),
+                { ...data[idx], ...input },
+                ...data.slice(idx + 1)
+              ];
+            }
+            return data;
+          });
+        } else if (options?.optimisticData) {
+          const optimistic = typeof options.optimisticData === "function" ? options.optimisticData(input, Array.isArray(currentData) ? currentData : []) : options.optimisticData;
+          if (optimistic) {
+            this.applyOptimisticUpdate(targetSubscriptionId, (data) => {
+              if (!Array.isArray(data)) return data;
+              return [optimistic, ...data];
+            });
+          }
+        }
+      } else if (typeof updateType === "function") {
+        this.applyOptimisticUpdate(targetSubscriptionId, (data) => {
+          if (!Array.isArray(data)) return data;
+          return updateType(data, input, void 0);
+        });
+      }
+    }
+    const connectionId = await this.wsManager.waitForConnectionId();
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (this.headersGetter) {
+      const customHeaders = await this.headersGetter();
+      Object.assign(headers, customHeaders);
+    }
+    if (this.authGetter) {
+      const token = await this.authGetter();
+      headers["Authorization"] = `Bearer ${token}`;
+    }
+    try {
+      const response = await fetch(this.httpUrl, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          type: "call",
+          connectionId,
+          path,
+          input
+        })
       });
-      setTimeout(() => {
-        if (this.pendingCalls.has(callId)) {
-          this.pendingCalls.delete(callId);
-          reject(new Error("Call timeout"));
+      if (!response.ok) {
+        throw new Error(
+          `Call failed: ${response.status} ${response.statusText}`
+        );
+      }
+      const result = await response.json();
+      if (result.type === "error") {
+        throw new Error(result.message ?? "Unknown error");
+      }
+      const data = result.data;
+      if (targetSubscriptionId && updateType === "merge") {
+        const resultWithId = data;
+        if (resultWithId && resultWithId.id) {
+          this.applyOptimisticUpdate(targetSubscriptionId, (currentData) => {
+            if (!Array.isArray(currentData)) return currentData;
+            const idx = currentData.findIndex(
+              (item) => item.id === resultWithId.id
+            );
+            if (idx >= 0) {
+              return [
+                ...currentData.slice(0, idx),
+                data,
+                ...currentData.slice(idx + 1)
+              ];
+            } else {
+              return [
+                data,
+                ...currentData.filter(
+                  (item) => item.id && !item.id.startsWith("temp-")
+                )
+              ];
+            }
+          });
         }
-      }, 3e4);
-    });
+      }
+      return data;
+    } catch (error) {
+      if (targetSubscriptionId) {
+        this.rollbackOptimisticUpdate(targetSubscriptionId);
+      }
+      throw error;
+    }
   }
   /**
    * Unsubscribe from a subscription
@@ -311,25 +509,30 @@ var ReactiveClient = class {
     });
   }
   /**
-   * Refetch a subscription
+   * Refetch a subscription via HTTP
    */
   async refetch(id) {
     const state = this.subscriptions.get(id);
     if (!state) return;
     state.loading = true;
     this.notifySubscriptionListeners(id);
-    this.wsManager.send({
-      type: "subscribe",
-      subscriptionId: id,
-      path: state.path,
-      input: state.input
-    });
+    try {
+      await this.sendSubscribeRequest(id, state.path, state.input);
+    } catch (error) {
+      state.error = error instanceof Error ? error : new Error(String(error));
+      state.loading = false;
+      this.notifySubscriptionListeners(id);
+      state.options.onError?.(state.error);
+    }
   }
   /**
-   * Handle incoming server messages
+   * Handle incoming server messages.
+   * Note: 'connected' messages are handled by WebSocketManager before reaching here.
    */
   handleMessage(message) {
     switch (message.type) {
+      case "connected":
+        break;
       case "snapshot":
         this.handleSnapshot(message.subscriptionId, message.data);
         break;
@@ -350,6 +553,7 @@ var ReactiveClient = class {
   handleSnapshot(subscriptionId, data) {
     const state = this.subscriptions.get(subscriptionId);
     if (!state) return;
+    this.clearOptimisticUpdate(subscriptionId);
     state.data = data;
     state.loading = false;
     state.error = void 0;
@@ -362,8 +566,11 @@ var ReactiveClient = class {
   handlePatch(subscriptionId, patches) {
     const state = this.subscriptions.get(subscriptionId);
     if (!state || state.data === void 0) return;
+    const originalData = this.optimisticUpdates.get(subscriptionId);
+    const baseData = originalData !== void 0 ? originalData : state.data;
+    this.clearOptimisticUpdate(subscriptionId);
     try {
-      state.data = applyPatches(state.data, patches);
+      state.data = applyPatches(baseData, patches);
       this.notifySubscriptionListeners(subscriptionId);
       state.options.onData?.(state.data);
     } catch (error) {
@@ -404,19 +611,21 @@ var ReactiveClient = class {
     }
   }
   /**
-   * Resubscribe to all subscriptions after reconnect
+   * Resubscribe to all subscriptions after reconnect via HTTP
    */
   resubscribeAll() {
     for (const [id, state] of this.subscriptions) {
       if (state.options.resubscribeOnReconnect !== false) {
         state.loading = true;
         this.notifySubscriptionListeners(id);
-        this.wsManager.send({
-          type: "subscribe",
-          subscriptionId: id,
-          path: state.path,
-          input: state.input
-        });
+        this.sendSubscribeRequest(id, state.path, state.input).catch(
+          (error) => {
+            state.error = error instanceof Error ? error : new Error(String(error));
+            state.loading = false;
+            this.notifySubscriptionListeners(id);
+            state.options.onError?.(state.error);
+          }
+        );
       }
     }
   }
@@ -456,6 +665,51 @@ var ReactiveClient = class {
   getSubscriptionState(id) {
     return this.subscriptions.get(id);
   }
+  /**
+   * Find subscription by path
+   */
+  findSubscriptionByPath(path) {
+    for (const [id, state] of this.subscriptions) {
+      if (state.path === path) {
+        return id;
+      }
+    }
+    return void 0;
+  }
+  /**
+   * Apply an optimistic update to a subscription's data
+   */
+  applyOptimisticUpdate(subscriptionId, updater) {
+    const state = this.subscriptions.get(subscriptionId);
+    if (!state || state.data === void 0) return;
+    if (!this.optimisticUpdates.has(subscriptionId)) {
+      this.optimisticUpdates.set(
+        subscriptionId,
+        JSON.parse(JSON.stringify(state.data))
+      );
+    }
+    state.data = updater(state.data);
+    this.notifySubscriptionListeners(subscriptionId);
+  }
+  /**
+   * Rollback an optimistic update
+   */
+  rollbackOptimisticUpdate(subscriptionId) {
+    const original = this.optimisticUpdates.get(subscriptionId);
+    if (original === void 0) return;
+    const state = this.subscriptions.get(subscriptionId);
+    if (state) {
+      state.data = original;
+      this.notifySubscriptionListeners(subscriptionId);
+    }
+    this.optimisticUpdates.delete(subscriptionId);
+  }
+  /**
+   * Clear optimistic state (called when real data arrives)
+   */
+  clearOptimisticUpdate(subscriptionId) {
+    this.optimisticUpdates.delete(subscriptionId);
+  }
 };
 function createReactiveClient(config) {
   const client = new ReactiveClient(config);
@@ -480,7 +734,12 @@ function createTypedProxy(client, path) {
         if (prop === "mutate") {
           return async (input) => {
             const parentPath = path.join(".");
-            return client.call(parentPath, input);
+            const invalidatesPath = path.length >= 2 ? `${path.slice(0, -1).join(".")}.list` : void 0;
+            const updateType = parentPath.endsWith(".delete") ? "remove" : "merge";
+            return client.call(parentPath, input, {
+              invalidates: invalidatesPath,
+              optimisticUpdate: updateType
+            });
           };
         }
         return createTypedProxy(client, newPath);
@@ -583,12 +842,23 @@ function useSubscription(path, options = {}) {
       }
     });
     subscriptionRef.current = subscription;
+    const unregisterListener = client.addSubscriptionListener(
+      subscription.id,
+      () => {
+        setState({
+          data: subscription.data,
+          loading: subscription.loading,
+          error: subscription.error
+        });
+      }
+    );
     setState({
       data: subscription.data,
       loading: subscription.loading,
       error: subscription.error
     });
     return () => {
+      unregisterListener();
       subscription.unsubscribe();
       subscriptionRef.current = null;
     };
@@ -605,20 +875,31 @@ function useSubscription(path, options = {}) {
     refetch
   };
 }
-function useMutation(path) {
+function useMutation(path, options) {
   const client = useReactiveClient();
   const [state, setState] = useState({
     data: void 0,
     loading: false,
     error: void 0
   });
+  const autoInvalidates = options?.invalidates ?? (() => {
+    const parts = path.split(".");
+    if (parts.length >= 2) {
+      return `${parts.slice(0, -1).join(".")}.list`;
+    }
+    return void 0;
+  })();
+  const autoUpdateType = options?.optimisticUpdate ?? (path.endsWith(".delete") ? "remove" : "merge");
   const mutate = async (input) => {
     if (!client) {
       throw new Error("WebSocket not configured - mutations are disabled");
     }
     setState((prev) => ({ ...prev, loading: true, error: void 0 }));
     try {
-      const result = await client.call(path, input);
+      const result = await client.call(path, input, {
+        invalidates: autoInvalidates,
+        optimisticUpdate: autoUpdateType
+      });
       setState({ data: result, loading: false, error: void 0 });
       return result;
     } catch (error) {
@@ -637,10 +918,41 @@ function useMutation(path) {
     reset
   };
 }
+function useClient() {
+  const client = useReactiveClient();
+  function buildProxy(path) {
+    return new Proxy(
+      {},
+      {
+        get(_target, prop) {
+          if (prop === "useQuery") {
+            return function useQueryHook(input, options) {
+              const pathStr = path.join(".");
+              return useSubscription(pathStr, { ...options, input });
+            };
+          }
+          if (prop === "useMutation") {
+            return function useMutationHook(options) {
+              const pathStr = path.join(".");
+              return useMutation(pathStr, options);
+            };
+          }
+          if (prop === "setHeaders") {
+            return (headers) => {
+              client?.setHeaders(headers);
+            };
+          }
+          return buildProxy([...path, prop]);
+        }
+      }
+    );
+  }
+  return buildProxy([]);
+}
 function createReactiveHooks() {
   return {
     useSubscription: (path, options) => useSubscription(path, options),
-    useMutation: (path) => useMutation(path),
+    useMutation: (path, options) => useMutation(path, options),
     useConnectionState,
     useReactiveClient
   };
@@ -648,10 +960,10 @@ function createReactiveHooks() {
 function createProcedureHooks(path) {
   return {
     useSubscription: (input, options) => useSubscription(path, { ...options, input }),
-    useMutation: () => useMutation(path)
+    useMutation: (options) => useMutation(path, options)
   };
 }
 
-export { ReactiveClient, ReactiveClientProvider, WebSocketManager, applyPatches, createProcedureHooks, createReactiveClient, createReactiveHooks, useConnectionState, useMutation, useReactiveClient, useReactiveClientOrThrow, useSubscription };
-//# sourceMappingURL=chunk-KRZQWA2W.js.map
-//# sourceMappingURL=chunk-KRZQWA2W.js.map
+export { ReactiveClient, ReactiveClientProvider, WebSocketManager, applyPatches, createProcedureHooks, createReactiveClient, createReactiveHooks, useClient, useConnectionState, useMutation, useReactiveClient, useReactiveClientOrThrow, useSubscription };
+//# sourceMappingURL=chunk-MI2ZLLB2.js.map
+//# sourceMappingURL=chunk-MI2ZLLB2.js.map