openart-realtime-sdk 1.0.1 → 1.0.2

package/dist/client/index.cjs

@@ -1,19 +1,314 @@
 'use strict';
 
-var useRealtime_js = require('./use-realtime.js');
-var provider_js = require('./provider.js');
+var react = require('react');
+var z = require('zod/v4');
+var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var z__default = /*#__PURE__*/_interopDefault(z);
 
-Object.keys(useRealtime_js).forEach(function (k) {
-	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return useRealtime_js[k]; }
-	});
+// src/client/use-realtime.ts
+var systemEvent = z__default.default.discriminatedUnion("type", [
+  z__default.default.object({
+    type: z__default.default.literal("connected"),
+    channel: z__default.default.string(),
+    cursor: z__default.default.string().optional()
+  }),
+  z__default.default.object({ type: z__default.default.literal("reconnect"), timestamp: z__default.default.number() }),
+  z__default.default.object({ type: z__default.default.literal("error"), error: z__default.default.string() }),
+  z__default.default.object({ type: z__default.default.literal("disconnected"), channels: z__default.default.array(z__default.default.string()) }),
+  z__default.default.object({ type: z__default.default.literal("ping"), timestamp: z__default.default.number() })
+]);
+var userEvent = z__default.default.object({
+  id: z__default.default.string(),
+  data: z__default.default.unknown(),
+  event: z__default.default.string(),
+  channel: z__default.default.string()
 });
