Angular Undo Redo 履歴ストア | ng-hub-ui-history

Signals に優しい API、トランザクション、上限、リアクティブフォーム対応を備えた Angular の undo redo 履歴ストア。

最終更新 2026/08/08

概要

チームがこのライブラリを探す理由

外部の本格的な状態管理ライブラリを導入せずに、複雑な状態に対して undo と redo が必要なとき、この Angular 履歴ストアを使ってください。

インストール

npm install ng-hub-ui-history

ジャンプ

最適な用途

  • エディター
  • フォームビルダー
  • ローコードツール
  • 設定 UI

について history

ng-hub-ui-history は、ユーザーが安全に戻れることを期待する Angular のエディター、フォームビルダー、設定画面で特に役立ちます。重厚なアーキテクチャ選択を強いることなく、状態を持つワークフローに undo と redo のパターンをもたらします。

機能ガイド

手動コミットとタイムトラベル

状態の変更を追跡し、線形の履歴を前後に移動します。

サンプル:
Basic History

Manual commit, undo and redo.

{
  "title": "Getting Started with History",
  "description": "Edit and commit to create undo/redo entries."
}

ネストされたオブジェクトと配列

深いオブジェクトグラフやリストの変更には、パッチベースの追跡を使用します。

サンプル:
Nested Object History

Nested properties and dynamic list updates.

{
  "id": "invoice-1",
  "customer": {
    "name": "Acme Corp",
    "city": "Madrid"
  },
  "lines": [
    {
      "name": "Support plan",
      "quantity": 1,
      "unitPrice": 150
    }
  ]
}

自動フォーム追跡

組み込みのウォッチヘルパーで、フォーム値の変更を自動コミットします。

サンプル:
Reactive Form Watch

watchForm() for automatic commits from FormGroup.

{
  "name": "Maria",
  "email": "maria@demo.local",
  "role": "Editor"
}

トランザクションと保持

複数の操作を1つのエントリにまとめ、設定された制限に従って古いエントリを削除します。

サンプル:
Transactions + Limits

Consolidated commits and FIFO retention.

Pointer: -1 / Entries: 0 / Bytes: 0 

{
  "id": "transaction-editor",
  "title": "Release notes draft",
  "content": "Initial draft content.",
  "tags": [
    "draft"
  ]
}

主な機能

最近の変更

Version 22.0.2 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.0.1 - 7/28/26, 12:00 AM

added: Test suite for the diff/patch/clone utilities and multi-object undo/redo: cloneDeep isolation (nested structures, Dates), createDefaultDiff/applyDefaultPatch round-trips across representative shapes (nested objects, array insert/remove/reorder, key deletion, null transitions, deep nesting), estimateBytes sanity, and store-level coverage for independent per-object timelines, no-op transactions and redo invalidation after transactional commits. No runtime changes.

Version 22.0.0 - 6/17/26, 12:00 AM

changed: Aligned with Angular 22.

changed: README documentation standardized.

Version 0.1.0 - 2/23/26, 12:00 AM

added: Initial release with multi-object linear history.

added: Undo/redo, transactions, and maxEntries/maxBytes retention limits.

added: Reactive Forms auto-commit integration via watchForm().

関連ライブラリ

ng-hub-ui-sortable ng-hub-ui-utils ng-hub-ui-paginable