@torpor/view 0.1.5 → 0.1.7

package/dist/compile.js

@@ -63,7 +63,7 @@ var Builder = class {
 var ANCHOR_COMMENT = "<!>";
 var HYDRATION_START_COMMENT = "<![>";
 var HYDRATION_END_COMMENT = "<!]>";
-var HYDRATION_BRANCH_COMMENT = "<!^>";
+var HYDRATION_BREAK_COMMENT = "<!^>";
 
 // src/compile/utils/trimQuotes.ts
 function trimQuotes(text) {
@@ -281,7 +281,11 @@ function buildAddFragment(node, status, b, parentName, anchorName) {
     const fragment = node.fragment;
     const fragmentName = `t_fragment_${fragment.number}`;
     status.imports.add("t_add_fragment");
-    b.append(`t_add_fragment(${fragmentName}, ${parentName}, ${anchorName});`);
+    let params = [fragmentName, parentName, anchorName];
+    if (fragment.endVarName) {
+      params.push(fragment.endVarName);
+    }
+    b.append(`t_add_fragment(${params.join(", ")});`);
     if (fragment.endVarName) {
       status.imports.add("t_next");
       b.append(`t_next(${fragment.endVarName});`);
@@ -394,10 +398,15 @@ function maybeAddRootNodeDeclaration(node, fragment, fragmentName, status, b, va
   } else {
     status.imports.add("t_root");
     const rootName = `t_root_${fragment.number}`;
-    const rootPath = `t_root(${fragmentName})`;
+    const params = [fragmentName];
+    if (firstNode.type === "text") {
+      params.push("true");
+    }
+    const rootPath = `t_root(${params.join(", ")})`;
     b.append("// @ts-ignore");
     b.append(`const ${rootName} = ${rootPath};`);
-    varPaths.set(rootPath, rootName);
+    varPaths.set(`t_root(${fragmentName})`, rootName);
+    printDebug(rootName, status, b);
   }
 }
 function declareFragmentVars(fragment, node, path, status, b, parentName, anchorName, varPaths, lastChild, declare) {
@@ -597,6 +606,7 @@ function declareElementFragmentVars(fragment, node, path, status, b, parentName,
             b.append("// @ts-ignore");
           }
           b.append(`const ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
+          printDebug(node.varName, status, b);
         }
       }
     }
@@ -675,6 +685,7 @@ function declareTextFragmentVars(fragment, node, path, status, b, varPaths, last
           b.append("// @ts-ignore");
         }
         b.append(`const ${node.varName} = ${varPath};`);
+        printDebug(node.varName, status, b);
       }
     }
   } else {
@@ -779,6 +790,7 @@ function declareParentAndAnchorFragmentVars(fragment, node, path, status, b, par
           b.append(`let ${node.parentName} as HTMLElement;`);
         } else {
           b.append(`const ${node.parentName} = ${parentVarPath} as HTMLElement;`);
+          printDebug(node.parentName, status, b);
         }
         varPaths.set(parentVarPath, node.parentName);
       } else {
@@ -794,7 +806,8 @@ function declareParentAndAnchorFragmentVars(fragment, node, path, status, b, par
       b.append(`let ${node.varName};`);
     } else {
       status.imports.add("t_anchor");
-      b.append(`const ${node.varName} = t_anchor(${anchorVarPath}) as HTMLElement;`);
+      b.append(`let ${node.varName} = t_anchor(${anchorVarPath}) as HTMLElement;`);
+      printDebug(node.varName, status, b);
     }
   } else {
     status.imports.add("t_cmt");
@@ -802,6 +815,12 @@ function declareParentAndAnchorFragmentVars(fragment, node, path, status, b, par
   }
   buildNode(node, status, b, parentName, anchorName);
   node.handled = true;
+  if (declare && node.varName) {
+    status.imports.add("t_reanchor");
+    b.append(`${node.varName} = t_reanchor(${node.varName}) as HTMLElement;`);
+    b.append("");
+    printDebug(node.varName, status, b);
+  }
 }
 function getFragmentVarPath(fragment, status, name, path, varPaths) {
   let node = path;
@@ -820,6 +839,7 @@ function getFragmentVarPath(fragment, status, name, path, varPaths) {
     varPaths.set(name, name);
   }
   while (varPath.includes("t_next(t_next(")) {
+    status.imports.add("t_skip");
     const match = varPath.match(/(t_next\(){2,}/)[0];
     const count = match.length / "t_next(".length;
     const pos = varPath.indexOf("t_next(t_next(");
@@ -840,8 +860,9 @@ function getFragmentVarPath(fragment, status, name, path, varPaths) {
     }
     const tail = varPath.substring(end + count);
     const param = varPath.substring(pos + match.length, end);
-    varPath = `${head}t_next(${param}, ${count})${tail}`;
+    varPath = `${head}t_skip(${param}, ${count})${tail}`;
   }
+  varPath = varPath.replaceAll("t_next_text", "t_next");
   return varPath;
 }
 function getFragmentVarPathPart(path, varPath, status, root = false) {
@@ -854,8 +875,12 @@ function getFragmentVarPathPart(path, varPath, status, root = false) {
   }
   for (let [i, child] of path.children.entries()) {
     if (i > 0) {
-      status.imports.add("t_next");
-      varPath = `t_next(${varPath})`;
+      if (child.type === "text" || child.type === "space") {
+        varPath = `t_next_text(${varPath}, true)`;
+      } else {
+        status.imports.add("t_next");
+        varPath = `t_next(${varPath})`;
+      }
     }
     if (i === path.children.length - 1 && child.children.length) {
       varPath = getFragmentVarPathPart(child, varPath, status);
@@ -863,6 +888,13 @@ function getFragmentVarPathPart(path, varPath, status, root = false) {
   }
   return varPath;
 }
+var debug = false;
+function printDebug(varName, status, b) {
+  if (debug) {
+    status.imports.add("t_print");
+    b.append(`console.log("${varName}:", t_print(${varName}));`);
+  }
+}
 
 // src/compile/build/client/replaceForVarNames.ts
 function replaceForVarNames(value, status) {
@@ -994,6 +1026,7 @@ ${slotParams.join(",\n")}
     }
   }
   b.append(`${componentName}(${renderParams});`);
+  b.append("");
 }
 
 // src/compile/build/client/buildAwaitNode.ts
@@ -1403,7 +1436,8 @@ function buildControlNode(node, status, b) {
       buildScriptNode(node, b);
       break;
     }
-    case "@function": {
+    case "@function":
+    case "@async function": {
       b.append("");
       buildScriptNode(node, b);
       b.append("");
@@ -1717,7 +1751,9 @@ function buildRootNode(node, status, b, parentName, anchorName) {
     fragment: node.fragment,
     path: "0:ch/"
   });
-  buildNode(node.children[0], status, b, parentName, anchorName, true);
+  for (let child of node.children) {
+    buildNode(child, status, b, parentName, anchorName, true);
+  }
   status.fragmentStack.pop();
   buildAddFragment(node, status, b, parentName, anchorName);
 }
@@ -1960,12 +1996,15 @@ var importsMap = {
   t_animate: 'import { t_animate } from "${folder}";',
   t_root: 'import { t_root } from "${folder}";',
   t_anchor: 'import { t_anchor } from "${folder}";',
+  t_reanchor: 'import { t_reanchor } from "${folder}";',
   t_child: 'import { t_child } from "${folder}";',
   t_next: 'import { t_next } from "${folder}";',
+  t_skip: 'import { t_skip } from "${folder}";',
   t_frg: 'import { t_frg } from "${folder}";',
   t_elm: 'import { t_elm } from "${folder}";',
   t_txt: 'import { t_txt } from "${folder}";',
   t_cmt: 'import { t_cmt } from "${folder}";',
+  t_print: 'import { t_print } from "${folder}";',
   ListItem: 'import { type ListItem } from "${folder}";',
   SlotRender: 'import { type SlotRender } from "${folder}";'
 };
@@ -2167,9 +2206,7 @@ ${slotParams.join(",\n")}
   }
   b.append("");
   b.append(`$output += ${componentName}(${renderParams})`);
-  if (node.tagName === ":component") {
-    status.output += ANCHOR_COMMENT;
-  }
+  status.output += ANCHOR_COMMENT;
 }
 
 // src/compile/build/server/buildServerAwaitNode.ts
@@ -2214,7 +2251,7 @@ function buildServerForNode(node, status, b) {
 }
 function buildServerForBranch(node, status, b) {
   b.append(`${node.statement} {`);
-  status.output += HYDRATION_BRANCH_COMMENT;
+  status.output += HYDRATION_BREAK_COMMENT;
   for (let child of node.children) {
     buildServerNode(child, status, b);
   }
@@ -2254,6 +2291,7 @@ function buildServerIfNode(node, status, b) {
 }
 function buildServerIfBranch(node, status, b) {
   b.append(`${node.statement} {`);
+  status.output += HYDRATION_BREAK_COMMENT;
   for (let child of node.children) {
     buildServerNode(child, status, b);
   }
@@ -2320,6 +2358,7 @@ function buildServerSwitchNode(node, status, b) {
 }
 function buildServerSwitchBranch(node, status, b) {
   b.append(`${node.statement} {`);
+  status.output += HYDRATION_BREAK_COMMENT;
   for (let child of node.children) {
     buildServerNode(child, status, b);
   }
@@ -2390,7 +2429,8 @@ function buildServerControlNode(node, status, b) {
       buildServerScriptNode(node, b);
       break;
     }
-    case "@function": {
+    case "@function":
+    case "@async function": {
       if (status.output) {
         b.append(`$output += \`${status.output}\`;`);
         status.output = "";
@@ -2537,7 +2577,9 @@ function buildElementAttributes2(node, status) {
 
 // src/compile/build/server/buildServerRootNode.ts
 function buildServerRootNode(node, status, b) {
-  buildServerNode(node.children[0], status, b);
+  for (let child of node.children) {
+    buildServerNode(child, status, b);
+  }
 }
 
 // src/compile/build/server/buildServerSlotNode.ts
@@ -2855,6 +2897,15 @@ function isSpaceNode(node) {
   return isTextNode(node) && isSpace(node.content);
 }
 
+// src/compile/utils/trimStart.ts
+function trimStart(text, char) {
+  let start = 0;
+  while (text[start] === char) {
+    start += 1;
+  }
+  return text.substring(start);
+}
+
 // src/compile/parse/utils/consumeSpace.ts
 function consumeSpace(status) {
   const start = status.i;
@@ -2883,15 +2934,6 @@ function addSpaceElement(parent, status) {
   }
 }
 
-// src/compile/utils/trimStart.ts
-function trimStart(text, char) {
-  let start = 0;
-  while (text[start] === char) {
-    start += 1;
-  }
-  return text.substring(start);
-}
-
 // src/compile/parse/utils/accept.ts
 function accept(value, status, advance = true) {
   const check = status.source.substring(status.i, status.i + value.length);
@@ -2947,230 +2989,6 @@ function parseInlineScript(status) {
   return "";
 }
 
-// src/compile/parse/utils/addError.ts
-function addError(status, message, start = status.i) {
-  let line = 1;
-  let lastLineStart = 0;
-  for (let i = 0; i < start; i++) {
-    if (status.source[i] === "\n") {
-      line += 1;
-      lastLineStart = i + 1;
-    }
-  }
-  let column = start - lastLineStart;
-  status.errors.push({ message, start, line, column });
-}
-
-// src/compile/parse/parseControl.ts
-var controlOperations = [
-  "@if",
-  "@else",
-  "@for",
-  "@key",
-  "@switch",
-  "@case",
-  "@default",
-  "@await",
-  "@then",
-  "@catch",
-  "@replace",
-  "@html",
-  "@const",
-  "@console",
-  "@debugger",
-  "@function"
-];
-var standaloneOperations = ["@key", "@html", "@const", "@console", "@debugger", "@function"];
-function parseControl(status, parentNode) {
-  const node = parseControlOpen(status);
-  if (!node) {
-    return;
-  }
-  if (standaloneOperations.includes(node.operation)) {
-    wrangleControlNode(node, parentNode);
-    return;
-  }
-  while (status.i < status.source.length) {
-    addSpaceElement(node, status);
-    if (accept("}", status)) {
-      break;
-    } else if (accept("<", status, false)) {
-      const child = parseElement(status);
-      node.children.push(child);
-    } else if (accept("@//", status)) {
-      status.i = status.source.indexOf("\n", status.i) + 1;
-    } else if (accept("@/*", status)) {
-      status.i = status.source.indexOf("*/", status.i) + 2;
-    } else if (accept("@", status, false)) {
-      parseControl(status, node);
-    } else if (accept("case", status, false) || accept("key", status, false)) {
-      parseControl(status, node);
-    } else {
-      const char = status.source[status.i];
-      addError(status, `Unexpected token in control block: ${char}`, status.i);
-      break;
-    }
-  }
-  wrangleControlNode(node, parentNode);
-  parseControlBranches(status, parentNode);
-}
-function parseControlOpen(status) {
-  const start = status.i;
-  let operation = "";
-  for (status.i; status.i < status.source.length; status.i++) {
-    const char = status.source[status.i];
-    if (isSpaceChar(status.source, status.i) || accept(":", status) && operation === "default" || accept(".", status) && operation === "@console" || accept("(", status, false) && operation === "@html") {
-      break;
-    }
-    operation += char;
-  }
-  if (!operation.startsWith("@")) {
-    operation = "@" + operation;
-  }
-  let statement = "";
-  if (controlOperations.includes(operation)) {
-    statement = parseControlStatement(start, operation, status);
-    if (operation === "@function") {
-      statement += ` {${parseInlineScript(status)}}`;
-      accept("}", status);
-    }
-    if (operation === "@replace" || operation === "@html") {
-      statement = trimMatched(statement.substring(statement.indexOf("(")).trim(), "(", ")");
-    }
-  } else {
-    addError(status, `Unknown operation: ${operation}`, status.i);
-    return null;
-  }
-  return {
-    type: "control",
-    operation,
-    statement,
-    children: []
-  };
-}
-function parseControlStatement(start, operation, status) {
-  let parenCount = 0;
-  while (status.i < status.source.length) {
-    if (accept("(", status)) {
-      parenCount += 1;
-    } else if (accept(")", status)) {
-      parenCount -= 1;
-    } else if (accept("{", status) || accept("\n", status) && standaloneOperations.includes(operation)) {
-      if (parenCount === 0) {
-        return trimStart(status.source.substring(start, status.i - 1).trim(), "@");
-      }
-    } else if (accept('"', status) || accept("'", status)) {
-      const char = status.source[status.i - 1];
-      for (let j = status.i + 1; j < status.source.length; j++) {
-        if (status.source[j] === char && status.source[j - 1] !== "\\") {
-          status.i = j + 1;
-          break;
-        }
-      }
-    } else if (accept("`", status)) {
-      let level2 = 0;
-      for (let j = status.i + 1; j < status.source.length; j++) {
-        if (status.source[j] === "`" && status.source[j - 1] !== "\\" && level2 === 0) {
-          status.i = j + 1;
-          break;
-        } else if (status.source[j] === "{" && (level2 > 0 || status.source[j - 1] === "$")) {
-          level2 += 1;
-        } else if (status.source[j] === "}" && level2 > 0) {
-          level2 -= 1;
-        }
-      }
-    } else if (accept("//", status)) {
-      status.i = status.source.indexOf("\n", status.i) + 1;
-    } else if (accept("/*", status)) {
-      status.i = status.source.indexOf("*/", status.i) + 2;
-    } else {
-      status.i += 1;
-    }
-  }
-  return "";
-}
-function wrangleControlNode(node, parentNode) {
-  if (node.operation === "@if") {
-    const ifGroup = {
-      type: "control",
-      operation: "@if group",
-      statement: "",
-      children: [node]
-    };
-    parentNode.children.push(ifGroup);
-  } else if (node.operation === "@else") {
-    if (/^else\s+if/.test(node.statement)) {
-      node.operation = "@else if";
-    }
-    for (let i = parentNode.children.length - 1; i >= 0; i--) {
-      const lastChild = parentNode.children[i];
-      if (isControlNode(lastChild) && lastChild.operation === "@if group") {
-        lastChild.children.push(node);
-        break;
-      }
-    }
-  } else if (node.operation === "@for") {
-    const forGroup = {
-      type: "control",
-      operation: "@for group",
-      statement: "",
-      children: [node]
-    };
-    parentNode.children.push(forGroup);
-  } else if (node.operation === "@switch") {
-    node.operation = "@switch group";
-    parentNode.children.push(node);
-  } else if (node.operation === "@await") {
-    const awaitGroup = {
-      type: "control",
-      operation: "@await group",
-      statement: "",
-      children: [node]
-    };
-    parentNode.children.push(awaitGroup);
-  } else if (node.operation === "@then" || node.operation === "@catch") {
-    for (let i = parentNode.children.length - 1; i >= 0; i--) {
-      const lastChild = parentNode.children[i];
-      if (isControlNode(lastChild) && lastChild.operation === "@await group") {
-        lastChild.children.push(node);
-        break;
-      }
-    }
-  } else if (node.operation === "@replace") {
-    const replaceGroup = {
-      type: "control",
-      operation: "@replace group",
-      statement: "",
-      children: [node]
-    };
-    parentNode.children.push(replaceGroup);
-  } else if (node.operation === "@html") {
-    const htmlGroup = {
-      type: "control",
-      operation: "@html group",
-      statement: "",
-      children: [node]
-    };
-    parentNode.children.push(htmlGroup);
-  } else {
-    parentNode.children.push(node);
-  }
-}
-function parseControlBranches(status, parentNode) {
-  let gotAnotherBranch = true;
-  while (gotAnotherBranch) {
-    let start = status.i;
-    status.i += 1;
-    consumeSpace(status);
-    if (accept("else", status, false) || accept("case", status, false) || accept("default", status, false) || accept("then", status, false) || accept("catch", status, false)) {
-      parseControl(status, parentNode);
-    } else {
-      gotAnotherBranch = false;
-      status.i = start;
-    }
-  }
-}
-
 // src/compile/parse/utils/isAlphaNumericChar.ts
 function isAlphaNumericChar(text, index) {
   let code = text.charCodeAt(index);
@@ -3309,6 +3127,20 @@ function isFillNode(n) {
   return isSpecialNode(n) && n.tagName === ":fill";
 }
 
+// src/compile/parse/utils/addError.ts
+function addError(status, message, start = status.i) {
+  let line = 1;
+  let lastLineStart = 0;
+  for (let i = 0; i < start; i++) {
+    if (status.source[i] === "\n") {
+      line += 1;
+      lastLineStart = i + 1;
+    }
+  }
+  let column = start - lastLineStart;
+  status.errors.push({ message, start, line, column });
+}
+
 // src/compile/parse/parseElement.ts
 function parseElement(status) {
   const start = status.i;
@@ -3513,6 +3345,225 @@ function checkCloseTag(status, element, current) {
   return found;
 }
 
+// src/compile/parse/parseControl.ts
+var controlOperations = [
+  "@if",
+  "@else",
+  "@for",
+  "@key",
+  "@switch",
+  "@case",
+  "@default",
+  "@await",
+  "@then",
+  "@catch",
+  "@replace",
+  "@html",
+  "@const",
+  "@console",
+  "@debugger",
+  "@function",
+  "@async function"
+];
+var standaloneOperations = [
+  "@key",
+  "@html",
+  "@const",
+  "@console",
+  "@debugger",
+  "@function",
+  "@async function"
+];
+function parseControl(status, parentNode) {
+  const node = parseControlOpen(status);
+  if (!node) {
+    return;
+  }
+  if (standaloneOperations.includes(node.operation)) {
+    wrangleControlNode(node, parentNode);
+    return;
+  }
+  while (status.i < status.source.length) {
+    addSpaceElement(node, status);
+    if (accept("}", status)) {
+      break;
+    } else if (accept("<", status, false)) {
+      const child = parseElement(status);
+      node.children.push(child);
+    } else if (accept("@//", status)) {
+      status.i = status.source.indexOf("\n", status.i) + 1;
+    } else if (accept("@/*", status)) {
+      status.i = status.source.indexOf("*/", status.i) + 2;
+    } else if (accept("@", status, false)) {
+      parseControl(status, node);
+    } else if (accept("case", status, false) || accept("key", status, false)) {
+      parseControl(status, node);
+    } else {
+      const char = status.source[status.i];
+      addError(status, `Unexpected token in control block: ${char}`, status.i);
+      break;
+    }
+  }
+  wrangleControlNode(node, parentNode);
+  parseControlBranches(status, parentNode);
+}
+function parseControlOpen(status) {
+  const start = status.i;
+  let operation = "";
+  for (status.i; status.i < status.source.length; status.i++) {
+    const char = status.source[status.i];
+    if (isSpaceChar(status.source, status.i) && operation !== "@async" || accept(":", status) && operation === "default" || accept(".", status) && operation === "@console" || accept("(", status, false) && operation === "@html") {
+      break;
+    }
+    operation += char;
+  }
+  if (!operation.startsWith("@")) {
+    operation = "@" + operation;
+  }
+  let statement = "";
+  if (controlOperations.includes(operation)) {
+    statement = parseControlStatement(start, operation, status);
+    if (operation === "@function" || operation === "@async function") {
+      statement += ` {${parseInlineScript(status)}}`;
+      accept("}", status);
+    }
+    if (operation === "@replace" || operation === "@html") {
+      statement = trimMatched(statement.substring(statement.indexOf("(")).trim(), "(", ")");
+    }
+  } else {
+    addError(status, `Unknown operation: ${operation}`, status.i);
+    return null;
+  }
+  return {
+    type: "control",
+    operation,
+    statement,
+    children: []
+  };
+}
+function parseControlStatement(start, operation, status) {
+  let parenCount = 0;
+  while (status.i < status.source.length) {
+    if (accept("(", status)) {
+      parenCount += 1;
+    } else if (accept(")", status)) {
+      parenCount -= 1;
+    } else if (accept("{", status) || accept("\n", status) && standaloneOperations.includes(operation)) {
+      if (parenCount === 0) {
+        return trimStart(status.source.substring(start, status.i - 1).trim(), "@");
+      }
+    } else if (accept('"', status) || accept("'", status)) {
+      const char = status.source[status.i - 1];
+      for (let j = status.i + 1; j < status.source.length; j++) {
+        if (status.source[j] === char && status.source[j - 1] !== "\\") {
+          status.i = j + 1;
+          break;
+        }
+      }
+    } else if (accept("`", status)) {
+      let level2 = 0;
+      for (let j = status.i + 1; j < status.source.length; j++) {
+        if (status.source[j] === "`" && status.source[j - 1] !== "\\" && level2 === 0) {
+          status.i = j + 1;
+          break;
+        } else if (status.source[j] === "{" && (level2 > 0 || status.source[j - 1] === "$")) {
+          level2 += 1;
+        } else if (status.source[j] === "}" && level2 > 0) {
+          level2 -= 1;
+        }
+      }
+    } else if (accept("//", status)) {
+      status.i = status.source.indexOf("\n", status.i) + 1;
+    } else if (accept("/*", status)) {
+      status.i = status.source.indexOf("*/", status.i) + 2;
+    } else {
+      status.i += 1;
+    }
+  }
+  return "";
+}
+function wrangleControlNode(node, parentNode) {
+  if (node.operation === "@if") {
+    const ifGroup = {
+      type: "control",
+      operation: "@if group",
+      statement: "",
+      children: [node]
+    };
+    parentNode.children.push(ifGroup);
+  } else if (node.operation === "@else") {
+    if (/^else\s+if/.test(node.statement)) {
+      node.operation = "@else if";
+    }
+    for (let i = parentNode.children.length - 1; i >= 0; i--) {
+      const lastChild = parentNode.children[i];
+      if (isControlNode(lastChild) && lastChild.operation === "@if group") {
+        lastChild.children.push(node);
+        break;
+      }
+    }
+  } else if (node.operation === "@for") {
+    const forGroup = {
+      type: "control",
+      operation: "@for group",
+      statement: "",
+      children: [node]
+    };
+    parentNode.children.push(forGroup);
+  } else if (node.operation === "@switch") {
+    node.operation = "@switch group";
+    parentNode.children.push(node);
+  } else if (node.operation === "@await") {
+    const awaitGroup = {
+      type: "control",
+      operation: "@await group",
+      statement: "",
+      children: [node]
+    };
+    parentNode.children.push(awaitGroup);
+  } else if (node.operation === "@then" || node.operation === "@catch") {
+    for (let i = parentNode.children.length - 1; i >= 0; i--) {
+      const lastChild = parentNode.children[i];
+      if (isControlNode(lastChild) && lastChild.operation === "@await group") {
+        lastChild.children.push(node);
+        break;
+      }
+    }
+  } else if (node.operation === "@replace") {
+    const replaceGroup = {
+      type: "control",
+      operation: "@replace group",
+      statement: "",
+      children: [node]
+    };
+    parentNode.children.push(replaceGroup);
+  } else if (node.operation === "@html") {
+    const htmlGroup = {
+      type: "control",
+      operation: "@html group",
+      statement: "",
+      children: [node]
+    };
+    parentNode.children.push(htmlGroup);
+  } else {
+    parentNode.children.push(node);
+  }
+}
+function parseControlBranches(status, parentNode) {
+  let gotAnotherBranch = true;
+  while (gotAnotherBranch) {
+    let start = status.i;
+    status.i += 1;
+    consumeSpace(status);
+    if (accept("else", status, false) || accept("case", status, false) || accept("default", status, false) || accept("then", status, false) || accept("catch", status, false)) {
+      parseControl(status, parentNode);
+    } else {
+      gotAnotherBranch = false;
+      status.i = start;
+    }
+  }
+}
+
 // src/compile/parse/parseMarkup.ts
 function parseMarkup(status, source) {
   const current = status.components.at(-1);
@@ -3526,14 +3577,17 @@ function parseMarkup(status, source) {
       status.i = status.source.indexOf("\n", status.i) + 1;
     } else if (accept("@/*", status)) {
       status.i = status.source.indexOf("*/", status.i) + 2;
+    } else if (isSpaceChar(status.source, status.i)) {
+      current.markup ??= { type: "root", children: [] };
+      const text = { type: "text", content: consumeSpace(status) };
+      current.markup.children.push(text);
     } else if (accept("<", status, false)) {
-      const start = status.i;
+      current.markup ??= { type: "root", children: [] };
       const element = parseElement(status);
-      if (current.markup === void 0) {
-        current.markup = element;
-      } else if (!element.tagName.startsWith("/")) {
-        addError(status, `Multiple top-level elements: ${element.tagName}`, start);
-      }
+      current.markup.children.push(element);
+    } else if (accept("@", status, false)) {
+      current.markup ??= { type: "root", children: [] };
+      parseControl(status, current.markup);
     } else {
       status.i += 1;
     }
@@ -3774,10 +3828,7 @@ function parseCode(source) {
           name: c.name,
           default: c.default,
           params: c.params,
-          markup: c.markup ? {
-            type: "root",
-            children: [c.markup]
-          } : void 0,
+          markup: c.markup,
           style: c.style,
           props: c.props,
           contextProps: c.contextProps,
@@ -3929,7 +3980,7 @@ function parseComponentEnd(status) {
   const componentSource = status.source.substring(current.start || 0, status.i);
   current.props = getPropsUsage(componentSource);
   current.contextProps = getContextUsage(componentSource);
-  if (current.markup && current.markup.tagName === "html" && isSpaceNode(current.markup.children[0])) {
+  if (current.markup && isElementNode(current.markup.children[0]) && current.markup.children[0].tagName === "html" && isSpaceNode(current.markup.children[0].children[0])) {
     current.markup.children.splice(1, 1);
   }
   status.marker = status.i;