1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
# Deltas
- Enable you to efficiently represent changes on all kinds of data structures.
- Support schemas
- Support OT-style conflict resolution `delta2.apply(delta1.rebase(delta2, true)) === delta1.apply(delta2.rebase(delta1, false))`
- nice typings
## Delta for Map-like structures
```javascript
// define schema
const $d = delta.$delta(s.$any, { attr1: s.$string, attr2: s.$number })
const d = delta.create($d)
// create an update
const update = delta.create().set('attr1', 'val1').set('attr2', 42)
d.apply(update)
// In case of an invalid update
const update2 = delta.create().set('attr1', 42)
// it is possible to check an update beforehand
$d.check(update2) // => false
// and you also get type errors
d.apply(update2) // type error: expected 'attr1' to be of type string
```
## Delta for Text-like structures
Text-like deltas work similarly to [Quill Deltas]{https://quilljs.com/docs/delta}
```javascript
// define schema
const $d = delta.$delta(s.$any, null, s.$string)
const d = delta.create($d).insert('hello world')
// create an update
const update = delta.create().retain(11).insert('!')
d.apply(update)
// In case of an invalid update
const update2 = delta.create().insert([{ some: 'object' }])
// it is possible to check an update beforehando
$d.check(update2) // => false
// and you also get type errors
d.apply(update2) // type error: unexpected attribute 'attr1'
```
## Delta for Array-like structures
```javascript
// define schema
const $d = delta.$delta(s.$any, null, s.$array(s.object({ some: s.$string }, s.$string)))
const d = delta.create($d).insert(['hello world'])
// create an update
const update = delta.create().retain(1).insert({ some: 'object' })
d.apply(update)
// In case of an invalid update
const update2 = delta.create().insert([{ unknown: 'prop' }])
// it is possible to check an update beforehando
$d.check(update2) // => false
// and you also get type errors
d.apply(update2) // type error: { unknown: 'prop' } is not assignable to { some: string }
```
## Delta for Node-like structures (similar to XML,Trees with named nodes)
```javascript
// define schema for a 'p'|'h1' node that may contain text or other instances of itself
const $d = delta.$delta(s.$literal('div', 'p', 'h1'), { style: s.$string }, s.$string, true))
const d = delta.create('div', $d)
// create an update - insert paragraph into the <div>
const update = delta.create().insert([delta.create('p', { style: 'bold: true' }, 'hello world')])
d.apply(update)
// modify the paragraph by deleting the text 'world' and appending '!'
d.apply(delta.create().modify(
delta.create().retain(6).delete(5).insert('!')
))
```
# Transformers
We often have two different data structures that we want to sync. There might be
slight differences between those data structures. I.e. we might have a Yjs data
structure containing the following content:
```javascript
/**
* {
* headline: {{ headline }},
* content: {{ content }}
* }
*/
const $data = s.$delta(null, { headline: s.$string, content: s.$string })
```
A typical scenario is that we want to sync that to the dom and back. "two-way bindings"
- When the Yjs struucture updates, we want to sync the changes to the dom.
- When the dom is updated (because the dom is a `contenteditable` editor), we
want to sync back the changes to the yjs structure.
Now, the dom might look like this:
```javascript
/**
* <div>
* <h1 style='some custom style'>{{headline}}</h1>
* <span>dturianed</span>
* <p>{{content}}</p>
* </div>
*/
```
We can achieve automattic back-and-forth transformations with delta
transformers:
```javascript
const Λdata = Λ.transform($data, $d =>
Λ.delta('div', {}, [
Λ.delta('h1', { style: 'bold:true' }, [Λ.query('headline')($d)], []),
Λ.delta('p', null, [Λ.query('content')($d)])
])
)
```
|