-Object.keys(provider_js).forEach(function (k) {
-	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return provider_js[k]; }
-	});
+var RealtimeContext = react.createContext(null);
+var PING_TIMEOUT_MS = 75e3;
+function RealtimeProvider({
+  children,
+  api = { url: "/api/realtime", withCredentials: false },
+  maxReconnectAttempts = 3,
+  disconnectOnWindowHidden = true,
+  disconnectDelay = 5e3
+}) {
+  const [status, setStatus] = react.useState("disconnected");
+  const localSubsRef = react.useRef(/* @__PURE__ */ new Map());
+  const channelSubsRef = react.useRef(/* @__PURE__ */ new Map());
+  const eventSourceRef = react.useRef(null);
+  const reconnectTimeoutRef = react.useRef(null);
+  const pingTimeoutRef = react.useRef(null);
+  const reconnectAttemptsRef = react.useRef(0);
+  const lastAckRef = react.useRef(/* @__PURE__ */ new Map());
+  const connectTimeoutRef = react.useRef(null);
+  const debounceTimeoutRef = react.useRef(null);
+  const visibilityTimeoutRef = react.useRef(null);
+  const getAllNeededChannels = react.useCallback(() => {
+    const channels = /* @__PURE__ */ new Set();
+    localSubsRef.current.forEach((sub) => {
+      sub.channels.forEach((ch) => channels.add(ch));
+    });
+    return channels;
+  }, []);
+  const cleanup = () => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (pingTimeoutRef.current) {
+      clearTimeout(pingTimeoutRef.current);
+      pingTimeoutRef.current = null;
+    }
+    if (connectTimeoutRef.current) {
+      clearTimeout(connectTimeoutRef.current);
+      connectTimeoutRef.current = null;
+    }
+    if (visibilityTimeoutRef.current) {
+      clearTimeout(visibilityTimeoutRef.current);
+      visibilityTimeoutRef.current = null;
+    }
+    reconnectAttemptsRef.current = 0;
+    setStatus("disconnected");
+  };
+  const resetPingTimeout = react.useCallback(() => {
+    if (pingTimeoutRef.current) {
+      clearTimeout(pingTimeoutRef.current);
+    }
+    pingTimeoutRef.current = setTimeout(() => {
+      console.warn("Connection timed out, reconnecting...");
+      connect();
+    }, PING_TIMEOUT_MS);
+  }, []);
+  const connect = react.useCallback((opts) => {
+    const { replayEventsSince } = opts ?? { replayEventsSince: Date.now() };
+    const channels = Array.from(getAllNeededChannels());
+    if (channels.length === 0) return;
+    if (reconnectAttemptsRef.current >= maxReconnectAttempts) {
+      console.log("Max reconnection attempts reached.");
+      setStatus("error");
+      return;
+    }
+    if (visibilityTimeoutRef.current) {
+      clearTimeout(visibilityTimeoutRef.current);
+      visibilityTimeoutRef.current = null;
+    }
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+    setStatus("connecting");
+    try {
+      const channelsParam = channels.map((ch) => `channel=${encodeURIComponent(ch)}`).join("&");
+      const lastAckParam = channels.map((c) => {
+        const lastAck = lastAckRef.current.get(c) ?? String(replayEventsSince);
+        return `last_ack_${encodeURIComponent(c)}=${encodeURIComponent(lastAck)}`;
+      }).join("&");
+      const url = api.url + "?" + channelsParam + "&" + lastAckParam;
+      const eventSource = new EventSource(url, {
+        withCredentials: api.withCredentials ?? false
+      });
+      eventSourceRef.current = eventSource;
+      eventSource.onopen = () => {
+        reconnectAttemptsRef.current = 0;
+        setStatus("connected");
+        resetPingTimeout();
+      };
+      eventSource.onmessage = (evt) => {
+        try {
+          const payload = JSON.parse(evt.data);
+          resetPingTimeout();
+          handleMessage(payload);
+          const systemResult = systemEvent.safeParse(payload);
+          if (systemResult.success) {
+            if (systemResult.data.type === "reconnect") {
+              connect({ replayEventsSince: systemResult.data.timestamp });
+            }
+          }
+        } catch (error) {
+          console.warn("Error parsing message:", error);
+        }
+      };
+      eventSource.onerror = () => {
+        if (eventSource !== eventSourceRef.current) return;
+        const readyState = eventSourceRef.current?.readyState;
+        if (readyState === EventSource.CONNECTING) return;
+        if (readyState === EventSource.CLOSED) {
+          console.log("Connection closed, reconnecting...");
+        }
+        setStatus("disconnected");
+        if (reconnectAttemptsRef.current < maxReconnectAttempts) {
+          reconnectAttemptsRef.current++;
+          const timeoutMs = Math.min(1e3 * Math.pow(2, reconnectAttemptsRef.current), 3e4);
+          console.log(`Reconnecting in ${timeoutMs}ms... (Attempt ${reconnectAttemptsRef.current})`);
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connect();
+          }, timeoutMs);
+        } else {
+          setStatus("error");
+        }
+      };
+    } catch (error) {
+      setStatus("error");
+    }
+  }, [getAllNeededChannels, maxReconnectAttempts, api.url, api.withCredentials]);
+  const debouncedConnect = react.useCallback(() => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+    if (disconnectOnWindowHidden && typeof document !== "undefined" && document.hidden) {
+      return;
+    }
+    debounceTimeoutRef.current = setTimeout(() => {
+      connect();
+      debounceTimeoutRef.current = null;
+    }, 25);
+  }, [connect, disconnectOnWindowHidden]);
+  react.useEffect(() => {
+    if (!disconnectOnWindowHidden || typeof document === "undefined") return;
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        if (visibilityTimeoutRef.current) clearTimeout(visibilityTimeoutRef.current);
+        visibilityTimeoutRef.current = setTimeout(() => {
+          console.log("Window hidden for too long, disconnecting...");
+          cleanup();
+        }, disconnectDelay);
+      } else {
+        if (visibilityTimeoutRef.current) {
+          clearTimeout(visibilityTimeoutRef.current);
+          visibilityTimeoutRef.current = null;
+        }
+        if (status === "disconnected" && localSubsRef.current.size > 0) {
+          console.log("Window visible, reconnecting...");
+          connect();
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      if (visibilityTimeoutRef.current) clearTimeout(visibilityTimeoutRef.current);
+    };
+  }, [disconnectOnWindowHidden, disconnectDelay, connect, status]);
+  const handleMessage = (payload) => {
+    const systemResult = systemEvent.safeParse(payload);
+    if (systemResult.success) {
+      const event2 = systemResult.data;
+      if (event2.type === "connected") {
+        if (event2.cursor) {
+          lastAckRef.current.set(event2.channel, event2.cursor);
+        }
+      }
+      return;
+    }
+    const event = userEvent.safeParse(payload);
+    if (event.success) {
+      lastAckRef.current.set(event.data.channel, event.data.id);
+      const channel = event.data.channel;
+      const subscriberIds = channelSubsRef.current.get(channel);
+      if (subscriberIds) {
+        subscriberIds.forEach((id) => {
+          const sub = localSubsRef.current.get(id);
+          if (sub) {
+            sub.cb(payload);
+          }
+        });
+      }
+    }
+  };
+  react.useEffect(() => {
+    return () => cleanup();
+  }, []);
+  const register = (id, channels, cb) => {
+    localSubsRef.current.set(id, { channels: new Set(channels), cb });
+    channels.forEach((channel) => {
+      if (!channelSubsRef.current.has(channel)) {
+        channelSubsRef.current.set(channel, /* @__PURE__ */ new Set());
+      }
+      channelSubsRef.current.get(channel).add(id);
+    });
+    debouncedConnect();
+  };
+  const unregister = (id) => {
+    const channels = Array.from(localSubsRef.current.get(id)?.channels ?? []);
+    channels.forEach((channel) => {
+      lastAckRef.current.delete(channel);
+      const channelSet = channelSubsRef.current.get(channel);
+      if (channelSet) {
+        channelSet.delete(id);
+        if (channelSet.size === 0) {
+          channelSubsRef.current.delete(channel);
+        }
+      }
+    });
+    localSubsRef.current.delete(id);
+    if (localSubsRef.current.size === 0) {
+      cleanup();
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+      return;
+    }
+    debouncedConnect();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(RealtimeContext.Provider, { value: { status, register, unregister }, children });
+}
+function useRealtimeContext() {
+  const context = react.useContext(RealtimeContext);
+  if (!context) {
+    throw new Error("useRealtimeContext must be used within a RealtimeProvider");
+  }
+  return context;
+}
+var createRealtime = () => ({
+  useRealtime: (opts) => useRealtime(opts)
 });
