marko 5.32.7 → 5.32.9

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

@@ -115,8 +115,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 + '">');

package/dist/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,
@@ -52,7 +56,7 @@ module.exports = function (input, out) {
         if (!global._afRuntime) {
           // Minified version of ./client-reorder-runtime.js
           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])}}`
+            `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;
         }
@@ -62,11 +66,11 @@ module.exports = function (input, out) {
             '<style nonce="' +
             escapeDoubleQuotes(global.cspNonce) +
             '">' +
-            "#af" +
+            `#${reorderFunctionId}` +
             awaitInfo.id +
             "{display:none;}" +
             "</style>" +
-            '<div id="af' +
+            `<div id="${reorderFunctionId}` +
             awaitInfo.id +
             '">' +
             result.toString() +
@@ -74,7 +78,7 @@ module.exports = function (input, out) {
           );
         } else {
           asyncOut.write(
-            '<div id="af' +
+            `<div id="${reorderFunctionId}` +
             awaitInfo.id +
             '" style="display:none">' +
             result.toString() +
@@ -83,7 +87,7 @@ module.exports = function (input, out) {
         }
 
         asyncOut.script(
-          "$af(" + (
+          `$${reorderFunctionId}(` + (
           typeof awaitInfo.id === "number" ?
           awaitInfo.id :
           '"' + awaitInfo.id + '"') + (

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var VElement = require("../vdom").br_;
+var i = 0;
+
+module.exports = function (tagName, attrs, childCount) {
+  return new ConstVElement(tagName, attrs, childCount);
+};
+
+function ConstVElement(tagName, attrs, childCount) {
+  VElement.call(this, tagName, attrs, null, null, childCount, null, { i: i++ });
+}
+
+ConstVElement.prototype = Object.create(VElement.prototype);
+ConstVElement.prototype.e = function (tagName, attrs, childCount) {
+  var child = this.bI_(
+    new ConstVElement(tagName, attrs, childCount)
+  );
+
+  if (childCount === 0) {
+    return this.ca_();
+  } else {
+    return child;
+  }
+};

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

@@ -281,13 +281,26 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           if (!curToNodeChild.aa_) {
             // We just skip over the fromNode if it is preserved
 
-            if (compareNodeNames(curToNodeChild, curVFromNodeChild)) {
-              morphEl(
-                curFromNodeChild,
-                curVFromNodeChild,
-                curToNodeChild,
-                parentComponent
-              );
+            if (
+            curVFromNodeChild &&
+            curToNodeType === curVFromNodeChild.bS_ && (
+            curToNodeType !== ELEMENT_NODE ||
+            compareNodeNames(curToNodeChild, curVFromNodeChild)))
+            {
+              if (curToNodeType === ELEMENT_NODE) {
+                morphEl(
+                  curFromNodeChild,
+                  curVFromNodeChild,
+                  curToNodeChild,
+                  parentComponent
+                );
+              } else {
+                morphChildren(
+                  curFromNodeChild,
+                  curToNodeChild,
+                  parentComponent
+                );
+              }
             } else {
               // Remove the old node
               detachNode(curFromNodeChild, fromNode, ownerComponent);
@@ -404,7 +417,12 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             if (!curToNodeChild.aa_) {
               curVFromNodeChild = vElementByDOMNode.get(matchingFromEl);
 
-              if (compareNodeNames(curVFromNodeChild, curToNodeChild)) {
+              if (
+              curVFromNodeChild &&
+              curToNodeType === curVFromNodeChild.bS_ && (
+              curToNodeType !== ELEMENT_NODE ||
+              compareNodeNames(curVFromNodeChild, curToNodeChild)))
+              {
                 if (fromNextSibling === matchingFromEl) {
                   // Single element removal:
                   // A <-> A
@@ -455,12 +473,20 @@ function morphdom(fromNode, toNode, host, componentsContext) {
                   }
                 }
 
-                morphEl(
-                  matchingFromEl,
-                  curVFromNodeChild,
-                  curToNodeChild,
-                  parentComponent
-                );
+                if (curToNodeType === ELEMENT_NODE) {
+                  morphEl(
+                    matchingFromEl,
+                    curVFromNodeChild,
+                    curToNodeChild,
+                    parentComponent
+                  );
+                } else {
+                  morphChildren(
+                    matchingFromEl,
+                    curToNodeChild,
+                    parentComponent
+                  );
+                }
               } else {
                 insertVirtualNodeBefore(
                   curToNodeChild,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.32.7",
+    "version": "5.32.9",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "keywords": [
         "front-end",
@@ -65,7 +65,7 @@
     },
     "dependencies": {
         "@marko/compiler": "^5.34.6",
-        "@marko/translator-default": "^5.31.13",
+        "@marko/translator-default": "^5.31.14",
         "app-module-path": "^2.2.0",
         "argly": "^1.2.0",
         "browser-refresh-client": "1.1.4",

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

@@ -115,8 +115,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 + '">');

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,
@@ -52,7 +56,7 @@ module.exports = function (input, out) {
           if (!global._afRuntime) {
             // Minified version of ./client-reorder-runtime.js
             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])}}`,
+              `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;
           }
@@ -62,11 +66,11 @@ module.exports = function (input, out) {
               '<style nonce="' +
                 escapeDoubleQuotes(global.cspNonce) +
                 '">' +
-                "#af" +
+                `#${reorderFunctionId}` +
                 awaitInfo.id +
                 "{display:none;}" +
                 "</style>" +
-                '<div id="af' +
+                `<div id="${reorderFunctionId}` +
                 awaitInfo.id +
                 '">' +
                 result.toString() +
@@ -74,7 +78,7 @@ module.exports = function (input, out) {
             );
           } else {
             asyncOut.write(
-              '<div id="af' +
+              `<div id="${reorderFunctionId}` +
                 awaitInfo.id +
                 '" style="display:none">' +
                 result.toString() +
@@ -83,7 +87,7 @@ module.exports = function (input, out) {
           }
 
           asyncOut.script(
-            "$af(" +
+            `$${reorderFunctionId}(` +
               (typeof awaitInfo.id === "number"
                 ? awaitInfo.id
                 : '"' + awaitInfo.id + '"') +

package/src/runtime/vdom/helpers/const-element.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var VElement = require("../vdom").___VElement;
+var i = 0;
+
+module.exports = function (tagName, attrs, childCount) {
+  return new ConstVElement(tagName, attrs, childCount);
+};
+
+function ConstVElement(tagName, attrs, childCount) {
+  VElement.call(this, tagName, attrs, null, null, childCount, null, { i: i++ });
+}
+
+ConstVElement.prototype = Object.create(VElement.prototype);
+ConstVElement.prototype.e = function (tagName, attrs, childCount) {
+  var child = this.___appendChild(
+    new ConstVElement(tagName, attrs, childCount),
+  );
+
+  if (childCount === 0) {
+    return this.___finishChild();
+  } else {
+    return child;
+  }
+};

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

@@ -281,13 +281,26 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           if (!curToNodeChild.___preserve) {
             // We just skip over the fromNode if it is preserved
 
-            if (compareNodeNames(curToNodeChild, curVFromNodeChild)) {
-              morphEl(
-                curFromNodeChild,
-                curVFromNodeChild,
-                curToNodeChild,
-                parentComponent,
-              );
+            if (
+              curVFromNodeChild &&
+              curToNodeType === curVFromNodeChild.___nodeType &&
+              (curToNodeType !== ELEMENT_NODE ||
+                compareNodeNames(curToNodeChild, curVFromNodeChild))
+            ) {
+              if (curToNodeType === ELEMENT_NODE) {
+                morphEl(
+                  curFromNodeChild,
+                  curVFromNodeChild,
+                  curToNodeChild,
+                  parentComponent,
+                );
+              } else {
+                morphChildren(
+                  curFromNodeChild,
+                  curToNodeChild,
+                  parentComponent,
+                );
+              }
             } else {
               // Remove the old node
               detachNode(curFromNodeChild, fromNode, ownerComponent);
@@ -404,7 +417,12 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             if (!curToNodeChild.___preserve) {
               curVFromNodeChild = vElementByDOMNode.get(matchingFromEl);
 
-              if (compareNodeNames(curVFromNodeChild, curToNodeChild)) {
+              if (
+                curVFromNodeChild &&
+                curToNodeType === curVFromNodeChild.___nodeType &&
+                (curToNodeType !== ELEMENT_NODE ||
+                  compareNodeNames(curVFromNodeChild, curToNodeChild))
+              ) {
                 if (fromNextSibling === matchingFromEl) {
                   // Single element removal:
                   // A <-> A
@@ -455,12 +473,20 @@ function morphdom(fromNode, toNode, host, componentsContext) {
                   }
                 }
 
-                morphEl(
-                  matchingFromEl,
-                  curVFromNodeChild,
-                  curToNodeChild,
-                  parentComponent,
-                );
+                if (curToNodeType === ELEMENT_NODE) {
+                  morphEl(
+                    matchingFromEl,
+                    curVFromNodeChild,
+                    curToNodeChild,
+                    parentComponent,
+                  );
+                } else {
+                  morphChildren(
+                    matchingFromEl,
+                    curToNodeChild,
+                    parentComponent,
+                  );
+                }
               } else {
                 insertVirtualNodeBefore(
                   curToNodeChild,

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

@@ -1,8 +0,0 @@
-"use strict";
-
-module.exports = function (id) {
-  var i = 0;
-  return function () {
-    return id + i++;
-  };
-};

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

@@ -1,15 +0,0 @@
-"use strict";
-
-var VElement = require("../vdom").br_;
-
-module.exports = function (
-tagName,
-attrs,
-key,
-component,
-childCount,
-flags,
-props)
-{
-  return new VElement(tagName, attrs, key, component, childCount, flags, props);
-};

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

@@ -1,7 +0,0 @@
-"use strict";
-
-var VText = require("../vdom").bt_;
-
-module.exports = function (value) {
-  return new VText(value);
-};

package/src/runtime/vdom/helpers/const.js

@@ -1,8 +0,0 @@
-"use strict";
-
-module.exports = function (id) {
-  var i = 0;
-  return function () {
-    return id + i++;
-  };
-};

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

@@ -1,15 +0,0 @@
-"use strict";
-
-var VElement = require("../vdom").___VElement;
-
-module.exports = function (
-  tagName,
-  attrs,
-  key,
-  component,
-  childCount,
-  flags,
-  props,
-) {
-  return new VElement(tagName, attrs, key, component, childCount, flags, props);
-};

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

@@ -1,7 +0,0 @@
-"use strict";
-
-var VText = require("../vdom").___VText;
-
-module.exports = function (value) {
-  return new VText(value);
-};