marko 4.28.0 → 4.28.1

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

@@ -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);
@@ -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);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "4.28.0",
+    "version": "4.28.1",
     "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

@@ -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,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,