@homeostate/core 0.1.1 → 0.1.2
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/CHANGELOG.md +6 -0
- package/README.md +0 -3
- package/package.json +4 -2
- package/src/apply.ts +87 -0
- package/src/change.ts +23 -0
- package/src/diff.ts +229 -0
- package/src/index.ts +18 -0
- package/src/memory-backend.ts +38 -0
- package/src/patching.ts +86 -0
- package/src/sync-engine.ts +135 -0
- package/src/types.ts +98 -0
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
# @homeostate/core
|
|
2
2
|
|
|
3
|
-
> **Draft / placeholder release.** `0.0.0` reserves the name while the API is still
|
|
4
|
-
> being designed. Nothing here is stable — do not depend on it yet.
|
|
5
|
-
|
|
6
3
|
State-manager and CRDT-backend agnostic sync engine. It keeps a store, reached through a
|
|
7
4
|
`StoreAdapter`, in sync with a `CrdtBackend` such as
|
|
8
5
|
[`@homeostate/crdt-yjs`](https://github.com/mixedrays/homeostate/tree/main/packages/crdt-yjs),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@homeostate/core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "State-manager and CRDT-backend agnostic sync engine between a store adapter and a CrdtBackend",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"url": "git+https://github.com/mixedrays/homeostate.git",
|
|
10
10
|
"directory": "packages/core"
|
|
11
11
|
},
|
|
12
|
-
"homepage": "https://
|
|
12
|
+
"homepage": "https://homeostate.pages.dev",
|
|
13
13
|
"bugs": {
|
|
14
14
|
"url": "https://github.com/mixedrays/homeostate/issues"
|
|
15
15
|
},
|
|
@@ -29,6 +29,8 @@
|
|
|
29
29
|
},
|
|
30
30
|
"files": [
|
|
31
31
|
"dist",
|
|
32
|
+
"src",
|
|
33
|
+
"!src/**/__tests__",
|
|
32
34
|
"README.md",
|
|
33
35
|
"LICENSE",
|
|
34
36
|
"THIRD_PARTY_NOTICES.md",
|
package/src/apply.ts
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { ChangeType, type Change } from "./change.js";
|
|
2
|
+
|
|
3
|
+
type Plain = Record<string, unknown>;
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* How one store writes into its containers. `applyChanges` decides *what* to write; an
|
|
7
|
+
* implementation of this decides *how*, so the same edit script drives a MobX observable
|
|
8
|
+
* tree, a Valtio proxy, or a plain object.
|
|
9
|
+
*
|
|
10
|
+
* Every method receives a container that already lives in the store, never a copy.
|
|
11
|
+
*/
|
|
12
|
+
export interface ApplyOps {
|
|
13
|
+
/** Assign `value` at `key`, creating the property if the target is a record. */
|
|
14
|
+
set(target: object, key: string | number, value: unknown): void;
|
|
15
|
+
/** Remove the record property `key`. */
|
|
16
|
+
remove(target: object, key: string): void;
|
|
17
|
+
/** `Array.prototype.splice`: drop `deleteCount` elements at `index`, then add `inserted`. */
|
|
18
|
+
splice(
|
|
19
|
+
target: unknown[],
|
|
20
|
+
index: number,
|
|
21
|
+
deleteCount: number,
|
|
22
|
+
inserted: unknown[],
|
|
23
|
+
): void;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Revises `value` by the character-level edit script `changes`, which is what `getChanges`
|
|
28
|
+
* returns for two strings. Each index addresses the string as revised by the steps before it.
|
|
29
|
+
*/
|
|
30
|
+
export const applyStringChanges = (value: string, changes: Change[]): string =>
|
|
31
|
+
changes.reduce((revised, [type, index, inserted]) => {
|
|
32
|
+
const at = index as number;
|
|
33
|
+
if (type === ChangeType.INSERT)
|
|
34
|
+
return revised.slice(0, at) + (inserted as string) + revised.slice(at);
|
|
35
|
+
if (type === ChangeType.DELETE)
|
|
36
|
+
return revised.slice(0, at) + revised.slice(at + 1);
|
|
37
|
+
return revised;
|
|
38
|
+
}, value);
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Applies `changes` to `target` in place, mutating only the paths the edit script names.
|
|
42
|
+
* Everything else keeps its identity, which is what fine-grained stores react to.
|
|
43
|
+
*
|
|
44
|
+
* `changes` must be `getChanges(before, after)` where `before` describes the shape `target`
|
|
45
|
+
* currently holds — an adapter gets that by diffing against the snapshot it last handed out.
|
|
46
|
+
* A `PENDING` step carries no replacement value, so it can only be followed by recursing into
|
|
47
|
+
* the container already there; a target that does not mirror `before` leaves such a step
|
|
48
|
+
* unapplied rather than writing something wrong.
|
|
49
|
+
*
|
|
50
|
+
* @param target The container to mutate — a record, or an array for a positional edit script.
|
|
51
|
+
* @param changes The edit script to apply, in order.
|
|
52
|
+
* @param ops How this store writes; see {@link ApplyOps}.
|
|
53
|
+
*/
|
|
54
|
+
export const applyChanges = (
|
|
55
|
+
target: object,
|
|
56
|
+
changes: Change[],
|
|
57
|
+
ops: ApplyOps,
|
|
58
|
+
): void => {
|
|
59
|
+
const array = Array.isArray(target) ? (target as unknown[]) : null;
|
|
60
|
+
|
|
61
|
+
for (const [type, key, value] of changes) {
|
|
62
|
+
switch (type) {
|
|
63
|
+
case ChangeType.PENDING: {
|
|
64
|
+
const child = (target as Plain)[key as string];
|
|
65
|
+
if (typeof child === "string")
|
|
66
|
+
ops.set(target, key, applyStringChanges(child, value as Change[]));
|
|
67
|
+
else if (child !== null && typeof child === "object")
|
|
68
|
+
applyChanges(child, value as Change[], ops);
|
|
69
|
+
break;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
case ChangeType.DELETE:
|
|
73
|
+
if (array) ops.splice(array, key as number, 1, []);
|
|
74
|
+
else ops.remove(target, key as string);
|
|
75
|
+
break;
|
|
76
|
+
|
|
77
|
+
case ChangeType.INSERT:
|
|
78
|
+
if (array) ops.splice(array, key as number, 0, [value]);
|
|
79
|
+
else ops.set(target, key, value);
|
|
80
|
+
break;
|
|
81
|
+
|
|
82
|
+
case ChangeType.UPDATE:
|
|
83
|
+
ops.set(target, key, value);
|
|
84
|
+
break;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
};
|
package/src/change.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Describes the change that needs to be made.
|
|
3
|
+
*/
|
|
4
|
+
export enum ChangeType {
|
|
5
|
+
/** A value was inserted. */
|
|
6
|
+
INSERT = "insert",
|
|
7
|
+
/** A value was replaced. */
|
|
8
|
+
UPDATE = "update",
|
|
9
|
+
/** A value was deleted. */
|
|
10
|
+
DELETE = "delete",
|
|
11
|
+
/** The value requires a recursive diff to identify further changes. */
|
|
12
|
+
PENDING = "pending",
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* One step in turning a container into another: `[type, key, value]`.
|
|
17
|
+
*
|
|
18
|
+
* Steps apply in order. A numeric key addresses the array or string as revised by the
|
|
19
|
+
* steps before it, so appliers never sort or clamp. `value` is the inserted or replacing
|
|
20
|
+
* value (a string insert may carry several characters), `undefined` for a delete, and the
|
|
21
|
+
* nested `Change[]` for a pending entry.
|
|
22
|
+
*/
|
|
23
|
+
export type Change = [ChangeType, string | number, unknown];
|
package/src/diff.ts
ADDED
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
import { ChangeType, type Change } from "./change.js";
|
|
2
|
+
|
|
3
|
+
export type Diffable = Record<string, unknown> | Array<unknown> | string;
|
|
4
|
+
|
|
5
|
+
const isArray = (value: unknown): value is Array<unknown> =>
|
|
6
|
+
Array.isArray(value);
|
|
7
|
+
|
|
8
|
+
const isString = (value: unknown): value is string => typeof value === "string";
|
|
9
|
+
|
|
10
|
+
const isRecord = (value: unknown): value is Record<string, unknown> =>
|
|
11
|
+
value !== null && typeof value === "object" && !Array.isArray(value);
|
|
12
|
+
|
|
13
|
+
const isDiffable = (value: unknown): value is Diffable =>
|
|
14
|
+
isArray(value) || isString(value) || isRecord(value);
|
|
15
|
+
|
|
16
|
+
const isSameKind = (a: Diffable, b: Diffable): boolean =>
|
|
17
|
+
isString(a) ? isString(b) : isArray(a) ? isArray(b) : isRecord(b);
|
|
18
|
+
|
|
19
|
+
const nestedChanges = (a: unknown, b: unknown): Change[] | null =>
|
|
20
|
+
isDiffable(a) && isDiffable(b) && isSameKind(a, b) ? getChanges(a, b) : null;
|
|
21
|
+
|
|
22
|
+
const deepEqual = (a: unknown, b: unknown): boolean => {
|
|
23
|
+
if (a === b) return true;
|
|
24
|
+
if (isArray(a) && isArray(b))
|
|
25
|
+
return (
|
|
26
|
+
a.length === b.length && a.every((value, i) => deepEqual(value, b[i]))
|
|
27
|
+
);
|
|
28
|
+
if (isRecord(a) && isRecord(b)) {
|
|
29
|
+
const keys = Object.keys(a);
|
|
30
|
+
return (
|
|
31
|
+
keys.length === Object.keys(b).length &&
|
|
32
|
+
keys.every((key) => key in b && deepEqual(a[key], b[key]))
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
return false;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export const getChanges = (a: Diffable, b: Diffable): Change[] => {
|
|
39
|
+
if (isString(a) && isString(b)) return getStringChanges(a, b);
|
|
40
|
+
if (isArray(a) && isArray(b)) return getArrayChanges(a, b);
|
|
41
|
+
if (isRecord(a) && isRecord(b)) return getRecordChanges(a, b);
|
|
42
|
+
return [];
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const sharesCharacter = (a: string, b: string): boolean => {
|
|
46
|
+
const characters = new Set(a);
|
|
47
|
+
for (const character of b) if (characters.has(character)) return true;
|
|
48
|
+
return false;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const getStringChanges = (a: string, b: string): Change[] => {
|
|
52
|
+
if (a === b) return [];
|
|
53
|
+
if (!sharesCharacter(a, b)) {
|
|
54
|
+
const deletes = Array.from(a, (): Change => [
|
|
55
|
+
ChangeType.DELETE,
|
|
56
|
+
0,
|
|
57
|
+
undefined,
|
|
58
|
+
]);
|
|
59
|
+
return b.length === 0 ? deletes : [...deletes, [ChangeType.INSERT, 0, b]];
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
const changes: Change[] = [];
|
|
63
|
+
let index = 0;
|
|
64
|
+
|
|
65
|
+
for (const { step, b: position } of editScript(a, b, (x, y) => x === y)) {
|
|
66
|
+
if (step === "eq") index++;
|
|
67
|
+
else if (step === "del")
|
|
68
|
+
changes.push([ChangeType.DELETE, index, undefined]);
|
|
69
|
+
else {
|
|
70
|
+
const last = changes.length > 0 ? changes[changes.length - 1] : undefined;
|
|
71
|
+
if (
|
|
72
|
+
last !== undefined &&
|
|
73
|
+
last[0] === ChangeType.INSERT &&
|
|
74
|
+
(last[1] as number) + (last[2] as string).length === index
|
|
75
|
+
) {
|
|
76
|
+
last[2] = (last[2] as string) + b[position];
|
|
77
|
+
} else changes.push([ChangeType.INSERT, index, b[position]]);
|
|
78
|
+
index++;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return changes;
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const getArrayChanges = (a: Array<unknown>, b: Array<unknown>): Change[] => {
|
|
86
|
+
const changes: Change[] = [];
|
|
87
|
+
let index = 0;
|
|
88
|
+
let deleted: number[] = [];
|
|
89
|
+
let inserted: number[] = [];
|
|
90
|
+
|
|
91
|
+
const flush = (): void => {
|
|
92
|
+
const pairs = Math.min(deleted.length, inserted.length);
|
|
93
|
+
for (let i = 0; i < pairs; i++) {
|
|
94
|
+
const next = b[inserted[i]];
|
|
95
|
+
const nested = nestedChanges(a[deleted[i]], next);
|
|
96
|
+
if (nested === null) changes.push([ChangeType.UPDATE, index, next]);
|
|
97
|
+
else if (nested.length > 0)
|
|
98
|
+
changes.push([ChangeType.PENDING, index, nested]);
|
|
99
|
+
index++;
|
|
100
|
+
}
|
|
101
|
+
for (let i = pairs; i < deleted.length; i++)
|
|
102
|
+
changes.push([ChangeType.DELETE, index, undefined]);
|
|
103
|
+
for (let i = pairs; i < inserted.length; i++) {
|
|
104
|
+
changes.push([ChangeType.INSERT, index, b[inserted[i]]]);
|
|
105
|
+
index++;
|
|
106
|
+
}
|
|
107
|
+
deleted = [];
|
|
108
|
+
inserted = [];
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
for (const { step, a: from, b: to } of editScript(a, b, deepEqual)) {
|
|
112
|
+
if (step === "del") deleted.push(from);
|
|
113
|
+
else if (step === "ins") inserted.push(to);
|
|
114
|
+
else {
|
|
115
|
+
flush();
|
|
116
|
+
index++;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
flush();
|
|
120
|
+
|
|
121
|
+
return changes;
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
const getRecordChanges = (
|
|
125
|
+
a: Record<string, unknown>,
|
|
126
|
+
b: Record<string, unknown>,
|
|
127
|
+
): Change[] => {
|
|
128
|
+
const changes: Change[] = [];
|
|
129
|
+
|
|
130
|
+
for (const property of Object.keys(a))
|
|
131
|
+
if (!(property in b))
|
|
132
|
+
changes.push([ChangeType.DELETE, property, undefined]);
|
|
133
|
+
|
|
134
|
+
for (const [property, value] of Object.entries(b)) {
|
|
135
|
+
if (!(property in a)) changes.push([ChangeType.INSERT, property, value]);
|
|
136
|
+
else {
|
|
137
|
+
const nested = nestedChanges(a[property], value);
|
|
138
|
+
if (nested === null) {
|
|
139
|
+
if (a[property] !== value)
|
|
140
|
+
changes.push([ChangeType.UPDATE, property, value]);
|
|
141
|
+
} else if (nested.length > 0)
|
|
142
|
+
changes.push([ChangeType.PENDING, property, nested]);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
return changes;
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
interface EditOp {
|
|
150
|
+
step: "eq" | "ins" | "del";
|
|
151
|
+
a: number;
|
|
152
|
+
b: number;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* Shortest edit script from `a` to `b` by Wu et al.'s O(NP) algorithm. Adapted from
|
|
157
|
+
* https://github.com/cubicdaiya/onp/blob/master/javascript/onp.js.
|
|
158
|
+
*/
|
|
159
|
+
const editScript = <T>(
|
|
160
|
+
a: ArrayLike<T>,
|
|
161
|
+
b: ArrayLike<T>,
|
|
162
|
+
equal: (x: T, y: T) => boolean,
|
|
163
|
+
): EditOp[] => {
|
|
164
|
+
const swapped = a.length > b.length;
|
|
165
|
+
const s = swapped ? b : a;
|
|
166
|
+
const t = swapped ? a : b;
|
|
167
|
+
const m = s.length;
|
|
168
|
+
const n = t.length;
|
|
169
|
+
const delta = n - m;
|
|
170
|
+
const offset = m + 1;
|
|
171
|
+
const furthest = new Array<number>(m + n + 3).fill(-1);
|
|
172
|
+
const pointAt = new Array<number>(m + n + 3).fill(-1);
|
|
173
|
+
const points: { x: number; y: number; prev: number }[] = [];
|
|
174
|
+
|
|
175
|
+
const snake = (k: number): void => {
|
|
176
|
+
const fromBelow = furthest[k + offset - 1] + 1;
|
|
177
|
+
const fromAbove = furthest[k + offset + 1];
|
|
178
|
+
let y = Math.max(fromBelow, fromAbove);
|
|
179
|
+
let x = y - k;
|
|
180
|
+
while (x < m && y < n && equal(s[x], t[y])) {
|
|
181
|
+
x++;
|
|
182
|
+
y++;
|
|
183
|
+
}
|
|
184
|
+
furthest[k + offset] = y;
|
|
185
|
+
pointAt[k + offset] = points.length;
|
|
186
|
+
points.push({
|
|
187
|
+
x,
|
|
188
|
+
y,
|
|
189
|
+
prev:
|
|
190
|
+
fromBelow > fromAbove
|
|
191
|
+
? pointAt[k + offset - 1]
|
|
192
|
+
: pointAt[k + offset + 1],
|
|
193
|
+
});
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
for (let p = 0; furthest[delta + offset] !== n; p++) {
|
|
197
|
+
for (let k = -p; k < delta; k++) snake(k);
|
|
198
|
+
for (let k = delta + p; k > delta; k--) snake(k);
|
|
199
|
+
snake(delta);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
const path: { x: number; y: number }[] = [];
|
|
203
|
+
for (let i = pointAt[delta + offset]; i !== -1; i = points[i].prev)
|
|
204
|
+
path.push(points[i]);
|
|
205
|
+
|
|
206
|
+
const ops: EditOp[] = [];
|
|
207
|
+
let x = 0;
|
|
208
|
+
let y = 0;
|
|
209
|
+
const op = (step: EditOp["step"]): EditOp =>
|
|
210
|
+
swapped ? { step, a: y, b: x } : { step, a: x, b: y };
|
|
211
|
+
|
|
212
|
+
for (let i = path.length - 1; i >= 0; i--) {
|
|
213
|
+
const end = path[i];
|
|
214
|
+
if (end.y - end.x > y - x) {
|
|
215
|
+
ops.push(op(swapped ? "del" : "ins"));
|
|
216
|
+
y++;
|
|
217
|
+
} else if (end.y - end.x < y - x) {
|
|
218
|
+
ops.push(op(swapped ? "ins" : "del"));
|
|
219
|
+
x++;
|
|
220
|
+
}
|
|
221
|
+
while (x < end.x) {
|
|
222
|
+
ops.push(op("eq"));
|
|
223
|
+
x++;
|
|
224
|
+
y++;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
return ops;
|
|
229
|
+
};
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export { createSyncEngine } from "./sync-engine.js";
|
|
2
|
+
export { createMemoryBackend } from "./memory-backend.js";
|
|
3
|
+
export type { MemoryBackend } from "./memory-backend.js";
|
|
4
|
+
export { getChanges } from "./diff.js";
|
|
5
|
+
export { applyChanges, applyStringChanges } from "./apply.js";
|
|
6
|
+
export type { ApplyOps } from "./apply.js";
|
|
7
|
+
export type { Diffable } from "./diff.js";
|
|
8
|
+
export { ChangeType } from "./change.js";
|
|
9
|
+
export type { Change } from "./change.js";
|
|
10
|
+
export { defaultSyncFilter } from "./types.js";
|
|
11
|
+
export type {
|
|
12
|
+
CrdtBackend,
|
|
13
|
+
SeedStrategy,
|
|
14
|
+
StoreAdapter,
|
|
15
|
+
SyncEngine,
|
|
16
|
+
SyncEngineConfig,
|
|
17
|
+
Unsubscribe,
|
|
18
|
+
} from "./types.js";
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { CrdtBackend, Unsubscribe } from "./types.js";
|
|
2
|
+
|
|
3
|
+
export interface MemoryBackend extends CrdtBackend {
|
|
4
|
+
/** Replace the held state as if a remote peer had written it, then notify subscribers */
|
|
5
|
+
receive: (next: unknown) => void;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const clone = <T>(value: T): T =>
|
|
9
|
+
value === undefined ? value : JSON.parse(JSON.stringify(value));
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Plain-JSON backend with no replication. It proves the engine has no
|
|
13
|
+
* CRDT-library assumptions and gives tests a fast in-process peer.
|
|
14
|
+
*/
|
|
15
|
+
export const createMemoryBackend = (initial: unknown = {}): MemoryBackend => {
|
|
16
|
+
let state = clone(initial);
|
|
17
|
+
const listeners = new Set<() => void>();
|
|
18
|
+
|
|
19
|
+
return {
|
|
20
|
+
read: () => clone(state),
|
|
21
|
+
|
|
22
|
+
write: (next) => {
|
|
23
|
+
state = clone(next);
|
|
24
|
+
},
|
|
25
|
+
|
|
26
|
+
subscribe: (onRemoteChange): Unsubscribe => {
|
|
27
|
+
listeners.add(onRemoteChange);
|
|
28
|
+
return () => {
|
|
29
|
+
listeners.delete(onRemoteChange);
|
|
30
|
+
};
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
receive: (next) => {
|
|
34
|
+
state = clone(next);
|
|
35
|
+
listeners.forEach((listener) => listener());
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
};
|
package/src/patching.ts
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { applyStringChanges } from "./apply.js";
|
|
2
|
+
import { ChangeType, type Change } from "./change.js";
|
|
3
|
+
import { getChanges, type Diffable } from "./diff.js";
|
|
4
|
+
|
|
5
|
+
const applyChanges = (state: Diffable, changes: Change[]): Diffable => {
|
|
6
|
+
if (typeof state === "string") return applyStringChanges(state, changes);
|
|
7
|
+
if (Array.isArray(state)) return applyChangesToArray(state, changes);
|
|
8
|
+
return applyChangesToObject(state, changes);
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const applyChangesToArray = (
|
|
12
|
+
array: unknown[],
|
|
13
|
+
changes: Change[],
|
|
14
|
+
): unknown[] => {
|
|
15
|
+
const revised = [...array];
|
|
16
|
+
|
|
17
|
+
for (const [type, index, value] of changes) {
|
|
18
|
+
const i = index as number;
|
|
19
|
+
|
|
20
|
+
switch (type) {
|
|
21
|
+
case ChangeType.INSERT:
|
|
22
|
+
revised.splice(i, 0, value);
|
|
23
|
+
break;
|
|
24
|
+
|
|
25
|
+
case ChangeType.UPDATE:
|
|
26
|
+
revised[i] = value;
|
|
27
|
+
break;
|
|
28
|
+
|
|
29
|
+
case ChangeType.PENDING:
|
|
30
|
+
revised[i] = applyChanges(revised[i] as Diffable, value as Change[]);
|
|
31
|
+
break;
|
|
32
|
+
|
|
33
|
+
case ChangeType.DELETE:
|
|
34
|
+
revised.splice(i, 1);
|
|
35
|
+
break;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return revised;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const applyChangesToObject = (
|
|
43
|
+
object: Record<string, unknown>,
|
|
44
|
+
changes: Change[],
|
|
45
|
+
): Record<string, unknown> => {
|
|
46
|
+
const revised = { ...object };
|
|
47
|
+
|
|
48
|
+
for (const [type, property, value] of changes) {
|
|
49
|
+
const key = property as string;
|
|
50
|
+
|
|
51
|
+
switch (type) {
|
|
52
|
+
case ChangeType.INSERT:
|
|
53
|
+
case ChangeType.UPDATE:
|
|
54
|
+
revised[key] = value;
|
|
55
|
+
break;
|
|
56
|
+
|
|
57
|
+
case ChangeType.PENDING:
|
|
58
|
+
revised[key] = applyChanges(object[key] as Diffable, value as Change[]);
|
|
59
|
+
break;
|
|
60
|
+
|
|
61
|
+
case ChangeType.DELETE:
|
|
62
|
+
delete revised[key];
|
|
63
|
+
break;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return revised;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Returns a value identical to newState, built from oldState by copying every
|
|
72
|
+
* container along a changed path and sharing every unchanged subtree. Neither
|
|
73
|
+
* input is mutated. If oldState and newState are already identical (indicated
|
|
74
|
+
* by an empty diff), then oldState itself is returned.
|
|
75
|
+
*
|
|
76
|
+
* @param oldState The state we want to patch.
|
|
77
|
+
* @param newState The state we want the result to match.
|
|
78
|
+
*
|
|
79
|
+
* @returns The patched state, identical to newState.
|
|
80
|
+
*/
|
|
81
|
+
export const patchState = <T>(oldState: T, newState: T): T => {
|
|
82
|
+
const changes = getChanges(oldState as Diffable, newState as Diffable);
|
|
83
|
+
|
|
84
|
+
if (changes.length === 0) return oldState;
|
|
85
|
+
return applyChanges(oldState as Diffable, changes) as T;
|
|
86
|
+
};
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import type {
|
|
2
|
+
CrdtBackend,
|
|
3
|
+
StoreAdapter,
|
|
4
|
+
SyncEngine,
|
|
5
|
+
SyncEngineConfig,
|
|
6
|
+
Unsubscribe,
|
|
7
|
+
} from "./types.js";
|
|
8
|
+
import { defaultSyncFilter } from "./types.js";
|
|
9
|
+
import { patchState } from "./patching.js";
|
|
10
|
+
|
|
11
|
+
type Plain = Record<string, unknown>;
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Creates a sync engine that keeps a store (via its adapter) and a CRDT backend
|
|
15
|
+
* in sync in both directions.
|
|
16
|
+
*
|
|
17
|
+
* This is the core abstraction that makes the sync logic state-manager and
|
|
18
|
+
* CRDT-library agnostic.
|
|
19
|
+
*
|
|
20
|
+
* On `connect()` the two sides are reconciled per key over the filtered view: a key the
|
|
21
|
+
* backend holds wins over the store's value, and a synced key the backend lacks stays in
|
|
22
|
+
* the store and is seeded into the backend unless `seed` is `'never'`. Afterwards the
|
|
23
|
+
* backend owns the synced document: every write replaces it with the store's filtered
|
|
24
|
+
* state, and a key removed from the backend is removed from the store.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```typescript
|
|
28
|
+
* const backend = createYjsBackend(new Y.Doc(), 'shared');
|
|
29
|
+
* const adapter = new ZustandAdapter(store);
|
|
30
|
+
* const engine = createSyncEngine(backend, adapter);
|
|
31
|
+
* engine.connect();
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export function createSyncEngine<S extends object>(
|
|
35
|
+
backend: CrdtBackend,
|
|
36
|
+
adapter: StoreAdapter<S>,
|
|
37
|
+
config: SyncEngineConfig = {},
|
|
38
|
+
): SyncEngine {
|
|
39
|
+
const { filter = defaultSyncFilter, seed = "if-empty" } = config;
|
|
40
|
+
|
|
41
|
+
let connected = false;
|
|
42
|
+
let storeUnsubscribe: Unsubscribe | null = null;
|
|
43
|
+
let backendUnsubscribe: Unsubscribe | null = null;
|
|
44
|
+
let applyingRemote = false;
|
|
45
|
+
|
|
46
|
+
const filterState = (state: object): Plain => {
|
|
47
|
+
const filtered: Plain = {};
|
|
48
|
+
for (const [key, value] of Object.entries(state)) {
|
|
49
|
+
if (filter(key, value)) filtered[key] = value;
|
|
50
|
+
}
|
|
51
|
+
return filtered;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const readBackend = (): Plain => {
|
|
55
|
+
const value = backend.read();
|
|
56
|
+
return value !== null && typeof value === "object" ? (value as Plain) : {};
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Builds the next store state from `remote`. With `keepLocalOnly`, a synced key the
|
|
61
|
+
* backend does not hold is left in place instead of being deleted; that is the
|
|
62
|
+
* connect-time reconciliation. Otherwise `remote` is the whole synced state.
|
|
63
|
+
*/
|
|
64
|
+
const mergeStates = (
|
|
65
|
+
current: S,
|
|
66
|
+
remote: Plain,
|
|
67
|
+
keepLocalOnly: boolean,
|
|
68
|
+
): S => {
|
|
69
|
+
const synced = filterState(current);
|
|
70
|
+
const target = keepLocalOnly ? { ...synced, ...remote } : remote;
|
|
71
|
+
const patched = patchState(synced, target);
|
|
72
|
+
if (patched === synced) return current;
|
|
73
|
+
|
|
74
|
+
const merged: Plain = { ...current, ...patched };
|
|
75
|
+
for (const key of Object.keys(synced)) {
|
|
76
|
+
if (!(key in patched)) delete merged[key];
|
|
77
|
+
}
|
|
78
|
+
return merged as S;
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
const syncToBackend = (): void => {
|
|
82
|
+
if (applyingRemote) return;
|
|
83
|
+
backend.write(filterState(adapter.getState()));
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
const applyRemote = (remote: Plain, keepLocalOnly: boolean): void => {
|
|
87
|
+
applyingRemote = true;
|
|
88
|
+
try {
|
|
89
|
+
const current = adapter.getState();
|
|
90
|
+
const merged = mergeStates(current, remote, keepLocalOnly);
|
|
91
|
+
if (merged !== current) adapter.setState(merged);
|
|
92
|
+
} finally {
|
|
93
|
+
applyingRemote = false;
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
const syncToStore = (): void => {
|
|
98
|
+
applyRemote(filterState(readBackend()), false);
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
return {
|
|
102
|
+
connect: (): void => {
|
|
103
|
+
if (connected) return;
|
|
104
|
+
|
|
105
|
+
const remote = filterState(readBackend());
|
|
106
|
+
const local = filterState(adapter.getState());
|
|
107
|
+
const remoteKeys = new Set(Object.keys(remote));
|
|
108
|
+
const missing = Object.keys(local).filter((key) => !remoteKeys.has(key));
|
|
109
|
+
|
|
110
|
+
if (seed === "if-empty" && missing.length > 0) {
|
|
111
|
+
const seeded: Plain = { ...remote };
|
|
112
|
+
for (const key of missing) seeded[key] = local[key];
|
|
113
|
+
backend.write(seeded);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
applyRemote(remote, true);
|
|
117
|
+
|
|
118
|
+
backendUnsubscribe = backend.subscribe(syncToStore);
|
|
119
|
+
storeUnsubscribe = adapter.subscribe(syncToBackend);
|
|
120
|
+
connected = true;
|
|
121
|
+
},
|
|
122
|
+
|
|
123
|
+
disconnect: (): void => {
|
|
124
|
+
if (!connected) return;
|
|
125
|
+
|
|
126
|
+
backendUnsubscribe?.();
|
|
127
|
+
backendUnsubscribe = null;
|
|
128
|
+
storeUnsubscribe?.();
|
|
129
|
+
storeUnsubscribe = null;
|
|
130
|
+
connected = false;
|
|
131
|
+
},
|
|
132
|
+
|
|
133
|
+
isConnected: (): boolean => connected,
|
|
134
|
+
};
|
|
135
|
+
}
|
package/src/types.ts
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Core types for the state-manager and CRDT-backend agnostic sync engine.
|
|
3
|
+
* These interfaces let any store be kept in sync through any replicated backend.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Unsubscribe function returned by subscribe
|
|
8
|
+
*/
|
|
9
|
+
export type Unsubscribe = () => void;
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Adapter interface that bridges a specific state manager with the sync engine.
|
|
13
|
+
* Implement this interface to add support for any state manager (Zustand, Redux, MobX, etc.)
|
|
14
|
+
*
|
|
15
|
+
* State must be plain JSON: objects, arrays, strings, numbers, booleans, and null.
|
|
16
|
+
* Functions are dropped by the default filter; other values such as Date, Map, or Set
|
|
17
|
+
* are neither diffed nor synced.
|
|
18
|
+
*/
|
|
19
|
+
export interface StoreAdapter<S extends object> {
|
|
20
|
+
/** Get the current state from the store */
|
|
21
|
+
getState: () => S;
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Replace the store state. Called only for changes coming from the backend; the
|
|
25
|
+
* engine ignores store notifications raised while it runs, so the adapter needs no
|
|
26
|
+
* echo suppression of its own.
|
|
27
|
+
*/
|
|
28
|
+
setState: (state: S) => void;
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Subscribe to store changes that should be written to the backend.
|
|
32
|
+
* @returns Unsubscribe function
|
|
33
|
+
*/
|
|
34
|
+
subscribe: (onStoreChange: () => void) => Unsubscribe;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Backend that holds the synced subtree in a CRDT or any other replicated store.
|
|
39
|
+
* The engine only ever exchanges plain JSON with it.
|
|
40
|
+
*/
|
|
41
|
+
export interface CrdtBackend {
|
|
42
|
+
/** Plain JSON snapshot of the synced subtree. Must not alias backend internals. */
|
|
43
|
+
read: () => unknown;
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Make the backend equal to `next` in one atomic transaction.
|
|
47
|
+
* The backend decides the granularity of the operations; `getChanges` is exported for that.
|
|
48
|
+
*/
|
|
49
|
+
write: (next: unknown) => void;
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Notify about changes that did not come through this backend's own `write`.
|
|
53
|
+
* @returns Unsubscribe function
|
|
54
|
+
*/
|
|
55
|
+
subscribe: (onRemoteChange: () => void) => Unsubscribe;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Whether `connect()` may write the store's synced keys that the backend does not hold.
|
|
60
|
+
* Reconciliation is per key over the filtered view: a key the backend holds always wins
|
|
61
|
+
* over the store's value, a key only the store holds always stays in the store.
|
|
62
|
+
* - `'if-empty'`: seed the keys the backend lacks, in one write (default)
|
|
63
|
+
* - `'never'`: leave seeding to the caller; the keys are written on the next local change
|
|
64
|
+
*/
|
|
65
|
+
export type SeedStrategy = "if-empty" | "never";
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Configuration options for the sync engine
|
|
69
|
+
*/
|
|
70
|
+
export interface SyncEngineConfig {
|
|
71
|
+
/**
|
|
72
|
+
* Filter function to determine which state keys should be synced, in both directions.
|
|
73
|
+
* Return true to sync the key, false to exclude it.
|
|
74
|
+
* By default, functions are excluded from sync.
|
|
75
|
+
*/
|
|
76
|
+
filter?: (key: string, value: unknown) => boolean;
|
|
77
|
+
/** Seeding strategy used by `connect()`; defaults to `'if-empty'` */
|
|
78
|
+
seed?: SeedStrategy;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* The sync engine interface - manages bidirectional sync between a store and a backend
|
|
83
|
+
*/
|
|
84
|
+
export interface SyncEngine {
|
|
85
|
+
/** Start synchronization */
|
|
86
|
+
connect: () => void;
|
|
87
|
+
/** Stop synchronization and cleanup */
|
|
88
|
+
disconnect: () => void;
|
|
89
|
+
/** Check if engine is connected */
|
|
90
|
+
isConnected: () => boolean;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Default filter that excludes functions from sync
|
|
95
|
+
*/
|
|
96
|
+
export const defaultSyncFilter = (_key: string, value: unknown): boolean => {
|
|
97
|
+
return typeof value !== "function";
|
|
98
|
+
};
|