All files / src/virtual-dom patchNode.ts

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
 
 
 
 
 
11x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { VirtualNode } from "./interfaces";
//import createNode from "./dom/createNode";
// import removeNode from "./dom/removeNode";
// import setAttribute from "./dom/setAttribute";
 
export default function patchNode(newVNode: VirtualNode, oldVNode: VirtualNode, container: Node | Document): void {
 
    
 
    
 
    // if (newVNode.tag === oldVNode.tag) { // Check if the attributes and children changed
 
    //     // if (newVNode.tag === null) { // It is a fragment virtual node
 
    //     //     newVNode.$node = new DocumentFragment();
 
    //     //     newVNode.children.forEach(child => {
                
    //     //         newVNode.$node.appendChild(child.$node);
    //     //     });
 
    //     //     (container as any).innerHTML = '';
 
    //     //     container.appendChild(newVNode.$node);
    //     // }
    //     // else {
 
    //     //     throw 'Not implemented';
    //     // }
 
    //     // patchAttributes(element as HTMLElement, newVNode.attributes || {}, oldVNode.attributes || {});
 
    //     // patchChildren(element, newVNode.children, oldVNode.children);
    // }
    // else { // Different tags, replace the element
 
    //     const element = oldVNode.$node;
 
    //     const newElement = createNode(newVNode);
 
    //     element.parentNode.replaceChild(newElement, element);
    // }
}
 
// function patchAttributes(element: HTMLElement, newAttributes: Record<string, any> = {}, oldAttributes: Record<string, any> = {}) {
 
//     const mergedAttributes = Object.assign({}, oldAttributes, newAttributes);
 
//     for (const [key, value] of Object.entries(mergedAttributes)) {
 
//         if (newAttributes[key] === undefined) { // Remove the members that are not in the new attributes
 
//             element.removeAttribute(key);
//         }
//         else if (oldAttributes[key] !== value) { // Update the value
 
//             setAttribute(element, key, value);
//         }
//     }
// }
 
// function patchChildren(element: Node, newChildren: any[] = [], oldChildren: any[] = []) {
 
//     newChildren.forEach((newChild, i) => {
 
//         patchNode(newChild, oldChildren[i], element.childNodes[i])
//     });
 
//     const newChildrenLength = newChildren.length;
 
//     // Remove the remaining children if any
//     for (let i = oldChildren.length - 1; i >= newChildrenLength; --i) {
 
//         removeNode(oldChildren[i]);
//     }
// }