tombl.dev
a post-component library for building user-interfaces on the web.
remove _key from root
+10
-7
+10
-4
src/client/parts.ts
+10
-4
src/client/parts.ts
···
7
7
type Displayable,
8
8
type Renderable,
9
9
} from '../shared.ts'
10
-
import { controllers, get_controller, get_key } from './controller.ts'
10
+
import { controllers, get_controller, get_key, type Key } from './controller.ts'
11
11
import { create_root, type Root } from './root.ts'
12
12
import { create_span, create_span_after, delete_contents, extract_contents, insert_node, type Span } from './span.ts'
13
13
import type { Cleanup } from './util.ts'
···
26
26
27
27
// for when we're rendering multiple values:
28
28
let roots: Root[] | undefined
29
+
let keys: Key[] | undefined
29
30
30
31
// for when we're rendering a string/single dom node:
31
32
// undefined means no previous value, because a user-specified undefined is remapped to null
···
118
119
delete_contents(span)
119
120
120
121
roots = []
122
+
keys = []
121
123
}
124
+
assert(keys)
122
125
123
126
// create or update a root for every item.
124
127
let i = 0
···
127
130
const key = get_key(item)
128
131
let root = (roots[i] ??= create_root(create_span_after(end)))
129
132
130
-
if (key !== undefined && root._key !== key) {
133
+
if (key !== undefined && keys[i] !== key) {
131
134
for (let j = i; j < roots.length; j++) {
132
135
const root1 = root
133
136
const root2 = roots[j]
134
137
135
-
if (root2._key === key) {
138
+
if (keys[j] === key) {
136
139
// swap the contents of the spans
137
140
const tmp_content = extract_contents(root1._span)
138
141
insert_node(root1._span, extract_contents(root2._span))
···
146
149
// swap the roots
147
150
roots[j] = root1
148
151
root = roots[i] = root2
152
+
keys[j] = keys[i]
153
+
keys[i] = key
149
154
150
155
break
151
156
}
152
157
}
153
158
154
-
root._key = key
159
+
keys[i] = key
155
160
}
156
161
157
162
root.render(item as Displayable)
···
170
175
} else if (roots) {
171
176
for (const root of roots) root.render(null)
172
177
roots = undefined
178
+
keys = undefined
173
179
}
174
180
175
181
// now early return if the value hasn't changed.
-3
src/client/root.ts
-3
src/client/root.ts
···
1
1
import { assert, is_html, single_part_template, type Displayable } from '../shared.ts'
2
2
import { compile_template, type CompiledTemplate } from './compiler.ts'
3
-
import type { Key } from './controller.ts'
4
3
import type { Part } from './parts.ts'
5
4
import { create_span_into, delete_contents, insert_node, type Span } from './span.ts'
6
5
7
6
export interface Root {
8
7
render(value: Displayable): void
9
8
/** @internal */ _span: Span
10
-
/** @internal */ _key: Key | undefined
11
9
}
12
10
13
11
export function createRoot(parent: Node): Root {
···
20
18
21
19
return {
22
20
_span: span,
23
-
_key: undefined,
24
21
25
22
render: (value: Displayable) => {
26
23
const { _dynamics: dynamics, _statics: statics } = is_html(value) ? value : single_part_template(value)