jails-js 6.7.2 → 6.9.0
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/index.js +511 -741
- package/dist/index.js.map +1 -1
- package/dist/jails.js +1 -1
- package/dist/jails.js.map +1 -1
- package/package.json +2 -2
- package/readme.md +1 -1
- package/src/component.ts +40 -18
- package/src/template-system.ts +1 -1
- package/types.d.ts +3 -1
package/dist/index.js
CHANGED
|
@@ -14,785 +14,536 @@ var __spreadValues = (a, b) => {
|
|
|
14
14
|
}
|
|
15
15
|
return a;
|
|
16
16
|
};
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return Math.random().toString(36).substring(2, 9);
|
|
28
|
-
};
|
|
29
|
-
const dup = (o) => {
|
|
30
|
-
return JSON.parse(JSON.stringify(o));
|
|
31
|
-
};
|
|
32
|
-
const safe = (execute, val) => {
|
|
33
|
-
try {
|
|
34
|
-
const value = execute();
|
|
35
|
-
return value !== void 0 && value !== null ? value : val || "";
|
|
36
|
-
} catch (err) {
|
|
37
|
-
return val || "";
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
var Idiomorph = (function() {
|
|
41
|
-
const noOp = () => {
|
|
42
|
-
};
|
|
43
|
-
const defaults = {
|
|
44
|
-
morphStyle: "outerHTML",
|
|
45
|
-
callbacks: {
|
|
46
|
-
beforeNodeAdded: noOp,
|
|
47
|
-
afterNodeAdded: noOp,
|
|
48
|
-
beforeNodeMorphed: noOp,
|
|
49
|
-
afterNodeMorphed: noOp,
|
|
50
|
-
beforeNodeRemoved: noOp,
|
|
51
|
-
afterNodeRemoved: noOp,
|
|
52
|
-
beforeAttributeUpdated: noOp
|
|
53
|
-
},
|
|
54
|
-
head: {
|
|
55
|
-
style: "merge",
|
|
56
|
-
shouldPreserve: (elt) => elt.getAttribute("im-preserve") === "true",
|
|
57
|
-
shouldReAppend: (elt) => elt.getAttribute("im-re-append") === "true",
|
|
58
|
-
shouldRemove: noOp,
|
|
59
|
-
afterHeadMorphed: noOp
|
|
60
|
-
},
|
|
61
|
-
restoreFocus: true
|
|
62
|
-
};
|
|
63
|
-
function morph(oldNode, newContent, config2 = {}) {
|
|
64
|
-
oldNode = normalizeElement(oldNode);
|
|
65
|
-
const newNode = normalizeParent(newContent);
|
|
66
|
-
const ctx = createMorphContext(oldNode, newNode, config2);
|
|
67
|
-
const morphedNodes = saveAndRestoreFocus(ctx, () => {
|
|
68
|
-
return withHeadBlocking(
|
|
69
|
-
ctx,
|
|
70
|
-
oldNode,
|
|
71
|
-
newNode,
|
|
72
|
-
/** @param {MorphContext} ctx */
|
|
73
|
-
(ctx2) => {
|
|
74
|
-
if (ctx2.morphStyle === "innerHTML") {
|
|
75
|
-
morphChildren(ctx2, oldNode, newNode);
|
|
76
|
-
return Array.from(oldNode.childNodes);
|
|
77
|
-
} else {
|
|
78
|
-
return morphOuterHTML(ctx2, oldNode, newNode);
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
);
|
|
82
|
-
});
|
|
83
|
-
ctx.pantry.remove();
|
|
84
|
-
return morphedNodes;
|
|
85
|
-
}
|
|
86
|
-
function morphOuterHTML(ctx, oldNode, newNode) {
|
|
87
|
-
const oldParent = normalizeParent(oldNode);
|
|
88
|
-
morphChildren(
|
|
89
|
-
ctx,
|
|
90
|
-
oldParent,
|
|
91
|
-
newNode,
|
|
92
|
-
// these two optional params are the secret sauce
|
|
93
|
-
oldNode,
|
|
94
|
-
// start point for iteration
|
|
95
|
-
oldNode.nextSibling
|
|
96
|
-
// end point for iteration
|
|
97
|
-
);
|
|
98
|
-
return Array.from(oldParent.childNodes);
|
|
17
|
+
var DOCUMENT_FRAGMENT_NODE = 11;
|
|
18
|
+
function morphAttrs(fromNode, toNode) {
|
|
19
|
+
var toNodeAttrs = toNode.attributes;
|
|
20
|
+
var attr;
|
|
21
|
+
var attrName;
|
|
22
|
+
var attrNamespaceURI;
|
|
23
|
+
var attrValue;
|
|
24
|
+
var fromValue;
|
|
25
|
+
if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE || fromNode.nodeType === DOCUMENT_FRAGMENT_NODE) {
|
|
26
|
+
return;
|
|
99
27
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
28
|
+
for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
|
|
29
|
+
attr = toNodeAttrs[i];
|
|
30
|
+
attrName = attr.name;
|
|
31
|
+
attrNamespaceURI = attr.namespaceURI;
|
|
32
|
+
attrValue = attr.value;
|
|
33
|
+
if (attrNamespaceURI) {
|
|
34
|
+
attrName = attr.localName || attrName;
|
|
35
|
+
fromValue = fromNode.getAttributeNS(attrNamespaceURI, attrName);
|
|
36
|
+
if (fromValue !== attrValue) {
|
|
37
|
+
if (attr.prefix === "xmlns") {
|
|
38
|
+
attrName = attr.name;
|
|
39
|
+
}
|
|
40
|
+
fromNode.setAttributeNS(attrNamespaceURI, attrName, attrValue);
|
|
41
|
+
}
|
|
42
|
+
} else {
|
|
43
|
+
fromValue = fromNode.getAttribute(attrName);
|
|
44
|
+
if (fromValue !== attrValue) {
|
|
45
|
+
fromNode.setAttribute(attrName, attrValue);
|
|
46
|
+
}
|
|
109
47
|
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
48
|
+
}
|
|
49
|
+
var fromNodeAttrs = fromNode.attributes;
|
|
50
|
+
for (var d = fromNodeAttrs.length - 1; d >= 0; d--) {
|
|
51
|
+
attr = fromNodeAttrs[d];
|
|
52
|
+
attrName = attr.name;
|
|
53
|
+
attrNamespaceURI = attr.namespaceURI;
|
|
54
|
+
if (attrNamespaceURI) {
|
|
55
|
+
attrName = attr.localName || attrName;
|
|
56
|
+
if (!toNode.hasAttributeNS(attrNamespaceURI, attrName)) {
|
|
57
|
+
fromNode.removeAttributeNS(attrNamespaceURI, attrName);
|
|
58
|
+
}
|
|
59
|
+
} else {
|
|
60
|
+
if (!toNode.hasAttribute(attrName)) {
|
|
61
|
+
fromNode.removeAttribute(attrName);
|
|
62
|
+
}
|
|
115
63
|
}
|
|
116
|
-
|
|
117
|
-
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
var range;
|
|
67
|
+
var NS_XHTML = "http://www.w3.org/1999/xhtml";
|
|
68
|
+
var doc = typeof document === "undefined" ? void 0 : document;
|
|
69
|
+
var HAS_TEMPLATE_SUPPORT = !!doc && "content" in doc.createElement("template");
|
|
70
|
+
var HAS_RANGE_SUPPORT = !!doc && doc.createRange && "createContextualFragment" in doc.createRange();
|
|
71
|
+
function createFragmentFromTemplate(str) {
|
|
72
|
+
var template2 = doc.createElement("template");
|
|
73
|
+
template2.innerHTML = str;
|
|
74
|
+
return template2.content.childNodes[0];
|
|
75
|
+
}
|
|
76
|
+
function createFragmentFromRange(str) {
|
|
77
|
+
if (!range) {
|
|
78
|
+
range = doc.createRange();
|
|
79
|
+
range.selectNode(doc.body);
|
|
80
|
+
}
|
|
81
|
+
var fragment = range.createContextualFragment(str);
|
|
82
|
+
return fragment.childNodes[0];
|
|
83
|
+
}
|
|
84
|
+
function createFragmentFromWrap(str) {
|
|
85
|
+
var fragment = doc.createElement("body");
|
|
86
|
+
fragment.innerHTML = str;
|
|
87
|
+
return fragment.childNodes[0];
|
|
88
|
+
}
|
|
89
|
+
function toElement(str) {
|
|
90
|
+
str = str.trim();
|
|
91
|
+
if (HAS_TEMPLATE_SUPPORT) {
|
|
92
|
+
return createFragmentFromTemplate(str);
|
|
93
|
+
} else if (HAS_RANGE_SUPPORT) {
|
|
94
|
+
return createFragmentFromRange(str);
|
|
95
|
+
}
|
|
96
|
+
return createFragmentFromWrap(str);
|
|
97
|
+
}
|
|
98
|
+
function compareNodeNames(fromEl, toEl) {
|
|
99
|
+
var fromNodeName = fromEl.nodeName;
|
|
100
|
+
var toNodeName = toEl.nodeName;
|
|
101
|
+
var fromCodeStart, toCodeStart;
|
|
102
|
+
if (fromNodeName === toNodeName) {
|
|
103
|
+
return true;
|
|
104
|
+
}
|
|
105
|
+
fromCodeStart = fromNodeName.charCodeAt(0);
|
|
106
|
+
toCodeStart = toNodeName.charCodeAt(0);
|
|
107
|
+
if (fromCodeStart <= 90 && toCodeStart >= 97) {
|
|
108
|
+
return fromNodeName === toNodeName.toUpperCase();
|
|
109
|
+
} else if (toCodeStart <= 90 && fromCodeStart >= 97) {
|
|
110
|
+
return toNodeName === fromNodeName.toUpperCase();
|
|
111
|
+
} else {
|
|
112
|
+
return false;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
function createElementNS(name, namespaceURI) {
|
|
116
|
+
return !namespaceURI || namespaceURI === NS_XHTML ? doc.createElement(name) : doc.createElementNS(namespaceURI, name);
|
|
117
|
+
}
|
|
118
|
+
function moveChildren(fromEl, toEl) {
|
|
119
|
+
var curChild = fromEl.firstChild;
|
|
120
|
+
while (curChild) {
|
|
121
|
+
var nextChild = curChild.nextSibling;
|
|
122
|
+
toEl.appendChild(curChild);
|
|
123
|
+
curChild = nextChild;
|
|
124
|
+
}
|
|
125
|
+
return toEl;
|
|
126
|
+
}
|
|
127
|
+
function syncBooleanAttrProp(fromEl, toEl, name) {
|
|
128
|
+
if (fromEl[name] !== toEl[name]) {
|
|
129
|
+
fromEl[name] = toEl[name];
|
|
130
|
+
if (fromEl[name]) {
|
|
131
|
+
fromEl.setAttribute(name, "");
|
|
132
|
+
} else {
|
|
133
|
+
fromEl.removeAttribute(name);
|
|
118
134
|
}
|
|
119
|
-
return results;
|
|
120
135
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
136
|
+
}
|
|
137
|
+
var specialElHandlers = {
|
|
138
|
+
OPTION: function(fromEl, toEl) {
|
|
139
|
+
var parentNode = fromEl.parentNode;
|
|
140
|
+
if (parentNode) {
|
|
141
|
+
var parentName = parentNode.nodeName.toUpperCase();
|
|
142
|
+
if (parentName === "OPTGROUP") {
|
|
143
|
+
parentNode = parentNode.parentNode;
|
|
144
|
+
parentName = parentNode && parentNode.nodeName.toUpperCase();
|
|
145
|
+
}
|
|
146
|
+
if (parentName === "SELECT" && !parentNode.hasAttribute("multiple")) {
|
|
147
|
+
if (fromEl.hasAttribute("selected") && !toEl.selected) {
|
|
148
|
+
fromEl.setAttribute("selected", "selected");
|
|
149
|
+
fromEl.removeAttribute("selected");
|
|
150
|
+
}
|
|
151
|
+
parentNode.selectedIndex = -1;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
syncBooleanAttrProp(fromEl, toEl, "selected");
|
|
155
|
+
},
|
|
156
|
+
/**
|
|
157
|
+
* The "value" attribute is special for the <input> element since it sets
|
|
158
|
+
* the initial value. Changing the "value" attribute without changing the
|
|
159
|
+
* "value" property will have no effect since it is only used to the set the
|
|
160
|
+
* initial value. Similar for the "checked" attribute, and "disabled".
|
|
161
|
+
*/
|
|
162
|
+
INPUT: function(fromEl, toEl) {
|
|
163
|
+
syncBooleanAttrProp(fromEl, toEl, "checked");
|
|
164
|
+
syncBooleanAttrProp(fromEl, toEl, "disabled");
|
|
165
|
+
if (fromEl.value !== toEl.value) {
|
|
166
|
+
fromEl.value = toEl.value;
|
|
167
|
+
}
|
|
168
|
+
if (!toEl.hasAttribute("value")) {
|
|
169
|
+
fromEl.removeAttribute("value");
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
TEXTAREA: function(fromEl, toEl) {
|
|
173
|
+
var newValue = toEl.value;
|
|
174
|
+
if (fromEl.value !== newValue) {
|
|
175
|
+
fromEl.value = newValue;
|
|
176
|
+
}
|
|
177
|
+
var firstChild = fromEl.firstChild;
|
|
178
|
+
if (firstChild) {
|
|
179
|
+
var oldValue = firstChild.nodeValue;
|
|
180
|
+
if (oldValue == newValue || !newValue && oldValue == fromEl.placeholder) {
|
|
181
|
+
return;
|
|
126
182
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
183
|
+
firstChild.nodeValue = newValue;
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
SELECT: function(fromEl, toEl) {
|
|
187
|
+
if (!toEl.hasAttribute("multiple")) {
|
|
188
|
+
var selectedIndex = -1;
|
|
189
|
+
var i = 0;
|
|
190
|
+
var curChild = fromEl.firstChild;
|
|
191
|
+
var optgroup;
|
|
192
|
+
var nodeName;
|
|
193
|
+
while (curChild) {
|
|
194
|
+
nodeName = curChild.nodeName && curChild.nodeName.toUpperCase();
|
|
195
|
+
if (nodeName === "OPTGROUP") {
|
|
196
|
+
optgroup = curChild;
|
|
197
|
+
curChild = optgroup.firstChild;
|
|
198
|
+
if (!curChild) {
|
|
199
|
+
curChild = optgroup.nextSibling;
|
|
200
|
+
optgroup = null;
|
|
201
|
+
}
|
|
202
|
+
} else {
|
|
203
|
+
if (nodeName === "OPTION") {
|
|
204
|
+
if (curChild.hasAttribute("selected")) {
|
|
205
|
+
selectedIndex = i;
|
|
206
|
+
break;
|
|
139
207
|
}
|
|
140
|
-
|
|
141
|
-
insertionPoint = bestMatch.nextSibling;
|
|
142
|
-
continue;
|
|
208
|
+
i++;
|
|
143
209
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
newChild.getAttribute("id")
|
|
149
|
-
);
|
|
150
|
-
if (ctx.persistentIds.has(newChildId)) {
|
|
151
|
-
const movedChild = moveBeforeById(
|
|
152
|
-
oldParent,
|
|
153
|
-
newChildId,
|
|
154
|
-
insertionPoint,
|
|
155
|
-
ctx
|
|
156
|
-
);
|
|
157
|
-
morphNode(movedChild, newChild, ctx);
|
|
158
|
-
insertionPoint = movedChild.nextSibling;
|
|
159
|
-
continue;
|
|
210
|
+
curChild = curChild.nextSibling;
|
|
211
|
+
if (!curChild && optgroup) {
|
|
212
|
+
curChild = optgroup.nextSibling;
|
|
213
|
+
optgroup = null;
|
|
160
214
|
}
|
|
161
215
|
}
|
|
162
|
-
const insertedNode = createNode(
|
|
163
|
-
oldParent,
|
|
164
|
-
newChild,
|
|
165
|
-
insertionPoint,
|
|
166
|
-
ctx
|
|
167
|
-
);
|
|
168
|
-
if (insertedNode) {
|
|
169
|
-
insertionPoint = insertedNode.nextSibling;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
while (insertionPoint && insertionPoint != endPoint) {
|
|
173
|
-
const tempNode = insertionPoint;
|
|
174
|
-
insertionPoint = insertionPoint.nextSibling;
|
|
175
|
-
removeNode(ctx, tempNode);
|
|
176
216
|
}
|
|
217
|
+
fromEl.selectedIndex = selectedIndex;
|
|
177
218
|
}
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
219
|
+
}
|
|
220
|
+
};
|
|
221
|
+
var ELEMENT_NODE = 1;
|
|
222
|
+
var DOCUMENT_FRAGMENT_NODE$1 = 11;
|
|
223
|
+
var TEXT_NODE = 3;
|
|
224
|
+
var COMMENT_NODE = 8;
|
|
225
|
+
function noop() {
|
|
226
|
+
}
|
|
227
|
+
function defaultGetNodeKey(node) {
|
|
228
|
+
if (node) {
|
|
229
|
+
return node.getAttribute && node.getAttribute("id") || node.id;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
function morphdomFactory(morphAttrs2) {
|
|
233
|
+
return function morphdom2(fromNode, toNode, options) {
|
|
234
|
+
if (!options) {
|
|
235
|
+
options = {};
|
|
236
|
+
}
|
|
237
|
+
if (typeof toNode === "string") {
|
|
238
|
+
if (fromNode.nodeName === "#document" || fromNode.nodeName === "HTML" || fromNode.nodeName === "BODY") {
|
|
239
|
+
var toNodeHtml = toNode;
|
|
240
|
+
toNode = doc.createElement("html");
|
|
241
|
+
toNode.innerHTML = toNodeHtml;
|
|
189
242
|
} else {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
243
|
+
toNode = toElement(toNode);
|
|
244
|
+
}
|
|
245
|
+
} else if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE$1) {
|
|
246
|
+
toNode = toNode.firstElementChild;
|
|
247
|
+
}
|
|
248
|
+
var getNodeKey = options.getNodeKey || defaultGetNodeKey;
|
|
249
|
+
var onBeforeNodeAdded = options.onBeforeNodeAdded || noop;
|
|
250
|
+
var onNodeAdded = options.onNodeAdded || noop;
|
|
251
|
+
var onBeforeElUpdated = options.onBeforeElUpdated || noop;
|
|
252
|
+
var onElUpdated = options.onElUpdated || noop;
|
|
253
|
+
var onBeforeNodeDiscarded = options.onBeforeNodeDiscarded || noop;
|
|
254
|
+
var onNodeDiscarded = options.onNodeDiscarded || noop;
|
|
255
|
+
var onBeforeElChildrenUpdated = options.onBeforeElChildrenUpdated || noop;
|
|
256
|
+
var skipFromChildren = options.skipFromChildren || noop;
|
|
257
|
+
var addChild = options.addChild || function(parent, child) {
|
|
258
|
+
return parent.appendChild(child);
|
|
259
|
+
};
|
|
260
|
+
var childrenOnly = options.childrenOnly === true;
|
|
261
|
+
var fromNodesLookup = /* @__PURE__ */ Object.create(null);
|
|
262
|
+
var keyedRemovalList = [];
|
|
263
|
+
function addKeyedRemoval(key) {
|
|
264
|
+
keyedRemovalList.push(key);
|
|
265
|
+
}
|
|
266
|
+
function walkDiscardedChildNodes(node, skipKeyedNodes) {
|
|
267
|
+
if (node.nodeType === ELEMENT_NODE) {
|
|
268
|
+
var curChild = node.firstChild;
|
|
269
|
+
while (curChild) {
|
|
270
|
+
var key = void 0;
|
|
271
|
+
if (skipKeyedNodes && (key = getNodeKey(curChild))) {
|
|
272
|
+
addKeyedRemoval(key);
|
|
273
|
+
} else {
|
|
274
|
+
onNodeDiscarded(curChild);
|
|
275
|
+
if (curChild.firstChild) {
|
|
276
|
+
walkDiscardedChildNodes(curChild, skipKeyedNodes);
|
|
218
277
|
}
|
|
219
278
|
}
|
|
220
|
-
|
|
221
|
-
cursor = cursor.nextSibling;
|
|
222
|
-
}
|
|
223
|
-
return softMatch || null;
|
|
224
|
-
}
|
|
225
|
-
function isIdSetMatch(ctx, oldNode, newNode) {
|
|
226
|
-
let oldSet = ctx.idMap.get(oldNode);
|
|
227
|
-
let newSet = ctx.idMap.get(newNode);
|
|
228
|
-
if (!newSet || !oldSet) return false;
|
|
229
|
-
for (const id of oldSet) {
|
|
230
|
-
if (newSet.has(id)) {
|
|
231
|
-
return true;
|
|
232
|
-
}
|
|
279
|
+
curChild = curChild.nextSibling;
|
|
233
280
|
}
|
|
234
|
-
return false;
|
|
235
|
-
}
|
|
236
|
-
function isSoftMatch(oldNode, newNode) {
|
|
237
|
-
var _a, _b, _c;
|
|
238
|
-
const oldElt = (
|
|
239
|
-
/** @type {Element} */
|
|
240
|
-
oldNode
|
|
241
|
-
);
|
|
242
|
-
const newElt = (
|
|
243
|
-
/** @type {Element} */
|
|
244
|
-
newNode
|
|
245
|
-
);
|
|
246
|
-
return oldElt.nodeType === newElt.nodeType && oldElt.tagName === newElt.tagName && // If oldElt has an `id` with possible state and it doesn't match newElt.id then avoid morphing.
|
|
247
|
-
// We'll still match an anonymous node with an IDed newElt, though, because if it got this far,
|
|
248
|
-
// its not persistent, and new nodes can't have any hidden state.
|
|
249
|
-
// We can't use .id because of form input shadowing, and we can't count on .getAttribute's presence because it could be a document-fragment
|
|
250
|
-
(!((_a = oldElt.getAttribute) == null ? void 0 : _a.call(oldElt, "id")) || ((_b = oldElt.getAttribute) == null ? void 0 : _b.call(oldElt, "id")) === ((_c = newElt.getAttribute) == null ? void 0 : _c.call(newElt, "id")));
|
|
251
|
-
}
|
|
252
|
-
return findBestMatch2;
|
|
253
|
-
})();
|
|
254
|
-
function removeNode(ctx, node) {
|
|
255
|
-
var _a;
|
|
256
|
-
if (ctx.idMap.has(node)) {
|
|
257
|
-
moveBefore(ctx.pantry, node, null);
|
|
258
|
-
} else {
|
|
259
|
-
if (ctx.callbacks.beforeNodeRemoved(node) === false) return;
|
|
260
|
-
(_a = node.parentNode) == null ? void 0 : _a.removeChild(node);
|
|
261
|
-
ctx.callbacks.afterNodeRemoved(node);
|
|
262
281
|
}
|
|
263
282
|
}
|
|
264
|
-
function
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
let tempNode = (
|
|
268
|
-
/** @type {Node} */
|
|
269
|
-
cursor
|
|
270
|
-
);
|
|
271
|
-
cursor = cursor.nextSibling;
|
|
272
|
-
removeNode(ctx, tempNode);
|
|
283
|
+
function removeNode(node, parentNode, skipKeyedNodes) {
|
|
284
|
+
if (onBeforeNodeDiscarded(node) === false) {
|
|
285
|
+
return;
|
|
273
286
|
}
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
/** @type {Element} - will always be found */
|
|
280
|
-
// ctx.target.id unsafe because of form input shadowing
|
|
281
|
-
// ctx.target could be a document fragment which doesn't have `getAttribute`
|
|
282
|
-
((_b = (_a = ctx.target).getAttribute) == null ? void 0 : _b.call(_a, "id")) === id && ctx.target || ctx.target.querySelector(`[id="${id}"]`) || ctx.pantry.querySelector(`[id="${id}"]`)
|
|
283
|
-
);
|
|
284
|
-
removeElementFromAncestorsIdMaps(target, ctx);
|
|
285
|
-
moveBefore(parentNode, target, after);
|
|
286
|
-
return target;
|
|
287
|
+
if (parentNode) {
|
|
288
|
+
parentNode.removeChild(node);
|
|
289
|
+
}
|
|
290
|
+
onNodeDiscarded(node);
|
|
291
|
+
walkDiscardedChildNodes(node, skipKeyedNodes);
|
|
287
292
|
}
|
|
288
|
-
function
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
if (idSet) {
|
|
296
|
-
idSet.delete(id);
|
|
297
|
-
if (!idSet.size) {
|
|
298
|
-
ctx.idMap.delete(element);
|
|
293
|
+
function indexTree(node) {
|
|
294
|
+
if (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE$1) {
|
|
295
|
+
var curChild = node.firstChild;
|
|
296
|
+
while (curChild) {
|
|
297
|
+
var key = getNodeKey(curChild);
|
|
298
|
+
if (key) {
|
|
299
|
+
fromNodesLookup[key] = curChild;
|
|
299
300
|
}
|
|
301
|
+
indexTree(curChild);
|
|
302
|
+
curChild = curChild.nextSibling;
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
indexTree(fromNode);
|
|
307
|
+
function handleNodeAdded(el) {
|
|
308
|
+
onNodeAdded(el);
|
|
309
|
+
var curChild = el.firstChild;
|
|
310
|
+
while (curChild) {
|
|
311
|
+
var nextSibling = curChild.nextSibling;
|
|
312
|
+
var key = getNodeKey(curChild);
|
|
313
|
+
if (key) {
|
|
314
|
+
var unmatchedFromEl = fromNodesLookup[key];
|
|
315
|
+
if (unmatchedFromEl && compareNodeNames(curChild, unmatchedFromEl)) {
|
|
316
|
+
curChild.parentNode.replaceChild(unmatchedFromEl, curChild);
|
|
317
|
+
morphEl(unmatchedFromEl, curChild);
|
|
318
|
+
} else {
|
|
319
|
+
handleNodeAdded(curChild);
|
|
320
|
+
}
|
|
321
|
+
} else {
|
|
322
|
+
handleNodeAdded(curChild);
|
|
300
323
|
}
|
|
324
|
+
curChild = nextSibling;
|
|
301
325
|
}
|
|
302
326
|
}
|
|
303
|
-
function
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
327
|
+
function cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey) {
|
|
328
|
+
while (curFromNodeChild) {
|
|
329
|
+
var fromNextSibling = curFromNodeChild.nextSibling;
|
|
330
|
+
if (curFromNodeKey = getNodeKey(curFromNodeChild)) {
|
|
331
|
+
addKeyedRemoval(curFromNodeKey);
|
|
332
|
+
} else {
|
|
333
|
+
removeNode(
|
|
334
|
+
curFromNodeChild,
|
|
335
|
+
fromEl,
|
|
336
|
+
true
|
|
337
|
+
/* skip keyed nodes */
|
|
338
|
+
);
|
|
309
339
|
}
|
|
310
|
-
|
|
311
|
-
parentNode.insertBefore(element, after);
|
|
340
|
+
curFromNodeChild = fromNextSibling;
|
|
312
341
|
}
|
|
313
342
|
}
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
if (ctx.ignoreActive && oldNode === document.activeElement) {
|
|
319
|
-
return null;
|
|
343
|
+
function morphEl(fromEl, toEl, childrenOnly2) {
|
|
344
|
+
var toElKey = getNodeKey(toEl);
|
|
345
|
+
if (toElKey) {
|
|
346
|
+
delete fromNodesLookup[toElKey];
|
|
320
347
|
}
|
|
321
|
-
if (
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
)
|
|
332
|
-
|
|
333
|
-
morphAttributes(oldNode, newContent, ctx);
|
|
334
|
-
if (!ignoreValueOfActiveElement(oldNode, ctx)) {
|
|
335
|
-
morphChildren(ctx, oldNode, newContent);
|
|
348
|
+
if (!childrenOnly2) {
|
|
349
|
+
var beforeUpdateResult = onBeforeElUpdated(fromEl, toEl);
|
|
350
|
+
if (beforeUpdateResult === false) {
|
|
351
|
+
return;
|
|
352
|
+
} else if (beforeUpdateResult instanceof HTMLElement) {
|
|
353
|
+
fromEl = beforeUpdateResult;
|
|
354
|
+
indexTree(fromEl);
|
|
355
|
+
}
|
|
356
|
+
morphAttrs2(fromEl, toEl);
|
|
357
|
+
onElUpdated(fromEl);
|
|
358
|
+
if (onBeforeElChildrenUpdated(fromEl, toEl) === false) {
|
|
359
|
+
return;
|
|
336
360
|
}
|
|
337
361
|
}
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
if (
|
|
359
|
-
|
|
362
|
+
if (fromEl.nodeName !== "TEXTAREA") {
|
|
363
|
+
morphChildren(fromEl, toEl);
|
|
364
|
+
} else {
|
|
365
|
+
specialElHandlers.TEXTAREA(fromEl, toEl);
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
function morphChildren(fromEl, toEl) {
|
|
369
|
+
var skipFrom = skipFromChildren(fromEl, toEl);
|
|
370
|
+
var curToNodeChild = toEl.firstChild;
|
|
371
|
+
var curFromNodeChild = fromEl.firstChild;
|
|
372
|
+
var curToNodeKey;
|
|
373
|
+
var curFromNodeKey;
|
|
374
|
+
var fromNextSibling;
|
|
375
|
+
var toNextSibling;
|
|
376
|
+
var matchingFromEl;
|
|
377
|
+
outer: while (curToNodeChild) {
|
|
378
|
+
toNextSibling = curToNodeChild.nextSibling;
|
|
379
|
+
curToNodeKey = getNodeKey(curToNodeChild);
|
|
380
|
+
while (!skipFrom && curFromNodeChild) {
|
|
381
|
+
fromNextSibling = curFromNodeChild.nextSibling;
|
|
382
|
+
if (curToNodeChild.isSameNode && curToNodeChild.isSameNode(curFromNodeChild)) {
|
|
383
|
+
curToNodeChild = toNextSibling;
|
|
384
|
+
curFromNodeChild = fromNextSibling;
|
|
385
|
+
continue outer;
|
|
360
386
|
}
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
if (
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
387
|
+
curFromNodeKey = getNodeKey(curFromNodeChild);
|
|
388
|
+
var curFromNodeType = curFromNodeChild.nodeType;
|
|
389
|
+
var isCompatible = void 0;
|
|
390
|
+
if (curFromNodeType === curToNodeChild.nodeType) {
|
|
391
|
+
if (curFromNodeType === ELEMENT_NODE) {
|
|
392
|
+
if (curToNodeKey) {
|
|
393
|
+
if (curToNodeKey !== curFromNodeKey) {
|
|
394
|
+
if (matchingFromEl = fromNodesLookup[curToNodeKey]) {
|
|
395
|
+
if (fromNextSibling === matchingFromEl) {
|
|
396
|
+
isCompatible = false;
|
|
397
|
+
} else {
|
|
398
|
+
fromEl.insertBefore(matchingFromEl, curFromNodeChild);
|
|
399
|
+
if (curFromNodeKey) {
|
|
400
|
+
addKeyedRemoval(curFromNodeKey);
|
|
401
|
+
} else {
|
|
402
|
+
removeNode(
|
|
403
|
+
curFromNodeChild,
|
|
404
|
+
fromEl,
|
|
405
|
+
true
|
|
406
|
+
/* skip keyed nodes */
|
|
407
|
+
);
|
|
408
|
+
}
|
|
409
|
+
curFromNodeChild = matchingFromEl;
|
|
410
|
+
curFromNodeKey = getNodeKey(curFromNodeChild);
|
|
411
|
+
}
|
|
412
|
+
} else {
|
|
413
|
+
isCompatible = false;
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
} else if (curFromNodeKey) {
|
|
417
|
+
isCompatible = false;
|
|
418
|
+
}
|
|
419
|
+
isCompatible = isCompatible !== false && compareNodeNames(curFromNodeChild, curToNodeChild);
|
|
420
|
+
if (isCompatible) {
|
|
421
|
+
morphEl(curFromNodeChild, curToNodeChild);
|
|
422
|
+
}
|
|
423
|
+
} else if (curFromNodeType === TEXT_NODE || curFromNodeType == COMMENT_NODE) {
|
|
424
|
+
isCompatible = true;
|
|
425
|
+
if (curFromNodeChild.nodeValue !== curToNodeChild.nodeValue) {
|
|
426
|
+
curFromNodeChild.nodeValue = curToNodeChild.nodeValue;
|
|
427
|
+
}
|
|
368
428
|
}
|
|
369
|
-
oldElt.removeAttribute(oldAttribute.name);
|
|
370
429
|
}
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
}
|
|
376
|
-
if (type === 8 || type === 3) {
|
|
377
|
-
if (oldNode.nodeValue !== newNode.nodeValue) {
|
|
378
|
-
oldNode.nodeValue = newNode.nodeValue;
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
function syncInputValue(oldElement, newElement, ctx) {
|
|
383
|
-
if (oldElement instanceof HTMLInputElement && newElement instanceof HTMLInputElement && newElement.type !== "file") {
|
|
384
|
-
let newValue = newElement.value;
|
|
385
|
-
let oldValue = oldElement.value;
|
|
386
|
-
syncBooleanAttribute(oldElement, newElement, "checked", ctx);
|
|
387
|
-
syncBooleanAttribute(oldElement, newElement, "disabled", ctx);
|
|
388
|
-
if (!newElement.hasAttribute("value")) {
|
|
389
|
-
if (!ignoreAttribute("value", oldElement, "remove", ctx)) {
|
|
390
|
-
oldElement.value = "";
|
|
391
|
-
oldElement.removeAttribute("value");
|
|
430
|
+
if (isCompatible) {
|
|
431
|
+
curToNodeChild = toNextSibling;
|
|
432
|
+
curFromNodeChild = fromNextSibling;
|
|
433
|
+
continue outer;
|
|
392
434
|
}
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
435
|
+
if (curFromNodeKey) {
|
|
436
|
+
addKeyedRemoval(curFromNodeKey);
|
|
437
|
+
} else {
|
|
438
|
+
removeNode(
|
|
439
|
+
curFromNodeChild,
|
|
440
|
+
fromEl,
|
|
441
|
+
true
|
|
442
|
+
/* skip keyed nodes */
|
|
443
|
+
);
|
|
397
444
|
}
|
|
445
|
+
curFromNodeChild = fromNextSibling;
|
|
398
446
|
}
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
let newValue = newElement.value;
|
|
403
|
-
let oldValue = oldElement.value;
|
|
404
|
-
if (ignoreAttribute("value", oldElement, "update", ctx)) {
|
|
405
|
-
return;
|
|
406
|
-
}
|
|
407
|
-
if (newValue !== oldValue) {
|
|
408
|
-
oldElement.value = newValue;
|
|
409
|
-
}
|
|
410
|
-
if (oldElement.firstChild && oldElement.firstChild.nodeValue !== newValue) {
|
|
411
|
-
oldElement.firstChild.nodeValue = newValue;
|
|
412
|
-
}
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
function syncBooleanAttribute(oldElement, newElement, attributeName, ctx) {
|
|
416
|
-
const newLiveValue = newElement[attributeName], oldLiveValue = oldElement[attributeName];
|
|
417
|
-
if (newLiveValue !== oldLiveValue) {
|
|
418
|
-
const ignoreUpdate = ignoreAttribute(
|
|
419
|
-
attributeName,
|
|
420
|
-
oldElement,
|
|
421
|
-
"update",
|
|
422
|
-
ctx
|
|
423
|
-
);
|
|
424
|
-
if (!ignoreUpdate) {
|
|
425
|
-
oldElement[attributeName] = newElement[attributeName];
|
|
426
|
-
}
|
|
427
|
-
if (newLiveValue) {
|
|
428
|
-
if (!ignoreUpdate) {
|
|
429
|
-
oldElement.setAttribute(attributeName, "");
|
|
447
|
+
if (curToNodeKey && (matchingFromEl = fromNodesLookup[curToNodeKey]) && compareNodeNames(matchingFromEl, curToNodeChild)) {
|
|
448
|
+
if (!skipFrom) {
|
|
449
|
+
addChild(fromEl, matchingFromEl);
|
|
430
450
|
}
|
|
451
|
+
morphEl(matchingFromEl, curToNodeChild);
|
|
431
452
|
} else {
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
function ignoreAttribute(attr, element, updateType, ctx) {
|
|
439
|
-
if (attr === "value" && ctx.ignoreActiveValue && element === document.activeElement) {
|
|
440
|
-
return true;
|
|
441
|
-
}
|
|
442
|
-
return ctx.callbacks.beforeAttributeUpdated(attr, element, updateType) === false;
|
|
443
|
-
}
|
|
444
|
-
function ignoreValueOfActiveElement(possibleActiveElement, ctx) {
|
|
445
|
-
return !!ctx.ignoreActiveValue && possibleActiveElement === document.activeElement && possibleActiveElement !== document.body;
|
|
446
|
-
}
|
|
447
|
-
return morphNode2;
|
|
448
|
-
})();
|
|
449
|
-
function withHeadBlocking(ctx, oldNode, newNode, callback) {
|
|
450
|
-
if (ctx.head.block) {
|
|
451
|
-
const oldHead = oldNode.querySelector("head");
|
|
452
|
-
const newHead = newNode.querySelector("head");
|
|
453
|
-
if (oldHead && newHead) {
|
|
454
|
-
const promises = handleHeadElement(oldHead, newHead, ctx);
|
|
455
|
-
return Promise.all(promises).then(() => {
|
|
456
|
-
const newCtx = Object.assign(ctx, {
|
|
457
|
-
head: {
|
|
458
|
-
block: false,
|
|
459
|
-
ignore: true
|
|
453
|
+
var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild);
|
|
454
|
+
if (onBeforeNodeAddedResult !== false) {
|
|
455
|
+
if (onBeforeNodeAddedResult) {
|
|
456
|
+
curToNodeChild = onBeforeNodeAddedResult;
|
|
460
457
|
}
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
return callback(ctx);
|
|
467
|
-
}
|
|
468
|
-
function handleHeadElement(oldHead, newHead, ctx) {
|
|
469
|
-
let added = [];
|
|
470
|
-
let removed = [];
|
|
471
|
-
let preserved = [];
|
|
472
|
-
let nodesToAppend = [];
|
|
473
|
-
let srcToNewHeadNodes = /* @__PURE__ */ new Map();
|
|
474
|
-
for (const newHeadChild of newHead.children) {
|
|
475
|
-
srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild);
|
|
476
|
-
}
|
|
477
|
-
for (const currentHeadElt of oldHead.children) {
|
|
478
|
-
let inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML);
|
|
479
|
-
let isReAppended = ctx.head.shouldReAppend(currentHeadElt);
|
|
480
|
-
let isPreserved = ctx.head.shouldPreserve(currentHeadElt);
|
|
481
|
-
if (inNewContent || isPreserved) {
|
|
482
|
-
if (isReAppended) {
|
|
483
|
-
removed.push(currentHeadElt);
|
|
484
|
-
} else {
|
|
485
|
-
srcToNewHeadNodes.delete(currentHeadElt.outerHTML);
|
|
486
|
-
preserved.push(currentHeadElt);
|
|
487
|
-
}
|
|
488
|
-
} else {
|
|
489
|
-
if (ctx.head.style === "append") {
|
|
490
|
-
if (isReAppended) {
|
|
491
|
-
removed.push(currentHeadElt);
|
|
492
|
-
nodesToAppend.push(currentHeadElt);
|
|
493
|
-
}
|
|
494
|
-
} else {
|
|
495
|
-
if (ctx.head.shouldRemove(currentHeadElt) !== false) {
|
|
496
|
-
removed.push(currentHeadElt);
|
|
458
|
+
if (curToNodeChild.actualize) {
|
|
459
|
+
curToNodeChild = curToNodeChild.actualize(fromEl.ownerDocument || doc);
|
|
460
|
+
}
|
|
461
|
+
addChild(fromEl, curToNodeChild);
|
|
462
|
+
handleNodeAdded(curToNodeChild);
|
|
497
463
|
}
|
|
498
464
|
}
|
|
465
|
+
curToNodeChild = toNextSibling;
|
|
466
|
+
curFromNodeChild = fromNextSibling;
|
|
499
467
|
}
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
let newElt = (
|
|
505
|
-
/** @type {ChildNode} */
|
|
506
|
-
document.createRange().createContextualFragment(newNode.outerHTML).firstChild
|
|
507
|
-
);
|
|
508
|
-
if (ctx.callbacks.beforeNodeAdded(newElt) !== false) {
|
|
509
|
-
if ("href" in newElt && newElt.href || "src" in newElt && newElt.src) {
|
|
510
|
-
let resolve;
|
|
511
|
-
let promise = new Promise(function(_resolve) {
|
|
512
|
-
resolve = _resolve;
|
|
513
|
-
});
|
|
514
|
-
newElt.addEventListener("load", function() {
|
|
515
|
-
resolve();
|
|
516
|
-
});
|
|
517
|
-
promises.push(promise);
|
|
518
|
-
}
|
|
519
|
-
oldHead.appendChild(newElt);
|
|
520
|
-
ctx.callbacks.afterNodeAdded(newElt);
|
|
521
|
-
added.push(newElt);
|
|
522
|
-
}
|
|
523
|
-
}
|
|
524
|
-
for (const removedElement of removed) {
|
|
525
|
-
if (ctx.callbacks.beforeNodeRemoved(removedElement) !== false) {
|
|
526
|
-
oldHead.removeChild(removedElement);
|
|
527
|
-
ctx.callbacks.afterNodeRemoved(removedElement);
|
|
528
|
-
}
|
|
529
|
-
}
|
|
530
|
-
ctx.head.afterHeadMorphed(oldHead, {
|
|
531
|
-
added,
|
|
532
|
-
kept: preserved,
|
|
533
|
-
removed
|
|
534
|
-
});
|
|
535
|
-
return promises;
|
|
536
|
-
}
|
|
537
|
-
const createMorphContext = /* @__PURE__ */ (function() {
|
|
538
|
-
function createMorphContext2(oldNode, newContent, config2) {
|
|
539
|
-
const { persistentIds, idMap } = createIdMaps(oldNode, newContent);
|
|
540
|
-
const mergedConfig = mergeDefaults(config2);
|
|
541
|
-
const morphStyle = mergedConfig.morphStyle || "outerHTML";
|
|
542
|
-
if (!["innerHTML", "outerHTML"].includes(morphStyle)) {
|
|
543
|
-
throw `Do not understand how to morph style ${morphStyle}`;
|
|
544
|
-
}
|
|
545
|
-
return {
|
|
546
|
-
target: oldNode,
|
|
547
|
-
newContent,
|
|
548
|
-
config: mergedConfig,
|
|
549
|
-
morphStyle,
|
|
550
|
-
ignoreActive: mergedConfig.ignoreActive,
|
|
551
|
-
ignoreActiveValue: mergedConfig.ignoreActiveValue,
|
|
552
|
-
restoreFocus: mergedConfig.restoreFocus,
|
|
553
|
-
idMap,
|
|
554
|
-
persistentIds,
|
|
555
|
-
pantry: createPantry(),
|
|
556
|
-
activeElementAndParents: createActiveElementAndParents(oldNode),
|
|
557
|
-
callbacks: mergedConfig.callbacks,
|
|
558
|
-
head: mergedConfig.head
|
|
559
|
-
};
|
|
560
|
-
}
|
|
561
|
-
function mergeDefaults(config2) {
|
|
562
|
-
let finalConfig = Object.assign({}, defaults);
|
|
563
|
-
Object.assign(finalConfig, config2);
|
|
564
|
-
finalConfig.callbacks = Object.assign(
|
|
565
|
-
{},
|
|
566
|
-
defaults.callbacks,
|
|
567
|
-
config2.callbacks
|
|
568
|
-
);
|
|
569
|
-
finalConfig.head = Object.assign({}, defaults.head, config2.head);
|
|
570
|
-
return finalConfig;
|
|
571
|
-
}
|
|
572
|
-
function createPantry() {
|
|
573
|
-
const pantry = document.createElement("div");
|
|
574
|
-
pantry.hidden = true;
|
|
575
|
-
document.body.insertAdjacentElement("afterend", pantry);
|
|
576
|
-
return pantry;
|
|
577
|
-
}
|
|
578
|
-
function createActiveElementAndParents(oldNode) {
|
|
579
|
-
let activeElementAndParents = [];
|
|
580
|
-
let elt = document.activeElement;
|
|
581
|
-
if ((elt == null ? void 0 : elt.tagName) !== "BODY" && oldNode.contains(elt)) {
|
|
582
|
-
while (elt) {
|
|
583
|
-
activeElementAndParents.push(elt);
|
|
584
|
-
if (elt === oldNode) break;
|
|
585
|
-
elt = elt.parentElement;
|
|
586
|
-
}
|
|
587
|
-
}
|
|
588
|
-
return activeElementAndParents;
|
|
589
|
-
}
|
|
590
|
-
function findIdElements(root) {
|
|
591
|
-
var _a;
|
|
592
|
-
let elements = Array.from(root.querySelectorAll("[id]"));
|
|
593
|
-
if ((_a = root.getAttribute) == null ? void 0 : _a.call(root, "id")) {
|
|
594
|
-
elements.push(root);
|
|
468
|
+
cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey);
|
|
469
|
+
var specialElHandler = specialElHandlers[fromEl.nodeName];
|
|
470
|
+
if (specialElHandler) {
|
|
471
|
+
specialElHandler(fromEl, toEl);
|
|
595
472
|
}
|
|
596
|
-
return elements;
|
|
597
473
|
}
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
)
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
let idSet = idMap.get(current);
|
|
608
|
-
if (idSet == null) {
|
|
609
|
-
idSet = /* @__PURE__ */ new Set();
|
|
610
|
-
idMap.set(current, idSet);
|
|
611
|
-
}
|
|
612
|
-
idSet.add(id);
|
|
613
|
-
if (current === root) break;
|
|
614
|
-
current = current.parentElement;
|
|
474
|
+
var morphedNode = fromNode;
|
|
475
|
+
var morphedNodeType = morphedNode.nodeType;
|
|
476
|
+
var toNodeType = toNode.nodeType;
|
|
477
|
+
if (!childrenOnly) {
|
|
478
|
+
if (morphedNodeType === ELEMENT_NODE) {
|
|
479
|
+
if (toNodeType === ELEMENT_NODE) {
|
|
480
|
+
if (!compareNodeNames(fromNode, toNode)) {
|
|
481
|
+
onNodeDiscarded(fromNode);
|
|
482
|
+
morphedNode = moveChildren(fromNode, createElementNS(toNode.nodeName, toNode.namespaceURI));
|
|
615
483
|
}
|
|
616
|
-
}
|
|
617
|
-
}
|
|
618
|
-
}
|
|
619
|
-
function createIdMaps(oldContent, newContent) {
|
|
620
|
-
const oldIdElements = findIdElements(oldContent);
|
|
621
|
-
const newIdElements = findIdElements(newContent);
|
|
622
|
-
const persistentIds = createPersistentIds(oldIdElements, newIdElements);
|
|
623
|
-
let idMap = /* @__PURE__ */ new Map();
|
|
624
|
-
populateIdMapWithTree(idMap, persistentIds, oldContent, oldIdElements);
|
|
625
|
-
const newRoot = newContent.__idiomorphRoot || newContent;
|
|
626
|
-
populateIdMapWithTree(idMap, persistentIds, newRoot, newIdElements);
|
|
627
|
-
return { persistentIds, idMap };
|
|
628
|
-
}
|
|
629
|
-
function createPersistentIds(oldIdElements, newIdElements) {
|
|
630
|
-
let duplicateIds = /* @__PURE__ */ new Set();
|
|
631
|
-
let oldIdTagNameMap = /* @__PURE__ */ new Map();
|
|
632
|
-
for (const { id, tagName } of oldIdElements) {
|
|
633
|
-
if (oldIdTagNameMap.has(id)) {
|
|
634
|
-
duplicateIds.add(id);
|
|
635
484
|
} else {
|
|
636
|
-
|
|
637
|
-
}
|
|
638
|
-
}
|
|
639
|
-
let persistentIds = /* @__PURE__ */ new Set();
|
|
640
|
-
for (const { id, tagName } of newIdElements) {
|
|
641
|
-
if (persistentIds.has(id)) {
|
|
642
|
-
duplicateIds.add(id);
|
|
643
|
-
} else if (oldIdTagNameMap.get(id) === tagName) {
|
|
644
|
-
persistentIds.add(id);
|
|
485
|
+
morphedNode = toNode;
|
|
645
486
|
}
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
return createMorphContext2;
|
|
653
|
-
})();
|
|
654
|
-
const { normalizeElement, normalizeParent } = /* @__PURE__ */ (function() {
|
|
655
|
-
const generatedByIdiomorph = /* @__PURE__ */ new WeakSet();
|
|
656
|
-
function normalizeElement2(content) {
|
|
657
|
-
if (content instanceof Document) {
|
|
658
|
-
return content.documentElement;
|
|
659
|
-
} else {
|
|
660
|
-
return content;
|
|
661
|
-
}
|
|
662
|
-
}
|
|
663
|
-
function normalizeParent2(newContent) {
|
|
664
|
-
if (newContent == null) {
|
|
665
|
-
return document.createElement("div");
|
|
666
|
-
} else if (typeof newContent === "string") {
|
|
667
|
-
return normalizeParent2(parseContent(newContent));
|
|
668
|
-
} else if (generatedByIdiomorph.has(
|
|
669
|
-
/** @type {Element} */
|
|
670
|
-
newContent
|
|
671
|
-
)) {
|
|
672
|
-
return (
|
|
673
|
-
/** @type {Element} */
|
|
674
|
-
newContent
|
|
675
|
-
);
|
|
676
|
-
} else if (newContent instanceof Node) {
|
|
677
|
-
if (newContent.parentNode) {
|
|
678
|
-
return (
|
|
679
|
-
/** @type {any} */
|
|
680
|
-
new SlicedParentNode(newContent)
|
|
681
|
-
);
|
|
487
|
+
} else if (morphedNodeType === TEXT_NODE || morphedNodeType === COMMENT_NODE) {
|
|
488
|
+
if (toNodeType === morphedNodeType) {
|
|
489
|
+
if (morphedNode.nodeValue !== toNode.nodeValue) {
|
|
490
|
+
morphedNode.nodeValue = toNode.nodeValue;
|
|
491
|
+
}
|
|
492
|
+
return morphedNode;
|
|
682
493
|
} else {
|
|
683
|
-
|
|
684
|
-
dummyParent.append(newContent);
|
|
685
|
-
return dummyParent;
|
|
686
|
-
}
|
|
687
|
-
} else {
|
|
688
|
-
const dummyParent = document.createElement("div");
|
|
689
|
-
for (const elt of [...newContent]) {
|
|
690
|
-
dummyParent.append(elt);
|
|
494
|
+
morphedNode = toNode;
|
|
691
495
|
}
|
|
692
|
-
return dummyParent;
|
|
693
496
|
}
|
|
694
497
|
}
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
node.parentNode;
|
|
701
|
-
this.previousSibling = node.previousSibling;
|
|
702
|
-
this.nextSibling = node.nextSibling;
|
|
498
|
+
if (morphedNode === toNode) {
|
|
499
|
+
onNodeDiscarded(fromNode);
|
|
500
|
+
} else {
|
|
501
|
+
if (toNode.isSameNode && toNode.isSameNode(morphedNode)) {
|
|
502
|
+
return;
|
|
703
503
|
}
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
504
|
+
morphEl(morphedNode, toNode, childrenOnly);
|
|
505
|
+
if (keyedRemovalList) {
|
|
506
|
+
for (var i = 0, len = keyedRemovalList.length; i < len; i++) {
|
|
507
|
+
var elToRemove = fromNodesLookup[keyedRemovalList[i]];
|
|
508
|
+
if (elToRemove) {
|
|
509
|
+
removeNode(elToRemove, elToRemove.parentNode, false);
|
|
510
|
+
}
|
|
711
511
|
}
|
|
712
|
-
return nodes;
|
|
713
|
-
}
|
|
714
|
-
/**
|
|
715
|
-
* @param {string} selector
|
|
716
|
-
* @returns {Element[]}
|
|
717
|
-
*/
|
|
718
|
-
querySelectorAll(selector) {
|
|
719
|
-
return this.childNodes.reduce(
|
|
720
|
-
(results, node) => {
|
|
721
|
-
if (node instanceof Element) {
|
|
722
|
-
if (node.matches(selector)) results.push(node);
|
|
723
|
-
const nodeList = node.querySelectorAll(selector);
|
|
724
|
-
for (let i = 0; i < nodeList.length; i++) {
|
|
725
|
-
results.push(nodeList[i]);
|
|
726
|
-
}
|
|
727
|
-
}
|
|
728
|
-
return results;
|
|
729
|
-
},
|
|
730
|
-
/** @type {Element[]} */
|
|
731
|
-
[]
|
|
732
|
-
);
|
|
733
|
-
}
|
|
734
|
-
/**
|
|
735
|
-
* @param {Node} node
|
|
736
|
-
* @param {Node} referenceNode
|
|
737
|
-
* @returns {Node}
|
|
738
|
-
*/
|
|
739
|
-
insertBefore(node, referenceNode) {
|
|
740
|
-
return this.realParentNode.insertBefore(node, referenceNode);
|
|
741
|
-
}
|
|
742
|
-
/**
|
|
743
|
-
* @param {Node} node
|
|
744
|
-
* @param {Node} referenceNode
|
|
745
|
-
* @returns {Node}
|
|
746
|
-
*/
|
|
747
|
-
moveBefore(node, referenceNode) {
|
|
748
|
-
return this.realParentNode.moveBefore(node, referenceNode);
|
|
749
|
-
}
|
|
750
|
-
/**
|
|
751
|
-
* for later use with populateIdMapWithTree to halt upwards iteration
|
|
752
|
-
* @returns {Node}
|
|
753
|
-
*/
|
|
754
|
-
get __idiomorphRoot() {
|
|
755
|
-
return this.originalNode;
|
|
756
512
|
}
|
|
757
513
|
}
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,
|
|
762
|
-
""
|
|
763
|
-
);
|
|
764
|
-
if (contentWithSvgsRemoved.match(/<\/html>/) || contentWithSvgsRemoved.match(/<\/head>/) || contentWithSvgsRemoved.match(/<\/body>/)) {
|
|
765
|
-
let content = parser.parseFromString(newContent, "text/html");
|
|
766
|
-
if (contentWithSvgsRemoved.match(/<\/html>/)) {
|
|
767
|
-
generatedByIdiomorph.add(content);
|
|
768
|
-
return content;
|
|
769
|
-
} else {
|
|
770
|
-
let htmlElement = content.firstChild;
|
|
771
|
-
if (htmlElement) {
|
|
772
|
-
generatedByIdiomorph.add(htmlElement);
|
|
773
|
-
}
|
|
774
|
-
return htmlElement;
|
|
775
|
-
}
|
|
776
|
-
} else {
|
|
777
|
-
let responseDoc = parser.parseFromString(
|
|
778
|
-
"<body><template>" + newContent + "</template></body>",
|
|
779
|
-
"text/html"
|
|
780
|
-
);
|
|
781
|
-
let content = (
|
|
782
|
-
/** @type {HTMLTemplateElement} */
|
|
783
|
-
responseDoc.body.querySelector("template").content
|
|
784
|
-
);
|
|
785
|
-
generatedByIdiomorph.add(content);
|
|
786
|
-
return content;
|
|
514
|
+
if (!childrenOnly && morphedNode !== fromNode && fromNode.parentNode) {
|
|
515
|
+
if (morphedNode.actualize) {
|
|
516
|
+
morphedNode = morphedNode.actualize(fromNode.ownerDocument || doc);
|
|
787
517
|
}
|
|
518
|
+
fromNode.parentNode.replaceChild(morphedNode, fromNode);
|
|
788
519
|
}
|
|
789
|
-
return
|
|
790
|
-
})();
|
|
791
|
-
return {
|
|
792
|
-
morph,
|
|
793
|
-
defaults
|
|
520
|
+
return morphedNode;
|
|
794
521
|
};
|
|
795
|
-
}
|
|
522
|
+
}
|
|
523
|
+
var morphdom = morphdomFactory(morphAttrs);
|
|
524
|
+
let textarea;
|
|
525
|
+
const g = {
|
|
526
|
+
scope: {}
|
|
527
|
+
};
|
|
528
|
+
const decodeHTML = (text) => {
|
|
529
|
+
textarea = textarea || document.createElement("textarea");
|
|
530
|
+
textarea.innerHTML = text;
|
|
531
|
+
return textarea.value;
|
|
532
|
+
};
|
|
533
|
+
const uuid = () => {
|
|
534
|
+
return Math.random().toString(36).substring(2, 9);
|
|
535
|
+
};
|
|
536
|
+
const dup = (o) => {
|
|
537
|
+
return JSON.parse(JSON.stringify(o));
|
|
538
|
+
};
|
|
539
|
+
const safe = (execute, val) => {
|
|
540
|
+
try {
|
|
541
|
+
const value = execute();
|
|
542
|
+
return value !== void 0 && value !== null ? value : val || "";
|
|
543
|
+
} catch (err) {
|
|
544
|
+
return val || "";
|
|
545
|
+
}
|
|
546
|
+
};
|
|
796
547
|
const topics = {};
|
|
797
548
|
const _async = {};
|
|
798
549
|
const publish = (name, params) => {
|
|
@@ -848,6 +599,18 @@ const Component = ({ name, module, dependencies, node, templates: templates2, si
|
|
|
848
599
|
return effect;
|
|
849
600
|
}
|
|
850
601
|
},
|
|
602
|
+
query(selector) {
|
|
603
|
+
const nodes = Array.from(document.querySelectorAll(selector));
|
|
604
|
+
return nodes.map((node2) => {
|
|
605
|
+
return new Promise((resolve, reject) => {
|
|
606
|
+
if (document.body.contains(node2)) {
|
|
607
|
+
node2.addEventListener(":mount", () => resolve(node2));
|
|
608
|
+
} else {
|
|
609
|
+
reject(node2);
|
|
610
|
+
}
|
|
611
|
+
});
|
|
612
|
+
});
|
|
613
|
+
},
|
|
851
614
|
/**
|
|
852
615
|
* @State
|
|
853
616
|
*/
|
|
@@ -974,7 +737,7 @@ const Component = ({ name, module, dependencies, node, templates: templates2, si
|
|
|
974
737
|
node.removeEventListener(ev, callback.handler);
|
|
975
738
|
}
|
|
976
739
|
},
|
|
977
|
-
trigger(ev, selectorOrCallback, data) {
|
|
740
|
+
trigger(ev, selectorOrCallback, data = {}) {
|
|
978
741
|
if (selectorOrCallback.constructor === String) {
|
|
979
742
|
Array.from(node.querySelectorAll(selectorOrCallback)).forEach((children) => {
|
|
980
743
|
children.dispatchEvent(new CustomEvent(ev, { bubbles: true, detail: { args: data } }));
|
|
@@ -994,7 +757,7 @@ const Component = ({ name, module, dependencies, node, templates: templates2, si
|
|
|
994
757
|
const clone = element.cloneNode();
|
|
995
758
|
const html = html_ ? html_ : target;
|
|
996
759
|
clone.innerHTML = html;
|
|
997
|
-
|
|
760
|
+
morphdom(element, clone);
|
|
998
761
|
}
|
|
999
762
|
};
|
|
1000
763
|
const render = (data, callback = (() => {
|
|
@@ -1002,7 +765,7 @@ const Component = ({ name, module, dependencies, node, templates: templates2, si
|
|
|
1002
765
|
clearTimeout(tick);
|
|
1003
766
|
tick = setTimeout(() => {
|
|
1004
767
|
const html = tpl.render.call(__spreadValues(__spreadValues({}, data), view(data)), node, safe, g);
|
|
1005
|
-
|
|
768
|
+
morphdom(node, html, morphOptions(node, register2));
|
|
1006
769
|
Promise.resolve().then(() => {
|
|
1007
770
|
node.querySelectorAll("[tplid]").forEach((element) => {
|
|
1008
771
|
const child = register2.get(element);
|
|
@@ -1032,26 +795,33 @@ const Component = ({ name, module, dependencies, node, templates: templates2, si
|
|
|
1032
795
|
register2.set(node, base);
|
|
1033
796
|
return module.default(base);
|
|
1034
797
|
};
|
|
1035
|
-
const
|
|
1036
|
-
|
|
1037
|
-
|
|
798
|
+
const morphOptions = (parent, register2, data) => {
|
|
799
|
+
return {
|
|
800
|
+
getNodeKey(node) {
|
|
1038
801
|
if (node.nodeType === 1) {
|
|
1039
|
-
|
|
1040
|
-
return false;
|
|
1041
|
-
}
|
|
1042
|
-
if (register2.get(node) && node !== parent) {
|
|
1043
|
-
const scopeid = newnode.getAttribute("html-scopeid");
|
|
1044
|
-
const scope = g.scope[scopeid];
|
|
1045
|
-
const base = register2.get(node);
|
|
1046
|
-
base.__scope__ = scope;
|
|
1047
|
-
return false;
|
|
1048
|
-
}
|
|
802
|
+
return node.id || node.getAttribute("key");
|
|
1049
803
|
}
|
|
804
|
+
},
|
|
805
|
+
onBeforeElUpdated: update(parent, register2),
|
|
806
|
+
onBeforeChildElUpdated: update(parent, register2)
|
|
807
|
+
};
|
|
808
|
+
};
|
|
809
|
+
const update = (parent, register2, data) => (node, newnode) => {
|
|
810
|
+
if (node.nodeType === 1) {
|
|
811
|
+
if ("html-static" in node.attributes) {
|
|
812
|
+
return false;
|
|
813
|
+
}
|
|
814
|
+
if (register2.get(node) && node !== parent) {
|
|
815
|
+
const scopeid = newnode.getAttribute("html-scopeid");
|
|
816
|
+
const scope = g.scope[scopeid];
|
|
817
|
+
const base = register2.get(node);
|
|
818
|
+
base.__scope__ = scope;
|
|
819
|
+
return false;
|
|
1050
820
|
}
|
|
1051
821
|
}
|
|
1052
|
-
}
|
|
822
|
+
};
|
|
1053
823
|
const register$1 = /* @__PURE__ */ new WeakMap();
|
|
1054
|
-
const Element
|
|
824
|
+
const Element = ({ component, templates: templates2, start: start2 }) => {
|
|
1055
825
|
const { name, module, dependencies } = component;
|
|
1056
826
|
return class extends HTMLElement {
|
|
1057
827
|
constructor() {
|
|
@@ -1134,7 +904,7 @@ const tagElements = (target, keys, components) => {
|
|
|
1134
904
|
};
|
|
1135
905
|
const transformAttributes = (html) => {
|
|
1136
906
|
return html.replace(/jails___scope-id/g, "%%_=$scopeid_%%").replace(tagExpr(), "%%_=$1_%%").replace(booleanAttrs, `%%_if(safe(function(){ return $2 })){_%%$1%%_}_%%`).replace(htmlAttr, (all, key, value) => {
|
|
1137
|
-
if (["
|
|
907
|
+
if (["model", "scopeid"].includes(key)) return all;
|
|
1138
908
|
if (value) {
|
|
1139
909
|
value = value.replace(/^{|}$/g, "");
|
|
1140
910
|
return `${key}="%%_=safe(function(){ return ${value} })_%%"`;
|
|
@@ -1235,7 +1005,7 @@ const start = (target) => {
|
|
|
1235
1005
|
const templates2 = template(target, { components });
|
|
1236
1006
|
Object.values(components).forEach(({ name, module, dependencies }) => {
|
|
1237
1007
|
if (!customElements.get(name)) {
|
|
1238
|
-
customElements.define(name, Element
|
|
1008
|
+
customElements.define(name, Element({ component: { name, module, dependencies }, templates: templates2, start }));
|
|
1239
1009
|
}
|
|
1240
1010
|
});
|
|
1241
1011
|
};
|