+
+// src/client/use-realtime.ts
+function useRealtime(opts) {
+  const { channels = ["default"], events, onData, enabled } = opts;
+  const context = react.useContext(RealtimeContext);
+  if (!context) {
+    throw new Error(
+      "useRealtime: No RealtimeProvider found. Wrap your app in <RealtimeProvider> to use Realtime."
+    );
+  }
+  const registrationId = react.useRef(Math.random().toString(36).substring(2)).current;
+  const onDataRef = react.useRef(onData);
+  onDataRef.current = onData;
+  react.useEffect(() => {
+    if (enabled === false) {
+      context.unregister(registrationId);
+      return;
+    }
+    const validChannels = channels.filter(Boolean);
+    if (validChannels.length === 0) return;
+    context.register(registrationId, validChannels, (msg) => {
+      const result = userEvent.safeParse(msg);
+      if (result.success) {
+        const { event, channel, data } = result.data;
+        if (events && events.length > 0 && !events.includes(event)) {
+          return;
+        }
+        const payload = { event, data, channel };
+        onDataRef.current?.(payload);
+      }
+    });
+    return () => {
+      context.unregister(registrationId);
+    };
+  }, [JSON.stringify(channels), enabled, JSON.stringify(events)]);
+  return { status: context.status };
+}
+
+exports.RealtimeContext = RealtimeContext;
+exports.RealtimeProvider = RealtimeProvider;
+exports.createRealtime = createRealtime;
+exports.useRealtime = useRealtime;
+exports.useRealtimeContext = useRealtimeContext;

package/dist/client/index.js

