@fluxstack/live-client 0.1.0 → 0.2.0

package/dist/live-client.browser.global.js

@@ -31,8 +31,11 @@ var FluxstackLive = (() => {
     StateValidator: () => StateValidator,
     clearPersistedState: () => clearPersistedState,
     createBinaryChunkMessage: () => createBinaryChunkMessage,
+    getConnection: () => getConnection,
     getPersistedState: () => getPersistedState,
-    persistState: () => persistState
+    onConnectionChange: () => onConnectionChange,
+    persistState: () => persistState,
+    useLive: () => useLive
   });
 
   // src/connection.ts
@@ -44,6 +47,7 @@ var FluxstackLive = (() => {
       __publicField(this, "reconnectTimeout", null);
       __publicField(this, "heartbeatInterval", null);
       __publicField(this, "componentCallbacks", /* @__PURE__ */ new Map());
+      __publicField(this, "binaryCallbacks", /* @__PURE__ */ new Map());
       __publicField(this, "pendingRequests", /* @__PURE__ */ new Map());
       __publicField(this, "stateListeners", /* @__PURE__ */ new Set());
       __publicField(this, "_state", {
@@ -123,6 +127,7 @@ var FluxstackLive = (() => {
       this.log("Connecting...", { url });
       try {
         const ws = new WebSocket(url);
+        ws.binaryType = "arraybuffer";
         this.ws = ws;
         ws.onopen = () => {
           this.log("Connected");
@@ -131,19 +136,34 @@ var FluxstackLive = (() => {
           this.startHeartbeat();
         };
         ws.onmessage = (event) => {
+          if (event.data instanceof ArrayBuffer) {
+            this.handleBinaryMessage(new Uint8Array(event.data));
+            return;
+          }
           try {
-            const response = JSON.parse(event.data);
-            this.log("Received", { type: response.type, componentId: response.componentId });
-            this.handleMessage(response);
+            const parsed = JSON.parse(event.data);
+            if (Array.isArray(parsed)) {
+              for (const msg of parsed) {
+                this.log("Received", { type: msg.type, componentId: msg.componentId });
+                this.handleMessage(msg);
+              }
+            } else {
+              this.log("Received", { type: parsed.type, componentId: parsed.componentId });
+              this.handleMessage(parsed);
+            }
           } catch {
             this.log("Failed to parse message");
             this.setState({ error: "Failed to parse message" });
           }
         };
-        ws.onclose = () => {
-          this.log("Disconnected");
+        ws.onclose = (event) => {
+          this.log("Disconnected", { code: event.code, reason: event.reason });
           this.setState({ connected: false, connecting: false, connectionId: null });
           this.stopHeartbeat();
+          if (event.code === 4003) {
+            this.setState({ error: "Connection rejected: origin not allowed" });
+            return;
+          }
           this.attemptReconnect();
         };
         ws.onerror = () => {
@@ -318,6 +338,25 @@ var FluxstackLive = (() => {
         }
       });
     }
+    /** Parse and route a binary BINARY_STATE_DELTA frame */
+    handleBinaryMessage(buffer) {
+      if (buffer.length < 3 || buffer[0] !== 1) return;
+      const idLen = buffer[1];
+      if (buffer.length < 2 + idLen) return;
+      const componentId = new TextDecoder().decode(buffer.subarray(2, 2 + idLen));
+      const payload = buffer.subarray(2 + idLen);
+      const callback = this.binaryCallbacks.get(componentId);
+      if (callback) {
+        callback(payload);
+      }
+    }
+    /** Register a binary message handler for a component */
+    registerBinaryHandler(componentId, callback) {
+      this.binaryCallbacks.set(componentId, callback);
+      return () => {
+        this.binaryCallbacks.delete(componentId);
+      };
+    }
     /** Register a component message callback */
     registerComponent(componentId, callback) {
       this.log("Registering component", componentId);
@@ -353,6 +392,7 @@ var FluxstackLive = (() => {
     destroy() {
       this.disconnect();
       this.componentCallbacks.clear();
+      this.binaryCallbacks.clear();
       for (const [, req] of this.pendingRequests) {
         clearTimeout(req.timeout);
         req.reject(new Error("Connection destroyed"));
@@ -511,6 +551,21 @@ var FluxstackLive = (() => {
       }
       return response.result;
     }
+    /**
+     * Fire an action without waiting for a response (fire-and-forget).
+     * Useful for high-frequency operations like game input where the
+     * server doesn't need to send back a result.
+     */
+    fire(action, payload = {}) {
+      if (!this._mounted || !this._componentId) return;
+      this.connection.sendMessage({
+        type: "CALL_ACTION",
+        componentId: this._componentId,
+        action,
+        payload,
+        expectResponse: false
+      });
+    }
     // ── State ──
     /**
      * Subscribe to state changes.
@@ -523,6 +578,26 @@ var FluxstackLive = (() => {
         this.stateListeners.delete(callback);
       };
     }
+    /**
+     * Register a binary decoder for this component.
+     * When the server sends a BINARY_STATE_DELTA frame targeting this component,
+     * the decoder converts the raw payload into a delta object which is merged into state.
+     * Returns an unsubscribe function.
+     */
+    setBinaryDecoder(decoder) {
+      if (!this._componentId) {
+        throw new Error("Component must be mounted before setting binary decoder");
+      }
+      return this.connection.registerBinaryHandler(this._componentId, (payload) => {
+        try {
+          const delta = decoder(payload);
+          this._state = { ...this._state, ...delta };
+          this.notifyStateChange(this._state, delta);
+        } catch (e) {
+          console.error("Binary decode error:", e);
+        }
+      });
+    }
     /**
      * Subscribe to errors.
      * Returns an unsubscribe function.
@@ -1170,6 +1245,70 @@ var FluxstackLive = (() => {
       };
     }
   };
+
+  // src/index.ts
+  var _sharedConnection = null;
+  var _sharedConnectionUrl = null;
+  var _statusListeners = /* @__PURE__ */ new Set();
+  function getOrCreateConnection(url) {
+    const resolvedUrl = url ?? `ws://${typeof location !== "undefined" ? location.host : "localhost:3000"}/api/live/ws`;
+    if (_sharedConnection && _sharedConnectionUrl === resolvedUrl) {
+      return _sharedConnection;
+    }
+    if (_sharedConnection) {
+      _sharedConnection.destroy();
+    }
+    _sharedConnection = new LiveConnection({ url: resolvedUrl });
+    _sharedConnectionUrl = resolvedUrl;
+    _sharedConnection.onStateChange((state) => {
+      for (const cb of _statusListeners) {
+        cb(state.connected);
+      }
+    });
+    return _sharedConnection;
+  }
+  function useLive(componentName, initialState, options = {}) {
+    const { url, room, userId, autoMount = true, debug = false } = options;
+    const connection = getOrCreateConnection(url);
+    const handle = new LiveComponentHandle(connection, componentName, {
+      initialState,
+      room,
+      userId,
+      autoMount,
+      debug
+    });
+    return {
+      call: (action, payload) => handle.call(action, payload ?? {}),
+      on: (callback) => handle.onStateChange(callback),
+      onError: (callback) => handle.onError(callback),
+      get state() {
+        return handle.state;
+      },
+      get mounted() {
+        return handle.mounted;
+      },
+      get componentId() {
+        return handle.componentId;
+      },
+      get error() {
+        return handle.error;
+      },
+      destroy: () => handle.destroy(),
+      handle
+    };
+  }
+  function onConnectionChange(callback) {
+    _statusListeners.add(callback);
+    if (_sharedConnection) {
+      callback(_sharedConnection.state.connected);
+    }
+    return () => {
+      _statusListeners.delete(callback);
+    };
+  }
+  function getConnection(url) {
+    return getOrCreateConnection(url);
+  }
   return __toCommonJS(src_exports);
 })();
 //# sourceMappingURL=live-client.browser.global.js.map