@nicnocquee/dataqueue-react 0.2.0

package/README.md

@@ -0,0 +1,91 @@
+# @nicnocquee/dataqueue-react
+
+React hooks for subscribing to [dataqueue](https://github.com/nicnocquee/dataqueue) job status and progress.
+
+## Installation
+
+```bash
+npm install @nicnocquee/dataqueue-react
+```
+
+Requires React 18+.
+
+## Quick Start
+
+```tsx
+import { useJob } from '@nicnocquee/dataqueue-react';
+
+function JobTracker({ jobId }: { jobId: number }) {
+  const { status, progress, isLoading, error } = useJob(jobId, {
+    fetcher: (id) =>
+      fetch(`/api/jobs/${id}`)
+        .then((r) => r.json())
+        .then((d) => d.job),
+    pollingInterval: 1000,
+  });
+
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error.message}</p>;
+
+  return (
+    <div>
+      <p>Status: {status}</p>
+      <progress value={progress ?? 0} max={100} />
+    </div>
+  );
+}
+```
+
+## Provider
+
+Use `DataqueueProvider` to share config across your app:
+
+```tsx
+import { DataqueueProvider } from '@nicnocquee/dataqueue-react';
+
+function App() {
+  return (
+    <DataqueueProvider
+      fetcher={(id) =>
+        fetch(`/api/jobs/${id}`)
+          .then((r) => r.json())
+          .then((d) => d.job)
+      }
+      pollingInterval={2000}
+    >
+      <YourApp />
+    </DataqueueProvider>
+  );
+}
+```
+
+Then use `useJob` anywhere without repeating the fetcher:
+
+```tsx
+const { status, progress } = useJob(jobId);
+```
+
+## API
+
+### useJob(jobId, options?)
+
+| Option            | Type                               | Default       | Description                       |
+| ----------------- | ---------------------------------- | ------------- | --------------------------------- |
+| `fetcher`         | `(id: number) => Promise<JobData>` | from provider | Function that fetches a job by ID |
+| `pollingInterval` | `number`                           | `1000`        | Milliseconds between polls        |
+| `enabled`         | `boolean`                          | `true`        | Set to `false` to pause polling   |
+| `onStatusChange`  | `(newStatus, oldStatus) => void`   | —             | Called when status changes        |
+| `onComplete`      | `(job) => void`                    | —             | Called when job completes         |
+| `onFailed`        | `(job) => void`                    | —             | Called when job fails             |
+
+Returns `{ data, status, progress, isLoading, error }`.
+
+Polling stops automatically when the job reaches a terminal status (`completed`, `failed`, `cancelled`).
+
+## Documentation
+
+Full documentation: [dataqueue docs](https://dataqueue.nico.fyi/docs/usage/react-sdk)
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,103 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/context.tsx
+var DataqueueContext = react.createContext(null);
+function DataqueueProvider({
+  children,
+  ...config
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataqueueContext.Provider, { value: config, children });
+}
+function useDataqueueConfig() {
+  return react.useContext(DataqueueContext);
+}
+
+// src/types.ts
+var TERMINAL_STATUSES = /* @__PURE__ */ new Set([
+  "completed",
+  "failed",
+  "cancelled"
+]);
+
+// src/use-job.ts
+var DEFAULT_POLLING_INTERVAL = 1e3;
+function useJob(jobId, options = {}) {
+  const providerConfig = useDataqueueConfig();
+  const fetcher = options.fetcher ?? providerConfig?.fetcher;
+  const pollingInterval = options.pollingInterval ?? providerConfig?.pollingInterval ?? DEFAULT_POLLING_INTERVAL;
+  const enabled = options.enabled !== false;
+  const [data, setData] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(jobId != null && enabled);
+  const prevStatusRef = react.useRef(null);
+  const inFlightRef = react.useRef(false);
+  const onStatusChangeRef = react.useRef(options.onStatusChange);
+  onStatusChangeRef.current = options.onStatusChange;
+  const onCompleteRef = react.useRef(options.onComplete);
+  onCompleteRef.current = options.onComplete;
+  const onFailedRef = react.useRef(options.onFailed);
+  onFailedRef.current = options.onFailed;
+  const terminalRef = react.useRef(false);
+  const fetchJob = react.useCallback(async () => {
+    if (!fetcher || jobId == null || inFlightRef.current) return;
+    inFlightRef.current = true;
+    try {
+      const result = await fetcher(jobId);
+      setData(result);
+      setError(null);
+      setIsLoading(false);
+      const newStatus = result.status;
+      const prevStatus = prevStatusRef.current;
+      if (prevStatus !== newStatus) {
+        prevStatusRef.current = newStatus;
+        onStatusChangeRef.current?.(newStatus, prevStatus);
+        if (newStatus === "completed") {
+          onCompleteRef.current?.(result);
+        } else if (newStatus === "failed") {
+          onFailedRef.current?.(result);
+        }
+      }
+      if (TERMINAL_STATUSES.has(newStatus)) {
+        terminalRef.current = true;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setIsLoading(false);
+    } finally {
+      inFlightRef.current = false;
+    }
+  }, [fetcher, jobId]);
+  react.useEffect(() => {
+    setData(null);
+    setError(null);
+    prevStatusRef.current = null;
+    terminalRef.current = false;
+    inFlightRef.current = false;
+    setIsLoading(jobId != null && enabled);
+  }, [jobId, enabled]);
+  react.useEffect(() => {
+    if (!fetcher || jobId == null || !enabled) return;
+    fetchJob();
+    const id = setInterval(() => {
+      if (!terminalRef.current) {
+        fetchJob();
+      }
+    }, pollingInterval);
+    return () => clearInterval(id);
+  }, [fetchJob, pollingInterval, jobId, enabled, fetcher]);
+  return {
+    data,
+    status: data?.status ?? null,
+    progress: data?.progress ?? null,
+    isLoading,
+    error
+  };
+}
+
+exports.DataqueueProvider = DataqueueProvider;
+exports.useJob = useJob;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx","../src/types.ts","../src/use-job.ts"],"names":["createContext","useContext","useState","useRef","useCallback","useEffect"],"mappings":";;;;;;AAKA,IAAM,gBAAA,GAAmBA,oBAAsC,IAAI,CAAA;AAO5D,SAAS,iBAAA,CAAkB;AAAA,EAChC,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoD;AAClD,EAAA,sCACG,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,QAC/B,QAAA,EACH,CAAA;AAEJ;AAMO,SAAS,kBAAA,GAA6C;AAC3D,EAAA,OAAOC,iBAAW,gBAAgB,CAAA;AACpC;;;AChBO,IAAM,iBAAA,uBAAgD,GAAA,CAAI;AAAA,EAC/D,WAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAC,CAAA;;;ACJD,IAAM,wBAAA,GAA2B,GAAA;AAkB1B,SAAS,MAAA,CACd,KAAA,EACA,OAAA,GAAyB,EAAC,EACZ;AACd,EAAA,MAAM,iBAAiB,kBAAA,EAAmB;AAG1C,EAAA,MAAM,OAAA,GACJ,OAAA,CAAQ,OAAA,IAAW,cAAA,EAAgB,OAAA;AAGrC,EAAA,MAAM,eAAA,GACJ,OAAA,CAAQ,eAAA,IACR,cAAA,EAAgB,eAAA,IAChB,wBAAA;AAEF,EAAA,MAAM,OAAA,GAAU,QAAQ,OAAA,KAAY,KAAA;AAEpC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAyB,IAAI,CAAA;AACrD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,IAAIA,cAAA,CAAkB,KAAA,IAAS,QAAQ,OAAO,CAAA;AAG5E,EAAA,MAAM,aAAA,GAAgBC,aAAyB,IAAI,CAAA;AAGnD,EAAA,MAAM,WAAA,GAAcA,aAAO,KAAK,CAAA;AAIhC,EAAA,MAAM,iBAAA,GAAoBA,YAAA,CAAO,OAAA,CAAQ,cAAc,CAAA;AACvD,EAAA,iBAAA,CAAkB,UAAU,OAAA,CAAQ,cAAA;AACpC,EAAA,MAAM,aAAA,GAAgBA,YAAA,CAAO,OAAA,CAAQ,UAAU,CAAA;AAC/C,EAAA,aAAA,CAAc,UAAU,OAAA,CAAQ,UAAA;AAChC,EAAA,MAAM,WAAA,GAAcA,YAAA,CAAO,OAAA,CAAQ,QAAQ,CAAA;AAC3C,EAAA,WAAA,CAAY,UAAU,OAAA,CAAQ,QAAA;AAG9B,EAAA,MAAM,WAAA,GAAcA,aAAO,KAAK,CAAA;AAEhC,EAAA,MAAM,QAAA,GAAWC,kBAAY,YAAY;AACvC,IAAA,IAAI,CAAC,OAAA,IAAW,KAAA,IAAS,IAAA,IAAQ,YAAY,OAAA,EAAS;AAEtD,IAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AACtB,IAAA,IAAI;AACF,MAAA,MAAM,MAAA,GAAS,MAAM,OAAA,CAAQ,KAAK,CAAA;AAClC,MAAA,OAAA,CAAQ,MAAM,CAAA;AACd,MAAA,QAAA,CAAS,IAAI,CAAA;AACb,MAAA,YAAA,CAAa,KAAK,CAAA;AAGlB,MAAA,MAAM,YAAY,MAAA,CAAO,MAAA;AACzB,MAAA,MAAM,aAAa,aAAA,CAAc,OAAA;AAEjC,MAAA,IAAI,eAAe,SAAA,EAAW;AAC5B,QAAA,aAAA,CAAc,OAAA,GAAU,SAAA;AACxB,QAAA,iBAAA,CAAkB,OAAA,GAAU,WAAW,UAAU,CAAA;AAEjD,QAAA,IAAI,cAAc,WAAA,EAAa;AAC7B,UAAA,aAAA,CAAc,UAAU,MAAM,CAAA;AAAA,SAChC,MAAA,IAAW,cAAc,QAAA,EAAU;AACjC,UAAA,WAAA,CAAY,UAAU,MAAM,CAAA;AAAA;AAC9B;AAIF,MAAA,IAAI,iBAAA,CAAkB,GAAA,CAAI,SAAS,CAAA,EAAG;AACpC,QAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AAAA;AACxB,aACO,GAAA,EAAK;AACZ,MAAA,QAAA,CAAS,GAAA,YAAe,QAAQ,GAAA,GAAM,IAAI,MAAM,MAAA,CAAO,GAAG,CAAC,CAAC,CAAA;AAC5D,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,KACpB,SAAE;AACA,MAAA,WAAA,CAAY,OAAA,GAAU,KAAA;AAAA;AACxB,GACF,EAAG,CAAC,OAAA,EAAS,KAAK,CAAC,CAAA;AAGnB,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,IAAI,CAAA;AACZ,IAAA,QAAA,CAAS,IAAI,CAAA;AACb,IAAA,aAAA,CAAc,OAAA,GAAU,IAAA;AACxB,IAAA,WAAA,CAAY,OAAA,GAAU,KAAA;AACtB,IAAA,WAAA,CAAY,OAAA,GAAU,KAAA;AACtB,IAAA,YAAA,CAAa,KAAA,IAAS,QAAQ,OAAO,CAAA;AAAA,GACvC,EAAG,CAAC,KAAA,EAAO,OAAO,CAAC,CAAA;AAGnB,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,IAAW,KAAA,IAAS,IAAA,IAAQ,CAAC,OAAA,EAAS;AAG3C,IAAA,QAAA,EAAS;AAET,IAAA,MAAM,EAAA,GAAK,YAAY,MAAM;AAC3B,MAAA,IAAI,CAAC,YAAY,OAAA,EAAS;AACxB,QAAA,QAAA,EAAS;AAAA;AACX,OACC,eAAe,CAAA;AAElB,IAAA,OAAO,MAAM,cAAc,EAAE,CAAA;AAAA,KAC5B,CAAC,QAAA,EAAU,iBAAiB,KAAA,EAAO,OAAA,EAAS,OAAO,CAAC,CAAA;AAEvD,EAAA,OAAO;AAAA,IACL,IAAA;AAAA,IACA,MAAA,EAAQ,MAAM,MAAA,IAAU,IAAA;AAAA,IACxB,QAAA,EAAU,MAAM,QAAA,IAAY,IAAA;AAAA,IAC5B,SAAA;AAAA,IACA;AAAA,GACF;AACF","file":"index.cjs","sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\nimport type { DataqueueConfig } from './types.js';\n\nconst DataqueueContext = createContext<DataqueueConfig | null>(null);\n\n/**\n * Provides default configuration (fetcher, pollingInterval) to all\n * `useJob` hooks in the subtree. Optional -- hooks can also accept\n * inline config via their options parameter.\n */\nexport function DataqueueProvider({\n  children,\n  ...config\n}: DataqueueConfig & { children: React.ReactNode }) {\n  return (\n    <DataqueueContext.Provider value={config}>\n      {children}\n    </DataqueueContext.Provider>\n  );\n}\n\n/**\n * Internal hook to read the provider config. Returns null when no provider\n * is present (hooks fall back to their own options).\n */\nexport function useDataqueueConfig(): DataqueueConfig | null {\n  return useContext(DataqueueContext);\n}\n","/**\n * Job status values matching the core dataqueue package.\n * Redefined here so the React SDK has zero runtime dependency on the server package.\n */\nexport type JobStatus =\n  | 'pending'\n  | 'processing'\n  | 'completed'\n  | 'failed'\n  | 'cancelled'\n  | 'waiting';\n\n/** Terminal statuses where polling should stop automatically. */\nexport const TERMINAL_STATUSES: ReadonlySet<JobStatus> = new Set([\n  'completed',\n  'failed',\n  'cancelled',\n]);\n\n/**\n * Minimal job data shape returned by the fetcher.\n * Users can return a full JobRecord from the server or any object\n * that includes at least `status` and optionally `progress`.\n */\nexport interface JobData {\n  id: number;\n  status: JobStatus;\n  progress?: number | null;\n  [key: string]: unknown;\n}\n\n/**\n * A fetcher function that retrieves a job by its ID.\n * Should return a `JobData`-compatible object or throw on error.\n */\nexport type JobFetcher = (jobId: number) => Promise<JobData>;\n\n/**\n * Configuration provided to `DataqueueProvider`.\n */\nexport interface DataqueueConfig {\n  /** Fetcher function to retrieve a job by ID from your API. */\n  fetcher: JobFetcher;\n  /** Default polling interval in milliseconds. Defaults to 1000. */\n  pollingInterval?: number;\n}\n\n/**\n * Options for the `useJob` hook.\n */\nexport interface UseJobOptions {\n  /** Override the provider's fetcher for this specific hook instance. */\n  fetcher?: JobFetcher;\n  /** Override the provider's polling interval (ms) for this hook instance. */\n  pollingInterval?: number;\n  /** Whether polling is enabled. Defaults to true. Set to false to pause. */\n  enabled?: boolean;\n  /** Called when the job's status changes. */\n  onStatusChange?: (newStatus: JobStatus, prevStatus: JobStatus | null) => void;\n  /** Called when the job reaches 'completed' status. */\n  onComplete?: (data: JobData) => void;\n  /** Called when the job reaches 'failed' status. */\n  onFailed?: (data: JobData) => void;\n}\n\n/**\n * Return value of the `useJob` hook.\n */\nexport interface UseJobReturn {\n  /** The full job data from the last successful fetch, or null if not yet loaded. */\n  data: JobData | null;\n  /** The current job status, or null if not yet loaded. */\n  status: JobStatus | null;\n  /** The current progress percentage (0-100), or null if not reported. */\n  progress: number | null;\n  /** True during the initial fetch (before any data is available). */\n  isLoading: boolean;\n  /** The error from the last failed fetch, or null. */\n  error: Error | null;\n}\n","'use client';\n\nimport { useState, useEffect, useRef, useCallback } from 'react';\nimport { useDataqueueConfig } from './context.js';\nimport type {\n  JobData,\n  JobFetcher,\n  JobStatus,\n  UseJobOptions,\n  UseJobReturn,\n} from './types.js';\nimport { TERMINAL_STATUSES } from './types.js';\n\nconst DEFAULT_POLLING_INTERVAL = 1000;\n\n/**\n * Subscribe to a job's status and progress via polling.\n *\n * @param jobId - The numeric job ID to subscribe to, or `null`/`undefined` to skip polling.\n * @param options - Optional overrides and callbacks.\n * @returns An object with `data`, `status`, `progress`, `isLoading`, and `error`.\n *\n * @example\n * ```tsx\n * const { status, progress, data, error } = useJob(jobId, {\n *   fetcher: (id) => fetch(`/api/jobs/${id}`).then(r => r.json()).then(d => d.job),\n *   pollingInterval: 1000,\n *   onComplete: (job) => console.log('Done!', job),\n * });\n * ```\n */\nexport function useJob(\n  jobId: number | null | undefined,\n  options: UseJobOptions = {},\n): UseJobReturn {\n  const providerConfig = useDataqueueConfig();\n\n  // Resolve fetcher: hook option > provider > missing (will skip polling)\n  const fetcher: JobFetcher | undefined =\n    options.fetcher ?? providerConfig?.fetcher;\n\n  // Resolve polling interval\n  const pollingInterval =\n    options.pollingInterval ??\n    providerConfig?.pollingInterval ??\n    DEFAULT_POLLING_INTERVAL;\n\n  const enabled = options.enabled !== false;\n\n  const [data, setData] = useState<JobData | null>(null);\n  const [error, setError] = useState<Error | null>(null);\n  const [isLoading, setIsLoading] = useState<boolean>(jobId != null && enabled);\n\n  // Track previous status for onStatusChange callback\n  const prevStatusRef = useRef<JobStatus | null>(null);\n\n  // Track whether a fetch is already in-flight to avoid overlapping requests\n  const inFlightRef = useRef(false);\n\n  // Store the latest callbacks in refs so the polling effect doesn't\n  // need to re-subscribe when callbacks change identity.\n  const onStatusChangeRef = useRef(options.onStatusChange);\n  onStatusChangeRef.current = options.onStatusChange;\n  const onCompleteRef = useRef(options.onComplete);\n  onCompleteRef.current = options.onComplete;\n  const onFailedRef = useRef(options.onFailed);\n  onFailedRef.current = options.onFailed;\n\n  // Whether we've reached a terminal state and should stop polling\n  const terminalRef = useRef(false);\n\n  const fetchJob = useCallback(async () => {\n    if (!fetcher || jobId == null || inFlightRef.current) return;\n\n    inFlightRef.current = true;\n    try {\n      const result = await fetcher(jobId);\n      setData(result);\n      setError(null);\n      setIsLoading(false);\n\n      // Status change detection\n      const newStatus = result.status;\n      const prevStatus = prevStatusRef.current;\n\n      if (prevStatus !== newStatus) {\n        prevStatusRef.current = newStatus;\n        onStatusChangeRef.current?.(newStatus, prevStatus);\n\n        if (newStatus === 'completed') {\n          onCompleteRef.current?.(result);\n        } else if (newStatus === 'failed') {\n          onFailedRef.current?.(result);\n        }\n      }\n\n      // Stop polling on terminal status\n      if (TERMINAL_STATUSES.has(newStatus)) {\n        terminalRef.current = true;\n      }\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error(String(err)));\n      setIsLoading(false);\n    } finally {\n      inFlightRef.current = false;\n    }\n  }, [fetcher, jobId]);\n\n  // Reset state when jobId changes\n  useEffect(() => {\n    setData(null);\n    setError(null);\n    prevStatusRef.current = null;\n    terminalRef.current = false;\n    inFlightRef.current = false;\n    setIsLoading(jobId != null && enabled);\n  }, [jobId, enabled]);\n\n  // Main polling effect\n  useEffect(() => {\n    if (!fetcher || jobId == null || !enabled) return;\n\n    // Initial fetch immediately\n    fetchJob();\n\n    const id = setInterval(() => {\n      if (!terminalRef.current) {\n        fetchJob();\n      }\n    }, pollingInterval);\n\n    return () => clearInterval(id);\n  }, [fetchJob, pollingInterval, jobId, enabled, fetcher]);\n\n  return {\n    data,\n    status: data?.status ?? null,\n    progress: data?.progress ?? null,\n    isLoading,\n    error,\n  };\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,93 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Job status values matching the core dataqueue package.
+ * Redefined here so the React SDK has zero runtime dependency on the server package.
+ */
+type JobStatus = 'pending' | 'processing' | 'completed' | 'failed' | 'cancelled' | 'waiting';
+/**
+ * Minimal job data shape returned by the fetcher.
+ * Users can return a full JobRecord from the server or any object
+ * that includes at least `status` and optionally `progress`.
+ */
+interface JobData {
+    id: number;
+    status: JobStatus;
+    progress?: number | null;
+    [key: string]: unknown;
+}
+/**
+ * A fetcher function that retrieves a job by its ID.
+ * Should return a `JobData`-compatible object or throw on error.
+ */
+type JobFetcher = (jobId: number) => Promise<JobData>;
+/**
+ * Configuration provided to `DataqueueProvider`.
+ */
+interface DataqueueConfig {
+    /** Fetcher function to retrieve a job by ID from your API. */
+    fetcher: JobFetcher;
+    /** Default polling interval in milliseconds. Defaults to 1000. */
+    pollingInterval?: number;
+}
+/**
+ * Options for the `useJob` hook.
+ */
+interface UseJobOptions {
+    /** Override the provider's fetcher for this specific hook instance. */
+    fetcher?: JobFetcher;
+    /** Override the provider's polling interval (ms) for this hook instance. */
+    pollingInterval?: number;
+    /** Whether polling is enabled. Defaults to true. Set to false to pause. */
+    enabled?: boolean;
+    /** Called when the job's status changes. */
+    onStatusChange?: (newStatus: JobStatus, prevStatus: JobStatus | null) => void;
+    /** Called when the job reaches 'completed' status. */
+    onComplete?: (data: JobData) => void;
+    /** Called when the job reaches 'failed' status. */
+    onFailed?: (data: JobData) => void;
+}
+/**
+ * Return value of the `useJob` hook.
+ */
+interface UseJobReturn {
+    /** The full job data from the last successful fetch, or null if not yet loaded. */
+    data: JobData | null;
+    /** The current job status, or null if not yet loaded. */
+    status: JobStatus | null;
+    /** The current progress percentage (0-100), or null if not reported. */
+    progress: number | null;
+    /** True during the initial fetch (before any data is available). */
+    isLoading: boolean;
+    /** The error from the last failed fetch, or null. */
+    error: Error | null;
+}
+
+/**
+ * Provides default configuration (fetcher, pollingInterval) to all
+ * `useJob` hooks in the subtree. Optional -- hooks can also accept
+ * inline config via their options parameter.
+ */
+declare function DataqueueProvider({ children, ...config }: DataqueueConfig & {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Subscribe to a job's status and progress via polling.
+ *
+ * @param jobId - The numeric job ID to subscribe to, or `null`/`undefined` to skip polling.
+ * @param options - Optional overrides and callbacks.
+ * @returns An object with `data`, `status`, `progress`, `isLoading`, and `error`.
+ *
+ * @example
+ * ```tsx
+ * const { status, progress, data, error } = useJob(jobId, {
+ *   fetcher: (id) => fetch(`/api/jobs/${id}`).then(r => r.json()).then(d => d.job),
+ *   pollingInterval: 1000,
+ *   onComplete: (job) => console.log('Done!', job),
+ * });
+ * ```
+ */
+declare function useJob(jobId: number | null | undefined, options?: UseJobOptions): UseJobReturn;
+
+export { type DataqueueConfig, DataqueueProvider, type JobData, type JobFetcher, type JobStatus, type UseJobOptions, type UseJobReturn, useJob };

package/dist/index.d.ts

@@ -0,0 +1,93 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Job status values matching the core dataqueue package.
+ * Redefined here so the React SDK has zero runtime dependency on the server package.
+ */
+type JobStatus = 'pending' | 'processing' | 'completed' | 'failed' | 'cancelled' | 'waiting';
+/**
+ * Minimal job data shape returned by the fetcher.
+ * Users can return a full JobRecord from the server or any object
+ * that includes at least `status` and optionally `progress`.
+ */
+interface JobData {
+    id: number;
+    status: JobStatus;
+    progress?: number | null;
+    [key: string]: unknown;
+}
+/**
+ * A fetcher function that retrieves a job by its ID.
+ * Should return a `JobData`-compatible object or throw on error.
+ */
+type JobFetcher = (jobId: number) => Promise<JobData>;
+/**
+ * Configuration provided to `DataqueueProvider`.
+ */
+interface DataqueueConfig {
+    /** Fetcher function to retrieve a job by ID from your API. */
+    fetcher: JobFetcher;
+    /** Default polling interval in milliseconds. Defaults to 1000. */
+    pollingInterval?: number;
+}
+/**
+ * Options for the `useJob` hook.
+ */
+interface UseJobOptions {
+    /** Override the provider's fetcher for this specific hook instance. */
+    fetcher?: JobFetcher;
+    /** Override the provider's polling interval (ms) for this hook instance. */
+    pollingInterval?: number;
+    /** Whether polling is enabled. Defaults to true. Set to false to pause. */
+    enabled?: boolean;
+    /** Called when the job's status changes. */
+    onStatusChange?: (newStatus: JobStatus, prevStatus: JobStatus | null) => void;
+    /** Called when the job reaches 'completed' status. */
+    onComplete?: (data: JobData) => void;
+    /** Called when the job reaches 'failed' status. */
+    onFailed?: (data: JobData) => void;
+}
+/**
+ * Return value of the `useJob` hook.
+ */
+interface UseJobReturn {
+    /** The full job data from the last successful fetch, or null if not yet loaded. */
+    data: JobData | null;
+    /** The current job status, or null if not yet loaded. */
+    status: JobStatus | null;
+    /** The current progress percentage (0-100), or null if not reported. */
+    progress: number | null;
+    /** True during the initial fetch (before any data is available). */
+    isLoading: boolean;
+    /** The error from the last failed fetch, or null. */
+    error: Error | null;
+}
+
+/**
+ * Provides default configuration (fetcher, pollingInterval) to all
+ * `useJob` hooks in the subtree. Optional -- hooks can also accept
+ * inline config via their options parameter.
+ */
+declare function DataqueueProvider({ children, ...config }: DataqueueConfig & {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Subscribe to a job's status and progress via polling.
+ *
+ * @param jobId - The numeric job ID to subscribe to, or `null`/`undefined` to skip polling.
+ * @param options - Optional overrides and callbacks.
+ * @returns An object with `data`, `status`, `progress`, `isLoading`, and `error`.
+ *
+ * @example
+ * ```tsx
+ * const { status, progress, data, error } = useJob(jobId, {
+ *   fetcher: (id) => fetch(`/api/jobs/${id}`).then(r => r.json()).then(d => d.job),
+ *   pollingInterval: 1000,
+ *   onComplete: (job) => console.log('Done!', job),
+ * });
+ * ```
+ */
+declare function useJob(jobId: number | null | undefined, options?: UseJobOptions): UseJobReturn;
+
+export { type DataqueueConfig, DataqueueProvider, type JobData, type JobFetcher, type JobStatus, type UseJobOptions, type UseJobReturn, useJob };

package/dist/index.js

@@ -0,0 +1,100 @@
+import { createContext, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/context.tsx
+var DataqueueContext = createContext(null);
+function DataqueueProvider({
+  children,
+  ...config
+}) {
+  return /* @__PURE__ */ jsx(DataqueueContext.Provider, { value: config, children });
+}
+function useDataqueueConfig() {
+  return useContext(DataqueueContext);
+}
+
+// src/types.ts
+var TERMINAL_STATUSES = /* @__PURE__ */ new Set([
+  "completed",
+  "failed",
+  "cancelled"
+]);
+
+// src/use-job.ts
+var DEFAULT_POLLING_INTERVAL = 1e3;
+function useJob(jobId, options = {}) {
+  const providerConfig = useDataqueueConfig();
+  const fetcher = options.fetcher ?? providerConfig?.fetcher;
+  const pollingInterval = options.pollingInterval ?? providerConfig?.pollingInterval ?? DEFAULT_POLLING_INTERVAL;
+  const enabled = options.enabled !== false;
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(jobId != null && enabled);
+  const prevStatusRef = useRef(null);
+  const inFlightRef = useRef(false);
+  const onStatusChangeRef = useRef(options.onStatusChange);
+  onStatusChangeRef.current = options.onStatusChange;
+  const onCompleteRef = useRef(options.onComplete);
+  onCompleteRef.current = options.onComplete;
+  const onFailedRef = useRef(options.onFailed);
+  onFailedRef.current = options.onFailed;
+  const terminalRef = useRef(false);
+  const fetchJob = useCallback(async () => {
+    if (!fetcher || jobId == null || inFlightRef.current) return;
+    inFlightRef.current = true;
+    try {
+      const result = await fetcher(jobId);
+      setData(result);
+      setError(null);
+      setIsLoading(false);
+      const newStatus = result.status;
+      const prevStatus = prevStatusRef.current;
+      if (prevStatus !== newStatus) {
+        prevStatusRef.current = newStatus;
+        onStatusChangeRef.current?.(newStatus, prevStatus);
+        if (newStatus === "completed") {
+          onCompleteRef.current?.(result);
+        } else if (newStatus === "failed") {
+          onFailedRef.current?.(result);
+        }
+      }
+      if (TERMINAL_STATUSES.has(newStatus)) {
+        terminalRef.current = true;
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setIsLoading(false);
+    } finally {
+      inFlightRef.current = false;
+    }
+  }, [fetcher, jobId]);
+  useEffect(() => {
+    setData(null);
+    setError(null);
+    prevStatusRef.current = null;
+    terminalRef.current = false;
+    inFlightRef.current = false;
+    setIsLoading(jobId != null && enabled);
+  }, [jobId, enabled]);
+  useEffect(() => {
+    if (!fetcher || jobId == null || !enabled) return;
+    fetchJob();
+    const id = setInterval(() => {
+      if (!terminalRef.current) {
+        fetchJob();
+      }
+    }, pollingInterval);
+    return () => clearInterval(id);
+  }, [fetchJob, pollingInterval, jobId, enabled, fetcher]);
+  return {
+    data,
+    status: data?.status ?? null,
+    progress: data?.progress ?? null,
+    isLoading,
+    error
+  };
+}
+
+export { DataqueueProvider, useJob };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx","../src/types.ts","../src/use-job.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\nimport type { DataqueueConfig } from './types.js';\n\nconst DataqueueContext = createContext<DataqueueConfig | null>(null);\n\n/**\n * Provides default configuration (fetcher, pollingInterval) to all\n * `useJob` hooks in the subtree. Optional -- hooks can also accept\n * inline config via their options parameter.\n */\nexport function DataqueueProvider({\n  children,\n  ...config\n}: DataqueueConfig & { children: React.ReactNode }) {\n  return (\n    <DataqueueContext.Provider value={config}>\n      {children}\n    </DataqueueContext.Provider>\n  );\n}\n\n/**\n * Internal hook to read the provider config. Returns null when no provider\n * is present (hooks fall back to their own options).\n */\nexport function useDataqueueConfig(): DataqueueConfig | null {\n  return useContext(DataqueueContext);\n}\n","/**\n * Job status values matching the core dataqueue package.\n * Redefined here so the React SDK has zero runtime dependency on the server package.\n */\nexport type JobStatus =\n  | 'pending'\n  | 'processing'\n  | 'completed'\n  | 'failed'\n  | 'cancelled'\n  | 'waiting';\n\n/** Terminal statuses where polling should stop automatically. */\nexport const TERMINAL_STATUSES: ReadonlySet<JobStatus> = new Set([\n  'completed',\n  'failed',\n  'cancelled',\n]);\n\n/**\n * Minimal job data shape returned by the fetcher.\n * Users can return a full JobRecord from the server or any object\n * that includes at least `status` and optionally `progress`.\n */\nexport interface JobData {\n  id: number;\n  status: JobStatus;\n  progress?: number | null;\n  [key: string]: unknown;\n}\n\n/**\n * A fetcher function that retrieves a job by its ID.\n * Should return a `JobData`-compatible object or throw on error.\n */\nexport type JobFetcher = (jobId: number) => Promise<JobData>;\n\n/**\n * Configuration provided to `DataqueueProvider`.\n */\nexport interface DataqueueConfig {\n  /** Fetcher function to retrieve a job by ID from your API. */\n  fetcher: JobFetcher;\n  /** Default polling interval in milliseconds. Defaults to 1000. */\n  pollingInterval?: number;\n}\n\n/**\n * Options for the `useJob` hook.\n */\nexport interface UseJobOptions {\n  /** Override the provider's fetcher for this specific hook instance. */\n  fetcher?: JobFetcher;\n  /** Override the provider's polling interval (ms) for this hook instance. */\n  pollingInterval?: number;\n  /** Whether polling is enabled. Defaults to true. Set to false to pause. */\n  enabled?: boolean;\n  /** Called when the job's status changes. */\n  onStatusChange?: (newStatus: JobStatus, prevStatus: JobStatus | null) => void;\n  /** Called when the job reaches 'completed' status. */\n  onComplete?: (data: JobData) => void;\n  /** Called when the job reaches 'failed' status. */\n  onFailed?: (data: JobData) => void;\n}\n\n/**\n * Return value of the `useJob` hook.\n */\nexport interface UseJobReturn {\n  /** The full job data from the last successful fetch, or null if not yet loaded. */\n  data: JobData | null;\n  /** The current job status, or null if not yet loaded. */\n  status: JobStatus | null;\n  /** The current progress percentage (0-100), or null if not reported. */\n  progress: number | null;\n  /** True during the initial fetch (before any data is available). */\n  isLoading: boolean;\n  /** The error from the last failed fetch, or null. */\n  error: Error | null;\n}\n","'use client';\n\nimport { useState, useEffect, useRef, useCallback } from 'react';\nimport { useDataqueueConfig } from './context.js';\nimport type {\n  JobData,\n  JobFetcher,\n  JobStatus,\n  UseJobOptions,\n  UseJobReturn,\n} from './types.js';\nimport { TERMINAL_STATUSES } from './types.js';\n\nconst DEFAULT_POLLING_INTERVAL = 1000;\n\n/**\n * Subscribe to a job's status and progress via polling.\n *\n * @param jobId - The numeric job ID to subscribe to, or `null`/`undefined` to skip polling.\n * @param options - Optional overrides and callbacks.\n * @returns An object with `data`, `status`, `progress`, `isLoading`, and `error`.\n *\n * @example\n * ```tsx\n * const { status, progress, data, error } = useJob(jobId, {\n *   fetcher: (id) => fetch(`/api/jobs/${id}`).then(r => r.json()).then(d => d.job),\n *   pollingInterval: 1000,\n *   onComplete: (job) => console.log('Done!', job),\n * });\n * ```\n */\nexport function useJob(\n  jobId: number | null | undefined,\n  options: UseJobOptions = {},\n): UseJobReturn {\n  const providerConfig = useDataqueueConfig();\n\n  // Resolve fetcher: hook option > provider > missing (will skip polling)\n  const fetcher: JobFetcher | undefined =\n    options.fetcher ?? providerConfig?.fetcher;\n\n  // Resolve polling interval\n  const pollingInterval =\n    options.pollingInterval ??\n    providerConfig?.pollingInterval ??\n    DEFAULT_POLLING_INTERVAL;\n\n  const enabled = options.enabled !== false;\n\n  const [data, setData] = useState<JobData | null>(null);\n  const [error, setError] = useState<Error | null>(null);\n  const [isLoading, setIsLoading] = useState<boolean>(jobId != null && enabled);\n\n  // Track previous status for onStatusChange callback\n  const prevStatusRef = useRef<JobStatus | null>(null);\n\n  // Track whether a fetch is already in-flight to avoid overlapping requests\n  const inFlightRef = useRef(false);\n\n  // Store the latest callbacks in refs so the polling effect doesn't\n  // need to re-subscribe when callbacks change identity.\n  const onStatusChangeRef = useRef(options.onStatusChange);\n  onStatusChangeRef.current = options.onStatusChange;\n  const onCompleteRef = useRef(options.onComplete);\n  onCompleteRef.current = options.onComplete;\n  const onFailedRef = useRef(options.onFailed);\n  onFailedRef.current = options.onFailed;\n\n  // Whether we've reached a terminal state and should stop polling\n  const terminalRef = useRef(false);\n\n  const fetchJob = useCallback(async () => {\n    if (!fetcher || jobId == null || inFlightRef.current) return;\n\n    inFlightRef.current = true;\n    try {\n      const result = await fetcher(jobId);\n      setData(result);\n      setError(null);\n      setIsLoading(false);\n\n      // Status change detection\n      const newStatus = result.status;\n      const prevStatus = prevStatusRef.current;\n\n      if (prevStatus !== newStatus) {\n        prevStatusRef.current = newStatus;\n        onStatusChangeRef.current?.(newStatus, prevStatus);\n\n        if (newStatus === 'completed') {\n          onCompleteRef.current?.(result);\n        } else if (newStatus === 'failed') {\n          onFailedRef.current?.(result);\n        }\n      }\n\n      // Stop polling on terminal status\n      if (TERMINAL_STATUSES.has(newStatus)) {\n        terminalRef.current = true;\n      }\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error(String(err)));\n      setIsLoading(false);\n    } finally {\n      inFlightRef.current = false;\n    }\n  }, [fetcher, jobId]);\n\n  // Reset state when jobId changes\n  useEffect(() => {\n    setData(null);\n    setError(null);\n    prevStatusRef.current = null;\n    terminalRef.current = false;\n    inFlightRef.current = false;\n    setIsLoading(jobId != null && enabled);\n  }, [jobId, enabled]);\n\n  // Main polling effect\n  useEffect(() => {\n    if (!fetcher || jobId == null || !enabled) return;\n\n    // Initial fetch immediately\n    fetchJob();\n\n    const id = setInterval(() => {\n      if (!terminalRef.current) {\n        fetchJob();\n      }\n    }, pollingInterval);\n\n    return () => clearInterval(id);\n  }, [fetchJob, pollingInterval, jobId, enabled, fetcher]);\n\n  return {\n    data,\n    status: data?.status ?? null,\n    progress: data?.progress ?? null,\n    isLoading,\n    error,\n  };\n}\n"]}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@nicnocquee/dataqueue-react",
+  "version": "0.2.0",
+  "description": "React hooks for subscribing to dataqueue job status and progress",
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc",
+    "test": "vitest run",
+    "check-exports": "attw --pack .",
+    "ci": "npm run build && npm run check-exports && npm run lint && npm run test",
+    "local-release": "changeset version && changeset publish",
+    "changeset:add": "changeset",
+    "changeset:version": "changeset version && find .changeset -type f -name '*.md' ! -name 'README.md' -delete"
+  },
+  "keywords": [
+    "react",
+    "hooks",
+    "job-queue",
+    "dataqueue",
+    "polling",
+    "progress"
+  ],
+  "author": "Nico Prananta",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nicnocquee/dataqueue.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/nicnocquee/dataqueue/tree/main/packages/react#readme",
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@changesets/cli": "^2.29.5",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.0.0",
+    "jsdom": "^28.1.0",
+    "react": "^19.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  }
+}