wittyna-traceable

简介

wittyna-traceable可以为复杂结构的js对象的操作提供修改日志，回退、前进等功能。

支持的数据

• 普通对象数据
• vue2 格式对象数据
• vue3 格式对象数据

安装

1npm install wittyna-traceable

特性

• 默认在修改开始后的 microtask 结束后会记录一次操作
• 通过start， end 可以自定义一次操作的开始和结束
• 通过 forward， backward 可以进行回退、前进操作
• 通过 history 可以拿到操作历史记录
• 可以设置最大历史记录数

使用

以下是几个测试用例的例子

• start，end

1import { Traceable } from 'wittyna-traceable';
2import { assert, expect, test } from 'vitest';
3import { wait } from '../src/utils';
4import { reactive as reactive2 } from 'vue-2';
5import { reactive as reactive3 } from 'vue-3';
6
7const testFn = async (reactive: <T>(t: T) => T = (t) => t) => {
8  const traceable = new Traceable<any>(reactive({ a: 1, b: 2, c: 3 }));
9  traceable.start();
10  traceable.data.a = 111;
11  await wait(500);
12  traceable.data.b = 222;
13  await wait(500);
14  traceable.data.c = 333;
15  traceable.backward();
16  expect(JSON.stringify(traceable.data)).eq(
17    JSON.stringify({ a: 1, b: 2, c: 3 })
18  );
19};
20test('basic:start-end', () => testFn());
21test('vue2:start-end', () => testFn(reactive2 as unknown as <T>(t: T) => T));
22test('vue3:start-end', () => testFn(reactive3 as unknown as <T>(t: T) => T));
23

• 数组情况

1import { Traceable } from 'wittyna-traceable';
2import { assert, expect, test } from 'vitest';
3import { wait } from '../src/utils';
4import { reactive as reactive2 } from 'vue-2';
5import { reactive as reactive3 } from 'vue-3';
6const testFn = async (reactive: <T>(t: T) => T = (t) => t) => {
7  const traceable = new Traceable<any>(
8    reactive({ array: [1, 2, 3, 4, 5, 6, 7] })
9  );
10  console.log("原始数据", JSON.stringify(traceable.data))
11  traceable.data.array.splice(2, 4);
12  traceable.data.array.push('push');
13  traceable.data.array.push('push');
14  traceable.data.array.unshift('unshift');
15  traceable.data.array.unshift('unshift');
16  traceable.data.array.pop();
17  traceable.data.array.shift();
18  traceable.data.array.reverse();
19  console.log("操作后的数据", JSON.stringify(traceable.data))
20  expect(JSON.stringify(traceable.data.array)).eq(
21    JSON.stringify(['push', 7, 2, 1, 'unshift'])
22  );
23  expect(traceable.data.array.length).eq(5);
24  await wait();
25  traceable.backward();
26  console.log("回退后数据", JSON.stringify(traceable.data))
27  expect(JSON.stringify(traceable.data.array)).eq(
28    JSON.stringify([1, 2, 3, 4, 5, 6, 7])
29  );
30  expect(traceable.data.array.length).eq(7);
31  await wait();
32  traceable.forward();
33  expect(JSON.stringify(traceable.data.array)).eq(
34    JSON.stringify(['push', 7, 2, 1, 'unshift'])
35  );
36  expect(traceable.data.array.length).eq(5);
37  traceable.backward();
38  await wait();
39
40  traceable.data.array.push('push1', 'push2');
41  expect(JSON.stringify(traceable.data.array)).eq(
42    JSON.stringify([1, 2, 3, 4, 5, 6, 7, 'push1', 'push2'])
43  );
44  expect(traceable.data.array.length).eq(9);
45  await wait();
46  traceable.backward();
47  expect(JSON.stringify(traceable.data.array)).eq(
48    JSON.stringify([1, 2, 3, 4, 5, 6, 7])
49  );
50  expect(traceable.data.array.length).eq(7);
51  await wait();
52  traceable.forward();
53  expect(JSON.stringify(traceable.data.array)).eq(
54    JSON.stringify([1, 2, 3, 4, 5, 6, 7, 'push1', 'push2'])
55  );
56  expect(traceable.data.array.length).eq(9);
57};
58test('basic:type:array', () => testFn());
59test('vue2:type:array', () => testFn(reactive2 as unknown as <T>(t: T) => T));
60test('vue3:type:array', () => testFn(reactive3 as unknown as <T>(t: T) => T));
61

• 对象情况

1import { Traceable } from 'wittyna-traceable';
2import { assert, expect, test } from 'vitest';
3import { wait } from '../src/utils';
4import { reactive as reactive2 } from 'vue-2';
5import { reactive as reactive3 } from 'vue-3';
6const testFn = async (reactive: <T>(t: T) => T = (t) => t) => {
7  const traceable = new Traceable<any>(
8    reactive({ object: { a: 1, b: 2, c: 3 } })
9  );
10  traceable.data.object.a = 'a';
11  traceable.data.object.b = 'b';
12  delete traceable.data.object.c;
13  Object.assign(traceable.data.object);
14
15  expect(JSON.stringify(traceable.data.object)).eq(
16    JSON.stringify({ a: 'a', b: 'b' })
17  );
18  expect('c' in traceable.data.object).eq(false);
19  await wait();
20  traceable.backward();
21  expect(JSON.stringify(traceable.data.object)).eq(
22    JSON.stringify({ a: 1, b: 2, c: 3 })
23  );
24  expect('c' in traceable.data.object).eq(true);
25  await wait();
26  traceable.forward();
27  expect(JSON.stringify(traceable.data.object)).eq(
28    JSON.stringify({ a: 'a', b: 'b' })
29  );
30  expect('c' in traceable.data.object).eq(false);
31};
32test('basic:type:object', () => testFn());
33test('vue2:type:object', () => testFn(reactive2 as unknown as <T>(t: T) => T));
34test('vue3:type:object', () => testFn(reactive3 as unknown as <T>(t: T) => T));