Function useService

extensions/cli/src/hooks/useService.ts:10–85

(serviceName: string)

 * Automatically subscribes to service changes and provides loading/error states
 */
export function useService<T>(serviceName: string): ServiceResult<T> & {
  reload: () => Promise<void>;
} {
  const container = useServiceContainer();
  const [result, setResult] = useState<ServiceResult<T>>(() =>
    container.getSync<T>(serviceName),
  );

  useEffect(() => {
    // Get initial state
    const initialResult = container.getSync<T>(serviceName);
    setResult(initialResult);

    // Auto-load if idle
    if (initialResult.state === "idle") {
      container.load<T>(serviceName).catch(() => {
        // Error is handled by the service container and will trigger the error event
      });
    }

    // Set up event listeners
    const onLoading = () => {
      setResult((prev) => ({ ...prev, state: "loading", error: null }));
    };

    const onReady = (value: T) => {
      setResult({
        value,
        state: "ready",
        error: null,
        lastUpdated: new Date(),
      });
    };

    const onError = (error: Error) => {
      setResult((prev) => ({
        ...prev,
        state: "error",
        error,
        lastUpdated: new Date(),
      }));
    };

    const onChanged = (value: T) => {
      setResult((prev) => ({
        ...prev,
        value,
        error: null,
        lastUpdated: new Date(),
      }));
    };

    // Subscribe to events
    container.on(`${serviceName}:loading`, onLoading);
    container.on(`${serviceName}:ready`, onReady);
    container.on(`${serviceName}:error`, onError);
    container.on(`${serviceName}:changed`, onChanged);