Merge pull request #312 from streamich/json-crdt-patch-demos

JSON CRDT Patch demos

src/json-crdt-patch/__demos__/Patch.ts

@@ -0,0 +1,21 @@
+/* tslint:disable no-console */
+
+/**
+ * Run this demo with:
+ *
+ *     npx ts-node src/json-crdt-patch/__demos__/Patch.ts
+ */
+
+import {InsStrOp, NewStrOp, Patch} from '..';
+import {ts} from '../clock';
+
+const patch = new Patch();
+
+// Create a new "str" RGA-String with ID [123, 0].
+patch.ops.push(new NewStrOp(ts(123, 0)));
+
+// Insert "hello" with timespan that starts from [123, 1], into an
+// RGA-String with ID [123, 0], at position [123, 0] (the beginning).
+patch.ops.push(new InsStrOp(ts(123, 1), ts(123, 0), ts(123, 0), 'hello'));
+
+console.log(patch.toString());

src/json-crdt-patch/__demos__/PatchBuilder-json.ts

@@ -12,24 +12,33 @@ import {LogicalClock} from '../clock';
 const clock = new LogicalClock(123, 456);
 const builder = new PatchBuilder(clock);
 
-builder.root(
-  builder.json({
-    foo: 'bar',
-    baz: 123,
-  }),
-);
+const json = {
+  foo: 'bar',
+  baz: 123,
+  bools: [true, false],
+};
+
+builder.root(builder.json(json));
 
 const patch = builder.flush();
 console.log(patch.toString());
-// Patch 123.456!8
+
+// Patch 123.456!15
 // ├─ "obj" 123.456
 // ├─ "str" 123.457
 // ├─ "ins_str" 123.458!3, obj = 123.457 { 123.457 ← "bar" }
 // ├─ "con" 123.461 { 123 }
-// ├─ "ins_obj" 123.462!1, obj = 123.456
+// ├─ "arr" 123.462
+// ├─ "con" 123.463 { true }
+// ├─ "val" 123.464 { 123.463 }
+// ├─ "con" 123.465 { false }
+// ├─ "val" 123.466 { 123.465 }
+// ├─ "ins_arr" 123.467!2, obj = 123.462 { 123.462 ← 123.464, 123.466 }
+// ├─ "ins_obj" 123.469!1, obj = 123.456
 // │   ├─ "foo": 123.457
-// │   └─ "baz": 123.461
-// └─ "ins_val" 123.463!1, obj = 0.0, val = 123.456
+// │   ├─ "baz": 123.461
+// │   └─ "bools": 123.462
+// └─ "ins_val" 123.470!1, obj = 0.0, val = 123.456
 
 const buf = patch.toBinary();
 console.log(buf);

src/json-crdt-patch/__demos__/PatchBuilder-konst.ts

@@ -0,0 +1,24 @@
+/* tslint:disable no-console */
+
+/**
+ * Run this demo with:
+ *
+ *     npx ts-node src/json-crdt-patch/__demos__/PatchBuilder-konst.ts
+ */
+
+import {PatchBuilder, Patch, konst} from '..';
+import {LogicalClock} from '../clock';
+
+const clock = new LogicalClock(123, 456);
+const builder = new PatchBuilder(clock);
+
+builder.json({
+  bools: konst([true, false]),
+}),
+  console.log(builder.patch + '');
+
+// Patch 123.456!3
+// ├─ "obj" 123.456
+// ├─ "con" 123.457 { [true,false] }
+// └─ "ins_obj" 123.458!1, obj = 123.456
+//     └─ "bools": 123.457

src/json-crdt-patch/__demos__/PatchBuilder-operations.ts

@@ -12,14 +12,26 @@ import {LogicalClock} from '../clock';
 const clock = new LogicalClock(123, 456);
 const builder = new PatchBuilder(clock);
 
-const strId = builder.str();
-builder.insStr(strId, strId, 'Hello, world!');
+// Create a "str" RGA-String.
+const stringId = builder.str();
 
-builder.root(strId);
+// Insert "bar" text into the string at the starting position.
+builder.insStr(stringId, stringId, 'bar');
 
-const patch = builder.flush();
-console.log(patch.toString());
-// Patch 123.456!15
+// Create an "obj" LWW-Object.
+const objectId = builder.obj();
+
+// Set "foo" property of the object to "bar".
+builder.setKeys(objectId, [['foo', stringId]]);
+
+// Set the document root LWW-Register value to the object.
+builder.root(objectId);
+
+console.log(builder.patch + '');
+// Patch 123.456!7
 // ├─ "str" 123.456
-// ├─ "ins_str" 123.457!13, obj = 123.456 { 123.456 ← "Hello, world!" }
-// └─ "ins_val" 123.470!1, obj = 0.0, val = 123.456
+// ├─ "ins_str" 123.457!3, obj = 123.456 { 123.456 ← "bar" }
+// ├─ "obj" 123.460
+// ├─ "ins_obj" 123.461!1, obj = 123.460
+// │   └─ "foo": 123.456
+// └─ "ins_val" 123.462!1, obj = 0.0, val = 123.460

src/json-crdt-patch/__demos__/codec-binary.ts

@@ -0,0 +1,24 @@
+/* tslint:disable no-console */
+
+/**
+ * Run this demo with:
+ *
+ *     npx ts-node src/json-crdt-patch/__demos__/codec-binary.ts
+ */
+
+import {PatchBuilder} from '..';
+import {encode} from '../codec/binary';
+import {LogicalClock} from '../clock';
+
+const clock = new LogicalClock(123, 456);
+const builder = new PatchBuilder(clock);
+
+builder.json('hello');
+const encoded = encode(builder.patch);
+
+console.log(encoded);
+// Uint8Array(16) [
+//   123,   1, 200,   3, 246,   4,
+//   172,   1,   0,   1,   0, 104,
+//   101, 108, 108, 111
+// ]

src/json-crdt-patch/__demos__/codec-compact.ts

@@ -0,0 +1,26 @@
+/* tslint:disable no-console */
+
+/**
+ * Run this demo with:
+ *
+ *     npx ts-node src/json-crdt-patch/__demos__/codec-compact.ts
+ */
+
+import {PatchBuilder} from '..';
+import {encode} from '../codec/compact';
+import {LogicalClock} from '../clock';
+
+const clock = new LogicalClock(123, 456);
+const builder = new PatchBuilder(clock);
+
+builder.json('hello');
+const pojo = encode(builder.patch);
+
+console.log(JSON.stringify(pojo, null, 2));
+// [
+//   [
+//     [123, 456]
+//   ],
+//   [4],
+//   [12, -1, -1, "hello"],
+// ]

src/json-crdt-patch/__demos__/codec-json.ts

@@ -0,0 +1,27 @@
+/* tslint:disable no-console */
+
+/**
+ * Run this demo with:
+ *
+ *     npx ts-node src/json-crdt-patch/__demos__/codec-json.ts
+ */
+
+import {PatchBuilder} from '..';
+import {encode} from '../codec/json';
+import {LogicalClock} from '../clock';
+
+const clock = new LogicalClock(123, 456);
+const builder = new PatchBuilder(clock);
+
+builder.json('hello');
+const pojo = encode(builder.patch);
+
+console.log(JSON.stringify(pojo, null, 2));
+// {
+//   "id": [123, 456],
+//   "ops": [
+//     { "op": "str" },
+//     { "op": "ins_str", "obj": [123, 456],
+//     "after": [123, 456], "value": "hello" }
+//   ]
+// }