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