marko 4.28.0 → 4.28.2

package/dist/compiler/ast/CustomTag.js

@@ -480,6 +480,7 @@ class CustomTag extends HtmlElement {
       let tagVar = codegen.addStaticVar(tagVarName, loadTag);
 
       renderTagNode = this.generateRenderTagCode(codegen, tagVar, [inputProps, builder.identifierOut()]);
+      renderTagNode._isTagCall = true;
     } else {
       if (rendererRequirePath) {
         codegen.pushMeta("tags", rendererRequirePath, true);
@@ -516,8 +517,10 @@ class CustomTag extends HtmlElement {
 
       if (isNestedTag) {
         renderTagNode = builder.functionCall(tagVar, tagArgs);
+        renderTagNode._isNestedTagCall = true;
       } else {
         renderTagNode = this.generateRenderTagCode(codegen, tagVar, tagArgs);
+        renderTagNode._isTagCall = true;
       }
     }
 
@@ -533,10 +536,22 @@ class CustomTag extends HtmlElement {
     let renderBodyFunction;
 
     if (hasBody) {
-      if (this._mergedRenderBodyStart !== undefined) {
-        const mergedRenderBody = builder.renderBodyFunction(body.slice(this._mergedRenderBodyStart));
-        body = body.slice(0, this._mergedRenderBodyStart);
-        body.push(builder.returnStatement(mergedRenderBody));
+      if (this._hasDynamicNestedTags) {
+        const renderBody = [];
+        const newBody = [];
+
+        for (const child of body) {
+          if (hasHTML(child, context)) {
+            renderBody.push(child);
+          } else {
+            newBody.push(child);
+          }
+        }
+
+        if (renderBody.length) {
+          newBody.push(builder.returnStatement(builder.renderBodyFunction(renderBody)));
+          body = newBody;
+        }
       }
 
       if (tagDef.bodyFunction) {
@@ -625,27 +640,7 @@ class CustomTag extends HtmlElement {
         return null;
       } else {
         this._isDirectlyNestedTag = false;
-
-        if (!parentCustomTag._hasDynamicNestedTags) {
-          parentCustomTag._hasDynamicNestedTags = true;
-
-          let nextBodyContent = parentCustomTag.firstChild;
-          let i = 0;
-
-          do {
-            if (nextBodyContent.type === "Text" || nextBodyContent.type === "Scriptlet" || (nextBodyContent.type === "HtmlElement" || nextBodyContent.type === "CustomTag") && !(nextBodyContent.tagDef && (nextBodyContent.tagDef.isNestedTag || nextBodyContent.tagDef.codeGeneratorModulePath))) {
-              parentCustomTag._mergedRenderBodyStart = i;
-              break;
-            }
-
-            nextBodyContent = nextBodyContent.nextSibling;
-            i++;
-          } while (nextBodyContent);
-
-          if (!i) {
-            context.addError(parentCustomTag, "Render body content must come after any dynamic nested attribute tags.");
-          }
-        }
+        parentCustomTag._hasDynamicNestedTags = true;
       }
     }
 
@@ -660,4 +655,21 @@ class CustomTag extends HtmlElement {
   }
 }
 
+function hasHTML(node, context) {
+  let hasHTML = false;
+  const walker = context.createWalker({
+    enter(node) {
+      if (node.type === "Html" || node.type === "TextVDOM" || node._isTagCall) {
+        hasHTML = true;
+        walker.stop();
+      } else if (node._isNestedTagCall) {
+        walker.skip();
+      }
+    }
+  });
+
+  walker.walk(node);
+  return hasHTML;
+}
+
 module.exports = CustomTag;

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

@@ -148,7 +148,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
       if (curToNodeType === COMPONENT_NODE) {
         var component = curToNodeChild.v_;
         if ((matchingFromComponent = existingComponentLookup[component.id]) === undefined) {
-          if (isHydrate === true) {
+          if (isHydrate) {
             var rootNode = beginFragmentNode(curFromNodeChild, fromNode);
             component._E_ = rootNode;
             componentByDOMNode.set(rootNode, component);
@@ -219,8 +219,12 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           if (!curToNodeChild.ae_) {
             // We just skip over the fromNode if it is preserved
 
-            if (compareNodeNames(curToNodeChild, curVFromNodeChild)) {
-              morphEl(curFromNodeChild, curVFromNodeChild, curToNodeChild, parentComponent);
+            if (curVFromNodeChild && curToNodeType === curVFromNodeChild.bX_ && (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);
@@ -232,7 +236,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
         } else {
           matchingFromEl = referenceComponent.N_[curToNodeKey];
           if (matchingFromEl === undefined || matchingFromEl === curFromNodeChild) {
-            if (isHydrate === true && curFromNodeChild) {
+            if (isHydrate && curFromNodeChild) {
               if (curFromNodeChild.nodeType === ELEMENT_NODE && (curToNodeChild.ae_ || caseInsensitiveCompare(curFromNodeChild.nodeName, curToNodeChild.cd_ || ""))) {
                 curVFromNodeChild = virtualizeElement(curFromNodeChild);
                 curVFromNodeChild.cd_ = curToNodeChild.cd_;
@@ -300,7 +304,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             if (!curToNodeChild.ae_) {
               curVFromNodeChild = vElementByDOMNode.get(matchingFromEl);
 
-              if (compareNodeNames(curVFromNodeChild, curToNodeChild)) {
+              if (curVFromNodeChild && curToNodeType === curVFromNodeChild.bX_ && (curToNodeType !== ELEMENT_NODE || compareNodeNames(curVFromNodeChild, curToNodeChild))) {
                 if (fromNextSibling === matchingFromEl) {
                   // Single element removal:
                   // A <-> A
@@ -348,7 +352,11 @@ 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, curToNodeKey, curFromNodeChild, fromNode, ownerComponent, parentComponent);
                 detachNode(matchingFromEl, fromNode, ownerComponent);
@@ -398,7 +406,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             // Both nodes being compared are Element nodes
             curVFromNodeChild = vElementByDOMNode.get(curFromNodeChild);
             if (curVFromNodeChild === undefined) {
-              if (isHydrate === true) {
+              if (isHydrate) {
                 curVFromNodeChild = virtualizeElement(curFromNodeChild);
 
                 if (caseInsensitiveCompare(curVFromNodeChild.cd_, curToNodeChild.cd_)) {
@@ -426,14 +434,18 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           } else if (curFromNodeType === TEXT_NODE || curFromNodeType === COMMENT_NODE) {
             // Both nodes being compared are Text or Comment nodes
             isCompatible = true;
-            // Simply update nodeValue on the original node to
-            // change the text value
-
-            if (isHydrate === true && toNextSibling && curFromNodeType === TEXT_NODE && toNextSibling.bX_ === TEXT_NODE) {
-              fromNextSibling = curFromNodeChild.splitText(curToNodeChild.bW_.length);
-            }
-            if (curFromNodeChild.nodeValue !== curToNodeChild.bW_) {
-              curFromNodeChild.nodeValue = curToNodeChild.bW_;
+            var curToNodeValue = curToNodeChild.bW_;
+            var curFromNodeValue = curFromNodeChild.nodeValue;
+            if (curFromNodeValue !== curToNodeValue) {
+              if (isHydrate && curFromNodeType === TEXT_NODE && curFromNodeValue.startsWith(curToNodeValue)) {
+                // In hydrate mode we can use splitText to more efficiently handle
+                // adjacent text vdom nodes that were merged.
+                fromNextSibling = curFromNodeChild.splitText(curToNodeValue.length);
+              } else {
+                // Simply update nodeValue on the original node to
+                // change the text value
+                curFromNodeChild.nodeValue = curToNodeValue;
+              }
             }
           }
         }

package/package.json

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

package/src/compiler/ast/CustomTag.js

@@ -560,6 +560,7 @@ class CustomTag extends HtmlElement {
         inputProps,
         builder.identifierOut(),
       ]);
+      renderTagNode._isTagCall = true;
     } else {
       if (rendererRequirePath) {
         codegen.pushMeta("tags", rendererRequirePath, true);
@@ -623,8 +624,10 @@ class CustomTag extends HtmlElement {
 
       if (isNestedTag) {
         renderTagNode = builder.functionCall(tagVar, tagArgs);
+        renderTagNode._isNestedTagCall = true
       } else {
         renderTagNode = this.generateRenderTagCode(codegen, tagVar, tagArgs);
+        renderTagNode._isTagCall = true;
       }
     }
 
@@ -640,12 +643,22 @@ class CustomTag extends HtmlElement {
     let renderBodyFunction;
 
     if (hasBody) {
-      if (this._mergedRenderBodyStart !== undefined) {
-        const mergedRenderBody = builder.renderBodyFunction(
-          body.slice(this._mergedRenderBodyStart)
-        );
-        body = body.slice(0, this._mergedRenderBodyStart);
-        body.push(builder.returnStatement(mergedRenderBody));
+      if (this._hasDynamicNestedTags) {
+        const renderBody = [];
+        const newBody = [];
+
+        for (const child of body) {
+          if (hasHTML(child, context)) {
+            renderBody.push(child);
+          } else {
+            newBody.push(child);
+          }
+        }
+
+        if (renderBody.length) {
+          newBody.push(builder.returnStatement(builder.renderBodyFunction(renderBody)));
+          body = newBody;
+        }
       }
 
       if (tagDef.bodyFunction) {
@@ -756,40 +769,7 @@ class CustomTag extends HtmlElement {
         return null;
       } else {
         this._isDirectlyNestedTag = false;
-
-        if (!parentCustomTag._hasDynamicNestedTags) {
-          parentCustomTag._hasDynamicNestedTags = true;
-
-          let nextBodyContent = parentCustomTag.firstChild;
-          let i = 0;
-
-          do {
-            if (
-              nextBodyContent.type === "Text" ||
-              nextBodyContent.type === "Scriptlet" ||
-              ((nextBodyContent.type === "HtmlElement" ||
-                nextBodyContent.type === "CustomTag") &&
-                !(
-                  nextBodyContent.tagDef &&
-                  (nextBodyContent.tagDef.isNestedTag ||
-                    nextBodyContent.tagDef.codeGeneratorModulePath)
-                ))
-            ) {
-              parentCustomTag._mergedRenderBodyStart = i;
-              break;
-            }
-
-            nextBodyContent = nextBodyContent.nextSibling;
-            i++;
-          } while (nextBodyContent);
-
-          if (!i) {
-            context.addError(
-              parentCustomTag,
-              "Render body content must come after any dynamic nested attribute tags."
-            );
-          }
-        }
+        parentCustomTag._hasDynamicNestedTags = true;
       }
     }
 
@@ -812,4 +792,21 @@ class CustomTag extends HtmlElement {
   }
 }
 
+function hasHTML(node, context) {
+  let hasHTML = false;
+  const walker = context.createWalker({
+    enter(node) {
+      if (node.type === "Html" || node.type === "TextVDOM" || node._isTagCall) {
+        hasHTML = true;
+        walker.stop();
+      } else if (node._isNestedTagCall) {
+        walker.skip();
+      }
+    },
+  });
+
+  walker.walk(node);
+  return hasHTML;
+}
+
 module.exports = CustomTag;

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

@@ -180,7 +180,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           (matchingFromComponent = existingComponentLookup[component.id]) ===
           undefined
         ) {
-          if (isHydrate === true) {
+          if (isHydrate) {
             var rootNode = beginFragmentNode(curFromNodeChild, fromNode);
             component.___rootNode = rootNode;
             componentByDOMNode.set(rootNode, component);
@@ -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);
@@ -309,7 +322,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             matchingFromEl === undefined ||
             matchingFromEl === curFromNodeChild
           ) {
-            if (isHydrate === true && curFromNodeChild) {
+            if (isHydrate && curFromNodeChild) {
               if (
                 curFromNodeChild.nodeType === ELEMENT_NODE &&
                 (curToNodeChild.___preserve ||
@@ -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,21 @@ 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,
@@ -519,7 +546,7 @@ function morphdom(fromNode, toNode, host, componentsContext) {
             // Both nodes being compared are Element nodes
             curVFromNodeChild = vElementByDOMNode.get(curFromNodeChild);
             if (curVFromNodeChild === undefined) {
-              if (isHydrate === true) {
+              if (isHydrate) {
                 curVFromNodeChild = virtualizeElement(curFromNodeChild);
 
                 if (
@@ -562,21 +589,24 @@ function morphdom(fromNode, toNode, host, componentsContext) {
           ) {
             // Both nodes being compared are Text or Comment nodes
             isCompatible = true;
-            // Simply update nodeValue on the original node to
-            // change the text value
-
-            if (
-              isHydrate === true &&
-              toNextSibling &&
-              curFromNodeType === TEXT_NODE &&
-              toNextSibling.___nodeType === TEXT_NODE
-            ) {
-              fromNextSibling = curFromNodeChild.splitText(
-                curToNodeChild.___nodeValue.length
-              );
-            }
-            if (curFromNodeChild.nodeValue !== curToNodeChild.___nodeValue) {
-              curFromNodeChild.nodeValue = curToNodeChild.___nodeValue;
+            var curToNodeValue = curToNodeChild.___nodeValue;
+            var curFromNodeValue = curFromNodeChild.nodeValue;
+            if (curFromNodeValue !== curToNodeValue) {
+              if (
+                isHydrate &&
+                curFromNodeType === TEXT_NODE &&
+                curFromNodeValue.startsWith(curToNodeValue)
+              ) {
+                // In hydrate mode we can use splitText to more efficiently handle
+                // adjacent text vdom nodes that were merged.
+                fromNextSibling = curFromNodeChild.splitText(
+                  curToNodeValue.length,
+                );
+              } else {
+                // Simply update nodeValue on the original node to
+                // change the text value
+                curFromNodeChild.nodeValue = curToNodeValue;
+              }
             }
           }
         }