Skip to content

Conversation

@haradakunihiko
Copy link
Owner

@haradakunihiko haradakunihiko commented Nov 7, 2025

Summary

Adds support for externally cancelling confirmation dialogs.

  • Support for standard AbortController/AbortSignal pattern
  • abort(promise) to cancel individual promises
  • abortAll() to cancel all pending promises
  • Fully backward compatible

Key Changes

New Files

  • src/controls.ts: Abort functionality implementation
    • Custom AbortError class
    • Registry pattern to manage promises
    • abort(), abortAll(), attachAbortSignal() functions
  • __tests__/abort.test.ts: 7 test cases

Modified Files

  • src/types.ts: Added ConfirmationOptions type
  • src/createConfirmation.ts: Promise registry registration and AbortSignal support
  • src/index.ts: Export abort/abortAll
  • README.md: Added usage examples and error handling documentation

Usage

Via AbortController (Recommended)

import { confirm } from './confirm';

const handleOperation = async (): Promise<void> => {
  const abortController = new AbortController();
  
  const resultPromise = confirm(
    { message: 'Continue?' },
    { signal: abortController.signal }
  );
  
  // Can abort later
  abortController.abort();
  
  try {
    const result = await resultPromise;
  } catch (error) {
    if (error instanceof Error && error.name === 'AbortError') {
      console.log('Dialog was aborted');
    }
  }
};

Via Utility Functions

import { confirm, abort, abortAll } from 'react-confirm';

const p1 = confirm({ message: 'Delete item 1?' });
const p2 = confirm({ message: 'Delete item 2?' });

abort(p1);    // Cancel individual
abortAll();   // Cancel all

Testing

  • New tests: 7 (all passing)
  • Existing tests: 69 (all passing)
  • Total: 76 tests passing

Run tests:

npm test
npm run typecheck
npm run build

Compatibility

  • No breaking changes to existing API
  • Second argument to createConfirmation is optional
  • Aborted promises reject with AbortError (name === 'AbortError')

Improvements over PR #127

  1. Parameter name changed from control to options (more conventional)
  2. Custom AbortError class for better type safety
  3. More comprehensive test coverage (7 test cases)
  4. Error handling examples added to README
  5. All code comments in English

🤖 Generated with Claude Code

haradakunihiko and others added 9 commits November 7, 2025 14:58
確認ダイアログを外部から中止できる機能を追加しました。

## 主な変更

### 新機能
- AbortController/AbortSignalによるキャンセルをサポート
- abort()関数で個別のPromiseをキャンセル
- abortAll()関数で全ての未解決Promiseをキャンセル
- カスタムAbortErrorクラスを追加

### API変更
- createConfirmation()が第2引数でoptionsを受け取るように拡張
- options.signalでAbortSignalを指定可能
- 後方互換性を完全に維持

### 実装詳細
- src/controls.ts: abort機能の実装
- src/types.ts: ConfirmationOptions型を追加
- src/createConfirmation.ts: Promiseレジストリへの登録とAbortSignal対応
- src/index.ts: abort/abortAllをexport

### テスト
- __tests__/abort.test.ts: 7つのテストケースを追加
- 全76個のテストが成功

### ドキュメント
- READMEに使用例とエラーハンドリングの説明を追加

## PR #127からの改善点
1. パラメータ名をcontrolからoptionsに変更(より一般的な命名)
2. カスタムAbortErrorクラスを定義(型安全性の向上)
3. より充実したテストカバレッジ
4. エラーハンドリングの例をREADMEに追加

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
Update all code comments from Japanese to English for better international collaboration.

Changes:
- src/controls.ts: Translate comments to English
- src/createConfirmation.ts: Translate comments to English
- __tests__/abort.test.ts: Translate comments to English

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
Change documentation order to show utility functions first as the simpler approach, and AbortController as an advanced option for fine-grained control.

Changes:
- README.md: Move utility functions section before AbortController
- README.md: Label AbortController section as "Advanced"
- README.md: Remove "Recommended" label from AbortController

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
Change from reject-based abort to resolve-based close pattern, following react-call's design philosophy where external completion is treated as a normal resolution rather than an error.

## Breaking Changes

- Renamed `abort()` → `close()` and `abortAll()` → `closeAll()`
- External completion now **resolves** with response value instead of rejecting
- `AbortError` class removed (no longer needed)
- `ConfirmationOptions` now requires `abortResponse` parameter for AbortSignal

## Changes

### API Changes
- `close(promise, response)` - Closes promise with response value
- `closeAll(response)` - Closes all pending promises with response value
- AbortSignal requires `{ signal, abortResponse }` to specify response value

### Type Safety
- Generic type `<R>` preserved through close operations
- TypeScript ensures response type matches Promise type

### Benefits
- No try-catch needed for external completion
- External completion treated as normal flow, not error
- Simpler API aligned with react-call design

## Migration

Before:
```typescript
abort(promise)  // → rejects with AbortError
try {
  await promise
} catch (e) {
  if (e.name === 'AbortError') // handle
}
```

After:
```typescript
close(promise, false)  // → resolves with false
const result = await promise  // false
if (!result) // handle
```

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
abortResponseが指定されていない場合、Promiseはabort reasonでrejectされるようになりました。

Changes:
- ConfirmationHandleにrejectを追加
- attachAbortSignalをabortResponseオプショナル対応
  - 指定あり: Promiseをその値でresolve
  - 指定なし: Promiseをabort reasonでreject
- テストを追加(abortResponse省略時の動作確認)
- READMEを更新(close/closeAllを推奨、AbortControllerは代替手段)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
- Replace close() with proceed() for resolving confirmations
- Add dismiss() to close UI without resolving/rejecting Promise
- Add cancel() for rejecting confirmations
- Remove closeAll() and AbortController support
- Rename abort.test.ts to controls.test.ts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@haradakunihiko haradakunihiko merged commit 2cf02b4 into master Dec 20, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants