maquette 3.4.1 → 3.5.2
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/README.md +3 -3
- package/dist/cache.d.ts +1 -1
- package/dist/cache.js +1 -1
- package/dist/cache.js.map +1 -1
- package/dist/dom.d.ts +1 -1
- package/dist/dom.js +5 -5
- package/dist/dom.js.map +1 -1
- package/dist/h.d.ts +1 -1
- package/dist/h.js +9 -10
- package/dist/h.js.map +1 -1
- package/dist/index.d.ts +6 -6
- package/dist/index.js +12 -5
- package/dist/index.js.map +1 -1
- package/dist/interfaces.d.ts +10 -8
- package/dist/interfaces.js +1 -0
- package/dist/interfaces.js.map +1 -1
- package/dist/mapping.d.ts +1 -1
- package/dist/mapping.js +1 -1
- package/dist/mapping.js.map +1 -1
- package/dist/maquette.cjs.js +139 -104
- package/dist/maquette.umd.js +142 -107
- package/dist/maquette.umd.min.js +1 -1
- package/dist/projection.d.ts +1 -1
- package/dist/projection.js +106 -73
- package/dist/projection.js.map +1 -1
- package/dist/projector.d.ts +1 -1
- package/dist/projector.js +19 -16
- package/dist/projector.js.map +1 -1
- package/dist/utilities/window-performance-projector-logger.d.ts +1 -1
- package/dist/utilities/window-performance-projector-logger.js +8 -8
- package/dist/utilities/window-performance-projector-logger.js.map +1 -1
- package/package.json +17 -15
package/dist/maquette.cjs.js
CHANGED
|
@@ -2,11 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
var NAMESPACE_SVG = NAMESPACE_W3 + "2000/svg";
|
|
9
|
-
var NAMESPACE_XLINK = NAMESPACE_W3 + "1999/xlink";
|
|
5
|
+
var NAMESPACE_W3 = "http://www.w3.org/";
|
|
6
|
+
var NAMESPACE_SVG = "".concat(NAMESPACE_W3, "2000/svg");
|
|
7
|
+
var NAMESPACE_XLINK = "".concat(NAMESPACE_W3, "1999/xlink");
|
|
10
8
|
var emptyArray = [];
|
|
11
9
|
var extend = function (base, overrides) {
|
|
12
10
|
var result = {};
|
|
@@ -33,12 +31,12 @@ var same = function (vnode1, vnode2) {
|
|
|
33
31
|
return !vnode1.properties && !vnode2.properties;
|
|
34
32
|
};
|
|
35
33
|
var checkStyleValue = function (styleValue) {
|
|
36
|
-
if (typeof styleValue !==
|
|
37
|
-
throw new Error(
|
|
34
|
+
if (typeof styleValue !== "string") {
|
|
35
|
+
throw new Error("Style values must be strings");
|
|
38
36
|
}
|
|
39
37
|
};
|
|
40
38
|
var findIndexOfChild = function (children, sameAs, start) {
|
|
41
|
-
if (sameAs.vnodeSelector !==
|
|
39
|
+
if (sameAs.vnodeSelector !== "") {
|
|
42
40
|
// Never scan for text-nodes
|
|
43
41
|
for (var i = start; i < children.length; i++) {
|
|
44
42
|
if (same(children[i], sameAs)) {
|
|
@@ -50,17 +48,26 @@ var findIndexOfChild = function (children, sameAs, start) {
|
|
|
50
48
|
};
|
|
51
49
|
var checkDistinguishable = function (childNodes, indexToCheck, parentVNode, operation) {
|
|
52
50
|
var childNode = childNodes[indexToCheck];
|
|
53
|
-
if (childNode.vnodeSelector ===
|
|
51
|
+
if (childNode.vnodeSelector === "") {
|
|
54
52
|
return; // Text nodes need not be distinguishable
|
|
55
53
|
}
|
|
56
54
|
var properties = childNode.properties;
|
|
57
|
-
var key = properties
|
|
58
|
-
|
|
55
|
+
var key = properties
|
|
56
|
+
? properties.key === undefined
|
|
57
|
+
? properties.bind
|
|
58
|
+
: properties.key
|
|
59
|
+
: undefined;
|
|
60
|
+
if (!key) {
|
|
61
|
+
// A key is just assumed to be unique
|
|
59
62
|
for (var i = 0; i < childNodes.length; i++) {
|
|
60
63
|
if (i !== indexToCheck) {
|
|
61
64
|
var node = childNodes[i];
|
|
62
65
|
if (same(node, childNode)) {
|
|
63
|
-
throw
|
|
66
|
+
throw {
|
|
67
|
+
error: new Error("".concat(parentVNode.vnodeSelector, " had a ").concat(childNode.vnodeSelector, " child ").concat(operation === "added" ? operation : "removed", ", but there is now more than one. You must add unique key properties to make them distinguishable.")),
|
|
68
|
+
parentNode: parentVNode,
|
|
69
|
+
childNode: childNode,
|
|
70
|
+
};
|
|
64
71
|
}
|
|
65
72
|
}
|
|
66
73
|
}
|
|
@@ -79,7 +86,9 @@ var requestedIdleCallback = false;
|
|
|
79
86
|
var visitRemovedNode = function (node) {
|
|
80
87
|
(node.children || []).forEach(visitRemovedNode);
|
|
81
88
|
if (node.properties && node.properties.afterRemoved) {
|
|
82
|
-
node.properties.afterRemoved.apply(node.properties.bind || node.properties, [
|
|
89
|
+
node.properties.afterRemoved.apply(node.properties.bind || node.properties, [
|
|
90
|
+
node.domNode,
|
|
91
|
+
]);
|
|
83
92
|
}
|
|
84
93
|
};
|
|
85
94
|
var processPendingNodeRemovals = function () {
|
|
@@ -91,7 +100,7 @@ var scheduleNodeRemoval = function (vNode) {
|
|
|
91
100
|
removedNodes.push(vNode);
|
|
92
101
|
if (!requestedIdleCallback) {
|
|
93
102
|
requestedIdleCallback = true;
|
|
94
|
-
if (typeof window !==
|
|
103
|
+
if (typeof window !== "undefined" && "requestIdleCallback" in window) {
|
|
95
104
|
window.requestIdleCallback(processPendingNodeRemovals, { timeout: 16 });
|
|
96
105
|
}
|
|
97
106
|
else {
|
|
@@ -104,7 +113,7 @@ var nodeToRemove = function (vNode) {
|
|
|
104
113
|
if (vNode.properties) {
|
|
105
114
|
var exitAnimation = vNode.properties.exitAnimation;
|
|
106
115
|
if (exitAnimation) {
|
|
107
|
-
domNode.style.pointerEvents =
|
|
116
|
+
domNode.style.pointerEvents = "none";
|
|
108
117
|
var removeDomNode = function () {
|
|
109
118
|
if (domNode.parentNode) {
|
|
110
119
|
domNode.parentNode.removeChild(domNode);
|
|
@@ -130,13 +139,13 @@ var setProperties = function (domNode, properties, projectionOptions) {
|
|
|
130
139
|
var _loop_1 = function (i) {
|
|
131
140
|
var propName = propNames[i];
|
|
132
141
|
var propValue = properties[propName];
|
|
133
|
-
if (propName ===
|
|
142
|
+
if (propName === "className") {
|
|
134
143
|
throw new Error('Property "className" is not supported, use "class".');
|
|
135
144
|
}
|
|
136
|
-
else if (propName ===
|
|
145
|
+
else if (propName === "class") {
|
|
137
146
|
toggleClasses(domNode, propValue, true);
|
|
138
147
|
}
|
|
139
|
-
else if (propName ===
|
|
148
|
+
else if (propName === "classes") {
|
|
140
149
|
// object with string keys and boolean values
|
|
141
150
|
var classNames = Object.keys(propValue);
|
|
142
151
|
var classNameCount = classNames.length;
|
|
@@ -147,7 +156,7 @@ var setProperties = function (domNode, properties, projectionOptions) {
|
|
|
147
156
|
}
|
|
148
157
|
}
|
|
149
158
|
}
|
|
150
|
-
else if (propName ===
|
|
159
|
+
else if (propName === "styles") {
|
|
151
160
|
// object with string keys and string (!) values
|
|
152
161
|
var styleNames = Object.keys(propValue);
|
|
153
162
|
var styleCount = styleNames.length;
|
|
@@ -160,30 +169,29 @@ var setProperties = function (domNode, properties, projectionOptions) {
|
|
|
160
169
|
}
|
|
161
170
|
}
|
|
162
171
|
}
|
|
163
|
-
else if (propName !==
|
|
172
|
+
else if (propName !== "key" && propValue !== null && propValue !== undefined) {
|
|
164
173
|
var type = typeof propValue;
|
|
165
|
-
if (type ===
|
|
166
|
-
if (propName.lastIndexOf(
|
|
174
|
+
if (type === "function") {
|
|
175
|
+
if (propName.lastIndexOf("on", 0) === 0) {
|
|
176
|
+
// lastIndexOf(,0)===0 -> startsWith
|
|
167
177
|
if (eventHandlerInterceptor) {
|
|
168
178
|
propValue = eventHandlerInterceptor(propName, propValue, domNode, properties); // intercept eventhandlers
|
|
169
179
|
}
|
|
170
|
-
if (propName ===
|
|
171
|
-
/* tslint:disable no-this-keyword no-invalid-this only-arrow-functions no-void-expression */
|
|
180
|
+
if (propName === "oninput") {
|
|
172
181
|
(function () {
|
|
173
182
|
// record the evt.target.value, because IE and Edge sometimes do a requestAnimationFrame between changing value and running oninput
|
|
174
183
|
var oldPropValue = propValue;
|
|
175
184
|
propValue = function (evt) {
|
|
176
185
|
oldPropValue.apply(this, [evt]);
|
|
177
|
-
evt.target[
|
|
186
|
+
evt.target["oninput-value"] = evt.target.value; // may be HTMLTextAreaElement as well
|
|
178
187
|
};
|
|
179
|
-
}()
|
|
180
|
-
/* tslint:enable */
|
|
188
|
+
})();
|
|
181
189
|
}
|
|
182
|
-
domNode[propName] = propValue;
|
|
183
190
|
}
|
|
191
|
+
domNode[propName] = propValue;
|
|
184
192
|
}
|
|
185
193
|
else if (projectionOptions.namespace === NAMESPACE_SVG) {
|
|
186
|
-
if (propName ===
|
|
194
|
+
if (propName === "href") {
|
|
187
195
|
domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
|
|
188
196
|
}
|
|
189
197
|
else {
|
|
@@ -191,7 +199,7 @@ var setProperties = function (domNode, properties, projectionOptions) {
|
|
|
191
199
|
domNode.setAttribute(propName, propValue);
|
|
192
200
|
}
|
|
193
201
|
}
|
|
194
|
-
else if (type ===
|
|
202
|
+
else if (type === "string" && propName !== "value" && propName !== "innerHTML") {
|
|
195
203
|
domNode.setAttribute(propName, propValue);
|
|
196
204
|
}
|
|
197
205
|
else {
|
|
@@ -219,7 +227,13 @@ var initPropertiesAndChildren = function (domNode, vnode, projectionOptions) {
|
|
|
219
227
|
}
|
|
220
228
|
setProperties(domNode, vnode.properties, projectionOptions);
|
|
221
229
|
if (vnode.properties && vnode.properties.afterCreate) {
|
|
222
|
-
vnode.properties.afterCreate.apply(vnode.properties.bind || vnode.properties, [
|
|
230
|
+
vnode.properties.afterCreate.apply(vnode.properties.bind || vnode.properties, [
|
|
231
|
+
domNode,
|
|
232
|
+
projectionOptions,
|
|
233
|
+
vnode.vnodeSelector,
|
|
234
|
+
vnode.properties,
|
|
235
|
+
vnode.children,
|
|
236
|
+
]);
|
|
223
237
|
}
|
|
224
238
|
};
|
|
225
239
|
var createDom = function (vnode, parentNode, insertBefore, projectionOptions) {
|
|
@@ -227,7 +241,7 @@ var createDom = function (vnode, parentNode, insertBefore, projectionOptions) {
|
|
|
227
241
|
var start = 0;
|
|
228
242
|
var vnodeSelector = vnode.vnodeSelector;
|
|
229
243
|
var doc = parentNode.ownerDocument;
|
|
230
|
-
if (vnodeSelector ===
|
|
244
|
+
if (vnodeSelector === "") {
|
|
231
245
|
domNode = vnode.domNode = doc.createTextNode(vnode.text);
|
|
232
246
|
if (insertBefore !== undefined) {
|
|
233
247
|
parentNode.insertBefore(domNode, insertBefore);
|
|
@@ -239,27 +253,29 @@ var createDom = function (vnode, parentNode, insertBefore, projectionOptions) {
|
|
|
239
253
|
else {
|
|
240
254
|
for (var i = 0; i <= vnodeSelector.length; ++i) {
|
|
241
255
|
var c = vnodeSelector.charAt(i);
|
|
242
|
-
if (i === vnodeSelector.length || c ===
|
|
256
|
+
if (i === vnodeSelector.length || c === "." || c === "#") {
|
|
243
257
|
var type = vnodeSelector.charAt(start - 1);
|
|
244
258
|
var found = vnodeSelector.slice(start, i);
|
|
245
|
-
if (type ===
|
|
259
|
+
if (type === ".") {
|
|
246
260
|
domNode.classList.add(found);
|
|
247
261
|
}
|
|
248
|
-
else if (type ===
|
|
262
|
+
else if (type === "#") {
|
|
249
263
|
domNode.id = found;
|
|
250
264
|
}
|
|
251
265
|
else {
|
|
252
|
-
if (found ===
|
|
253
|
-
projectionOptions = extend(projectionOptions, {
|
|
266
|
+
if (found === "svg") {
|
|
267
|
+
projectionOptions = extend(projectionOptions, {
|
|
268
|
+
namespace: NAMESPACE_SVG,
|
|
269
|
+
});
|
|
254
270
|
}
|
|
255
271
|
if (projectionOptions.namespace !== undefined) {
|
|
256
272
|
domNode = vnode.domNode = doc.createElementNS(projectionOptions.namespace, found);
|
|
257
273
|
}
|
|
258
274
|
else {
|
|
259
|
-
domNode = vnode.domNode =
|
|
260
|
-
if (found ===
|
|
275
|
+
domNode = vnode.domNode = vnode.domNode || doc.createElement(found);
|
|
276
|
+
if (found === "input" && vnode.properties && vnode.properties.type !== undefined) {
|
|
261
277
|
// IE8 and older don't support setting input type after the DOM Node has been added to the document
|
|
262
|
-
domNode.setAttribute(
|
|
278
|
+
domNode.setAttribute("type", vnode.properties.type);
|
|
263
279
|
}
|
|
264
280
|
}
|
|
265
281
|
if (insertBefore !== undefined) {
|
|
@@ -286,7 +302,7 @@ var toggleClasses = function (domNode, classes, on) {
|
|
|
286
302
|
if (!classes) {
|
|
287
303
|
return;
|
|
288
304
|
}
|
|
289
|
-
classes.split(
|
|
305
|
+
classes.split(" ").forEach(function (classToToggle) {
|
|
290
306
|
if (classToToggle) {
|
|
291
307
|
domNode.classList.toggle(classToToggle, on);
|
|
292
308
|
}
|
|
@@ -304,13 +320,13 @@ var updateProperties = function (domNode, previousProperties, properties, projec
|
|
|
304
320
|
// assuming that properties will be nullified instead of missing is by design
|
|
305
321
|
var propValue = properties[propName];
|
|
306
322
|
var previousValue = previousProperties[propName];
|
|
307
|
-
if (propName ===
|
|
323
|
+
if (propName === "class") {
|
|
308
324
|
if (previousValue !== propValue) {
|
|
309
325
|
toggleClasses(domNode, previousValue, false);
|
|
310
326
|
toggleClasses(domNode, propValue, true);
|
|
311
327
|
}
|
|
312
328
|
}
|
|
313
|
-
else if (propName ===
|
|
329
|
+
else if (propName === "classes") {
|
|
314
330
|
var classList = domNode.classList;
|
|
315
331
|
var classNames = Object.keys(propValue);
|
|
316
332
|
var classNameCount = classNames.length;
|
|
@@ -330,7 +346,7 @@ var updateProperties = function (domNode, previousProperties, properties, projec
|
|
|
330
346
|
}
|
|
331
347
|
}
|
|
332
348
|
}
|
|
333
|
-
else if (propName ===
|
|
349
|
+
else if (propName === "styles") {
|
|
334
350
|
var styleNames = Object.keys(propValue);
|
|
335
351
|
var styleCount = styleNames.length;
|
|
336
352
|
for (var j = 0; j < styleCount; j++) {
|
|
@@ -346,24 +362,25 @@ var updateProperties = function (domNode, previousProperties, properties, projec
|
|
|
346
362
|
projectionOptions.styleApplyer(domNode, styleName, newStyleValue);
|
|
347
363
|
}
|
|
348
364
|
else {
|
|
349
|
-
projectionOptions.styleApplyer(domNode, styleName,
|
|
365
|
+
projectionOptions.styleApplyer(domNode, styleName, "");
|
|
350
366
|
}
|
|
351
367
|
}
|
|
352
368
|
}
|
|
353
369
|
else {
|
|
354
|
-
if (!propValue && typeof previousValue ===
|
|
355
|
-
propValue =
|
|
370
|
+
if (!propValue && typeof previousValue === "string") {
|
|
371
|
+
propValue = "";
|
|
356
372
|
}
|
|
357
|
-
if (propName ===
|
|
373
|
+
if (propName === "value") {
|
|
374
|
+
// value can be manipulated by the user directly and using event.preventDefault() is not an option
|
|
358
375
|
var domValue = domNode[propName];
|
|
359
|
-
if (domValue !== propValue // The 'value' in the DOM tree !== newValue
|
|
360
|
-
|
|
361
|
-
? domValue === domNode[
|
|
362
|
-
: propValue !== previousValue // Only update the value if the vdom changed
|
|
363
|
-
|
|
376
|
+
if (domValue !== propValue && // The 'value' in the DOM tree !== newValue
|
|
377
|
+
(domNode["oninput-value"]
|
|
378
|
+
? domValue === domNode["oninput-value"] // If the last reported value to 'oninput' does not match domValue, do nothing and wait for oninput
|
|
379
|
+
: propValue !== previousValue) // Only update the value if the vdom changed
|
|
380
|
+
) {
|
|
364
381
|
// The edge cases are described in the tests
|
|
365
382
|
domNode[propName] = propValue; // Reset the value, even if the virtual DOM did not change
|
|
366
|
-
domNode[
|
|
383
|
+
domNode["oninput-value"] = undefined;
|
|
367
384
|
} // else do not update the domNode, otherwise the cursor position would be changed
|
|
368
385
|
if (propValue !== previousValue) {
|
|
369
386
|
propertiesUpdated = true;
|
|
@@ -371,9 +388,10 @@ var updateProperties = function (domNode, previousProperties, properties, projec
|
|
|
371
388
|
}
|
|
372
389
|
else if (propValue !== previousValue) {
|
|
373
390
|
var type = typeof propValue;
|
|
374
|
-
if (type !==
|
|
391
|
+
if (type !== "function" || !projectionOptions.eventHandlerInterceptor) {
|
|
392
|
+
// Function updates are expected to be handled by the EventHandlerInterceptor
|
|
375
393
|
if (projectionOptions.namespace === NAMESPACE_SVG) {
|
|
376
|
-
if (propName ===
|
|
394
|
+
if (propName === "href") {
|
|
377
395
|
domNode.setAttributeNS(NAMESPACE_XLINK, propName, propValue);
|
|
378
396
|
}
|
|
379
397
|
else {
|
|
@@ -381,15 +399,16 @@ var updateProperties = function (domNode, previousProperties, properties, projec
|
|
|
381
399
|
domNode.setAttribute(propName, propValue);
|
|
382
400
|
}
|
|
383
401
|
}
|
|
384
|
-
else if (type ===
|
|
385
|
-
if (propName ===
|
|
402
|
+
else if (type === "string" && propName !== "innerHTML") {
|
|
403
|
+
if (propName === "role" && propValue === "") {
|
|
386
404
|
domNode.removeAttribute(propName);
|
|
387
405
|
}
|
|
388
406
|
else {
|
|
389
407
|
domNode.setAttribute(propName, propValue);
|
|
390
408
|
}
|
|
391
409
|
}
|
|
392
|
-
else if (domNode[propName] !== propValue) {
|
|
410
|
+
else if (domNode[propName] !== propValue) {
|
|
411
|
+
// Comparison is here for side-effects in Edge with scrollLeft and scrollTop
|
|
393
412
|
domNode[propName] = propValue;
|
|
394
413
|
}
|
|
395
414
|
propertiesUpdated = true;
|
|
@@ -412,7 +431,7 @@ var updateChildren = function (vnode, domNode, oldChildren, newChildren, project
|
|
|
412
431
|
var i;
|
|
413
432
|
var textUpdated = false;
|
|
414
433
|
while (newIndex < newChildrenLength) {
|
|
415
|
-
var oldChild =
|
|
434
|
+
var oldChild = oldIndex < oldChildrenLength ? oldChildren[oldIndex] : undefined;
|
|
416
435
|
var newChild = newChildren[newIndex];
|
|
417
436
|
if (oldChild !== undefined && same(oldChild, newChild)) {
|
|
418
437
|
textUpdated = updateDom(oldChild, newChild, projectionOptions) || textUpdated;
|
|
@@ -424,16 +443,17 @@ var updateChildren = function (vnode, domNode, oldChildren, newChildren, project
|
|
|
424
443
|
// Remove preceding missing children
|
|
425
444
|
for (i = oldIndex; i < findOldIndex; i++) {
|
|
426
445
|
nodeToRemove(oldChildren[i]);
|
|
427
|
-
checkDistinguishable(oldChildren, i, vnode,
|
|
446
|
+
checkDistinguishable(oldChildren, i, vnode, "removed");
|
|
428
447
|
}
|
|
429
|
-
textUpdated =
|
|
448
|
+
textUpdated =
|
|
449
|
+
updateDom(oldChildren[findOldIndex], newChild, projectionOptions) || textUpdated;
|
|
430
450
|
oldIndex = findOldIndex + 1;
|
|
431
451
|
}
|
|
432
452
|
else {
|
|
433
453
|
// New child
|
|
434
|
-
createDom(newChild, domNode,
|
|
454
|
+
createDom(newChild, domNode, oldIndex < oldChildrenLength ? oldChildren[oldIndex].domNode : undefined, projectionOptions);
|
|
435
455
|
nodeAdded(newChild);
|
|
436
|
-
checkDistinguishable(newChildren, newIndex, vnode,
|
|
456
|
+
checkDistinguishable(newChildren, newIndex, vnode, "added");
|
|
437
457
|
}
|
|
438
458
|
}
|
|
439
459
|
newIndex++;
|
|
@@ -442,7 +462,7 @@ var updateChildren = function (vnode, domNode, oldChildren, newChildren, project
|
|
|
442
462
|
// Remove child fragments
|
|
443
463
|
for (i = oldIndex; i < oldChildrenLength; i++) {
|
|
444
464
|
nodeToRemove(oldChildren[i]);
|
|
445
|
-
checkDistinguishable(oldChildren, i, vnode,
|
|
465
|
+
checkDistinguishable(oldChildren, i, vnode, "removed");
|
|
446
466
|
}
|
|
447
467
|
}
|
|
448
468
|
return textUpdated;
|
|
@@ -454,7 +474,7 @@ updateDom = function (previous, vnode, projectionOptions) {
|
|
|
454
474
|
return false; // By contract, VNode objects may not be modified anymore after passing them to maquette
|
|
455
475
|
}
|
|
456
476
|
var updated = false;
|
|
457
|
-
if (vnode.vnodeSelector ===
|
|
477
|
+
if (vnode.vnodeSelector === "") {
|
|
458
478
|
if (vnode.text !== previous.text) {
|
|
459
479
|
var newTextNode = domNode.ownerDocument.createTextNode(vnode.text);
|
|
460
480
|
domNode.parentNode.replaceChild(newTextNode, domNode);
|
|
@@ -465,8 +485,11 @@ updateDom = function (previous, vnode, projectionOptions) {
|
|
|
465
485
|
vnode.domNode = domNode;
|
|
466
486
|
}
|
|
467
487
|
else {
|
|
468
|
-
if (vnode.vnodeSelector.lastIndexOf(
|
|
469
|
-
|
|
488
|
+
if (vnode.vnodeSelector.lastIndexOf("svg", 0) === 0) {
|
|
489
|
+
// lastIndexOf(needle,0)===0 means StartsWith
|
|
490
|
+
projectionOptions = extend(projectionOptions, {
|
|
491
|
+
namespace: NAMESPACE_SVG,
|
|
492
|
+
});
|
|
470
493
|
}
|
|
471
494
|
if (previous.text !== vnode.text) {
|
|
472
495
|
updated = true;
|
|
@@ -478,10 +501,20 @@ updateDom = function (previous, vnode, projectionOptions) {
|
|
|
478
501
|
}
|
|
479
502
|
}
|
|
480
503
|
vnode.domNode = domNode;
|
|
481
|
-
updated =
|
|
482
|
-
|
|
504
|
+
updated =
|
|
505
|
+
updateChildren(vnode, domNode, previous.children, vnode.children, projectionOptions) ||
|
|
506
|
+
updated;
|
|
507
|
+
updated =
|
|
508
|
+
updateProperties(domNode, previous.properties, vnode.properties, projectionOptions) ||
|
|
509
|
+
updated;
|
|
483
510
|
if (vnode.properties && vnode.properties.afterUpdate) {
|
|
484
|
-
vnode.properties.afterUpdate.apply(vnode.properties.bind || vnode.properties, [
|
|
511
|
+
vnode.properties.afterUpdate.apply(vnode.properties.bind || vnode.properties, [
|
|
512
|
+
domNode,
|
|
513
|
+
projectionOptions,
|
|
514
|
+
vnode.vnodeSelector,
|
|
515
|
+
vnode.properties,
|
|
516
|
+
vnode.children,
|
|
517
|
+
]);
|
|
485
518
|
}
|
|
486
519
|
}
|
|
487
520
|
if (updated && vnode.properties && vnode.properties.updateAnimation) {
|
|
@@ -494,13 +527,13 @@ var createProjection = function (vnode, projectionOptions) {
|
|
|
494
527
|
getLastRender: function () { return vnode; },
|
|
495
528
|
update: function (updatedVnode) {
|
|
496
529
|
if (vnode.vnodeSelector !== updatedVnode.vnodeSelector) {
|
|
497
|
-
throw new Error(
|
|
530
|
+
throw new Error("The selector for the root VNode may not be changed. (consider using dom.merge and add one extra level to the virtual DOM)");
|
|
498
531
|
}
|
|
499
532
|
var previousVNode = vnode;
|
|
500
533
|
vnode = updatedVnode;
|
|
501
534
|
updateDom(previousVNode, updatedVnode, projectionOptions);
|
|
502
535
|
},
|
|
503
|
-
domNode: vnode.domNode
|
|
536
|
+
domNode: vnode.domNode,
|
|
504
537
|
};
|
|
505
538
|
};
|
|
506
539
|
|
|
@@ -509,7 +542,7 @@ var DEFAULT_PROJECTION_OPTIONS = {
|
|
|
509
542
|
performanceLogger: function () { return undefined; },
|
|
510
543
|
eventHandlerInterceptor: undefined,
|
|
511
544
|
styleApplyer: function (domNode, styleName, value) {
|
|
512
|
-
if (styleName.charAt(0) ===
|
|
545
|
+
if (styleName.charAt(0) === "-") {
|
|
513
546
|
// CSS variables must be set using setProperty
|
|
514
547
|
domNode.style.setProperty(styleName, value);
|
|
515
548
|
}
|
|
@@ -517,7 +550,7 @@ var DEFAULT_PROJECTION_OPTIONS = {
|
|
|
517
550
|
// properties like 'backgroundColor' must be set as a js-property
|
|
518
551
|
domNode.style[styleName] = value;
|
|
519
552
|
}
|
|
520
|
-
}
|
|
553
|
+
},
|
|
521
554
|
};
|
|
522
555
|
var applyDefaultProjectionOptions = function (projectorOptions) {
|
|
523
556
|
return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
|
|
@@ -534,7 +567,7 @@ var dom = {
|
|
|
534
567
|
*/
|
|
535
568
|
create: function (vnode, projectionOptions) {
|
|
536
569
|
projectionOptions = applyDefaultProjectionOptions(projectionOptions);
|
|
537
|
-
createDom(vnode, document.createElement(
|
|
570
|
+
createDom(vnode, document.createElement("div"), undefined, projectionOptions);
|
|
538
571
|
return createProjection(vnode, projectionOptions);
|
|
539
572
|
},
|
|
540
573
|
/**
|
|
@@ -596,17 +629,16 @@ var dom = {
|
|
|
596
629
|
createDom(vnode, element.parentNode, element, projectionOptions);
|
|
597
630
|
element.parentNode.removeChild(element);
|
|
598
631
|
return createProjection(vnode, projectionOptions);
|
|
599
|
-
}
|
|
632
|
+
},
|
|
600
633
|
};
|
|
601
634
|
|
|
602
|
-
/* tslint:disable function-name */
|
|
603
635
|
var toTextVNode = function (data) {
|
|
604
636
|
return {
|
|
605
|
-
vnodeSelector:
|
|
637
|
+
vnodeSelector: "",
|
|
606
638
|
properties: undefined,
|
|
607
639
|
children: undefined,
|
|
608
640
|
text: data.toString(),
|
|
609
|
-
domNode: null
|
|
641
|
+
domNode: null,
|
|
610
642
|
};
|
|
611
643
|
};
|
|
612
644
|
var appendChildren = function (parentSelector, insertions, main) {
|
|
@@ -617,7 +649,7 @@ var appendChildren = function (parentSelector, insertions, main) {
|
|
|
617
649
|
}
|
|
618
650
|
else {
|
|
619
651
|
if (item !== null && item !== undefined && item !== false) {
|
|
620
|
-
if (typeof item ===
|
|
652
|
+
if (typeof item === "string") {
|
|
621
653
|
item = toTextVNode(item);
|
|
622
654
|
}
|
|
623
655
|
main.push(item);
|
|
@@ -630,14 +662,14 @@ function h(selector, properties, children) {
|
|
|
630
662
|
children = properties;
|
|
631
663
|
properties = undefined;
|
|
632
664
|
}
|
|
633
|
-
else if ((properties && (typeof properties ===
|
|
634
|
-
(children && (typeof children ===
|
|
635
|
-
throw new Error(
|
|
665
|
+
else if ((properties && (typeof properties === "string" || properties.vnodeSelector)) ||
|
|
666
|
+
(children && (typeof children === "string" || children.vnodeSelector))) {
|
|
667
|
+
throw new Error("h called with invalid arguments");
|
|
636
668
|
}
|
|
637
669
|
var text;
|
|
638
670
|
var flattenedChildren;
|
|
639
671
|
// Recognize a common special case where there is only a single text node
|
|
640
|
-
if (children && children.length === 1 && typeof children[0] ===
|
|
672
|
+
if (children && children.length === 1 && typeof children[0] === "string") {
|
|
641
673
|
text = children[0];
|
|
642
674
|
}
|
|
643
675
|
else if (children) {
|
|
@@ -651,8 +683,8 @@ function h(selector, properties, children) {
|
|
|
651
683
|
vnodeSelector: selector,
|
|
652
684
|
properties: properties,
|
|
653
685
|
children: flattenedChildren,
|
|
654
|
-
text:
|
|
655
|
-
domNode: null
|
|
686
|
+
text: text === "" ? undefined : text,
|
|
687
|
+
domNode: null,
|
|
656
688
|
};
|
|
657
689
|
}
|
|
658
690
|
|
|
@@ -674,13 +706,17 @@ else {
|
|
|
674
706
|
var findVNodeByParentNodePath = function (vnode, parentNodePath) {
|
|
675
707
|
var result = vnode;
|
|
676
708
|
parentNodePath.forEach(function (node) {
|
|
677
|
-
result =
|
|
709
|
+
result =
|
|
710
|
+
result && result.children
|
|
711
|
+
? find(result.children, function (child) { return child.domNode === node; })
|
|
712
|
+
: undefined;
|
|
678
713
|
});
|
|
679
714
|
return result;
|
|
680
715
|
};
|
|
681
716
|
var createEventHandlerInterceptor = function (projector, getProjection, performanceLogger) {
|
|
682
|
-
|
|
683
|
-
|
|
717
|
+
return function (propertyName, eventHandler, domNode, properties) { return modifiedEventHandler; };
|
|
718
|
+
function modifiedEventHandler(evt) {
|
|
719
|
+
performanceLogger("domEvent", evt);
|
|
684
720
|
var projection = getProjection();
|
|
685
721
|
var parentNodePath = createParentNodePath(evt.currentTarget, projection.domNode);
|
|
686
722
|
parentNodePath.reverse();
|
|
@@ -688,14 +724,13 @@ var createEventHandlerInterceptor = function (projector, getProjection, performa
|
|
|
688
724
|
projector.scheduleRender();
|
|
689
725
|
var result;
|
|
690
726
|
if (matchingVNode) {
|
|
691
|
-
/*
|
|
692
|
-
result = matchingVNode.properties["on"
|
|
693
|
-
/*
|
|
727
|
+
/* eslint-disable prefer-rest-params */
|
|
728
|
+
result = matchingVNode.properties["on".concat(evt.type)].apply(matchingVNode.properties.bind || this, arguments);
|
|
729
|
+
/* eslint-enable prefer-rest-params */
|
|
694
730
|
}
|
|
695
|
-
performanceLogger(
|
|
731
|
+
performanceLogger("domEventProcessed", evt);
|
|
696
732
|
return result;
|
|
697
|
-
}
|
|
698
|
-
return function (propertyName, eventHandler, domNode, properties) { return modifiedEventHandler; };
|
|
733
|
+
}
|
|
699
734
|
};
|
|
700
735
|
/**
|
|
701
736
|
* Creates a [[Projector]] instance using the provided projectionOptions.
|
|
@@ -731,14 +766,14 @@ var createProjector = function (projectorOptions) {
|
|
|
731
766
|
return; // The last render threw an error, it should have been logged in the browser console.
|
|
732
767
|
}
|
|
733
768
|
renderCompleted = false;
|
|
734
|
-
performanceLogger(
|
|
769
|
+
performanceLogger("renderStart", undefined);
|
|
735
770
|
for (var i = 0; i < projections.length; i++) {
|
|
736
771
|
var updatedVnode = renderFunctions[i]();
|
|
737
|
-
performanceLogger(
|
|
772
|
+
performanceLogger("rendered", undefined);
|
|
738
773
|
projections[i].update(updatedVnode);
|
|
739
|
-
performanceLogger(
|
|
774
|
+
performanceLogger("patched", undefined);
|
|
740
775
|
}
|
|
741
|
-
performanceLogger(
|
|
776
|
+
performanceLogger("renderDone", undefined);
|
|
742
777
|
renderCompleted = true;
|
|
743
778
|
};
|
|
744
779
|
projector = {
|
|
@@ -779,8 +814,8 @@ var createProjector = function (projectorOptions) {
|
|
|
779
814
|
return projections.splice(i, 1)[0];
|
|
780
815
|
}
|
|
781
816
|
}
|
|
782
|
-
throw new Error(
|
|
783
|
-
}
|
|
817
|
+
throw new Error("renderFunction was not found");
|
|
818
|
+
},
|
|
784
819
|
};
|
|
785
820
|
return projector;
|
|
786
821
|
};
|
|
@@ -813,7 +848,7 @@ var createCache = function () {
|
|
|
813
848
|
cachedInputs = inputs;
|
|
814
849
|
}
|
|
815
850
|
return cachedOutcome;
|
|
816
|
-
}
|
|
851
|
+
},
|
|
817
852
|
};
|
|
818
853
|
};
|
|
819
854
|
|
|
@@ -864,7 +899,7 @@ var createMapping = function (getSourceKey, createResult, updateResult) {
|
|
|
864
899
|
}
|
|
865
900
|
results.length = newSources.length;
|
|
866
901
|
keys = newKeys;
|
|
867
|
-
}
|
|
902
|
+
},
|
|
868
903
|
};
|
|
869
904
|
};
|
|
870
905
|
|