marko 5.24.0 → 5.25.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/runtime/components/entry/index-browser.js +2 -6
- package/dist/runtime/components/registry/index-browser.js +444 -20
- package/dist/runtime/components/registry/index.js +1 -1
- package/dist/runtime/components/renderer.js +4 -4
- package/dist/runtime/components/update-manager.js +7 -7
- package/dist/runtime/components/util/index-browser.js +4 -4
- package/dist/runtime/components/util/index.js +2 -2
- package/dist/runtime/createOut.js +1 -1
- package/dist/runtime/dom-insert.js +4 -4
- package/dist/runtime/helpers/_change-case.js +2 -2
- package/dist/runtime/helpers/dynamic-tag.js +4 -4
- package/dist/runtime/helpers/repeatable.js +12 -0
- package/dist/runtime/helpers/self-iterator.js +3 -0
- package/dist/runtime/helpers/style-value.js +1 -1
- package/dist/runtime/html/AsyncStream.js +15 -15
- package/dist/runtime/html/BufferedWriter.js +2 -2
- package/dist/runtime/html/create-readable/index-browser.js +1 -1
- package/dist/runtime/html/create-readable/index.js +9 -9
- package/dist/runtime/html/helpers/_dynamic-attr.js +2 -2
- package/dist/runtime/html/helpers/attr.js +3 -3
- package/dist/runtime/html/helpers/data-marko.js +1 -1
- package/dist/runtime/html/helpers/escape-quotes.js +1 -1
- package/dist/runtime/html/helpers/escape-xml.js +1 -1
- package/dist/runtime/html/index.js +2 -2
- package/dist/runtime/renderable.js +5 -5
- package/dist/runtime/setImmediate/index-browser.js +1 -1
- package/dist/runtime/setImmediate/index-worker.js +2 -2
- package/dist/runtime/setImmediate/index.js +2 -2
- package/dist/runtime/vdom/AsyncVDOMBuilder.js +74 -74
- package/dist/runtime/vdom/VComponent.js +3 -3
- package/dist/runtime/vdom/VDocumentFragment.js +7 -7
- package/dist/runtime/vdom/VElement.js +44 -44
- package/dist/runtime/vdom/VFragment.js +5 -5
- package/dist/runtime/vdom/VNode.js +32 -32
- package/dist/runtime/vdom/VText.js +8 -8
- package/dist/runtime/vdom/helpers/v-element.js +1 -1
- package/dist/runtime/vdom/helpers/v-text.js +1 -1
- package/dist/runtime/vdom/hot-reload.js +4 -4
- package/dist/runtime/vdom/index.js +2 -2
- package/dist/runtime/vdom/morphdom/fragment.js +4 -4
- package/dist/runtime/vdom/morphdom/helpers.js +4 -4
- package/dist/runtime/vdom/morphdom/index.js +36 -36
- package/dist/runtime/vdom/morphdom/specialElHandlers.js +6 -6
- package/dist/runtime/vdom/preserve-attrs.js +1 -1
- package/dist/runtime/vdom/vdom.js +14 -14
- package/docs/body-content.md +37 -18
- package/docs/typescript.md +12 -12
- package/index.d.ts +4 -2
- package/package.json +3 -3
- package/src/runtime/components/entry/index-browser.js +2 -6
- package/src/runtime/components/registry/index-browser.js +451 -27
- package/src/runtime/helpers/repeatable.js +12 -0
- package/src/runtime/helpers/self-iterator.js +3 -0
- package/src/runtime/html/AsyncStream.js +1 -1
- package/dist/runtime/components/init-components/index-browser.js +0 -453
- package/dist/runtime/components/init-components/index.js +0 -2
- package/dist/runtime/components/init-components/package.json +0 -11
- package/src/runtime/components/init-components/index-browser.js +0 -453
- package/src/runtime/components/init-components/index.js +0 -1
- package/src/runtime/components/init-components/package.json +0 -11
@@ -2,81 +2,81 @@
|
|
2
2
|
function VNode() {}
|
3
3
|
|
4
4
|
VNode.prototype = {
|
5
|
-
|
6
|
-
this.
|
7
|
-
this.
|
8
|
-
this.bG_ = null;
|
9
|
-
this.bS_ = null;
|
5
|
+
bx_: function (finalChildCount, ownerComponent) {
|
6
|
+
this.bN_ = finalChildCount;
|
7
|
+
this.bO_ = 0;
|
10
8
|
this.bD_ = null;
|
11
|
-
this.
|
12
|
-
this.
|
9
|
+
this.bP_ = null;
|
10
|
+
this.bA_ = null;
|
11
|
+
this.bB_ = null;
|
12
|
+
this.az_ = ownerComponent;
|
13
13
|
},
|
14
14
|
|
15
15
|
get _s_() {
|
16
|
-
var firstChild = this.
|
16
|
+
var firstChild = this.bD_;
|
17
17
|
|
18
|
-
if (firstChild && firstChild.
|
18
|
+
if (firstChild && firstChild.bC_) {
|
19
19
|
var nestedFirstChild = firstChild._s_;
|
20
20
|
// The first child is a DocumentFragment node.
|
21
21
|
// If the DocumentFragment node has a first child then we will return that.
|
22
22
|
// Otherwise, the DocumentFragment node is not *really* the first child and
|
23
23
|
// we need to skip to its next sibling
|
24
|
-
return nestedFirstChild || firstChild.
|
24
|
+
return nestedFirstChild || firstChild.bQ_;
|
25
25
|
}
|
26
26
|
|
27
27
|
return firstChild;
|
28
28
|
},
|
29
29
|
|
30
|
-
get
|
31
|
-
var nextSibling = this.
|
30
|
+
get bQ_() {
|
31
|
+
var nextSibling = this.bB_;
|
32
32
|
|
33
33
|
if (nextSibling) {
|
34
|
-
if (nextSibling.
|
34
|
+
if (nextSibling.bC_) {
|
35
35
|
var firstChild = nextSibling._s_;
|
36
|
-
return firstChild || nextSibling.
|
36
|
+
return firstChild || nextSibling.bQ_;
|
37
37
|
}
|
38
38
|
} else {
|
39
|
-
var parentNode = this.
|
40
|
-
if (parentNode && parentNode.
|
41
|
-
return parentNode.
|
39
|
+
var parentNode = this.bA_;
|
40
|
+
if (parentNode && parentNode.bC_) {
|
41
|
+
return parentNode.bQ_;
|
42
42
|
}
|
43
43
|
}
|
44
44
|
|
45
45
|
return nextSibling;
|
46
46
|
},
|
47
47
|
|
48
|
-
|
49
|
-
this.
|
48
|
+
bp_: function (child) {
|
49
|
+
this.bO_++;
|
50
50
|
|
51
|
-
if (this.
|
52
|
-
if (child.
|
53
|
-
var childValue = child.
|
54
|
-
this.
|
51
|
+
if (this.bF_ === "textarea") {
|
52
|
+
if (child.bR_) {
|
53
|
+
var childValue = child.bS_;
|
54
|
+
this.bG_ = (this.bG_ || "") + childValue;
|
55
55
|
} else if (child.n_ || child.m_) {
|
56
|
-
this.
|
56
|
+
this.bT_ = true;
|
57
57
|
} else {
|
58
58
|
throw TypeError();
|
59
59
|
}
|
60
60
|
} else {
|
61
|
-
var lastChild = this.
|
61
|
+
var lastChild = this.bP_;
|
62
62
|
|
63
|
-
child.
|
63
|
+
child.bA_ = this;
|
64
64
|
|
65
65
|
if (lastChild) {
|
66
|
-
lastChild.
|
66
|
+
lastChild.bB_ = child;
|
67
67
|
} else {
|
68
|
-
this.
|
68
|
+
this.bD_ = child;
|
69
69
|
}
|
70
70
|
|
71
|
-
this.
|
71
|
+
this.bP_ = child;
|
72
72
|
}
|
73
73
|
|
74
74
|
return child;
|
75
75
|
},
|
76
76
|
|
77
|
-
|
78
|
-
if (this.
|
79
|
-
return this.
|
77
|
+
bI_: function finishChild() {
|
78
|
+
if (this.bO_ === this.bN_ && this.bA_) {
|
79
|
+
return this.bA_.bI_();
|
80
80
|
} else {
|
81
81
|
return this;
|
82
82
|
}
|
@@ -2,21 +2,21 @@
|
|
2
2
|
var inherit = require("raptor-util/inherit");
|
3
3
|
|
4
4
|
function VText(value, ownerComponent) {
|
5
|
-
this.
|
6
|
-
this.
|
5
|
+
this.bx_(-1 /* no children */, ownerComponent);
|
6
|
+
this.bS_ = value;
|
7
7
|
}
|
8
8
|
|
9
9
|
VText.prototype = {
|
10
|
-
|
10
|
+
bR_: true,
|
11
11
|
|
12
|
-
|
12
|
+
bz_: 3,
|
13
13
|
|
14
|
-
|
15
|
-
return (host.ownerDocument || host).createTextNode(this.
|
14
|
+
bw_: function (host) {
|
15
|
+
return (host.ownerDocument || host).createTextNode(this.bS_);
|
16
16
|
},
|
17
17
|
|
18
|
-
|
19
|
-
return new VText(this.
|
18
|
+
bq_: function () {
|
19
|
+
return new VText(this.bS_);
|
20
20
|
}
|
21
21
|
};
|
22
22
|
|
@@ -32,7 +32,7 @@ runtime.t = function (typeName) {
|
|
32
32
|
}
|
33
33
|
|
34
34
|
queue.push(function () {
|
35
|
-
var newProto = registry.
|
35
|
+
var newProto = registry.at_(typeName).prototype;
|
36
36
|
instances.forEach(function (instance) {
|
37
37
|
if (hasLifecycleChanged(instance.__proto__, newProto)) {
|
38
38
|
var startNode = instance.L_.startNode;
|
@@ -40,7 +40,7 @@ runtime.t = function (typeName) {
|
|
40
40
|
var parentNode = startNode.parentNode;
|
41
41
|
var curNode;
|
42
42
|
|
43
|
-
instance.
|
43
|
+
instance.bU_ = true;
|
44
44
|
instance._b_();
|
45
45
|
instance._c_();
|
46
46
|
|
@@ -54,7 +54,7 @@ runtime.t = function (typeName) {
|
|
54
54
|
parentNode.removeChild(curNode);
|
55
55
|
}
|
56
56
|
|
57
|
-
instance.
|
57
|
+
instance.bU_ = false;
|
58
58
|
instance.S_ = false;
|
59
59
|
}
|
60
60
|
|
@@ -82,7 +82,7 @@ registry._Q_ = function (typeName, id) {
|
|
82
82
|
if (instances) {
|
83
83
|
instances.push(instance);
|
84
84
|
instance.once("destroy", function () {
|
85
|
-
if (!instance.
|
85
|
+
if (!instance.bU_) {
|
86
86
|
instances.splice(1, instances.indexOf(instance));
|
87
87
|
}
|
88
88
|
});
|
@@ -15,11 +15,11 @@ exports.t = function createTemplate(typeName) {
|
|
15
15
|
};
|
16
16
|
|
17
17
|
function Template(typeName) {
|
18
|
-
this.
|
18
|
+
this.aY_ = typeName;
|
19
19
|
}
|
20
20
|
|
21
21
|
var AsyncVDOMBuilder = require("./AsyncVDOMBuilder");
|
22
|
-
require("../createOut").
|
22
|
+
require("../createOut").aD_(
|
23
23
|
Template.prototype.createOut = function createOut(
|
24
24
|
globalData,
|
25
25
|
parent,
|
@@ -1,5 +1,5 @@
|
|
1
1
|
"use strict";var helpers = require("./helpers");
|
2
|
-
var insertBefore = helpers.
|
2
|
+
var insertBefore = helpers.aE_;
|
3
3
|
|
4
4
|
var fragmentPrototype = {
|
5
5
|
nodeType: 12,
|
@@ -80,8 +80,8 @@ function createFragmentNode(startNode, nextNode, parentNode) {
|
|
80
80
|
|
81
81
|
function beginFragmentNode(startNode, parentNode) {
|
82
82
|
var fragment = createFragmentNode(startNode, null, parentNode);
|
83
|
-
fragment.
|
84
|
-
fragment.
|
83
|
+
fragment.bV_ = function (nextNode) {
|
84
|
+
fragment.bV_ = null;
|
85
85
|
insertBefore(
|
86
86
|
fragment.endNode,
|
87
87
|
nextNode,
|
@@ -92,4 +92,4 @@ function beginFragmentNode(startNode, parentNode) {
|
|
92
92
|
}
|
93
93
|
|
94
94
|
exports.ap_ = createFragmentNode;
|
95
|
-
exports.
|
95
|
+
exports.bW_ = beginFragmentNode;
|
@@ -35,8 +35,8 @@ function removeChild(node) {
|
|
35
35
|
node.parentNode.removeChild(node);
|
36
36
|
}
|
37
37
|
|
38
|
-
exports.
|
39
|
-
exports.
|
40
|
-
exports.
|
38
|
+
exports.aE_ = insertBefore;
|
39
|
+
exports.aF_ = insertAfter;
|
40
|
+
exports.bQ_ = nextSibling;
|
41
41
|
exports._s_ = firstChild;
|
42
|
-
exports.
|
42
|
+
exports.aG_ = removeChild;
|
@@ -6,10 +6,10 @@ var existingComponentLookup = componentsUtil.D_;
|
|
6
6
|
var destroyNodeRecursive = componentsUtil.E_;
|
7
7
|
var addComponentRootToKeyedElements =
|
8
8
|
componentsUtil.aq_;
|
9
|
-
var normalizeComponentKey = componentsUtil.
|
10
|
-
var VElement = require("../vdom").
|
11
|
-
var virtualizeElement = VElement.
|
12
|
-
var morphAttrs = VElement.
|
9
|
+
var normalizeComponentKey = componentsUtil.aC_;
|
10
|
+
var VElement = require("../vdom").aZ_;
|
11
|
+
var virtualizeElement = VElement.bL_;
|
12
|
+
var morphAttrs = VElement.bM_;
|
13
13
|
var eventDelegation = require("../../components/event-delegation");
|
14
14
|
var fragment = require("./fragment");
|
15
15
|
var helpers = require("./helpers");
|
@@ -19,13 +19,13 @@ var componentByDOMNode = domData.F_;
|
|
19
19
|
var vElementByDOMNode = domData.af_;
|
20
20
|
var detachedByDOMNode = domData.ag_;
|
21
21
|
|
22
|
-
var insertBefore = helpers.
|
23
|
-
var insertAfter = helpers.
|
24
|
-
var nextSibling = helpers.
|
22
|
+
var insertBefore = helpers.aE_;
|
23
|
+
var insertAfter = helpers.aF_;
|
24
|
+
var nextSibling = helpers.bQ_;
|
25
25
|
var firstChild = helpers._s_;
|
26
|
-
var removeChild = helpers.
|
26
|
+
var removeChild = helpers.aG_;
|
27
27
|
var createFragmentNode = fragment.ap_;
|
28
|
-
var beginFragmentNode = fragment.
|
28
|
+
var beginFragmentNode = fragment.bW_;
|
29
29
|
|
30
30
|
var ELEMENT_NODE = 1;
|
31
31
|
var TEXT_NODE = 3;
|
@@ -43,7 +43,7 @@ function isAutoKey(key) {
|
|
43
43
|
}
|
44
44
|
|
45
45
|
function compareNodeNames(fromEl, toEl) {
|
46
|
-
return fromEl.
|
46
|
+
return fromEl.bF_ === toEl.bF_;
|
47
47
|
}
|
48
48
|
|
49
49
|
function caseInsensitiveCompare(a, b) {
|
@@ -74,12 +74,12 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
74
74
|
ownerComponent,
|
75
75
|
parentComponent)
|
76
76
|
{
|
77
|
-
var realNode = vNode.
|
77
|
+
var realNode = vNode.bw_(host, parentEl.namespaceURI);
|
78
78
|
insertBefore(realNode, referenceEl, parentEl);
|
79
79
|
|
80
80
|
if (
|
81
|
-
vNode.
|
82
|
-
vNode.
|
81
|
+
vNode.bz_ === ELEMENT_NODE ||
|
82
|
+
vNode.bz_ === FRAGMENT_NODE)
|
83
83
|
{
|
84
84
|
if (key) {
|
85
85
|
keysByDOMNode.set(realNode, key);
|
@@ -88,7 +88,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
88
88
|
realNode;
|
89
89
|
}
|
90
90
|
|
91
|
-
if (vNode.
|
91
|
+
if (vNode.bF_ !== "textarea") {
|
92
92
|
morphChildren(realNode, vNode, parentComponent);
|
93
93
|
}
|
94
94
|
|
@@ -162,16 +162,16 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
162
162
|
var fromComponent;
|
163
163
|
|
164
164
|
outer: while (curToNodeChild) {
|
165
|
-
toNextSibling = curToNodeChild.
|
166
|
-
curToNodeType = curToNodeChild.
|
167
|
-
curToNodeKey = curToNodeChild.
|
165
|
+
toNextSibling = curToNodeChild.bQ_;
|
166
|
+
curToNodeType = curToNodeChild.bz_;
|
167
|
+
curToNodeKey = curToNodeChild.by_;
|
168
168
|
|
169
169
|
// Skip <!doctype>
|
170
170
|
if (curFromNodeChild && curFromNodeChild.nodeType === DOCTYPE_NODE) {
|
171
171
|
curFromNodeChild = nextSibling(curFromNodeChild);
|
172
172
|
}
|
173
173
|
|
174
|
-
var ownerComponent = curToNodeChild.
|
174
|
+
var ownerComponent = curToNodeChild.az_ || parentComponent;
|
175
175
|
var referenceComponent;
|
176
176
|
|
177
177
|
if (curToNodeType === COMPONENT_NODE) {
|
@@ -315,11 +315,11 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
315
315
|
curToNodeChild.n_ ||
|
316
316
|
caseInsensitiveCompare(
|
317
317
|
curFromNodeChild.nodeName,
|
318
|
-
curToNodeChild.
|
318
|
+
curToNodeChild.bF_ || "")))
|
319
319
|
|
320
320
|
{
|
321
321
|
curVFromNodeChild = virtualizeElement(curFromNodeChild);
|
322
|
-
curVFromNodeChild.
|
322
|
+
curVFromNodeChild.bF_ = curToNodeChild.bF_;
|
323
323
|
keysByDOMNode.set(curFromNodeChild, curToNodeKey);
|
324
324
|
referenceComponent.k_[curToNodeKey] =
|
325
325
|
curFromNodeChild;
|
@@ -339,7 +339,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
339
339
|
curFromNodeChild = fromNextSibling;
|
340
340
|
continue;
|
341
341
|
} else if (
|
342
|
-
curToNodeChild.
|
342
|
+
curToNodeChild.bz_ === FRAGMENT_NODE &&
|
343
343
|
curFromNodeChild.nodeType === COMMENT_NODE)
|
344
344
|
{
|
345
345
|
var content = curFromNodeChild.nodeValue;
|
@@ -419,7 +419,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
419
419
|
|
420
420
|
if (
|
421
421
|
toNextSibling &&
|
422
|
-
toNextSibling.
|
422
|
+
toNextSibling.by_ === curFromNodeKey)
|
423
423
|
{
|
424
424
|
// Single element swap
|
425
425
|
|
@@ -524,18 +524,18 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
524
524
|
|
525
525
|
if (
|
526
526
|
caseInsensitiveCompare(
|
527
|
-
curVFromNodeChild.
|
528
|
-
curToNodeChild.
|
527
|
+
curVFromNodeChild.bF_,
|
528
|
+
curToNodeChild.bF_))
|
529
529
|
|
530
530
|
{
|
531
|
-
curVFromNodeChild.
|
531
|
+
curVFromNodeChild.bF_ = curToNodeChild.bF_;
|
532
532
|
}
|
533
533
|
} else {
|
534
534
|
// Skip over nodes that don't look like ours...
|
535
535
|
curFromNodeChild = fromNextSibling;
|
536
536
|
continue;
|
537
537
|
}
|
538
|
-
} else if (curFromNodeKey = curVFromNodeChild.
|
538
|
+
} else if (curFromNodeKey = curVFromNodeChild.by_) {
|
539
539
|
// We have a keyed element here but our target VDOM node
|
540
540
|
// is not keyed so this not doesn't belong
|
541
541
|
isCompatible = false;
|
@@ -569,14 +569,14 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
569
569
|
isHydrate === true &&
|
570
570
|
toNextSibling &&
|
571
571
|
curFromNodeType === TEXT_NODE &&
|
572
|
-
toNextSibling.
|
572
|
+
toNextSibling.bz_ === TEXT_NODE)
|
573
573
|
{
|
574
574
|
fromNextSibling = curFromNodeChild.splitText(
|
575
|
-
curToNodeChild.
|
575
|
+
curToNodeChild.bS_.length);
|
576
576
|
|
577
577
|
}
|
578
|
-
if (curFromNodeChild.nodeValue !== curToNodeChild.
|
579
|
-
curFromNodeChild.nodeValue = curToNodeChild.
|
578
|
+
if (curFromNodeChild.nodeValue !== curToNodeChild.bS_) {
|
579
|
+
curFromNodeChild.nodeValue = curToNodeChild.bS_;
|
580
580
|
}
|
581
581
|
}
|
582
582
|
}
|
@@ -610,10 +610,10 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
610
610
|
}
|
611
611
|
|
612
612
|
// We have processed all of the "to nodes".
|
613
|
-
if (fromNode.
|
613
|
+
if (fromNode.bV_) {
|
614
614
|
// If we are in an unfinished fragment, we have reached the end of the nodes
|
615
615
|
// we were matching up and need to end the fragment
|
616
|
-
fromNode.
|
616
|
+
fromNode.bV_(curFromNodeChild);
|
617
617
|
} else {
|
618
618
|
// If curFromNodeChild is non-null then we still have some from nodes
|
619
619
|
// left over that need to be removed
|
@@ -642,7 +642,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
642
642
|
referenceComponent = parentComponent;
|
643
643
|
} else {
|
644
644
|
referenceComponent =
|
645
|
-
curVFromNodeChild && curVFromNodeChild.
|
645
|
+
curVFromNodeChild && curVFromNodeChild.az_;
|
646
646
|
}
|
647
647
|
|
648
648
|
detachNode(curFromNodeChild, fromNode, referenceComponent);
|
@@ -653,10 +653,10 @@ function morphdom(fromNode, toNode, host, componentsContext) {
|
|
653
653
|
}
|
654
654
|
|
655
655
|
function morphEl(fromEl, vFromEl, toEl, parentComponent) {
|
656
|
-
var nodeName = toEl.
|
656
|
+
var nodeName = toEl.bF_;
|
657
657
|
|
658
|
-
var constId = toEl.
|
659
|
-
if (constId !== undefined && vFromEl.
|
658
|
+
var constId = toEl.bH_;
|
659
|
+
if (constId !== undefined && vFromEl.bH_ === constId) {
|
660
660
|
return;
|
661
661
|
}
|
662
662
|
|
@@ -13,13 +13,13 @@ function forEachOption(el, fn, i) {
|
|
13
13
|
var curChild = el._s_;
|
14
14
|
|
15
15
|
while (curChild) {
|
16
|
-
if (curChild.
|
16
|
+
if (curChild.bF_ === "option") {
|
17
17
|
fn(curChild, ++i);
|
18
18
|
} else {
|
19
19
|
i = forEachOption(curChild, fn, i);
|
20
20
|
}
|
21
21
|
|
22
|
-
curChild = curChild.
|
22
|
+
curChild = curChild.bQ_;
|
23
23
|
}
|
24
24
|
|
25
25
|
return i;
|
@@ -52,13 +52,13 @@ SpecialElHandlers.prototype = {
|
|
52
52
|
fromEl.value = toEl.q_;
|
53
53
|
}
|
54
54
|
|
55
|
-
if (fromEl.hasAttribute("value") && !toEl.
|
55
|
+
if (fromEl.hasAttribute("value") && !toEl.bJ_("value")) {
|
56
56
|
fromEl.removeAttribute("value");
|
57
57
|
}
|
58
58
|
},
|
59
59
|
|
60
60
|
textarea: function (fromEl, toEl) {
|
61
|
-
if (toEl.
|
61
|
+
if (toEl.bT_) {
|
62
62
|
return;
|
63
63
|
}
|
64
64
|
|
@@ -84,12 +84,12 @@ SpecialElHandlers.prototype = {
|
|
84
84
|
}
|
85
85
|
},
|
86
86
|
select: function (fromEl, toEl) {
|
87
|
-
if (!toEl.
|
87
|
+
if (!toEl.bJ_("multiple")) {
|
88
88
|
var selected = 0;
|
89
89
|
forEachOption(
|
90
90
|
toEl,
|
91
91
|
function (option, i) {
|
92
|
-
if (option.
|
92
|
+
if (option.bJ_("selected")) {
|
93
93
|
selected = i;
|
94
94
|
}
|
95
95
|
},
|
@@ -11,7 +11,7 @@ var specialHtmlRegexp = /[&<]/;
|
|
11
11
|
function virtualizeChildNodes(node, vdomParent, ownerComponent) {
|
12
12
|
var curChild = node.firstChild;
|
13
13
|
while (curChild) {
|
14
|
-
vdomParent.
|
14
|
+
vdomParent.bp_(virtualize(curChild, ownerComponent));
|
15
15
|
curChild = curChild.nextSibling;
|
16
16
|
}
|
17
17
|
}
|
@@ -19,7 +19,7 @@ function virtualizeChildNodes(node, vdomParent, ownerComponent) {
|
|
19
19
|
function virtualize(node, ownerComponent) {
|
20
20
|
switch (node.nodeType) {
|
21
21
|
case 1:
|
22
|
-
return VElement.
|
22
|
+
return VElement.bL_(node, virtualizeChildNodes, ownerComponent);
|
23
23
|
case 3:
|
24
24
|
return new VText(node.nodeValue, ownerComponent);
|
25
25
|
case 11:
|
@@ -38,7 +38,7 @@ function virtualizeHTML(html, ownerComponent) {
|
|
38
38
|
var curChild = parseHTML(html);
|
39
39
|
|
40
40
|
while (curChild) {
|
41
|
-
vdomFragment.
|
41
|
+
vdomFragment.bp_(virtualize(curChild, ownerComponent));
|
42
42
|
curChild = curChild.nextSibling;
|
43
43
|
}
|
44
44
|
|
@@ -65,18 +65,18 @@ Node_prototype.t = function (value) {
|
|
65
65
|
}
|
66
66
|
}
|
67
67
|
|
68
|
-
this.
|
69
|
-
return this.
|
68
|
+
this.bp_(vdomNode || new VText(value.toString()));
|
69
|
+
return this.bI_();
|
70
70
|
};
|
71
71
|
|
72
|
-
Node_prototype.
|
73
|
-
return this.
|
72
|
+
Node_prototype.bu_ = function () {
|
73
|
+
return this.bp_(new VDocumentFragment());
|
74
74
|
};
|
75
75
|
|
76
|
-
exports.
|
77
|
-
exports.
|
78
|
-
exports.
|
79
|
-
exports.
|
80
|
-
exports.
|
81
|
-
exports.
|
82
|
-
exports.
|
76
|
+
exports.b__ = VDocumentFragment;
|
77
|
+
exports.aZ_ = VElement;
|
78
|
+
exports.ba_ = VText;
|
79
|
+
exports.bb_ = VComponent;
|
80
|
+
exports.bc_ = VFragment;
|
81
|
+
exports.bL_ = virtualize;
|
82
|
+
exports.bd_ = virtualizeHTML;
|
package/docs/body-content.md
CHANGED
@@ -111,9 +111,11 @@ _components/layout.marko_
|
|
111
111
|
|
112
112
|
> **ProTip:** The `renderBody` property can be omitted. You could use `<${input.heading}/>`, for example.
|
113
113
|
|
114
|
-
###
|
114
|
+
### Repeatable attribute tags
|
115
115
|
|
116
|
-
|
116
|
+
Attribute tags can be repeated. Rendering the same attribute tag name multiple times will cause the input value for that attribute to become an array instead of an single object.
|
117
|
+
|
118
|
+
This allows us to, for example, build a custom table component which allows its user to specify any number of columns, while still giving the user control over how each column is rendered.
|
117
119
|
|
118
120
|
_Marko Source:_
|
119
121
|
|
@@ -128,24 +130,26 @@ _Marko Source:_
|
|
128
130
|
</fancy-table>
|
129
131
|
```
|
130
132
|
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
```
|
133
|
+
> _Note_
|
134
|
+
> Attribute tags are _repeatable_.
|
135
|
+
>
|
136
|
+
> - Zero: if you don't pass any `@column` tags, the `fancy-table` receives `undefined`.
|
137
|
+
> - One: if you pass a single `@column` tag, the `fancy-table` receives a single attribute tag object. (For convenience this object is [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) meaning it can be directly passed to the `<for>` tag.)
|
138
|
+
> - Many: if you pass multiple `@column` tags, the `fancy-table` receives an array of attribute tags.
|
139
|
+
> For TypeScript the [`Marko.AttrTag` or `Marko.RepeatableAttrTag` helpers](./typescript.md#built-in-marko-types) should be used here.
|
140
|
+
|
141
|
+
> _Protip_
|
142
|
+
> To `.map`, `.filter` or otherwise work with attribute tags as an array:
|
143
|
+
>
|
144
|
+
> ```marko
|
145
|
+
> $ const columns = [...input.column || []];
|
146
|
+
> ```
|
143
147
|
|
144
148
|
We can then use the `<for>` tag to render the body content into table, passing the row data to each column's body.
|
145
149
|
|
146
150
|
_components/fancy-table/index.marko:_
|
147
151
|
|
148
|
-
```marko{4-8}
|
152
|
+
```marko {4-8}
|
149
153
|
<table class="fancy">
|
150
154
|
<for|row| of=input.data>
|
151
155
|
<tr>
|
@@ -212,7 +216,7 @@ Now, each object in the `input.column` array will contain a `heading` property i
|
|
212
216
|
|
213
217
|
_components/fancy-table/index.marko:_
|
214
218
|
|
215
|
-
```marko{3-5}
|
219
|
+
```marko {3-5}
|
216
220
|
<table class="fancy">
|
217
221
|
<tr>
|
218
222
|
<for|column| of=input.column>
|
@@ -252,13 +256,28 @@ _HTML Output:_
|
|
252
256
|
</table>
|
253
257
|
```
|
254
258
|
|
259
|
+
> _Note_
|
260
|
+
> You may also specify that the attribute tag can be repeated in a [`marko-tag.json`](./marko-json.md#single-component-definition) file.
|
261
|
+
> This will cause an array to _always_ be passed if there are any items, rather than working up from `undefined`, single object and then an array.
|
262
|
+
>
|
263
|
+
> _components/fancy-table/marko-tag.json:_
|
264
|
+
>
|
265
|
+
> ```js
|
266
|
+
> {
|
267
|
+
> "@data": "array",
|
268
|
+
> "<column>": {
|
269
|
+
> "is-repeated": true
|
270
|
+
> }
|
271
|
+
> }
|
272
|
+
> ```
|
273
|
+
|
255
274
|
### Nested attribute tags
|
256
275
|
|
257
276
|
Continuing to build on our example, what if we want to add some custom content or even components into the column headings? In this case, we can extend our `<fancy-table>` to use nested attribute tags. We'll now have `<@heading>` and `<@cell>` tags nested under `<@column>`. This gives users of our tag full control over how to render both column headings and the cells within the column!
|
258
277
|
|
259
278
|
_Marko Source:_
|
260
279
|
|
261
|
-
```marko{3-8}
|
280
|
+
```marko {3-8}
|
262
281
|
<fancy-table>
|
263
282
|
<@column>
|
264
283
|
<@heading>
|
@@ -283,7 +302,7 @@ Now instead of rendering the heading as text, we'll render the heading's body co
|
|
283
302
|
|
284
303
|
_components/fancy-table/index.marko:_
|
285
304
|
|
286
|
-
```marko{5}
|
305
|
+
```marko {5}
|
287
306
|
<table class="fancy">
|
288
307
|
<tr>
|
289
308
|
<for|column| of=input.column>
|