marko 5.23.0 → 5.25.0

package/dist/runtime/vdom/VNode.js

@@ -2,81 +2,81 @@
 function VNode() {}
 
 VNode.prototype = {
-  bA_: function (finalChildCount, ownerComponent) {
-    this.bQ_ = finalChildCount;
-    this.bR_ = 0;
-    this.bG_ = null;
-    this.bS_ = null;
+  bx_: function (finalChildCount, ownerComponent) {
+    this.bN_ = finalChildCount;
+    this.bO_ = 0;
     this.bD_ = null;
-    this.bE_ = null;
-    this.aC_ = ownerComponent;
+    this.bP_ = null;
+    this.bA_ = null;
+    this.bB_ = null;
+    this.az_ = ownerComponent;
   },
 
   get _s_() {
-    var firstChild = this.bG_;
+    var firstChild = this.bD_;
 
-    if (firstChild && firstChild.bF_) {
+    if (firstChild && firstChild.bC_) {
       var nestedFirstChild = firstChild._s_;
       // The first child is a DocumentFragment node.
       // If the DocumentFragment node has a first child then we will return that.
       // Otherwise, the DocumentFragment node is not *really* the first child and
       // we need to skip to its next sibling
-      return nestedFirstChild || firstChild.bT_;
+      return nestedFirstChild || firstChild.bQ_;
     }
 
     return firstChild;
   },
 
-  get bT_() {
-    var nextSibling = this.bE_;
+  get bQ_() {
+    var nextSibling = this.bB_;
 
     if (nextSibling) {
-      if (nextSibling.bF_) {
+      if (nextSibling.bC_) {
         var firstChild = nextSibling._s_;
-        return firstChild || nextSibling.bT_;
+        return firstChild || nextSibling.bQ_;
       }
     } else {
-      var parentNode = this.bD_;
-      if (parentNode && parentNode.bF_) {
-        return parentNode.bT_;
+      var parentNode = this.bA_;
+      if (parentNode && parentNode.bC_) {
+        return parentNode.bQ_;
       }
     }
 
     return nextSibling;
   },
 
-  bs_: function (child) {
-    this.bR_++;
+  bp_: function (child) {
+    this.bO_++;
 
-    if (this.bI_ === "textarea") {
-      if (child.bU_) {
-        var childValue = child.bV_;
-        this.bJ_ = (this.bJ_ || "") + childValue;
+    if (this.bF_ === "textarea") {
+      if (child.bR_) {
+        var childValue = child.bS_;
+        this.bG_ = (this.bG_ || "") + childValue;
       } else if (child.n_ || child.m_) {
-        this.bW_ = true;
+        this.bT_ = true;
       } else {
         throw TypeError();
       }
     } else {
-      var lastChild = this.bS_;
+      var lastChild = this.bP_;
 
-      child.bD_ = this;
+      child.bA_ = this;
 
       if (lastChild) {
-        lastChild.bE_ = child;
+        lastChild.bB_ = child;
       } else {
-        this.bG_ = child;
+        this.bD_ = child;
       }
 
-      this.bS_ = child;
+      this.bP_ = child;
     }
 
     return child;
   },
 
-  bL_: function finishChild() {
-    if (this.bR_ === this.bQ_ && this.bD_) {
-      return this.bD_.bL_();
+  bI_: function finishChild() {
+    if (this.bO_ === this.bN_ && this.bA_) {
+      return this.bA_.bI_();
     } else {
       return this;
     }

package/dist/runtime/vdom/VText.js

@@ -2,21 +2,21 @@
 var inherit = require("raptor-util/inherit");
 
 function VText(value, ownerComponent) {
-  this.bA_(-1 /* no children */, ownerComponent);
-  this.bV_ = value;
+  this.bx_(-1 /* no children */, ownerComponent);
+  this.bS_ = value;
 }
 
 VText.prototype = {
-  bU_: true,
+  bR_: true,
 
-  bC_: 3,
+  bz_: 3,
 
-  bz_: function (host) {
-    return (host.ownerDocument || host).createTextNode(this.bV_);
+  bw_: function (host) {
+    return (host.ownerDocument || host).createTextNode(this.bS_);
   },
 
-  bt_: function () {
-    return new VText(this.bV_);
+  bq_: function () {
+    return new VText(this.bS_);
   }
 };
 

package/dist/runtime/vdom/helpers/v-element.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var VElement = require("../vdom").bb_;
+var VElement = require("../vdom").aZ_;
 
 module.exports = function (
 tagName,

package/dist/runtime/vdom/helpers/v-text.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var VText = require("../vdom").bd_;
+var VText = require("../vdom").ba_;
 
 module.exports = function (value) {
   return new VText(value);

package/dist/runtime/vdom/hot-reload.js

@@ -32,7 +32,7 @@ runtime.t = function (typeName) {
         }
 
         queue.push(function () {
-          var newProto = registry.aw_(typeName).prototype;
+          var newProto = registry.at_(typeName).prototype;
           instances.forEach(function (instance) {
             if (hasLifecycleChanged(instance.__proto__, newProto)) {
               var startNode = instance.L_.startNode;
@@ -40,7 +40,7 @@ runtime.t = function (typeName) {
               var parentNode = startNode.parentNode;
               var curNode;
 
-              instance.bX_ = true;
+              instance.bU_ = true;
               instance._b_();
               instance._c_();
 
@@ -54,7 +54,7 @@ runtime.t = function (typeName) {
                 parentNode.removeChild(curNode);
               }
 
-              instance.bX_ = false;
+              instance.bU_ = false;
               instance.S_ = false;
             }
 
@@ -82,7 +82,7 @@ registry._Q_ = function (typeName, id) {
   if (instances) {
     instances.push(instance);
     instance.once("destroy", function () {
-      if (!instance.bX_) {
+      if (!instance.bU_) {
         instances.splice(1, instances.indexOf(instance));
       }
     });

package/dist/runtime/vdom/index.js

@@ -15,11 +15,11 @@ exports.t = function createTemplate(typeName) {
 };
 
 function Template(typeName) {
-  this.ba_ = typeName;
+  this.aY_ = typeName;
 }
 
 var AsyncVDOMBuilder = require("./AsyncVDOMBuilder");
-require("../createOut").aG_(
+require("../createOut").aD_(
 Template.prototype.createOut = function createOut(
 globalData,
 parent,

package/dist/runtime/vdom/morphdom/fragment.js

@@ -1,5 +1,5 @@
 "use strict";var helpers = require("./helpers");
-var insertBefore = helpers.aH_;
+var insertBefore = helpers.aE_;
 
 var fragmentPrototype = {
   nodeType: 12,
@@ -80,8 +80,8 @@ function createFragmentNode(startNode, nextNode, parentNode) {
 
 function beginFragmentNode(startNode, parentNode) {
   var fragment = createFragmentNode(startNode, null, parentNode);
-  fragment.bY_ = function (nextNode) {
-    fragment.bY_ = null;
+  fragment.bV_ = function (nextNode) {
+    fragment.bV_ = null;
     insertBefore(
     fragment.endNode,
     nextNode,
@@ -92,4 +92,4 @@ function beginFragmentNode(startNode, parentNode) {
 }
 
 exports.ap_ = createFragmentNode;
-exports.bZ_ = beginFragmentNode;
+exports.bW_ = beginFragmentNode;

package/dist/runtime/vdom/morphdom/helpers.js

@@ -35,8 +35,8 @@ function removeChild(node) {
   node.parentNode.removeChild(node);
 }
 
-exports.aH_ = insertBefore;
-exports.aI_ = insertAfter;
-exports.bT_ = nextSibling;
+exports.aE_ = insertBefore;
+exports.aF_ = insertAfter;
+exports.bQ_ = nextSibling;
 exports._s_ = firstChild;
-exports.aJ_ = removeChild;
+exports.aG_ = removeChild;

package/dist/runtime/vdom/morphdom/index.js

@@ -6,10 +6,10 @@ var existingComponentLookup = componentsUtil.D_;
 var destroyNodeRecursive = componentsUtil.E_;
 var addComponentRootToKeyedElements =
 componentsUtil.aq_;
-var normalizeComponentKey = componentsUtil.aF_;
-var VElement = require("../vdom").bb_;
-var virtualizeElement = VElement.bO_;
-var morphAttrs = VElement.bP_;
+var normalizeComponentKey = componentsUtil.aC_;
+var VElement = require("../vdom").aZ_;
+var virtualizeElement = VElement.bL_;
+var morphAttrs = VElement.bM_;
 var eventDelegation = require("../../components/event-delegation");
 var fragment = require("./fragment");
 var helpers = require("./helpers");
@@ -19,13 +19,13 @@ var componentByDOMNode = domData.F_;
 var vElementByDOMNode = domData.af_;
 var detachedByDOMNode = domData.ag_;
 
-var insertBefore = helpers.aH_;
-var insertAfter = helpers.aI_;
-var nextSibling = helpers.bT_;
+var insertBefore = helpers.aE_;
+var insertAfter = helpers.aF_;
+var nextSibling = helpers.bQ_;
 var firstChild = helpers._s_;
-var removeChild = helpers.aJ_;
+var removeChild = helpers.aG_;
 var createFragmentNode = fragment.ap_;
-var beginFragmentNode = fragment.bZ_;
+var beginFragmentNode = fragment.bW_;
 
 var ELEMENT_NODE = 1;
 var TEXT_NODE = 3;
@@ -43,7 +43,7 @@ function isAutoKey(key) {
 }
 
 function compareNodeNames(fromEl, toEl) {
-  return fromEl.bI_ === toEl.bI_;
+  return fromEl.bF_ === toEl.bF_;
 }
 
 function caseInsensitiveCompare(a, b) {
@@ -74,12 +74,12 @@ function morphdom(fromNode, toNode, host, componentsContext) {
   ownerComponent,
   parentComponent)
   {
-    var realNode = vNode.bz_(host, parentEl.namespaceURI);
+    var realNode = vNode.bw_(host, parentEl.namespaceURI);
     insertBefore(realNode, referenceEl, parentEl);
 
     if (
-    vNode.bC_ === ELEMENT_NODE ||
-    vNode.bC_ === FRAGMENT_NODE)
+    vNode.bz_ === ELEMENT_NODE ||
+    vNode.bz_ === FRAGMENT_NODE)
     {
       if (key) {
         keysByDOMNode.set(realNode, key);
@@ -88,7 +88,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
         realNode;
       }
 
-      if (vNode.bI_ !== "textarea") {
+      if (vNode.bF_ !== "textarea") {
         morphChildren(realNode, vNode, parentComponent);
       }
 
@@ -162,16 +162,16 @@ function morphdom(fromNode, toNode, host, componentsContext) {
     var fromComponent;
 
     outer: while (curToNodeChild) {
-      toNextSibling = curToNodeChild.bT_;
-      curToNodeType = curToNodeChild.bC_;
-      curToNodeKey = curToNodeChild.bB_;
+      toNextSibling = curToNodeChild.bQ_;
+      curToNodeType = curToNodeChild.bz_;
+      curToNodeKey = curToNodeChild.by_;
 
       // Skip <!doctype>
       if (curFromNodeChild && curFromNodeChild.nodeType === DOCTYPE_NODE) {
         curFromNodeChild = nextSibling(curFromNodeChild);
       }
 
-      var ownerComponent = curToNodeChild.aC_ || parentComponent;
+      var ownerComponent = curToNodeChild.az_ || parentComponent;
       var referenceComponent;
 
       if (curToNodeType === COMPONENT_NODE) {
@@ -315,11 +315,11 @@ function morphdom(fromNode, toNode, host, componentsContext) {
               curToNodeChild.n_ ||
               caseInsensitiveCompare(
               curFromNodeChild.nodeName,
-              curToNodeChild.bI_ || "")))
+              curToNodeChild.bF_ || "")))
 
               {
                 curVFromNodeChild = virtualizeElement(curFromNodeChild);
-                curVFromNodeChild.bI_ = curToNodeChild.bI_;
+                curVFromNodeChild.bF_ = curToNodeChild.bF_;
                 keysByDOMNode.set(curFromNodeChild, curToNodeKey);
                 referenceComponent.k_[curToNodeKey] =
                 curFromNodeChild;
@@ -339,7 +339,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
                 curFromNodeChild = fromNextSibling;
                 continue;
               } else if (
-              curToNodeChild.bC_ === FRAGMENT_NODE &&
+              curToNodeChild.bz_ === FRAGMENT_NODE &&
               curFromNodeChild.nodeType === COMMENT_NODE)
               {
                 var content = curFromNodeChild.nodeValue;
@@ -419,7 +419,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
 
                   if (
                   toNextSibling &&
-                  toNextSibling.bB_ === curFromNodeKey)
+                  toNextSibling.by_ === curFromNodeKey)
                   {
                     // Single element swap
 
@@ -524,18 +524,18 @@ function morphdom(fromNode, toNode, host, componentsContext) {
 
                 if (
                 caseInsensitiveCompare(
-                curVFromNodeChild.bI_,
-                curToNodeChild.bI_))
+                curVFromNodeChild.bF_,
+                curToNodeChild.bF_))
 
                 {
-                  curVFromNodeChild.bI_ = curToNodeChild.bI_;
+                  curVFromNodeChild.bF_ = curToNodeChild.bF_;
                 }
               } else {
                 // Skip over nodes that don't look like ours...
                 curFromNodeChild = fromNextSibling;
                 continue;
               }
-            } else if (curFromNodeKey = curVFromNodeChild.bB_) {
+            } else if (curFromNodeKey = curVFromNodeChild.by_) {
               // We have a keyed element here but our target VDOM node
               // is not keyed so this not doesn't belong
               isCompatible = false;
@@ -569,14 +569,14 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             isHydrate === true &&
             toNextSibling &&
             curFromNodeType === TEXT_NODE &&
-            toNextSibling.bC_ === TEXT_NODE)
+            toNextSibling.bz_ === TEXT_NODE)
             {
               fromNextSibling = curFromNodeChild.splitText(
-              curToNodeChild.bV_.length);
+              curToNodeChild.bS_.length);
 
             }
-            if (curFromNodeChild.nodeValue !== curToNodeChild.bV_) {
-              curFromNodeChild.nodeValue = curToNodeChild.bV_;
+            if (curFromNodeChild.nodeValue !== curToNodeChild.bS_) {
+              curFromNodeChild.nodeValue = curToNodeChild.bS_;
             }
           }
         }
@@ -610,10 +610,10 @@ function morphdom(fromNode, toNode, host, componentsContext) {
     }
 
     // We have processed all of the "to nodes".
-    if (fromNode.bY_) {
+    if (fromNode.bV_) {
       // If we are in an unfinished fragment, we have reached the end of the nodes
       // we were matching up and need to end the fragment
-      fromNode.bY_(curFromNodeChild);
+      fromNode.bV_(curFromNodeChild);
     } else {
       // If curFromNodeChild is non-null then we still have some from nodes
       // left over that need to be removed
@@ -642,7 +642,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           referenceComponent = parentComponent;
         } else {
           referenceComponent =
-          curVFromNodeChild && curVFromNodeChild.aC_;
+          curVFromNodeChild && curVFromNodeChild.az_;
         }
 
         detachNode(curFromNodeChild, fromNode, referenceComponent);
@@ -653,10 +653,10 @@ function morphdom(fromNode, toNode, host, componentsContext) {
   }
 
   function morphEl(fromEl, vFromEl, toEl, parentComponent) {
-    var nodeName = toEl.bI_;
+    var nodeName = toEl.bF_;
 
-    var constId = toEl.bK_;
-    if (constId !== undefined && vFromEl.bK_ === constId) {
+    var constId = toEl.bH_;
+    if (constId !== undefined && vFromEl.bH_ === constId) {
       return;
     }
 

package/dist/runtime/vdom/morphdom/specialElHandlers.js

@@ -13,13 +13,13 @@ function forEachOption(el, fn, i) {
   var curChild = el._s_;
 
   while (curChild) {
-    if (curChild.bI_ === "option") {
+    if (curChild.bF_ === "option") {
       fn(curChild, ++i);
     } else {
       i = forEachOption(curChild, fn, i);
     }
 
-    curChild = curChild.bT_;
+    curChild = curChild.bQ_;
   }
 
   return i;
@@ -52,13 +52,13 @@ SpecialElHandlers.prototype = {
       fromEl.value = toEl.q_;
     }
 
-    if (fromEl.hasAttribute("value") && !toEl.bM_("value")) {
+    if (fromEl.hasAttribute("value") && !toEl.bJ_("value")) {
       fromEl.removeAttribute("value");
     }
   },
 
   textarea: function (fromEl, toEl) {
-    if (toEl.bW_) {
+    if (toEl.bT_) {
       return;
     }
 
@@ -84,12 +84,12 @@ SpecialElHandlers.prototype = {
     }
   },
   select: function (fromEl, toEl) {
-    if (!toEl.bM_("multiple")) {
+    if (!toEl.bJ_("multiple")) {
       var selected = 0;
       forEachOption(
       toEl,
       function (option, i) {
-        if (option.bM_("selected")) {
+        if (option.bJ_("selected")) {
           selected = i;
         }
       },

package/dist/runtime/vdom/preserve-attrs.js

@@ -12,4 +12,4 @@ function removePreservedAttributes(attrs, props) {
   return attrs;
 }
 
-require("./VElement").bN_ = removePreservedAttributes;
+require("./VElement").bK_ = removePreservedAttributes;

package/dist/runtime/vdom/vdom.js

@@ -11,7 +11,7 @@ var specialHtmlRegexp = /[&<]/;
 function virtualizeChildNodes(node, vdomParent, ownerComponent) {
   var curChild = node.firstChild;
   while (curChild) {
-    vdomParent.bs_(virtualize(curChild, ownerComponent));
+    vdomParent.bp_(virtualize(curChild, ownerComponent));
     curChild = curChild.nextSibling;
   }
 }
@@ -19,7 +19,7 @@ function virtualizeChildNodes(node, vdomParent, ownerComponent) {
 function virtualize(node, ownerComponent) {
   switch (node.nodeType) {
     case 1:
-      return VElement.bO_(node, virtualizeChildNodes, ownerComponent);
+      return VElement.bL_(node, virtualizeChildNodes, ownerComponent);
     case 3:
       return new VText(node.nodeValue, ownerComponent);
     case 11:
@@ -38,7 +38,7 @@ function virtualizeHTML(html, ownerComponent) {
   var curChild = parseHTML(html);
 
   while (curChild) {
-    vdomFragment.bs_(virtualize(curChild, ownerComponent));
+    vdomFragment.bp_(virtualize(curChild, ownerComponent));
     curChild = curChild.nextSibling;
   }
 
@@ -65,18 +65,18 @@ Node_prototype.t = function (value) {
     }
   }
 
-  this.bs_(vdomNode || new VText(value.toString()));
-  return this.bL_();
+  this.bp_(vdomNode || new VText(value.toString()));
+  return this.bI_();
 };
 
-Node_prototype.bx_ = function () {
-  return this.bs_(new VDocumentFragment());
+Node_prototype.bu_ = function () {
+  return this.bp_(new VDocumentFragment());
 };
 
-exports.bc_ = VDocumentFragment;
-exports.bb_ = VElement;
-exports.bd_ = VText;
-exports.be_ = VComponent;
-exports.bf_ = VFragment;
-exports.bO_ = virtualize;
-exports.bg_ = virtualizeHTML;
+exports.b__ = VDocumentFragment;
+exports.aZ_ = VElement;
+exports.ba_ = VText;
+exports.bb_ = VComponent;
+exports.bc_ = VFragment;
+exports.bL_ = virtualize;
+exports.bd_ = virtualizeHTML;

package/docs/body-content.md

@@ -111,9 +111,11 @@ _components/layout.marko_
 
 > **ProTip:** The `renderBody` property can be omitted. You could use `<${input.heading}/>`, for example.
 
-### Repeated attribute tags
+### Repeatable attribute tags
 
-It is sometimes useful to allow multiple of the same attribute tag to be passed. This would allow us to, for example, build a custom table component which would allow its user to specify any number of columns, while still giving ther user control over how each column is rendered:
+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.
+
+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.
 
 _Marko Source:_
 
@@ -128,24 +130,26 @@ _Marko Source:_
 </fancy-table>
 ```
 
-In order to receive multiple of the same attribute tag, you need to specify that the attribute tag can be repeated in a [`marko-tag.json`](./marko-json.md#single-component-definition) file.
-
-_components/fancy-table/marko-tag.json:_
-
-```js
-{
-    "@data": "array",
-    "<column>": {
-        "is-repeated": true
-    }
-}
-```
+> _Note_
+> Attribute tags are _repeatable_.
+>
+> - Zero: if you don't pass any `@column` tags, the `fancy-table` receives `undefined`.
+> - 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.)
+> - Many: if you pass multiple `@column` tags, the `fancy-table` receives an array of attribute tags.
+>   For TypeScript the [`Marko.AttrTag` or `Marko.RepeatableAttrTag` helpers](./typescript.md#built-in-marko-types) should be used here.
+
+> _Protip_
+> To `.map`, `.filter` or otherwise work with attribute tags as an array:
+>
+> ```marko
+> $ const columns = [...input.column || []];
+> ```
 
 We can then use the `<for>` tag to render the body content into table, passing the row data to each column's body.
 
 _components/fancy-table/index.marko:_
 
-```marko{4-8}
+```marko {4-8}
 <table class="fancy">
     <for|row| of=input.data>
         <tr>
@@ -212,7 +216,7 @@ Now, each object in the `input.column` array will contain a `heading` property i
 
 _components/fancy-table/index.marko:_
 
-```marko{3-5}
+```marko {3-5}
 <table class="fancy">
     <tr>
         <for|column| of=input.column>
@@ -252,13 +256,28 @@ _HTML Output:_
 </table>
 ```
 
+> _Note_
+> You may also specify that the attribute tag can be repeated in a [`marko-tag.json`](./marko-json.md#single-component-definition) file.
+> 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.
+>
+> _components/fancy-table/marko-tag.json:_
+>
+> ```js
+> {
+>     "@data": "array",
+>     "<column>": {
+>         "is-repeated": true
+>     }
+> }
+> ```
+
 ### Nested attribute tags
 
 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!
 
 _Marko Source:_
 
-```marko{3-8}
+```marko {3-8}
 <fancy-table>
     <@column>
         <@heading>
@@ -283,7 +302,7 @@ Now instead of rendering the heading as text, we'll render the heading's body co
 
 _components/fancy-table/index.marko:_
 
-```marko{5}
+```marko {5}
 <table class="fancy">
     <tr>
         <for|column| of=input.column>

package/docs/class-components.md

@@ -565,7 +565,7 @@ this.setStateDirty("numbers");
 
 ### `this.input`
 
-The current input for the component. Setting `this.input` will rerender the component. If a `$global` property is set, `out.global` will also be updated during the rerender, otherwise the existing `$global` is used.
+The current input for the component. Setting `this.input` will rerender the component which can be useful for testing, but generally avoided (prefer `state` instead).
 
 ## Variables