Precise DOM morphing
morphing typescript dom
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improve callback interfaces

+28 -28
+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
··· 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
··· 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