marko 4.28.6 → 4.28.8

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

@@ -27,8 +27,8 @@ function removeChild(node) {
   if (node.remove) node.remove();else node.parentNode.removeChild(node);
 }
 
-exports.bg_ = insertBefore;
-exports.bh_ = insertAfter;
+exports.bh_ = insertBefore;
+exports.bi_ = insertAfter;
 exports.b_ = nextSibling;
 exports.a_ = firstChild;
-exports.bi_ = removeChild;
+exports.bj_ = removeChild;

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

@@ -3,10 +3,10 @@
 var specialElHandlers = require("./specialElHandlers");
 var KeySequence = require("../../components/KeySequence");
 var componentsUtil = require("@internal/components-util");
-var existingComponentLookup = componentsUtil._n_;
-var destroyNodeRecursive = componentsUtil._S_;
-var addComponentRootToKeyedElements = componentsUtil._o_;
-var normalizeComponentKey = componentsUtil._V_;
+var existingComponentLookup = componentsUtil._o_;
+var destroyNodeRecursive = componentsUtil._T_;
+var addComponentRootToKeyedElements = componentsUtil._p_;
+var normalizeComponentKey = componentsUtil._W_;
 var VElement = require("../vdom").bw_;
 var virtualizeElement = VElement.cj_;
 var morphAttrs = VElement.ck_;
@@ -14,17 +14,17 @@ var eventDelegation = require("../../components/event-delegation");
 var fragment = require("./fragment");
 var helpers = require("./helpers");
 var domData = require("../../components/dom-data");
-var keysByDOMNode = domData._K_;
-var componentByDOMNode = domData._q_;
-var vElementByDOMNode = domData._L_;
-var detachedByDOMNode = domData.aW_;
+var keysByDOMNode = domData._L_;
+var componentByDOMNode = domData._r_;
+var vElementByDOMNode = domData._M_;
+var detachedByDOMNode = domData.aX_;
 
-var insertBefore = helpers.bg_;
-var insertAfter = helpers.bh_;
+var insertBefore = helpers.bh_;
+var insertAfter = helpers.bi_;
 var nextSibling = helpers.b_;
 var firstChild = helpers.a_;
-var removeChild = helpers.bi_;
-var createFragmentNode = fragment._m_;
+var removeChild = helpers.bj_;
+var createFragmentNode = fragment._n_;
 var beginFragmentNode = fragment.cr_;
 
 var ELEMENT_NODE = 1;
