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