@computekit/react 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +603 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +341 -2
- package/dist/index.d.ts +341 -2
- package/dist/index.js +602 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.tsx +1175 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
import { ComputeKitOptions, ComputeKit, ComputeProgress,
|
|
2
|
+
import { ComputeOptions, ComputeKitOptions, ComputeKit, ComputeProgress, PoolStats } from '@computekit/core';
|
|
3
3
|
export { ComputeKit, ComputeKitOptions, ComputeOptions, ComputeProgress, PoolStats } from '@computekit/core';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -7,6 +7,154 @@ export { ComputeKit, ComputeKitOptions, ComputeOptions, ComputeProgress, PoolSta
|
|
|
7
7
|
* React hooks and utilities for ComputeKit
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
+
/** Status of a pipeline stage */
|
|
11
|
+
type StageStatus = 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
|
|
12
|
+
/** Detailed information about a single pipeline stage */
|
|
13
|
+
interface StageInfo<TInput = unknown, TOutput = unknown> {
|
|
14
|
+
/** Unique identifier for the stage */
|
|
15
|
+
id: string;
|
|
16
|
+
/** Display name for the stage */
|
|
17
|
+
name: string;
|
|
18
|
+
/** Name of the registered compute function to execute */
|
|
19
|
+
functionName: string;
|
|
20
|
+
/** Current status of this stage */
|
|
21
|
+
status: StageStatus;
|
|
22
|
+
/** Input data for this stage (set when stage starts) */
|
|
23
|
+
input?: TInput;
|
|
24
|
+
/** Output data from this stage (set when stage completes) */
|
|
25
|
+
output?: TOutput;
|
|
26
|
+
/** Error if stage failed */
|
|
27
|
+
error?: Error;
|
|
28
|
+
/** Start timestamp (ms since epoch) */
|
|
29
|
+
startedAt?: number;
|
|
30
|
+
/** End timestamp (ms since epoch) */
|
|
31
|
+
completedAt?: number;
|
|
32
|
+
/** Duration in milliseconds */
|
|
33
|
+
duration?: number;
|
|
34
|
+
/** Progress within this stage (0-100) */
|
|
35
|
+
progress?: number;
|
|
36
|
+
/** Number of retry attempts */
|
|
37
|
+
retryCount: number;
|
|
38
|
+
/** Compute options specific to this stage */
|
|
39
|
+
options?: ComputeOptions;
|
|
40
|
+
}
|
|
41
|
+
/** Configuration for a pipeline stage */
|
|
42
|
+
interface StageConfig<TInput = unknown, TOutput = unknown> {
|
|
43
|
+
/** Unique identifier for the stage */
|
|
44
|
+
id: string;
|
|
45
|
+
/** Display name for the stage */
|
|
46
|
+
name: string;
|
|
47
|
+
/** Name of the registered compute function */
|
|
48
|
+
functionName: string;
|
|
49
|
+
/** Transform input before passing to compute function */
|
|
50
|
+
transformInput?: (input: TInput, previousResults: unknown[]) => unknown;
|
|
51
|
+
/** Transform output after compute function returns */
|
|
52
|
+
transformOutput?: (output: unknown) => TOutput;
|
|
53
|
+
/** Whether to skip this stage based on previous results */
|
|
54
|
+
shouldSkip?: (input: TInput, previousResults: unknown[]) => boolean;
|
|
55
|
+
/** Maximum retry attempts on failure (default: 0) */
|
|
56
|
+
maxRetries?: number;
|
|
57
|
+
/** Delay between retries in ms (default: 1000) */
|
|
58
|
+
retryDelay?: number;
|
|
59
|
+
/** Compute options for this stage */
|
|
60
|
+
options?: ComputeOptions;
|
|
61
|
+
}
|
|
62
|
+
/** Overall pipeline status */
|
|
63
|
+
type PipelineStatus = 'idle' | 'running' | 'paused' | 'completed' | 'failed' | 'cancelled';
|
|
64
|
+
/** Metrics for pipeline debugging and reporting */
|
|
65
|
+
interface PipelineMetrics {
|
|
66
|
+
/** Total stages in pipeline */
|
|
67
|
+
totalStages: number;
|
|
68
|
+
/** Number of completed stages */
|
|
69
|
+
completedStages: number;
|
|
70
|
+
/** Number of failed stages */
|
|
71
|
+
failedStages: number;
|
|
72
|
+
/** Number of skipped stages */
|
|
73
|
+
skippedStages: number;
|
|
74
|
+
/** Total retry attempts across all stages */
|
|
75
|
+
totalRetries: number;
|
|
76
|
+
/** Slowest stage info */
|
|
77
|
+
slowestStage: {
|
|
78
|
+
id: string;
|
|
79
|
+
name: string;
|
|
80
|
+
duration: number;
|
|
81
|
+
} | null;
|
|
82
|
+
/** Fastest stage info */
|
|
83
|
+
fastestStage: {
|
|
84
|
+
id: string;
|
|
85
|
+
name: string;
|
|
86
|
+
duration: number;
|
|
87
|
+
} | null;
|
|
88
|
+
/** Average stage duration */
|
|
89
|
+
averageStageDuration: number;
|
|
90
|
+
/** Timestamp of each stage transition for timeline view */
|
|
91
|
+
timeline: Array<{
|
|
92
|
+
stageId: string;
|
|
93
|
+
stageName: string;
|
|
94
|
+
event: 'started' | 'completed' | 'failed' | 'skipped' | 'retry';
|
|
95
|
+
timestamp: number;
|
|
96
|
+
duration?: number;
|
|
97
|
+
error?: string;
|
|
98
|
+
}>;
|
|
99
|
+
}
|
|
100
|
+
/** Comprehensive pipeline state for debugging */
|
|
101
|
+
interface PipelineState<TInput = unknown, TOutput = unknown> {
|
|
102
|
+
/** Overall pipeline status */
|
|
103
|
+
status: PipelineStatus;
|
|
104
|
+
/** All stage information */
|
|
105
|
+
stages: StageInfo[];
|
|
106
|
+
/** Index of currently executing stage (-1 if not running) */
|
|
107
|
+
currentStageIndex: number;
|
|
108
|
+
/** Current stage info (convenience) */
|
|
109
|
+
currentStage: StageInfo | null;
|
|
110
|
+
/** Overall progress percentage (0-100) */
|
|
111
|
+
progress: number;
|
|
112
|
+
/** Final output from the last stage */
|
|
113
|
+
output: TOutput | null;
|
|
114
|
+
/** Initial input that started the pipeline */
|
|
115
|
+
input: TInput | null;
|
|
116
|
+
/** Error that caused pipeline failure */
|
|
117
|
+
error: Error | null;
|
|
118
|
+
/** Pipeline start timestamp */
|
|
119
|
+
startedAt: number | null;
|
|
120
|
+
/** Pipeline completion timestamp */
|
|
121
|
+
completedAt: number | null;
|
|
122
|
+
/** Total duration in milliseconds */
|
|
123
|
+
totalDuration: number | null;
|
|
124
|
+
/** Results from each completed stage */
|
|
125
|
+
stageResults: unknown[];
|
|
126
|
+
/** Execution metrics for debugging */
|
|
127
|
+
metrics: PipelineMetrics;
|
|
128
|
+
}
|
|
129
|
+
/** Result of a single item in parallel batch */
|
|
130
|
+
interface BatchItemResult<TOutput = unknown> {
|
|
131
|
+
/** Index of the item in original array */
|
|
132
|
+
index: number;
|
|
133
|
+
/** Whether this item succeeded */
|
|
134
|
+
success: boolean;
|
|
135
|
+
/** Result if successful */
|
|
136
|
+
data?: TOutput;
|
|
137
|
+
/** Error if failed */
|
|
138
|
+
error?: Error;
|
|
139
|
+
/** Duration in ms */
|
|
140
|
+
duration: number;
|
|
141
|
+
}
|
|
142
|
+
/** Aggregate result of parallel batch processing */
|
|
143
|
+
interface ParallelBatchResult<TOutput = unknown> {
|
|
144
|
+
/** All individual results */
|
|
145
|
+
results: BatchItemResult<TOutput>[];
|
|
146
|
+
/** Successfully processed items */
|
|
147
|
+
successful: TOutput[];
|
|
148
|
+
/** Failed items with their errors */
|
|
149
|
+
failed: Array<{
|
|
150
|
+
index: number;
|
|
151
|
+
error: Error;
|
|
152
|
+
}>;
|
|
153
|
+
/** Total duration */
|
|
154
|
+
totalDuration: number;
|
|
155
|
+
/** Success rate (0-1) */
|
|
156
|
+
successRate: number;
|
|
157
|
+
}
|
|
10
158
|
/**
|
|
11
159
|
* Props for ComputeKitProvider
|
|
12
160
|
*/
|
|
@@ -167,5 +315,196 @@ declare function usePoolStats(refreshInterval?: number): PoolStats;
|
|
|
167
315
|
* Hook to check WASM support
|
|
168
316
|
*/
|
|
169
317
|
declare function useWasmSupport(): boolean;
|
|
318
|
+
/**
|
|
319
|
+
* Options for usePipeline hook
|
|
320
|
+
*/
|
|
321
|
+
interface UsePipelineOptions {
|
|
322
|
+
/** Stop pipeline on first stage failure (default: true) */
|
|
323
|
+
stopOnError?: boolean;
|
|
324
|
+
/** Global timeout for entire pipeline in ms */
|
|
325
|
+
timeout?: number;
|
|
326
|
+
/** Enable detailed timeline tracking (default: true) */
|
|
327
|
+
trackTimeline?: boolean;
|
|
328
|
+
/** Called when pipeline state changes */
|
|
329
|
+
onStateChange?: (state: PipelineState) => void;
|
|
330
|
+
/** Called when a stage starts */
|
|
331
|
+
onStageStart?: (stage: StageInfo) => void;
|
|
332
|
+
/** Called when a stage completes */
|
|
333
|
+
onStageComplete?: (stage: StageInfo) => void;
|
|
334
|
+
/** Called when a stage fails */
|
|
335
|
+
onStageError?: (stage: StageInfo, error: Error) => void;
|
|
336
|
+
/** Called when a stage is retried */
|
|
337
|
+
onStageRetry?: (stage: StageInfo, attempt: number) => void;
|
|
338
|
+
/** Automatically run pipeline on mount */
|
|
339
|
+
autoRun?: boolean;
|
|
340
|
+
/** Initial input for autoRun */
|
|
341
|
+
initialInput?: unknown;
|
|
342
|
+
}
|
|
343
|
+
/**
|
|
344
|
+
* Actions returned by usePipeline
|
|
345
|
+
*/
|
|
346
|
+
interface UsePipelineActions<TInput> {
|
|
347
|
+
/** Start the pipeline with input */
|
|
348
|
+
run: (input: TInput) => Promise<void>;
|
|
349
|
+
/** Cancel the running pipeline */
|
|
350
|
+
cancel: () => void;
|
|
351
|
+
/** Reset pipeline to initial state */
|
|
352
|
+
reset: () => void;
|
|
353
|
+
/** Pause the pipeline (if supported) */
|
|
354
|
+
pause: () => void;
|
|
355
|
+
/** Resume a paused pipeline */
|
|
356
|
+
resume: () => void;
|
|
357
|
+
/** Retry failed stages */
|
|
358
|
+
retry: () => Promise<void>;
|
|
359
|
+
/** Get a formatted report of the pipeline execution */
|
|
360
|
+
getReport: () => PipelineReport;
|
|
361
|
+
}
|
|
362
|
+
/**
|
|
363
|
+
* Formatted report for debugging
|
|
364
|
+
*/
|
|
365
|
+
interface PipelineReport {
|
|
366
|
+
/** Human-readable summary */
|
|
367
|
+
summary: string;
|
|
368
|
+
/** Detailed stage-by-stage breakdown */
|
|
369
|
+
stageDetails: Array<{
|
|
370
|
+
name: string;
|
|
371
|
+
status: StageStatus;
|
|
372
|
+
duration: string;
|
|
373
|
+
error?: string;
|
|
374
|
+
}>;
|
|
375
|
+
/** Timeline of events */
|
|
376
|
+
timeline: string[];
|
|
377
|
+
/** Performance insights */
|
|
378
|
+
insights: string[];
|
|
379
|
+
/** Raw metrics */
|
|
380
|
+
metrics: PipelineMetrics;
|
|
381
|
+
}
|
|
382
|
+
/**
|
|
383
|
+
* Return type for usePipeline
|
|
384
|
+
*/
|
|
385
|
+
type UsePipelineReturn<TInput, TOutput> = PipelineState<TInput, TOutput> & UsePipelineActions<TInput> & {
|
|
386
|
+
/** Whether pipeline is currently running */
|
|
387
|
+
isRunning: boolean;
|
|
388
|
+
/** Whether pipeline completed successfully */
|
|
389
|
+
isComplete: boolean;
|
|
390
|
+
/** Whether pipeline has failed */
|
|
391
|
+
isFailed: boolean;
|
|
392
|
+
/** Quick access to check if a specific stage is done */
|
|
393
|
+
isStageComplete: (stageId: string) => boolean;
|
|
394
|
+
/** Get a specific stage by ID */
|
|
395
|
+
getStage: (stageId: string) => StageInfo | undefined;
|
|
396
|
+
};
|
|
397
|
+
/**
|
|
398
|
+
* Hook for multi-stage pipeline processing
|
|
399
|
+
*
|
|
400
|
+
* Provides comprehensive debugging, progress tracking, and error handling
|
|
401
|
+
* for complex multi-stage compute workflows.
|
|
402
|
+
*
|
|
403
|
+
* @example
|
|
404
|
+
* ```tsx
|
|
405
|
+
* function FileProcessor() {
|
|
406
|
+
* const pipeline = usePipeline<string[], ProcessedFiles>([
|
|
407
|
+
* { id: 'download', name: 'Download Files', functionName: 'downloadFiles' },
|
|
408
|
+
* { id: 'process', name: 'Process Files', functionName: 'processFiles' },
|
|
409
|
+
* { id: 'compress', name: 'Compress Output', functionName: 'compressFiles' },
|
|
410
|
+
* ]);
|
|
411
|
+
*
|
|
412
|
+
* return (
|
|
413
|
+
* <div>
|
|
414
|
+
* <button onClick={() => pipeline.run(urls)} disabled={pipeline.isRunning}>
|
|
415
|
+
* Start Processing
|
|
416
|
+
* </button>
|
|
417
|
+
*
|
|
418
|
+
* <div>Status: {pipeline.status}</div>
|
|
419
|
+
* <div>Progress: {pipeline.progress.toFixed(0)}%</div>
|
|
420
|
+
*
|
|
421
|
+
* {pipeline.currentStage && (
|
|
422
|
+
* <div>Current: {pipeline.currentStage.name}</div>
|
|
423
|
+
* )}
|
|
424
|
+
*
|
|
425
|
+
* {pipeline.stages.map(stage => (
|
|
426
|
+
* <div key={stage.id}>
|
|
427
|
+
* {stage.name}: {stage.status}
|
|
428
|
+
* {stage.duration && ` (${stage.duration}ms)`}
|
|
429
|
+
* </div>
|
|
430
|
+
* ))}
|
|
431
|
+
*
|
|
432
|
+
* {pipeline.isFailed && (
|
|
433
|
+
* <button onClick={pipeline.retry}>Retry Failed</button>
|
|
434
|
+
* )}
|
|
435
|
+
*
|
|
436
|
+
* {pipeline.isComplete && (
|
|
437
|
+
* <pre>{JSON.stringify(pipeline.getReport(), null, 2)}</pre>
|
|
438
|
+
* )}
|
|
439
|
+
* </div>
|
|
440
|
+
* );
|
|
441
|
+
* }
|
|
442
|
+
* ```
|
|
443
|
+
*/
|
|
444
|
+
declare function usePipeline<TInput = unknown, TOutput = unknown>(stageConfigs: StageConfig[], options?: UsePipelineOptions): UsePipelineReturn<TInput, TOutput>;
|
|
445
|
+
/**
|
|
446
|
+
* Result type for useParallelBatch
|
|
447
|
+
*/
|
|
448
|
+
interface UseParallelBatchReturn<TItem, TOutput> {
|
|
449
|
+
/** Execute batch processing */
|
|
450
|
+
run: (items: TItem[]) => Promise<ParallelBatchResult<TOutput>>;
|
|
451
|
+
/** Current batch result */
|
|
452
|
+
result: ParallelBatchResult<TOutput> | null;
|
|
453
|
+
/** Loading state */
|
|
454
|
+
loading: boolean;
|
|
455
|
+
/** Current progress (0-100) */
|
|
456
|
+
progress: number;
|
|
457
|
+
/** Number of completed items */
|
|
458
|
+
completedCount: number;
|
|
459
|
+
/** Total items in current batch */
|
|
460
|
+
totalCount: number;
|
|
461
|
+
/** Cancel batch processing */
|
|
462
|
+
cancel: () => void;
|
|
463
|
+
/** Reset state */
|
|
464
|
+
reset: () => void;
|
|
465
|
+
}
|
|
466
|
+
/**
|
|
467
|
+
* Hook for parallel batch processing
|
|
468
|
+
*
|
|
469
|
+
* Useful for processing multiple items in parallel within a pipeline stage.
|
|
470
|
+
*
|
|
471
|
+
* @example
|
|
472
|
+
* ```tsx
|
|
473
|
+
* function BatchProcessor() {
|
|
474
|
+
* const batch = useParallelBatch<string, ProcessedFile>('processFile', {
|
|
475
|
+
* concurrency: 4
|
|
476
|
+
* });
|
|
477
|
+
*
|
|
478
|
+
* return (
|
|
479
|
+
* <div>
|
|
480
|
+
* <button
|
|
481
|
+
* onClick={() => batch.run(fileUrls)}
|
|
482
|
+
* disabled={batch.loading}
|
|
483
|
+
* >
|
|
484
|
+
* Process {fileUrls.length} Files
|
|
485
|
+
* </button>
|
|
486
|
+
*
|
|
487
|
+
* {batch.loading && (
|
|
488
|
+
* <div>
|
|
489
|
+
* Processing: {batch.completedCount}/{batch.totalCount}
|
|
490
|
+
* ({batch.progress.toFixed(0)}%)
|
|
491
|
+
* </div>
|
|
492
|
+
* )}
|
|
493
|
+
*
|
|
494
|
+
* {batch.result && (
|
|
495
|
+
* <div>
|
|
496
|
+
* Success: {batch.result.successful.length}
|
|
497
|
+
* Failed: {batch.result.failed.length}
|
|
498
|
+
* </div>
|
|
499
|
+
* )}
|
|
500
|
+
* </div>
|
|
501
|
+
* );
|
|
502
|
+
* }
|
|
503
|
+
* ```
|
|
504
|
+
*/
|
|
505
|
+
declare function useParallelBatch<TItem = unknown, TOutput = unknown>(functionName: string, options?: {
|
|
506
|
+
concurrency?: number;
|
|
507
|
+
computeOptions?: ComputeOptions;
|
|
508
|
+
}): UseParallelBatchReturn<TItem, TOutput>;
|
|
170
509
|
|
|
171
|
-
export { ComputeKitProvider, type ComputeKitProviderProps, type ComputeStatus, type UseComputeActions, type UseComputeOptions, type UseComputeReturn, type UseComputeState, useCompute, useComputeCallback, useComputeFunction, useComputeKit, usePoolStats, useWasmSupport };
|
|
510
|
+
export { type BatchItemResult, ComputeKitProvider, type ComputeKitProviderProps, type ComputeStatus, type ParallelBatchResult, type PipelineMetrics, type PipelineReport, type PipelineState, type PipelineStatus, type StageConfig, type StageInfo, type StageStatus, type UseComputeActions, type UseComputeOptions, type UseComputeReturn, type UseComputeState, type UseParallelBatchReturn, type UsePipelineActions, type UsePipelineOptions, type UsePipelineReturn, useCompute, useComputeCallback, useComputeFunction, useComputeKit, useParallelBatch, usePipeline, usePoolStats, useWasmSupport };
|