@ foblex/ 调试器
轻量级Angular Signals状态引擎有深补丁,去除/重取和语义通知等功能.
@foblex/mutator 是一个小型的 TypeScript 库, 建在顶部 signal() 从 @angular/core。 。 。 .
它允许你变异状态(create / update / delete,支持带有历史限制的撤销/重写,并通过通知字符串发布语义更新.
| 框架 | 角 17 + (符号) |
| 大小 | < 2 KB 分数+gzip |
| 撤消限制 | 50 (可通过构造器定制) |
| 许可证 | 麻省理工学院 |
QQ 快速启动
npm i @foblex/mutator
import { effect, inject, Injectable } from '@angular/core';
import { Mutator } from '@foblex/mutator';
// 1. Define your state shape
interface FlowState {
nodes: Record<string, { x: number; y: number }>;
}
// 2. Create a store class extending Mutator
@Injectable({ providedIn: 'root' })
class FlowStore extends Mutator<FlowState> {}
// 3. Inject and initialize the store
const flow = inject(FlowStore);
flow.initialize({ nodes: {} });
// 4. React to changes with `effect()`
effect(() => {
const { version, notifier } = flow.changes();
console.log('Changed (v' + version + ') by', notifier);
console.table(flow.getSnapshot().nodes);
});
// 5. Perform operations
flow.create({ nodes: { n1: { x: 0, y: 0 } } }, 'init');
flow.update({ nodes: { n1: { x: 100, y: 100 } } }, 'move');
flow.update({ nodes: { n1: { y: 200 } } }, 'drag');
flow.undo(); // ⬅️ back to y: 100
flow.redo(); // ➡️ forward to y: 200
API 参考
| 方法 | 说明 |
|---|---|
initialize(base) | 设置初始状态并清除历史 |
create(patch, notifier?) | 添加新数据 |
update(patch, notifier?) | 更新已存在的字段( 深度合并) |
delete(patch, notifier?) | 删除密钥 |
undo() / redo() | 撤消/ 重做一步 |
getSnapshot() | 当前状态( 碱+堆栈) |
changes: Signal<{ version; notifier }> | 版本+变化源 |
canUndo / canRedo: Signal<boolean> | 用户界面按钮的活的旗子 |
类型
interface MutatorChange {
version: number;
notifier: string | null;
}
type DeepPartial<T> = {
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};
QQ 撤消限制
provideMutator({
limit: 100, // Default is 50
})
许可证
麻省理工学院