Precise DOM morphing
morphing
typescript
dom
Run attribute updated callbacks when removing an attribute
+14
-4
+1
-1
dist/morphlex.d.ts
+1
-1
dist/morphlex.d.ts
+6
-1
dist/morphlex.js
+6
-1
dist/morphlex.js
···
49
49
}
50
50
function morphAttributes(element, ref, context) {
51
51
// Remove any excess attributes from the element that aren’t present in the reference.
52
-
for (const { name } of element.attributes) ref.hasAttribute(name) || element.removeAttribute(name);
52
+
for (const { name, value } of element.attributes) {
53
+
if (!ref.hasAttribute(name) && (context.beforeAttributeUpdated?.({ attributeName: name, newValue: null, element }) ?? true)) {
54
+
element.removeAttribute(name);
55
+
context.afterAttributeUpdated?.({ attributeName: name, previousValue: value, element });
56
+
}
57
+
}
53
58
// Copy attributes from the reference to the element, if they don’t already match.
54
59
for (const { name, value } of ref.attributes) {
55
60
const previousValue = element.getAttribute(name);
+7
-2
src/morphlex.ts
+7
-2
src/morphlex.ts
···
47
47
element,
48
48
}: {
49
49
attributeName: string;
50
-
newValue: string;
50
+
newValue: string | null;
51
51
element: Element;
52
52
}) => boolean;
53
53
···
146
146
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
-
for (const { name } of element.attributes) ref.hasAttribute(name) || element.removeAttribute(name);
149
+
for (const { name, value } of element.attributes) {
150
+
if (!ref.hasAttribute(name) && (context.beforeAttributeUpdated?.({ attributeName: name, newValue: null, element }) ?? true)) {
151
+
element.removeAttribute(name);
152
+
context.afterAttributeUpdated?.({ attributeName: name, previousValue: value, element });
153
+
}
154
+
}
150
155
151
156
// Copy attributes from the reference to the element, if they don’t already match.
152
157
for (const { name, value } of ref.attributes) {