@@ -1,2 +1,304 @@
-export * from './use-realtime.js';
-export * from './provider.js';
+import { createContext, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import z from 'zod/v4';
+import { jsx } from 'react/jsx-runtime';
+
+// src/client/use-realtime.ts
+var systemEvent = z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("connected"),
+    channel: z.string(),
+    cursor: z.string().optional()
+  }),
+  z.object({ type: z.literal("reconnect"), timestamp: z.number() }),
+  z.object({ type: z.literal("error"), error: z.string() }),
+  z.object({ type: z.literal("disconnected"), channels: z.array(z.string()) }),
+  z.object({ type: z.literal("ping"), timestamp: z.number() })
+]);
+var userEvent = z.object({
+  id: z.string(),
+  data: z.unknown(),
+  event: z.string(),
+  channel: z.string()
+});
+var RealtimeContext = createContext(null);
+var PING_TIMEOUT_MS = 75e3;
+function RealtimeProvider({
+  children,
+  api = { url: "/api/realtime", withCredentials: false },
+  maxReconnectAttempts = 3,
+  disconnectOnWindowHidden = true,
+  disconnectDelay = 5e3
+}) {
+  const [status, setStatus] = useState("disconnected");
+  const localSubsRef = useRef(/* @__PURE__ */ new Map());
+  const channelSubsRef = useRef(/* @__PURE__ */ new Map());
+  const eventSourceRef = useRef(null);
+  const reconnectTimeoutRef = useRef(null);
+  const pingTimeoutRef = useRef(null);
+  const reconnectAttemptsRef = useRef(0);
+  const lastAckRef = useRef(/* @__PURE__ */ new Map());
+  const connectTimeoutRef = useRef(null);
+  const debounceTimeoutRef = useRef(null);
+  const visibilityTimeoutRef = useRef(null);
+  const getAllNeededChannels = useCallback(() => {
+    const channels = /* @__PURE__ */ new Set();
+    localSubsRef.current.forEach((sub) => {
+      sub.channels.forEach((ch) => channels.add(ch));
+    });
+    return channels;
+  }, []);
+  const cleanup = () => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (pingTimeoutRef.current) {
+      clearTimeout(pingTimeoutRef.current);
+      pingTimeoutRef.current = null;
+    }
+    if (connectTimeoutRef.current) {
+      clearTimeout(connectTimeoutRef.current);
+      connectTimeoutRef.current = null;
+    }
+    if (visibilityTimeoutRef.current) {
+      clearTimeout(visibilityTimeoutRef.current);
+      visibilityTimeoutRef.current = null;
+    }
+    reconnectAttemptsRef.current = 0;
+    setStatus("disconnected");
+  };
+  const resetPingTimeout = useCallback(() => {
+    if (pingTimeoutRef.current) {
+      clearTimeout(pingTimeoutRef.current);
+    }
+    pingTimeoutRef.current = setTimeout(() => {
+      console.warn("Connection timed out, reconnecting...");
+      connect();
+    }, PING_TIMEOUT_MS);
+  }, []);
+  const connect = useCallback((opts) => {
+    const { replayEventsSince } = opts ?? { replayEventsSince: Date.now() };
+    const channels = Array.from(getAllNeededChannels());
+    if (channels.length === 0) return;
+    if (reconnectAttemptsRef.current >= maxReconnectAttempts) {
+      console.log("Max reconnection attempts reached.");
+      setStatus("error");
+      return;
+    }
+    if (visibilityTimeoutRef.current) {
+      clearTimeout(visibilityTimeoutRef.current);
+      visibilityTimeoutRef.current = null;
+    }
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+    setStatus("connecting");
+    try {
+      const channelsParam = channels.map((ch) => `channel=${encodeURIComponent(ch)}`).join("&");
+      const lastAckParam = channels.map((c) => {
+        const lastAck = lastAckRef.current.get(c) ?? String(replayEventsSince);
+        return `last_ack_${encodeURIComponent(c)}=${encodeURIComponent(lastAck)}`;
+      }).join("&");
+      const url = api.url + "?" + channelsParam + "&" + lastAckParam;
+      const eventSource = new EventSource(url, {
+        withCredentials: api.withCredentials ?? false
+      });
+      eventSourceRef.current = eventSource;
+      eventSource.onopen = () => {
+        reconnectAttemptsRef.current = 0;
+        setStatus("connected");
+        resetPingTimeout();
+      };
+      eventSource.onmessage = (evt) => {
+        try {
+          const payload = JSON.parse(evt.data);
+          resetPingTimeout();
+          handleMessage(payload);
+          const systemResult = systemEvent.safeParse(payload);
+          if (systemResult.success) {
+            if (systemResult.data.type === "reconnect") {
+              connect({ replayEventsSince: systemResult.data.timestamp });
+            }
+          }
+        } catch (error) {
+          console.warn("Error parsing message:", error);
+        }
+      };
+      eventSource.onerror = () => {
+        if (eventSource !== eventSourceRef.current) return;
+        const readyState = eventSourceRef.current?.readyState;
+        if (readyState === EventSource.CONNECTING) return;
+        if (readyState === EventSource.CLOSED) {
+          console.log("Connection closed, reconnecting...");
+        }
+        setStatus("disconnected");
+        if (reconnectAttemptsRef.current < maxReconnectAttempts) {
+          reconnectAttemptsRef.current++;
+          const timeoutMs = Math.min(1e3 * Math.pow(2, reconnectAttemptsRef.current), 3e4);
+          console.log(`Reconnecting in ${timeoutMs}ms... (Attempt ${reconnectAttemptsRef.current})`);
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connect();
+          }, timeoutMs);
+        } else {
+          setStatus("error");
+        }
+      };
+    } catch (error) {
+      setStatus("error");
+    }
+  }, [getAllNeededChannels, maxReconnectAttempts, api.url, api.withCredentials]);
+  const debouncedConnect = useCallback(() => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+    if (disconnectOnWindowHidden && typeof document !== "undefined" && document.hidden) {
+      return;
+    }
+    debounceTimeoutRef.current = setTimeout(() => {
+      connect();
+      debounceTimeoutRef.current = null;
+    }, 25);
+  }, [connect, disconnectOnWindowHidden]);
+  useEffect(() => {
+    if (!disconnectOnWindowHidden || typeof document === "undefined") return;
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        if (visibilityTimeoutRef.current) clearTimeout(visibilityTimeoutRef.current);
+        visibilityTimeoutRef.current = setTimeout(() => {
+          console.log("Window hidden for too long, disconnecting...");
+          cleanup();
+        }, disconnectDelay);
+      } else {
+        if (visibilityTimeoutRef.current) {
+          clearTimeout(visibilityTimeoutRef.current);
+          visibilityTimeoutRef.current = null;
+        }
+        if (status === "disconnected" && localSubsRef.current.size > 0) {
+          console.log("Window visible, reconnecting...");
+          connect();
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      if (visibilityTimeoutRef.current) clearTimeout(visibilityTimeoutRef.current);
+    };
+  }, [disconnectOnWindowHidden, disconnectDelay, connect, status]);
+  const handleMessage = (payload) => {
+    const systemResult = systemEvent.safeParse(payload);
+    if (systemResult.success) {
+      const event2 = systemResult.data;
+      if (event2.type === "connected") {
+        if (event2.cursor) {
+          lastAckRef.current.set(event2.channel, event2.cursor);
+        }
+      }
+      return;
+    }
+    const event = userEvent.safeParse(payload);
+    if (event.success) {
+      lastAckRef.current.set(event.data.channel, event.data.id);
+      const channel = event.data.channel;
+      const subscriberIds = channelSubsRef.current.get(channel);
+      if (subscriberIds) {
+        subscriberIds.forEach((id) => {
+          const sub = localSubsRef.current.get(id);
+          if (sub) {
+            sub.cb(payload);
+          }
+        });
+      }
+    }
+  };
+  useEffect(() => {
+    return () => cleanup();
+  }, []);
+  const register = (id, channels, cb) => {
+    localSubsRef.current.set(id, { channels: new Set(channels), cb });
+    channels.forEach((channel) => {
+      if (!channelSubsRef.current.has(channel)) {
+        channelSubsRef.current.set(channel, /* @__PURE__ */ new Set());
+      }
+      channelSubsRef.current.get(channel).add(id);
+    });
+    debouncedConnect();
+  };
+  const unregister = (id) => {
+    const channels = Array.from(localSubsRef.current.get(id)?.channels ?? []);
+    channels.forEach((channel) => {
+      lastAckRef.current.delete(channel);
+      const channelSet = channelSubsRef.current.get(channel);
+      if (channelSet) {
+        channelSet.delete(id);
+        if (channelSet.size === 0) {
+          channelSubsRef.current.delete(channel);
+        }
+      }
+    });
+    localSubsRef.current.delete(id);
+    if (localSubsRef.current.size === 0) {
+      cleanup();
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+      return;
+    }
+    debouncedConnect();
+  };
+  return /* @__PURE__ */ jsx(RealtimeContext.Provider, { value: { status, register, unregister }, children });
+}
+function useRealtimeContext() {
+  const context = useContext(RealtimeContext);
+  if (!context) {
+    throw new Error("useRealtimeContext must be used within a RealtimeProvider");
+  }
+  return context;
+}
+var createRealtime = () => ({
+  useRealtime: (opts) => useRealtime(opts)
+});
+
+// src/client/use-realtime.ts
+function useRealtime(opts) {
+  const { channels = ["default"], events, onData, enabled } = opts;
+  const context = useContext(RealtimeContext);
+  if (!context) {
+    throw new Error(
+      "useRealtime: No RealtimeProvider found. Wrap your app in <RealtimeProvider> to use Realtime."
+    );
+  }
+  const registrationId = useRef(Math.random().toString(36).substring(2)).current;
+  const onDataRef = useRef(onData);
+  onDataRef.current = onData;
+  useEffect(() => {
+    if (enabled === false) {
+      context.unregister(registrationId);
+      return;
+    }
+    const validChannels = channels.filter(Boolean);
+    if (validChannels.length === 0) return;
+    context.register(registrationId, validChannels, (msg) => {
+      const result = userEvent.safeParse(msg);
+      if (result.success) {
+        const { event, channel, data } = result.data;
+        if (events && events.length > 0 && !events.includes(event)) {
+          return;
+        }
+        const payload = { event, data, channel };
+        onDataRef.current?.(payload);
+      }
+    });
+    return () => {
+      context.unregister(registrationId);
+    };
+  }, [JSON.stringify(channels), enabled, JSON.stringify(events)]);
+  return { status: context.status };
+}
+
+export { RealtimeContext, RealtimeProvider, createRealtime, useRealtime, useRealtimeContext };