@fitzzero/quickdraw-core 0.1.0

package/dist/client/index.js

@@ -0,0 +1,690 @@
+import * as React from 'react';
+import { io } from 'socket.io-client';
+import { QueryClient, QueryClientProvider, useMutation, useQueryClient, useQuery } from '@tanstack/react-query';
+import { jsx } from 'react/jsx-runtime';
+
+// src/client/QuickdrawProvider.tsx
+var QuickdrawSocketContext = React.createContext(null);
+function useQuickdrawSocket() {
+  const context = React.useContext(QuickdrawSocketContext);
+  if (!context) {
+    throw new Error(
+      "useQuickdrawSocket must be used within a QuickdrawProvider"
+    );
+  }
+  return context;
+}
+var defaultQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1e3 * 60 * 5,
+      // 5 minutes
+      retry: 1
+    },
+    mutations: {
+      retry: 0
+    }
+  }
+});
+function QuickdrawProvider({
+  children,
+  serverUrl,
+  queryClient = defaultQueryClient,
+  authToken,
+  autoConnect = !!authToken
+}) {
+  const [socket, setSocket] = React.useState(null);
+  const [isConnected, setIsConnected] = React.useState(false);
+  const [userId, setUserId] = React.useState(null);
+  const [serviceAccess, setServiceAccess] = React.useState({});
+  const authTokenRef = React.useRef(authToken);
+  React.useEffect(() => {
+    authTokenRef.current = authToken;
+  }, [authToken]);
+  const connect = React.useCallback(
+    (token) => {
+      const authToUse = token ?? authTokenRef.current;
+      const newSocket = io(serverUrl, {
+        auth: authToUse ? { token: authToUse } : void 0,
+        transports: ["websocket", "polling"],
+        autoConnect: true
+      });
+      newSocket.on("connect", () => {
+        setIsConnected(true);
+      });
+      newSocket.on("disconnect", () => {
+        setIsConnected(false);
+      });
+      newSocket.on(
+        "auth:info",
+        (info) => {
+          setUserId(info.userId);
+          setServiceAccess(info.serviceAccess);
+        }
+      );
+      newSocket.on("connect_error", (error) => {
+        console.error("Socket connection error:", error.message);
+      });
+      setSocket(newSocket);
+    },
+    [serverUrl]
+  );
+  const disconnect = React.useCallback(() => {
+    if (socket) {
+      socket.disconnect();
+      setSocket(null);
+      setIsConnected(false);
+      setUserId(null);
+      setServiceAccess({});
+    }
+  }, [socket]);
+  React.useEffect(() => {
+    if (autoConnect && !socket) {
+      connect();
+    }
+    return () => {
+      if (socket) {
+        socket.disconnect();
+      }
+    };
+  }, [autoConnect]);
+  React.useEffect(() => {
+    if (socket && authToken !== authTokenRef.current) {
+      disconnect();
+      if (authToken) {
+        connect(authToken);
+      }
+    }
+  }, [authToken, socket, disconnect, connect]);
+  const contextValue = React.useMemo(
+    () => ({
+      socket,
+      isConnected,
+      userId,
+      serviceAccess,
+      connect,
+      disconnect
+    }),
+    [socket, isConnected, userId, serviceAccess, connect, disconnect]
+  );
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(QuickdrawSocketContext.Provider, { value: contextValue, children }) });
+}
+function useService(serviceName, methodName, options) {
+  const { socket, isConnected } = useQuickdrawSocket();
+  const [error, setError] = React.useState(null);
+  const optionsRef = React.useRef(options);
+  React.useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+  const mutation = useMutation({
+    mutationKey: [serviceName, methodName],
+    mutationFn: async (payload) => {
+      if (!socket || !isConnected) {
+        throw new Error("Socket not connected");
+      }
+      return new Promise((resolve, reject) => {
+        const eventName = `${serviceName}:${methodName}`;
+        const timeout = setTimeout(() => {
+          reject(new Error("Request timeout"));
+        }, 1e4);
+        socket.emit(
+          eventName,
+          payload,
+          (response) => {
+            clearTimeout(timeout);
+            if (response.success) {
+              resolve(response.data);
+            } else {
+              reject(new Error(response.error));
+            }
+          }
+        );
+      });
+    },
+    onSuccess: (data) => {
+      setError(null);
+      optionsRef.current?.onSuccess?.(data);
+    },
+    onError: (err) => {
+      const errorMessage = err.message;
+      setError(errorMessage);
+      optionsRef.current?.onError?.(errorMessage);
+    },
+    retry: options?.retry ?? false,
+    retryDelay: options?.retryDelay
+  });
+  return {
+    mutate: mutation.mutate,
+    mutateAsync: mutation.mutateAsync,
+    isPending: mutation.isPending,
+    isError: mutation.isError,
+    error,
+    data: mutation.data,
+    reset: mutation.reset
+  };
+}
+function useServiceMethod(serviceName, methodName, options) {
+  const { socket, isConnected } = useQuickdrawSocket();
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [data, setData] = React.useState(null);
+  const optionsRef = React.useRef(options);
+  React.useEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+  const execute = React.useCallback(
+    async (payload) => {
+      if (!socket || !isConnected) {
+        const errorMsg = "Socket not connected";
+        setError(errorMsg);
+        optionsRef.current?.onError?.(errorMsg);
+        return null;
+      }
+      setLoading(true);
+      setError(null);
+      return new Promise((resolve) => {
+        const eventName = `${serviceName}:${methodName}`;
+        const timeout = setTimeout(() => {
+          const errorMsg = "Request timeout";
+          setError(errorMsg);
+          setLoading(false);
+          optionsRef.current?.onError?.(errorMsg);
+          resolve(null);
+        }, 1e4);
+        socket.emit(
+          eventName,
+          payload,
+          (response) => {
+            clearTimeout(timeout);
+            setLoading(false);
+            if (response.success) {
+              setError(null);
+              setData(response.data);
+              optionsRef.current?.onSuccess?.(response.data);
+              resolve(response.data);
+            } else {
+              setError(response.error);
+              optionsRef.current?.onError?.(response.error);
+              resolve(null);
+            }
+          }
+        );
+      });
+    },
+    [socket, isConnected, serviceName, methodName]
+  );
+  return {
+    execute,
+    loading,
+    error,
+    data,
+    isReady: !!socket && isConnected
+  };
+}
+var activeSubscriptions = /* @__PURE__ */ new Map();
+function useSubscription(serviceName, entryId, options = {}) {
+  const { socket, isConnected } = useQuickdrawSocket();
+  const queryClient = useQueryClient();
+  const [isSubscribed, setIsSubscribed] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const {
+    enabled = true,
+    onData,
+    onError,
+    requiredLevel = "Read",
+    staleTime = Infinity
+    // Subscriptions should stay fresh via socket updates
+  } = options;
+  const subscriptionKey = entryId ? `${serviceName}:${entryId}` : null;
+  const queryKey = [serviceName, "subscription", entryId];
+  const onDataRef = React.useRef(onData);
+  const onErrorRef = React.useRef(onError);
+  React.useEffect(() => {
+    onDataRef.current = onData;
+    onErrorRef.current = onError;
+  }, [onData, onError]);
+  const query = useQuery({
+    queryKey,
+    queryFn: async () => {
+      return null;
+    },
+    enabled: false,
+    // We manage data via socket
+    staleTime
+  });
+  React.useEffect(() => {
+    if (!socket || !isConnected || !subscriptionKey || !enabled || !entryId) {
+      return;
+    }
+    const existing = activeSubscriptions.get(subscriptionKey);
+    if (existing) {
+      existing.refCount++;
+      setIsSubscribed(true);
+      return () => {
+        existing.refCount--;
+        if (existing.refCount === 0) {
+          existing.cleanup?.();
+          activeSubscriptions.delete(subscriptionKey);
+        }
+      };
+    }
+    const subscribeEvent = `${serviceName}:subscribe`;
+    const updateEvent = `${serviceName}:update:${entryId}`;
+    const handleUpdate = (updateData) => {
+      const asAny = updateData;
+      if (asAny.deleted) {
+        queryClient.setQueryData(queryKey, null);
+        return;
+      }
+      queryClient.setQueryData(queryKey, (oldData) => {
+        if (!oldData) {
+          return updateData;
+        }
+        const merged = { ...oldData, ...updateData };
+        onDataRef.current?.(merged);
+        return merged;
+      });
+    };
+    socket.on(updateEvent, handleUpdate);
+    socket.emit(
+      subscribeEvent,
+      { entryId, requiredLevel },
+      (response) => {
+        if (response.success && response.data) {
+          queryClient.setQueryData(queryKey, response.data);
+          setIsSubscribed(true);
+          setError(null);
+          onDataRef.current?.(response.data);
+        } else if (!response.success) {
+          setError(response.error);
+          setIsSubscribed(false);
+          onErrorRef.current?.(response.error);
+        }
+      }
+    );
+    const cleanup = () => {
+      socket.off(updateEvent, handleUpdate);
+      socket.emit(`${serviceName}:unsubscribe`, { entryId });
+      setIsSubscribed(false);
+    };
+    activeSubscriptions.set(subscriptionKey, {
+      refCount: 1,
+      cleanup
+    });
+    return () => {
+      const sub = activeSubscriptions.get(subscriptionKey);
+      if (sub) {
+        sub.refCount--;
+        if (sub.refCount === 0) {
+          sub.cleanup?.();
+          activeSubscriptions.delete(subscriptionKey);
+        }
+      }
+    };
+  }, [
+    socket,
+    isConnected,
+    subscriptionKey,
+    enabled,
+    entryId,
+    serviceName,
+    requiredLevel,
+    queryClient,
+    queryKey
+  ]);
+  const subscribe = React.useCallback(() => {
+    if (!socket || !isConnected || !entryId) return;
+    socket.emit(
+      `${serviceName}:subscribe`,
+      { entryId, requiredLevel },
+      (response) => {
+        if (response.success && response.data) {
+          queryClient.setQueryData(queryKey, response.data);
+          setIsSubscribed(true);
+          setError(null);
+        } else if (!response.success) {
+          setError(response.error);
+        }
+      }
+    );
+  }, [socket, isConnected, entryId, serviceName, requiredLevel, queryClient, queryKey]);
+  const unsubscribe = React.useCallback(() => {
+    if (!socket || !entryId) return;
+    socket.emit(`${serviceName}:unsubscribe`, { entryId });
+    setIsSubscribed(false);
+  }, [socket, entryId, serviceName]);
+  const data = queryClient.getQueryData(queryKey) ?? null;
+  return {
+    data,
+    isLoading: query.isLoading || !data && isSubscribed,
+    isError: !!error,
+    error,
+    isSubscribed,
+    subscribe,
+    unsubscribe
+  };
+}
+function useSocketInput(options) {
+  const {
+    state,
+    property,
+    update,
+    commitMode,
+    debounceMs = 300,
+    format = (v) => v,
+    parse = (v) => v,
+    onSuccess,
+    onError
+  } = options;
+  const serverValue = state ? state[property] : void 0;
+  const formattedServerValue = format(serverValue);
+  const [localValue, setLocalValue] = React.useState(formattedServerValue);
+  const [inFlight, setInFlight] = React.useState(false);
+  const [isDirty, setIsDirty] = React.useState(false);
+  const debounceTimerRef = React.useRef(null);
+  const pendingValueRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!isDirty && !inFlight) {
+      setLocalValue(formattedServerValue);
+    }
+  }, [formattedServerValue, isDirty, inFlight]);
+  const commit = React.useCallback(async () => {
+    if (!isDirty) return;
+    const valueToCommit = pendingValueRef.current ?? localValue;
+    const parsedValue = parse(valueToCommit);
+    setInFlight(true);
+    try {
+      const result = await update({ [property]: parsedValue });
+      setIsDirty(false);
+      pendingValueRef.current = null;
+      onSuccess?.(result);
+    } catch (err) {
+      onError?.(err instanceof Error ? err.message : "Update failed");
+      setLocalValue(formattedServerValue);
+      setIsDirty(false);
+    } finally {
+      setInFlight(false);
+    }
+  }, [isDirty, localValue, parse, property, update, onSuccess, onError, formattedServerValue]);
+  const onLocalChange = React.useCallback(
+    (newValue) => {
+      setLocalValue(newValue);
+      setIsDirty(true);
+      pendingValueRef.current = newValue;
+      if (commitMode === "change") {
+        void (async () => {
+          const parsedValue = parse(newValue);
+          setInFlight(true);
+          try {
+            const result = await update({ [property]: parsedValue });
+            setIsDirty(false);
+            pendingValueRef.current = null;
+            onSuccess?.(result);
+          } catch (err) {
+            onError?.(err instanceof Error ? err.message : "Update failed");
+          } finally {
+            setInFlight(false);
+          }
+        })();
+      } else if (commitMode === "debounce") {
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+          void commit();
+        }, debounceMs);
+      }
+    },
+    [commitMode, parse, property, update, onSuccess, onError, debounceMs, commit]
+  );
+  const onBlur = React.useCallback(() => {
+    if (commitMode === "blur" && isDirty) {
+      void commit();
+    }
+  }, [commitMode, isDirty, commit]);
+  React.useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+  return {
+    value: localValue,
+    onLocalChange,
+    commit,
+    onBlur,
+    inFlight,
+    isDirty
+  };
+}
+function SocketCheckbox(props) {
+  const {
+    state,
+    update,
+    property,
+    commitMode = "change",
+    debounceMs,
+    format,
+    parse,
+    onSuccess,
+    onError,
+    disabled,
+    ...inputProps
+  } = props;
+  const defaultFormat = React.useCallback((v) => Boolean(v), []);
+  const defaultParse = React.useCallback((v) => Boolean(v), []);
+  const { value, onLocalChange, inFlight } = useSocketInput({
+    state,
+    property,
+    update,
+    commitMode,
+    debounceMs,
+    format: format ?? defaultFormat,
+    parse: parse ?? defaultParse,
+    onSuccess,
+    onError
+  });
+  const handleChange = React.useCallback(
+    (event) => {
+      onLocalChange(event.target.checked);
+    },
+    [onLocalChange]
+  );
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...inputProps,
+      type: "checkbox",
+      checked: Boolean(value),
+      onChange: handleChange,
+      disabled: Boolean(disabled) || inFlight
+    }
+  );
+}
+function SocketTextField(props) {
+  const {
+    state,
+    update,
+    property,
+    commitMode = "blur",
+    debounceMs = 300,
+    format,
+    parse,
+    onSuccess,
+    onError,
+    disabled,
+    ...inputProps
+  } = props;
+  const defaultFormat = React.useCallback((v) => String(v ?? ""), []);
+  const defaultParse = React.useCallback((v) => String(v), []);
+  const { value, onLocalChange, onBlur, inFlight } = useSocketInput({
+    state,
+    property,
+    update,
+    commitMode,
+    debounceMs,
+    format: format ?? defaultFormat,
+    parse: parse ?? defaultParse,
+    onSuccess,
+    onError
+  });
+  const handleChange = React.useCallback(
+    (event) => {
+      onLocalChange(event.target.value);
+    },
+    [onLocalChange]
+  );
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...inputProps,
+      type: "text",
+      value: String(value),
+      onChange: handleChange,
+      onBlur,
+      disabled: Boolean(disabled) || inFlight
+    }
+  );
+}
+function SocketSelect(props) {
+  const {
+    state,
+    update,
+    property,
+    children,
+    commitMode = "change",
+    debounceMs,
+    format,
+    parse,
+    onSuccess,
+    onError,
+    disabled,
+    ...selectProps
+  } = props;
+  const defaultFormat = React.useCallback((v) => String(v ?? ""), []);
+  const defaultParse = React.useCallback((v) => String(v), []);
+  const { value, onLocalChange, inFlight } = useSocketInput({
+    state,
+    property,
+    update,
+    commitMode,
+    debounceMs,
+    format: format ?? defaultFormat,
+    parse: parse ?? defaultParse,
+    onSuccess,
+    onError
+  });
+  const handleChange = React.useCallback(
+    (event) => {
+      onLocalChange(event.target.value);
+    },
+    [onLocalChange]
+  );
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      ...selectProps,
+      value: String(value),
+      onChange: handleChange,
+      disabled: Boolean(disabled) || inFlight,
+      children
+    }
+  );
+}
+function SocketSlider(props) {
+  const {
+    state,
+    update,
+    property,
+    commitMode = "debounce",
+    debounceMs = 200,
+    format,
+    parse,
+    onSuccess,
+    onError,
+    disabled,
+    ...inputProps
+  } = props;
+  const defaultFormat = React.useCallback((v) => Number(v ?? 0), []);
+  const defaultParse = React.useCallback((v) => Number(v), []);
+  const { value, onLocalChange, inFlight } = useSocketInput({
+    state,
+    property,
+    update,
+    commitMode,
+    debounceMs,
+    format: format ?? defaultFormat,
+    parse: parse ?? defaultParse,
+    onSuccess,
+    onError
+  });
+  const handleChange = React.useCallback(
+    (event) => {
+      onLocalChange(Number(event.target.value));
+    },
+    [onLocalChange]
+  );
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...inputProps,
+      type: "range",
+      value: Number(value),
+      onChange: handleChange,
+      disabled: Boolean(disabled) || inFlight
+    }
+  );
+}
+function SocketSwitch(props) {
+  const {
+    state,
+    update,
+    property,
+    commitMode = "change",
+    debounceMs,
+    format,
+    parse,
+    onSuccess,
+    onError,
+    disabled,
+    className,
+    ...inputProps
+  } = props;
+  const defaultFormat = React.useCallback((v) => Boolean(v), []);
+  const defaultParse = React.useCallback((v) => Boolean(v), []);
+  const { value, onLocalChange, inFlight } = useSocketInput({
+    state,
+    property,
+    update,
+    commitMode,
+    debounceMs,
+    format: format ?? defaultFormat,
+    parse: parse ?? defaultParse,
+    onSuccess,
+    onError
+  });
+  const handleChange = React.useCallback(
+    (event) => {
+      onLocalChange(event.target.checked);
+    },
+    [onLocalChange]
+  );
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...inputProps,
+      type: "checkbox",
+      role: "switch",
+      "aria-checked": Boolean(value),
+      checked: Boolean(value),
+      onChange: handleChange,
+      disabled: Boolean(disabled) || inFlight,
+      className
+    }
+  );
+}
+
+export { QuickdrawProvider, SocketCheckbox, SocketSelect, SocketSlider, SocketSwitch, SocketTextField, useQuickdrawSocket, useService, useServiceMethod, useSocketInput, useSubscription };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map