Precise DOM morphing
morphing
typescript
dom
Improve callback interfaces
+28
-28
+8
-8
dist/morphlex.d.ts
+8
-8
dist/morphlex.d.ts
···
9
9
beforeNodeRemoved?: ({ oldNode }: { oldNode: Node }) => boolean;
10
10
afterNodeRemoved?: ({ oldNode }: { oldNode: Node }) => void;
11
11
beforeAttributeUpdated?: ({
12
+
element,
12
13
attributeName,
13
14
newValue,
14
-
element,
15
15
}: {
16
+
element: Element;
16
17
attributeName: string;
17
18
newValue: string | null;
18
-
element: Element;
19
19
}) => boolean;
20
20
afterAttributeUpdated?: ({
21
+
element,
21
22
attributeName,
22
23
previousValue,
23
-
element,
24
24
}: {
25
+
element: Element;
25
26
attributeName: string;
26
27
previousValue: string | null;
27
-
element: Element;
28
28
}) => void;
29
29
beforePropertyUpdated?: ({
30
+
node,
30
31
propertyName,
31
32
newValue,
32
-
node,
33
33
}: {
34
+
node: Node;
34
35
propertyName: ObjectKey;
35
36
newValue: unknown;
36
-
node: Node;
37
37
}) => boolean;
38
38
afterPropertyUpdated?: ({
39
+
node,
39
40
propertyName,
40
41
previousValue,
41
-
node,
42
42
}: {
43
+
node: Node;
43
44
propertyName: ObjectKey;
44
45
previousValue: unknown;
45
-
node: Node;
46
46
}) => void;
47
47
}
48
48
export declare function morph(node: ChildNode, reference: ChildNode, options?: Options): void;
+6
-6
dist/morphlex.js
+6
-6
dist/morphlex.js
···
50
50
function morphAttributes(element, ref, context) {
51
51
// Remove any excess attributes from the element that aren’t present in the reference.
52
52
for (const { name, value } of element.attributes) {
53
-
if (!ref.hasAttribute(name) && (context.beforeAttributeUpdated?.({ attributeName: name, newValue: null, element }) ?? true)) {
53
+
if (!ref.hasAttribute(name) && (context.beforeAttributeUpdated?.({ element, attributeName: name, newValue: null }) ?? true)) {
54
54
element.removeAttribute(name);
55
-
context.afterAttributeUpdated?.({ attributeName: name, previousValue: value, element });
55
+
context.afterAttributeUpdated?.({ element, attributeName: name, previousValue: value });
56
56
}
57
57
}
58
58
// Copy attributes from the reference to the element, if they don’t already match.
···
60
60
const previousValue = element.getAttribute(name);
61
61
if (
62
62
previousValue !== value &&
63
-
(context.beforeAttributeUpdated?.({ attributeName: name, newValue: value, element }) ?? true)
63
+
(context.beforeAttributeUpdated?.({ element, attributeName: name, newValue: value }) ?? true)
64
64
) {
65
65
element.setAttribute(name, value);
66
-
context.afterAttributeUpdated?.({ attributeName: name, previousValue, element });
66
+
context.afterAttributeUpdated?.({ element, attributeName: name, previousValue });
67
67
}
68
68
}
69
69
// For certain types of elements, we need to do some extra work to ensure
···
107
107
}
108
108
function updateProperty(node, propertyName, newValue, context) {
109
109
const previousValue = node[propertyName];
110
-
if (previousValue !== newValue && (context.beforePropertyUpdated?.({ propertyName, newValue, node }) ?? true)) {
110
+
if (previousValue !== newValue && (context.beforePropertyUpdated?.({ node, propertyName, newValue }) ?? true)) {
111
111
node[propertyName] = newValue;
112
-
context.afterPropertyUpdated?.({ propertyName, previousValue, node });
112
+
context.afterPropertyUpdated?.({ node, propertyName, previousValue });
113
113
}
114
114
}
115
115
function morphChildNode(child, ref, parent, context) {
+14
-14
src/morphlex.ts
+14
-14
src/morphlex.ts
···
42
42
afterNodeRemoved?: ({ oldNode }: { oldNode: Node }) => void;
43
43
44
44
beforeAttributeUpdated?: ({
45
+
element,
45
46
attributeName,
46
47
newValue,
47
-
element,
48
48
}: {
49
+
element: Element;
49
50
attributeName: string;
50
51
newValue: string | null;
51
-
element: Element;
52
52
}) => boolean;
53
53
54
54
afterAttributeUpdated?: ({
55
+
element,
55
56
attributeName,
56
57
previousValue,
57
-
element,
58
58
}: {
59
+
element: Element;
59
60
attributeName: string;
60
61
previousValue: string | null;
61
-
element: Element;
62
62
}) => void;
63
63
64
64
beforePropertyUpdated?: ({
65
+
node,
65
66
propertyName,
66
67
newValue,
67
-
node,
68
68
}: {
69
+
node: Node;
69
70
propertyName: ObjectKey;
70
71
newValue: unknown;
71
-
node: Node;
72
72
}) => boolean;
73
73
74
74
afterPropertyUpdated?: ({
75
+
node,
75
76
propertyName,
76
77
previousValue,
77
-
node,
78
78
}: {
79
+
node: Node;
79
80
propertyName: ObjectKey;
80
81
previousValue: unknown;
81
-
node: Node;
82
82
}) => void;
83
83
}
84
84
···
147
147
function morphAttributes(element: Element, ref: ReadonlyNode<Element>, context: Context): void {
148
148
// Remove any excess attributes from the element that aren’t present in the reference.
149
149
for (const { name, value } of element.attributes) {
150
-
if (!ref.hasAttribute(name) && (context.beforeAttributeUpdated?.({ attributeName: name, newValue: null, element }) ?? true)) {
150
+
if (!ref.hasAttribute(name) && (context.beforeAttributeUpdated?.({ element, attributeName: name, newValue: null }) ?? true)) {
151
151
element.removeAttribute(name);
152
-
context.afterAttributeUpdated?.({ attributeName: name, previousValue: value, element });
152
+
context.afterAttributeUpdated?.({ element, attributeName: name, previousValue: value });
153
153
}
154
154
}
155
155
···
158
158
const previousValue = element.getAttribute(name);
159
159
if (
160
160
previousValue !== value &&
161
-
(context.beforeAttributeUpdated?.({ attributeName: name, newValue: value, element }) ?? true)
161
+
(context.beforeAttributeUpdated?.({ element, attributeName: name, newValue: value }) ?? true)
162
162
) {
163
163
element.setAttribute(name, value);
164
-
context.afterAttributeUpdated?.({ attributeName: name, previousValue, element });
164
+
context.afterAttributeUpdated?.({ element, attributeName: name, previousValue });
165
165
}
166
166
}
167
167
···
212
212
213
213
function updateProperty<N extends Node, P extends keyof N>(node: N, propertyName: P, newValue: N[P], context: Context): void {
214
214
const previousValue = node[propertyName];
215
-
if (previousValue !== newValue && (context.beforePropertyUpdated?.({ propertyName, newValue, node }) ?? true)) {
215
+
if (previousValue !== newValue && (context.beforePropertyUpdated?.({ node, propertyName, newValue }) ?? true)) {
216
216
node[propertyName] = newValue;
217
-
context.afterPropertyUpdated?.({ propertyName, previousValue, node });
217
+
context.afterPropertyUpdated?.({ node, propertyName, previousValue });
218
218
}
219
219
}
220
220