@@ -52,7 +52,7 @@ function caseInsensitiveCompare(a, b) {
 
 function onNodeAdded(node, componentsContext) {
   if (node.nodeType === ELEMENT_NODE) {
-    eventDelegation.aV_(node, componentsContext);
+    eventDelegation.aW_(node, componentsContext);
   }
 }
 
@@ -62,8 +62,8 @@ function morphdom(fromNode, toNode, host, componentsContext) {
   var keySequences = Object.create(null);
 
   if (componentsContext) {
-    globalComponentsContext = componentsContext.r_;
-    isHydrate = globalComponentsContext.a__;
+    globalComponentsContext = componentsContext.s_;
+    isHydrate = globalComponentsContext.aa_;
   }
 
   function insertVirtualNodeBefore(vNode, key, referenceEl, parentEl, ownerComponent, parentComponent) {
@@ -73,7 +73,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
     if (vNode.bX_ === ELEMENT_NODE || vNode.bX_ === FRAGMENT_NODE) {
       if (key) {
         keysByDOMNode.set(realNode, key);
-        (isAutoKey(key) ? parentComponent : ownerComponent).N_[key] = realNode;
+        (isAutoKey(key) ? parentComponent : ownerComponent).O_[key] = realNode;
       }
 
       if (vNode.cd_ !== "textarea") {
@@ -85,12 +85,12 @@ function morphdom(fromNode, toNode, host, componentsContext) {
   }
 
   function insertVirtualComponentBefore(vComponent, referenceNode, referenceNodeParentEl, component, key, ownerComponent, parentComponent) {
-    var rootNode = component._E_ = insertBefore(createFragmentNode(), referenceNode, referenceNodeParentEl);
+    var rootNode = component._F_ = insertBefore(createFragmentNode(), referenceNode, referenceNodeParentEl);
     componentByDOMNode.set(rootNode, component);
 
     if (key && ownerComponent) {
       key = normalizeComponentKey(key, parentComponent.id);
-      addComponentRootToKeyedElements(ownerComponent.N_, key, rootNode, component.id);
+      addComponentRootToKeyedElements(ownerComponent.O_, key, rootNode, component.id);
       keysByDOMNode.set(rootNode, key);
     }
 
@@ -98,7 +98,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
   }
 
   function morphComponent(component, vComponent) {
-    morphChildren(component._E_, vComponent, component);
+    morphChildren(component._F_, vComponent, component);
   }
 
   var detachedNodes = [];
@@ -142,20 +142,20 @@ function morphdom(fromNode, toNode, host, componentsContext) {
         curFromNodeChild = nextSibling(curFromNodeChild);
       }
 
-      var ownerComponent = curToNodeChild._N_ || parentComponent;
+      var ownerComponent = curToNodeChild._O_ || parentComponent;
       var referenceComponent;
 
       if (curToNodeType === COMPONENT_NODE) {
-        var component = curToNodeChild.v_;
+        var component = curToNodeChild.w_;
         if ((matchingFromComponent = existingComponentLookup[component.id]) === undefined) {
           if (isHydrate) {
             var rootNode = beginFragmentNode(curFromNodeChild, fromNode);
-            component._E_ = rootNode;
+            component._F_ = rootNode;
             componentByDOMNode.set(rootNode, component);
 
             if (ownerComponent && curToNodeKey) {
               curToNodeKey = normalizeComponentKey(curToNodeKey, parentComponent.id);
-              addComponentRootToKeyedElements(ownerComponent.N_, curToNodeKey, rootNode, component.id);
+              addComponentRootToKeyedElements(ownerComponent.O_, curToNodeKey, rootNode, component.id);
 
               keysByDOMNode.set(rootNode, curToNodeKey);
             }
@@ -167,23 +167,23 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             insertVirtualComponentBefore(curToNodeChild, curFromNodeChild, fromNode, component, curToNodeKey, ownerComponent, parentComponent);
           }
         } else {
-          if (matchingFromComponent._E_ !== curFromNodeChild) {
-            if (curFromNodeChild && (fromComponent = componentByDOMNode.get(curFromNodeChild)) && globalComponentsContext.s_[fromComponent.id] === undefined) {
+          if (matchingFromComponent._F_ !== curFromNodeChild) {
+            if (curFromNodeChild && (fromComponent = componentByDOMNode.get(curFromNodeChild)) && globalComponentsContext.t_[fromComponent.id] === undefined) {
               // The component associated with the current real DOM node was not rendered
               // so we should just remove it out of the real DOM by destroying it
-              curFromNodeChild = nextSibling(fromComponent._E_);
+              curFromNodeChild = nextSibling(fromComponent._F_);
               destroyComponent(fromComponent);
               continue;
             }
 
             // We need to move the existing component into
             // the correct location
-            insertBefore(matchingFromComponent._E_, curFromNodeChild, fromNode);
+            insertBefore(matchingFromComponent._F_, curFromNodeChild, fromNode);
           } else {
             curFromNodeChild = curFromNodeChild && nextSibling(curFromNodeChild);
           }
 
-          if (!curToNodeChild.ae_) {
+          if (!curToNodeChild.af_) {
             morphComponent(component, curToNodeChild);
           }
         }
@@ -206,7 +206,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
 
         // We have a keyed element. This is the fast path for matching
         // up elements
-        curToNodeKey = (keySequences[referenceComponent.id] || (keySequences[referenceComponent.id] = new KeySequence())).aN_(curToNodeKey);
+        curToNodeKey = (keySequences[referenceComponent.id] || (keySequences[referenceComponent.id] = new KeySequence())).aO_(curToNodeKey);
 
         if (curFromNodeChild) {
           curFromNodeKey = keysByDOMNode.get(curFromNodeChild);
@@ -216,7 +216,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
 
         if (curFromNodeKey === curToNodeKey) {
           // Elements line up. Now we just have to make sure they are compatible
-          if (!curToNodeChild.ae_) {
+          if (!curToNodeChild.af_) {
             // We just skip over the fromNode if it is preserved
 
             if (curVFromNodeChild && curToNodeType === curVFromNodeChild.bX_ && (curToNodeType !== ELEMENT_NODE || compareNodeNames(curToNodeChild, curVFromNodeChild))) {
@@ -234,16 +234,16 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             }
           }
         } else {
-          matchingFromEl = referenceComponent.N_[curToNodeKey];
+          matchingFromEl = referenceComponent.O_[curToNodeKey];
           if (matchingFromEl === undefined || matchingFromEl === curFromNodeChild) {
             if (isHydrate && curFromNodeChild) {
-              if (curFromNodeChild.nodeType === ELEMENT_NODE && (curToNodeChild.ae_ || caseInsensitiveCompare(curFromNodeChild.nodeName, curToNodeChild.cd_ || ""))) {
+              if (curFromNodeChild.nodeType === ELEMENT_NODE && (curToNodeChild.af_ || caseInsensitiveCompare(curFromNodeChild.nodeName, curToNodeChild.cd_ || ""))) {
                 curVFromNodeChild = virtualizeElement(curFromNodeChild);
                 curVFromNodeChild.cd_ = curToNodeChild.cd_;
                 keysByDOMNode.set(curFromNodeChild, curToNodeKey);
-                referenceComponent.N_[curToNodeKey] = curFromNodeChild;
+                referenceComponent.O_[curToNodeKey] = curFromNodeChild;
 
-                if (curToNodeChild.ae_) {
+                if (curToNodeChild.af_) {
                   vElementByDOMNode.set(curFromNodeChild, curVFromNodeChild);
                 } else {
                   morphEl(curFromNodeChild, curVFromNodeChild, curToNodeChild, parentComponent);
@@ -279,11 +279,11 @@ function morphdom(fromNode, toNode, host, componentsContext) {
                   var fragment = createFragmentNode(curFromNodeChild, endNode.nextSibling, fromNode);
                   keysByDOMNode.set(fragment, curToNodeKey);
                   vElementByDOMNode.set(fragment, curToNodeChild);
-                  referenceComponent.N_[curToNodeKey] = fragment;
+                  referenceComponent.O_[curToNodeKey] = fragment;
                   removeChild(curFromNodeChild);
                   removeChild(endNode);
 
-                  if (!curToNodeChild.ae_) {
+                  if (!curToNodeChild.af_) {
                     morphChildren(fragment, curToNodeChild, parentComponent);
                   }
 
@@ -301,7 +301,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
               detachedByDOMNode.set(matchingFromEl, undefined);
             }
 
-            if (!curToNodeChild.ae_) {
+            if (!curToNodeChild.af_) {
               curVFromNodeChild = vElementByDOMNode.get(matchingFromEl);
 
               if (curVFromNodeChild && curToNodeType === curVFromNodeChild.bX_ && (curToNodeType !== ELEMENT_NODE || compareNodeNames(curVFromNodeChild, curToNodeChild))) {
@@ -390,7 +390,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           // not compatible with the current "to" node
           curFromNodeChild = fromNextSibling;
 
-          if (!globalComponentsContext.s_[fromComponent.id]) {
+          if (!globalComponentsContext.t_[fromComponent.id]) {
             destroyComponent(fromComponent);
           }
 
@@ -486,7 +486,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
 
         if (fromComponent = componentByDOMNode.get(curFromNodeChild)) {
           curFromNodeChild = fromNextSibling;
-          if (!globalComponentsContext.s_[fromComponent.id]) {
+          if (!globalComponentsContext.t_[fromComponent.id]) {
             destroyComponent(fromComponent);
           }
           continue;
@@ -500,7 +500,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
         if (!curFromNodeKey || isAutoKey(curFromNodeKey)) {
           referenceComponent = parentComponent;
         } else {
-          referenceComponent = curVFromNodeChild && curVFromNodeChild._N_;
+          referenceComponent = curVFromNodeChild && curVFromNodeChild._O_;
         }
 
         detachNode(curFromNodeChild, fromNode, referenceComponent);
@@ -520,7 +520,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
 
     morphAttrs(fromEl, vFromEl, toEl);
 
-    if (toEl.ad_) {
+    if (toEl.ae_) {
       return;
     }
 
@@ -537,7 +537,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
   // eslint-disable-next-line no-constant-condition
 
 
-  morphChildren(fromNode, toNode, toNode.v_);
+  morphChildren(fromNode, toNode, toNode.w_);
 
   detachedNodes.forEach(function (node) {
     var detachedFromComponent = detachedByDOMNode.get(node);
@@ -551,7 +551,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
       } else if (node.parentNode) {
         destroyNodeRecursive(node, detachedFromComponent !== true && detachedFromComponent);
 
-        if (eventDelegation.ap_(node) != false) {
+        if (eventDelegation.aq_(node) != false) {
           removeChild(node);
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "4.28.6",
+    "version": "4.28.8",
     "license": "MIT",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "dependencies": {

package/src/compiler/Normalizer.js

@@ -125,7 +125,10 @@ class Normalizer {
       } else if (context.ignoreUnrecognizedTags && tagName[0] === "@") {
         let owner = elNode.parentNode;
 
-        while (owner && /^(?:for|while|if|else(?:-if))$|^@/.test(owner.tagName)) {
+        while (
+          owner &&
+          /^(?:for|while|if|else(?:-if))$|^@/.test(owner.tagName)
+        ) {
           owner = owner.parentNode;
         }
 

package/src/compiler/ast/CustomTag.js

@@ -624,7 +624,7 @@ class CustomTag extends HtmlElement {
 
       if (isNestedTag) {
         renderTagNode = builder.functionCall(tagVar, tagArgs);
-        renderTagNode._isNestedTagCall = true
+        renderTagNode._isNestedTagCall = true;
       } else {
         renderTagNode = this.generateRenderTagCode(codegen, tagVar, tagArgs);
         renderTagNode._isTagCall = true;
@@ -656,7 +656,9 @@ class CustomTag extends HtmlElement {
         }
 
         if (renderBody.length) {
-          newBody.push(builder.returnStatement(builder.renderBodyFunction(renderBody)));
+          newBody.push(
+            builder.returnStatement(builder.renderBodyFunction(renderBody))
+          );
           body = newBody;
         }
       }
@@ -796,7 +798,16 @@ function hasHTML(node, context) {
   let hasHTML = false;
   const walker = context.createWalker({
     enter(node) {
-      if (node.type === "Html" || node.type === "TextVDOM" || node._isTagCall) {
+      if (
+        node.type === "Html" ||
+        node.type === "StartTag" ||
+        node.type === "TextVDOM" ||
+        node.type === "HtmlElement" ||
+        node.type === "HtmlComment" ||
+        node.type === "EndElementVDOM" ||
+        node.type === "HtmlElementVDOM" ||
+        node._isTagCall
+      ) {
         hasHTML = true;
         walker.stop();
       } else if (node._isNestedTagCall) {

package/src/core-tags/components/TransformHelper/convertToComponent.js

@@ -116,7 +116,7 @@ module.exports = function handleComponentBind(options) {
       markoComponentVar = context.addStaticVar(
         "marko_component",
         builder.functionCall(context.helper("interopRequireDefault"), [
-          builder.require(builder.literal(rendererModule.requirePath))
+          builder.require(builder.literal(rendererModule.requirePath)),
         ])
       );
     }

package/src/core-tags/core/await/renderer.js

@@ -97,6 +97,7 @@ module.exports = function awaitTag(input, out) {
   };
 
   if (clientReorder) {
+    awaitInfo.parent = out;
     awaitInfo.after = input.showAfter;
 
     clientReorderContext =
@@ -106,8 +107,14 @@ module.exports = function awaitTag(input, out) {
         nextId: 0,
       });
 
-    var id = (awaitInfo.id = input.name || clientReorderContext.nextId++);
-    var placeholderIdAttrValue = "afph" + id;
+    /** SHOULD MATCH THE reorder-renderer.js IMPLEMENTATION */
+    var reorderFunctionId =
+      out.global.runtimeId !== "M" ? "af" + out.global.runtimeId : "af";
+
+    var id = (awaitInfo.id =
+      input.name ||
+      (out.global.componentIdPrefix || 0) + clientReorderContext.nextId++);
+    var placeholderIdAttrValue = reorderFunctionId + "ph" + id;
 
     if (placeholderRenderer) {
       out.write('<span id="' + placeholderIdAttrValue + '">');
@@ -211,7 +218,11 @@ function renderContents(err, data, input, out) {
   if (err) {
     if (input.catch) {
       if (errorRenderer) {
-        errorRenderer(out, err);
+        try {
+          errorRenderer(out, err);
+        } catch (err2) {
+          out.error(err2);
+        }
       }
     } else {
       out.error(err);

package/src/core-tags/core/await/reorderer-renderer.js

@@ -24,6 +24,10 @@ module.exports = function (input, out) {
     out.flush();
   }
 
+  /** SHOULD MATCH THE renderer.js IMPLEMENTATION */
+  var reorderFunctionId =
+    out.global.runtimeId !== "M" ? "af" + out.global.runtimeId : "af";
+
   var asyncOut = out.beginAsync({
     last: true,
     timeout: -1,
@@ -46,65 +50,96 @@ module.exports = function (input, out) {
     }
 
     function handleAwait(awaitInfo) {
-      awaitInfo.out
-        .on("___toString", out.emit.bind(out, "___toString"))
-        .on("finish", function (result) {
-          if (!global._afRuntime) {
-            // Minified version of ./client-reorder-runtime.js
+      let flushedScript = false;
+      let flushedContent = false;
+      let flushedPlaceholder = awaitInfo.parent._state.finished;
+      if (flushedPlaceholder) {
+        if (awaitInfo.out._state.finished) {
+          writeResult(awaitInfo.out.___getResult());
+          return;
+        }
+      } else {
+        awaitInfo.parent.on("___toString", () => {
+          flushedPlaceholder = true;
+          if (!flushedScript && flushedContent) {
+            flushedScript = true;
             asyncOut.script(
-              `function $af(d,a,e,l,g,h,k,b,f,c){c=$af;if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("af"+d);g=e.getElementById("afph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}}`
+              `$${reorderFunctionId}(` +
+                (typeof awaitInfo.id === "number"
+                  ? awaitInfo.id
+                  : '"' + awaitInfo.id + '"') +
+                (awaitInfo.after ? ',"' + awaitInfo.after + '"' : "") +
+                ")"
             );
-            global._afRuntime = true;
           }
+        });
+      }
 
-          if (global.cspNonce) {
-            asyncOut.write(
-              '<style nonce="' +
-                escapeDoubleQuotes(global.cspNonce) +
-                '">' +
-                "#af" +
-                awaitInfo.id +
-                "{display:none;}" +
-                "</style>" +
-                '<div id="af' +
-                awaitInfo.id +
-                '">' +
-                result.toString() +
-                "</div>"
-            );
-          } else {
-            asyncOut.write(
-              '<div id="af' +
-                awaitInfo.id +
-                '" style="display:none">' +
-                result.toString() +
-                "</div>"
-            );
-          }
+      awaitInfo.out
+        .on("___toString", out.emit.bind(out, "___toString"))
+        .on("finish", writeResult)
+        .on("error", function (err) {
+          asyncOut.error(err);
+        });
+
+      function writeResult(result) {
+        flushedContent = true;
+        if (!global._afRuntime) {
+          // Minified version of ./client-reorder-runtime.js
+          asyncOut.script(
+            `function $${reorderFunctionId}(d,a,e,l,g,h,k,b,f,c){c=$${reorderFunctionId};if(a&&!c[a])(c[a+="$"]||(c[a]=[])).push(d);else{e=document;l=e.getElementById("${reorderFunctionId}"+d);g=e.getElementById("${reorderFunctionId}ph"+d);h=e.createDocumentFragment();k=l.childNodes;b=0;for(f=k.length;b<f;b++)h.appendChild(k.item(0));g&&g.parentNode.replaceChild(h,g);c[d]=1;if(a=c[d+"$"])for(b=0,f=a.length;b<f;b++)c(a[b])}}`
+          );
+          global._afRuntime = true;
+        }
+
+        if (global.cspNonce) {
+          asyncOut.write(
+            '<style nonce="' +
+              escapeDoubleQuotes(global.cspNonce) +
+              '">' +
+              `#${reorderFunctionId}` +
+              awaitInfo.id +
+              "{display:none;}" +
+              "</style>" +
+              `<div id="${reorderFunctionId}` +
+              awaitInfo.id +
+              '">' +
+              result.toString() +
+              "</div>"
+          );
+        } else {
+          asyncOut.write(
+            `<div id="${reorderFunctionId}` +
+              awaitInfo.id +
+              '" style="display:none">' +
+              result.toString() +
+              "</div>"
+          );
+        }
 
+        if (!flushedScript && flushedPlaceholder) {
+          flushedScript = true;
           asyncOut.script(
-            "$af(" +
+            `$${reorderFunctionId}(` +
               (typeof awaitInfo.id === "number"
                 ? awaitInfo.id
                 : '"' + awaitInfo.id + '"') +
               (awaitInfo.after ? ',"' + awaitInfo.after + '"' : "") +
               ")"
           );
+        }
 
-          awaitInfo.out.writer = asyncOut.writer;
+        awaitInfo.out.writer = asyncOut.writer;
 
-          out.emit("await:finish", awaitInfo);
+        out.emit("await:finish", awaitInfo);
 
-          out.flush();
+        out.flush();
 
-          if (--remaining === 0) {
-            asyncOut.end();
-            next();
-          }
-        })
-        .on("error", function (err) {
-          asyncOut.error(err);
-        });
+        if (--remaining === 0) {
+          asyncOut.end();
+          next();
+        }
+      }
     }
 
     awaitContext.instances.forEach(handleAwait);

package/src/core-tags/migrate/all-tags/widget-in-attrs.js

@@ -12,13 +12,15 @@ module.exports = function migrate(el, context) {
       return;
     }
 
-    context.createWalker({
-      enter(node) {
-        if (isWidgetMemberExpression(node)) {
-          node.object.name = "component";
-        }
-      },
-    }).walk(value);
+    context
+      .createWalker({
+        enter(node) {
+          if (isWidgetMemberExpression(node)) {
+            node.object.name = "component";
+          }
+        },
+      })
+      .walk(value);
   });
 };
 

package/src/runtime/components/legacy/index.js

@@ -1,6 +1,8 @@
 // eslint-disable-next-line no-constant-condition
 if ("MARKO_DEBUG") {
-  require("complain")("marko-widgets is deprecated. When upgrading to Marko 5 ensure marko-widgets@8 is installed for compatibility.");
+  require("complain")(
+    "marko-widgets is deprecated. When upgrading to Marko 5 ensure marko-widgets@8 is installed for compatibility."
+  );
 }
 
 module.exports = require("@internal/components-entry-legacy");

package/src/runtime/helpers/interop-require.js

@@ -1,3 +1,3 @@
 module.exports = function interopRequireDefault(mod) {
   return mod.default || mod;
-}
+};