@wsxjs/wsx-core 0.0.27 → 0.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-34PNC5CJ.mjs +1307 -0
- package/dist/chunk-HWJ7GZD6.mjs +1327 -0
- package/dist/chunk-ZY36MEHX.mjs +1306 -0
- package/dist/index.js +133 -141
- package/dist/index.mjs +3 -3
- package/dist/jsx-runtime.js +131 -139
- package/dist/jsx-runtime.mjs +1 -1
- package/dist/jsx.js +131 -139
- package/dist/jsx.mjs +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/jsx-factory.ts +3 -1
- package/src/utils/dom-utils.ts +19 -0
- package/src/utils/element-creation.ts +3 -1
- package/src/utils/element-marking.ts +4 -2
- package/src/utils/element-update.ts +99 -126
- package/src/utils/update-children-helpers.ts +95 -55
- package/src/web-component.ts +6 -5
package/dist/jsx.js
CHANGED
|
@@ -85,6 +85,17 @@ function flattenChildren(children, skipHTMLDetection = false, depth = 0) {
|
|
|
85
85
|
} else {
|
|
86
86
|
result.push(child);
|
|
87
87
|
}
|
|
88
|
+
} else if (child instanceof DocumentFragment) {
|
|
89
|
+
const fragmentChildren = Array.from(child.childNodes);
|
|
90
|
+
for (const fragChild of fragmentChildren) {
|
|
91
|
+
if (fragChild instanceof HTMLElement || fragChild instanceof SVGElement) {
|
|
92
|
+
result.push(fragChild);
|
|
93
|
+
} else if (fragChild.nodeType === Node.TEXT_NODE) {
|
|
94
|
+
result.push(fragChild.textContent || "");
|
|
95
|
+
} else if (fragChild instanceof DocumentFragment) {
|
|
96
|
+
result.push(...flattenChildren([fragChild], skipHTMLDetection, depth + 1));
|
|
97
|
+
}
|
|
98
|
+
}
|
|
88
99
|
} else {
|
|
89
100
|
result.push(child);
|
|
90
101
|
}
|
|
@@ -185,7 +196,7 @@ function isCreatedByH(element) {
|
|
|
185
196
|
}
|
|
186
197
|
function shouldPreserveElement(element) {
|
|
187
198
|
if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
|
|
188
|
-
return
|
|
199
|
+
return false;
|
|
189
200
|
}
|
|
190
201
|
if (!isCreatedByH(element)) {
|
|
191
202
|
return true;
|
|
@@ -636,7 +647,9 @@ function appendChildrenToElement(element, children) {
|
|
|
636
647
|
return;
|
|
637
648
|
}
|
|
638
649
|
if (typeof child === "string" || typeof child === "number") {
|
|
639
|
-
|
|
650
|
+
const textNode = document.createTextNode(String(child));
|
|
651
|
+
textNode.__wsxManaged = true;
|
|
652
|
+
element.appendChild(textNode);
|
|
640
653
|
} else if (child instanceof HTMLElement || child instanceof SVGElement) {
|
|
641
654
|
element.appendChild(child);
|
|
642
655
|
} else if (child instanceof DocumentFragment) {
|
|
@@ -656,6 +669,9 @@ function collectPreservedElements(element) {
|
|
|
656
669
|
const preserved = [];
|
|
657
670
|
for (let i = 0; i < element.childNodes.length; i++) {
|
|
658
671
|
const child = element.childNodes[i];
|
|
672
|
+
if (child.nodeType === Node.TEXT_NODE) {
|
|
673
|
+
continue;
|
|
674
|
+
}
|
|
659
675
|
if (shouldPreserveElement(child)) {
|
|
660
676
|
preserved.push(child);
|
|
661
677
|
}
|
|
@@ -689,38 +705,40 @@ function findElementNode(oldChild, parent) {
|
|
|
689
705
|
}
|
|
690
706
|
return null;
|
|
691
707
|
}
|
|
692
|
-
function findTextNode(parent, domIndex) {
|
|
693
|
-
|
|
694
|
-
const node = parent.childNodes[
|
|
695
|
-
if (node.nodeType === Node.TEXT_NODE && node.
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
return textNode;
|
|
708
|
+
function findTextNode(parent, domIndex, processedNodes) {
|
|
709
|
+
for (let i = domIndex.value; i < parent.childNodes.length; i++) {
|
|
710
|
+
const node = parent.childNodes[i];
|
|
711
|
+
if (node.nodeType === Node.TEXT_NODE && node.__wsxManaged === true && !processedNodes.has(node)) {
|
|
712
|
+
domIndex.value = i + 1;
|
|
713
|
+
return node;
|
|
699
714
|
}
|
|
700
|
-
domIndex.value++;
|
|
701
715
|
}
|
|
702
716
|
return null;
|
|
703
717
|
}
|
|
704
|
-
function updateOrCreateTextNode(parent, oldNode, newText) {
|
|
718
|
+
function updateOrCreateTextNode(parent, oldNode, newText, insertBeforeNode) {
|
|
719
|
+
if (shouldPreserveElement(parent)) {
|
|
720
|
+
if (oldNode && oldNode.nodeType === Node.TEXT_NODE) {
|
|
721
|
+
return oldNode;
|
|
722
|
+
}
|
|
723
|
+
return document.createTextNode(newText);
|
|
724
|
+
}
|
|
705
725
|
if (oldNode && oldNode.nodeType === Node.TEXT_NODE) {
|
|
706
726
|
if (oldNode.textContent !== newText) {
|
|
707
727
|
oldNode.textContent = newText;
|
|
708
728
|
}
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
for (let i = 0; i < parent.childNodes.length; i++) {
|
|
713
|
-
const node = parent.childNodes[i];
|
|
714
|
-
if (node.nodeType === Node.TEXT_NODE && node.parentNode === parent && node.textContent === newText) {
|
|
715
|
-
return node;
|
|
716
|
-
}
|
|
729
|
+
if (insertBeforeNode !== void 0) {
|
|
730
|
+
if (oldNode !== insertBeforeNode && oldNode.nextSibling !== insertBeforeNode) {
|
|
731
|
+
parent.insertBefore(oldNode, insertBeforeNode);
|
|
717
732
|
}
|
|
718
733
|
}
|
|
734
|
+
return oldNode;
|
|
735
|
+
} else {
|
|
719
736
|
const newTextNode = document.createTextNode(newText);
|
|
737
|
+
newTextNode.__wsxManaged = true;
|
|
720
738
|
if (oldNode && !shouldPreserveElement(oldNode)) {
|
|
721
739
|
parent.replaceChild(newTextNode, oldNode);
|
|
722
740
|
} else {
|
|
723
|
-
parent.insertBefore(newTextNode,
|
|
741
|
+
parent.insertBefore(newTextNode, insertBeforeNode ?? null);
|
|
724
742
|
}
|
|
725
743
|
return newTextNode;
|
|
726
744
|
}
|
|
@@ -730,53 +748,13 @@ function removeNodeIfNotPreserved(parent, node) {
|
|
|
730
748
|
parent.removeChild(node);
|
|
731
749
|
}
|
|
732
750
|
}
|
|
733
|
-
function replaceOrInsertElement(parent, newChild, oldNode) {
|
|
734
|
-
const targetNextSibling = oldNode && shouldPreserveElement(oldNode) ? oldNode : oldNode?.nextSibling || null;
|
|
735
|
-
replaceOrInsertElementAtPosition(parent, newChild, oldNode, targetNextSibling);
|
|
736
|
-
}
|
|
737
|
-
function replaceOrInsertElementAtPosition(parent, newChild, oldNode, targetNextSibling) {
|
|
738
|
-
if (newChild.parentNode && newChild.parentNode !== parent) {
|
|
739
|
-
newChild.parentNode.removeChild(newChild);
|
|
740
|
-
}
|
|
741
|
-
const isInCorrectPosition = newChild.parentNode === parent && newChild.nextSibling === targetNextSibling;
|
|
742
|
-
if (isInCorrectPosition) {
|
|
743
|
-
return;
|
|
744
|
-
}
|
|
745
|
-
if (newChild.parentNode === parent) {
|
|
746
|
-
parent.insertBefore(newChild, targetNextSibling);
|
|
747
|
-
return;
|
|
748
|
-
}
|
|
749
|
-
if (oldNode && oldNode.parentNode === parent && !shouldPreserveElement(oldNode)) {
|
|
750
|
-
if (oldNode !== newChild) {
|
|
751
|
-
parent.replaceChild(newChild, oldNode);
|
|
752
|
-
}
|
|
753
|
-
} else {
|
|
754
|
-
if (newChild.parentNode === parent) {
|
|
755
|
-
return;
|
|
756
|
-
}
|
|
757
|
-
const newChildCacheKey = getElementCacheKey(newChild);
|
|
758
|
-
if (!newChildCacheKey) {
|
|
759
|
-
const newChildContent = newChild.textContent || "";
|
|
760
|
-
const newChildTag = newChild.tagName.toLowerCase();
|
|
761
|
-
for (let i = 0; i < parent.childNodes.length; i++) {
|
|
762
|
-
const existingNode = parent.childNodes[i];
|
|
763
|
-
if (existingNode instanceof HTMLElement || existingNode instanceof SVGElement) {
|
|
764
|
-
const existingCacheKey = getElementCacheKey(existingNode);
|
|
765
|
-
if (!existingCacheKey && existingNode.tagName.toLowerCase() === newChildTag && existingNode.textContent === newChildContent && existingNode !== newChild) {
|
|
766
|
-
return;
|
|
767
|
-
}
|
|
768
|
-
}
|
|
769
|
-
}
|
|
770
|
-
}
|
|
771
|
-
parent.insertBefore(newChild, targetNextSibling);
|
|
772
|
-
}
|
|
773
|
-
}
|
|
774
751
|
function appendNewChild(parent, child, processedNodes) {
|
|
775
752
|
if (child === null || child === void 0 || child === false) {
|
|
776
753
|
return;
|
|
777
754
|
}
|
|
778
755
|
if (typeof child === "string" || typeof child === "number") {
|
|
779
756
|
const newTextNode = document.createTextNode(String(child));
|
|
757
|
+
newTextNode.__wsxManaged = true;
|
|
780
758
|
parent.appendChild(newTextNode);
|
|
781
759
|
if (processedNodes) {
|
|
782
760
|
processedNodes.add(newTextNode);
|
|
@@ -793,6 +771,11 @@ function appendNewChild(parent, child, processedNodes) {
|
|
|
793
771
|
processedNodes.add(child);
|
|
794
772
|
}
|
|
795
773
|
} else if (child instanceof DocumentFragment) {
|
|
774
|
+
if (processedNodes) {
|
|
775
|
+
for (let i = 0; i < child.childNodes.length; i++) {
|
|
776
|
+
processedNodes.add(child.childNodes[i]);
|
|
777
|
+
}
|
|
778
|
+
}
|
|
796
779
|
parent.appendChild(child);
|
|
797
780
|
}
|
|
798
781
|
}
|
|
@@ -813,21 +796,32 @@ function buildNewChildrenMaps(flatNew) {
|
|
|
813
796
|
return { elementSet, cacheKeyMap };
|
|
814
797
|
}
|
|
815
798
|
function shouldRemoveNode(node, elementSet, cacheKeyMap, processedNodes) {
|
|
799
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
800
|
+
if (node.__wsxManaged === true) {
|
|
801
|
+
if (processedNodes && processedNodes.has(node)) {
|
|
802
|
+
return false;
|
|
803
|
+
}
|
|
804
|
+
return true;
|
|
805
|
+
}
|
|
806
|
+
const parent = node.parentNode;
|
|
807
|
+
if (parent && (parent instanceof HTMLElement || parent instanceof SVGElement)) {
|
|
808
|
+
if (shouldPreserveElement(parent)) {
|
|
809
|
+
return false;
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
return true;
|
|
813
|
+
} else {
|
|
814
|
+
if (shouldPreserveElement(node)) {
|
|
815
|
+
return false;
|
|
816
|
+
}
|
|
817
|
+
}
|
|
818
|
+
const isProcessed = processedNodes && processedNodes.has(node);
|
|
816
819
|
if (shouldPreserveElement(node)) {
|
|
817
820
|
return false;
|
|
818
821
|
}
|
|
819
|
-
if (node.nodeType === Node.TEXT_NODE &&
|
|
822
|
+
if (node.nodeType === Node.TEXT_NODE && isProcessed) {
|
|
820
823
|
return false;
|
|
821
824
|
}
|
|
822
|
-
if (node.nodeType === Node.TEXT_NODE && processedNodes) {
|
|
823
|
-
let parent = node.parentNode;
|
|
824
|
-
while (parent) {
|
|
825
|
-
if (processedNodes.has(parent) && parent.parentNode) {
|
|
826
|
-
return false;
|
|
827
|
-
}
|
|
828
|
-
parent = parent.parentNode;
|
|
829
|
-
}
|
|
830
|
-
}
|
|
831
825
|
if (node instanceof HTMLElement || node instanceof SVGElement || node instanceof DocumentFragment) {
|
|
832
826
|
if (elementSet.has(node)) {
|
|
833
827
|
return false;
|
|
@@ -869,7 +863,8 @@ function collectNodesToRemove(parent, elementSet, cacheKeyMap, processedNodes) {
|
|
|
869
863
|
const nodesToRemove = [];
|
|
870
864
|
for (let i = 0; i < parent.childNodes.length; i++) {
|
|
871
865
|
const node = parent.childNodes[i];
|
|
872
|
-
|
|
866
|
+
const removed = shouldRemoveNode(node, elementSet, cacheKeyMap, processedNodes);
|
|
867
|
+
if (removed) {
|
|
873
868
|
nodesToRemove.push(node);
|
|
874
869
|
}
|
|
875
870
|
}
|
|
@@ -1071,6 +1066,7 @@ function updateChildren(element, oldChildren, newChildren, _cacheManager) {
|
|
|
1071
1066
|
const preservedElements = collectPreservedElements(element);
|
|
1072
1067
|
const minLength = Math.min(flatOld.length, flatNew.length);
|
|
1073
1068
|
const domIndex = { value: 0 };
|
|
1069
|
+
const insertionIndex = { value: 0 };
|
|
1074
1070
|
const processedNodes = /* @__PURE__ */ new Set();
|
|
1075
1071
|
for (let i = 0; i < minLength; i++) {
|
|
1076
1072
|
const oldChild = flatOld[i];
|
|
@@ -1085,48 +1081,54 @@ function updateChildren(element, oldChildren, newChildren, _cacheManager) {
|
|
|
1085
1081
|
}
|
|
1086
1082
|
}
|
|
1087
1083
|
} else if (typeof oldChild === "string" || typeof oldChild === "number") {
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
domIndex.value =
|
|
1096
|
-
break;
|
|
1084
|
+
if (shouldPreserveElement(element)) {
|
|
1085
|
+
oldNode = null;
|
|
1086
|
+
} else {
|
|
1087
|
+
oldNode = findTextNode(element, domIndex, processedNodes);
|
|
1088
|
+
if (oldNode) {
|
|
1089
|
+
const nodeIndex = Array.from(element.childNodes).indexOf(oldNode);
|
|
1090
|
+
if (nodeIndex !== -1 && nodeIndex >= domIndex.value) {
|
|
1091
|
+
domIndex.value = nodeIndex + 1;
|
|
1097
1092
|
}
|
|
1098
1093
|
}
|
|
1099
1094
|
}
|
|
1100
1095
|
}
|
|
1101
1096
|
if (typeof oldChild === "string" || typeof oldChild === "number") {
|
|
1102
1097
|
if (typeof newChild === "string" || typeof newChild === "number") {
|
|
1103
|
-
const oldText = String(oldChild);
|
|
1104
1098
|
const newText = String(newChild);
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
processedNodes.add(node);
|
|
1119
|
-
break;
|
|
1120
|
-
}
|
|
1121
|
-
}
|
|
1122
|
-
}
|
|
1099
|
+
if (shouldPreserveElement(element)) {
|
|
1100
|
+
continue;
|
|
1101
|
+
}
|
|
1102
|
+
const insertBeforeNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
|
|
1103
|
+
const updatedNode = updateOrCreateTextNode(
|
|
1104
|
+
element,
|
|
1105
|
+
oldNode,
|
|
1106
|
+
newText,
|
|
1107
|
+
insertBeforeNode
|
|
1108
|
+
);
|
|
1109
|
+
if (updatedNode) {
|
|
1110
|
+
processedNodes.add(updatedNode);
|
|
1111
|
+
insertionIndex.value++;
|
|
1123
1112
|
}
|
|
1124
1113
|
} else {
|
|
1125
|
-
|
|
1114
|
+
const targetNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
|
|
1126
1115
|
if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
|
|
1127
|
-
|
|
1116
|
+
if (oldNode && oldNode === targetNode && oldNode.parentNode === element) {
|
|
1117
|
+
element.replaceChild(newChild, oldNode);
|
|
1118
|
+
} else {
|
|
1119
|
+
element.insertBefore(newChild, targetNode);
|
|
1120
|
+
removeNodeIfNotPreserved(element, oldNode);
|
|
1121
|
+
}
|
|
1122
|
+
processedNodes.add(newChild);
|
|
1123
|
+
insertionIndex.value++;
|
|
1128
1124
|
} else if (newChild instanceof DocumentFragment) {
|
|
1129
|
-
|
|
1125
|
+
if (processedNodes) {
|
|
1126
|
+
for (let i2 = 0; i2 < newChild.childNodes.length; i2++) {
|
|
1127
|
+
processedNodes.add(newChild.childNodes[i2]);
|
|
1128
|
+
}
|
|
1129
|
+
}
|
|
1130
|
+
element.insertBefore(newChild, targetNode);
|
|
1131
|
+
removeNodeIfNotPreserved(element, oldNode);
|
|
1130
1132
|
}
|
|
1131
1133
|
}
|
|
1132
1134
|
} else if (oldChild instanceof HTMLElement || oldChild instanceof SVGElement) {
|
|
@@ -1134,49 +1136,37 @@ function updateChildren(element, oldChildren, newChildren, _cacheManager) {
|
|
|
1134
1136
|
continue;
|
|
1135
1137
|
}
|
|
1136
1138
|
if (newChild instanceof HTMLElement || newChild instanceof SVGElement) {
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
if (prevChild instanceof HTMLElement || prevChild instanceof SVGElement) {
|
|
1142
|
-
if (prevChild.parentNode === element) {
|
|
1143
|
-
targetNextSibling = prevChild.nextSibling;
|
|
1144
|
-
foundPreviousElement = true;
|
|
1145
|
-
break;
|
|
1146
|
-
}
|
|
1139
|
+
const insertBeforeNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
|
|
1140
|
+
if (newChild === oldNode) {
|
|
1141
|
+
if (newChild.nextSibling !== insertBeforeNode) {
|
|
1142
|
+
element.insertBefore(newChild, insertBeforeNode);
|
|
1147
1143
|
}
|
|
1148
|
-
}
|
|
1149
|
-
|
|
1150
|
-
const firstChild = Array.from(element.childNodes).find(
|
|
1151
|
-
(node) => !shouldPreserveElement(node) && !processedNodes.has(node)
|
|
1152
|
-
);
|
|
1153
|
-
targetNextSibling = firstChild || null;
|
|
1154
|
-
}
|
|
1155
|
-
const isInCorrectPosition = newChild.parentNode === element && newChild.nextSibling === targetNextSibling;
|
|
1156
|
-
if (newChild === oldChild && isInCorrectPosition) {
|
|
1157
|
-
if (oldNode) processedNodes.add(oldNode);
|
|
1158
|
-
processedNodes.add(newChild);
|
|
1159
|
-
continue;
|
|
1160
|
-
}
|
|
1161
|
-
const referenceNode = oldNode && oldNode.parentNode === element ? oldNode : null;
|
|
1162
|
-
replaceOrInsertElementAtPosition(
|
|
1163
|
-
element,
|
|
1164
|
-
newChild,
|
|
1165
|
-
referenceNode,
|
|
1166
|
-
targetNextSibling
|
|
1167
|
-
);
|
|
1168
|
-
if (oldNode && oldNode !== newChild) {
|
|
1169
|
-
processedNodes.delete(oldNode);
|
|
1144
|
+
} else {
|
|
1145
|
+
element.insertBefore(newChild, insertBeforeNode);
|
|
1170
1146
|
}
|
|
1171
1147
|
processedNodes.add(newChild);
|
|
1148
|
+
insertionIndex.value++;
|
|
1172
1149
|
} else {
|
|
1173
|
-
|
|
1150
|
+
const targetNode = insertionIndex.value < element.childNodes.length ? element.childNodes[insertionIndex.value] : null;
|
|
1174
1151
|
if (typeof newChild === "string" || typeof newChild === "number") {
|
|
1175
1152
|
const newTextNode = document.createTextNode(String(newChild));
|
|
1176
|
-
|
|
1153
|
+
newTextNode.__wsxManaged = true;
|
|
1154
|
+
if (oldNode && oldNode === targetNode && oldNode.parentNode === element) {
|
|
1155
|
+
element.replaceChild(newTextNode, oldNode);
|
|
1156
|
+
} else {
|
|
1157
|
+
element.insertBefore(newTextNode, targetNode);
|
|
1158
|
+
removeNodeIfNotPreserved(element, oldNode);
|
|
1159
|
+
}
|
|
1177
1160
|
processedNodes.add(newTextNode);
|
|
1161
|
+
insertionIndex.value++;
|
|
1178
1162
|
} else if (newChild instanceof DocumentFragment) {
|
|
1179
|
-
|
|
1163
|
+
if (processedNodes) {
|
|
1164
|
+
for (let i2 = 0; i2 < newChild.childNodes.length; i2++) {
|
|
1165
|
+
processedNodes.add(newChild.childNodes[i2]);
|
|
1166
|
+
}
|
|
1167
|
+
}
|
|
1168
|
+
element.insertBefore(newChild, targetNode);
|
|
1169
|
+
removeNodeIfNotPreserved(element, oldNode);
|
|
1180
1170
|
}
|
|
1181
1171
|
}
|
|
1182
1172
|
}
|
|
@@ -1298,7 +1288,9 @@ function Fragment(_props, children) {
|
|
|
1298
1288
|
return;
|
|
1299
1289
|
}
|
|
1300
1290
|
if (typeof child === "string" || typeof child === "number") {
|
|
1301
|
-
|
|
1291
|
+
const textNode = document.createTextNode(String(child));
|
|
1292
|
+
textNode.__wsxManaged = true;
|
|
1293
|
+
fragment.appendChild(textNode);
|
|
1302
1294
|
} else if (child instanceof HTMLElement || child instanceof SVGElement) {
|
|
1303
1295
|
fragment.appendChild(child);
|
|
1304
1296
|
} else if (child instanceof DocumentFragment) {
|