@torpor/view 0.0.2 → 0.0.3

package/dist/compile.js

@@ -1,3 +1,5 @@
+import "./chunk-EGRHWZRV.js";
+
 // src/compile/utils/Builder.ts
 var Builder = class {
   #text = "";
@@ -20,7 +22,6 @@ var Builder = class {
         if (text[i] === "}" || text[i] === ")" || text[i] === "]") {
           this.#space -= 1;
         }
-        let gotText = false;
         this.#text += "	".repeat(Math.max(0, this.#space));
         const start = i;
         while (i < text.length && text[i] !== "\n") {
@@ -252,7 +253,7 @@ function buildAddFragment(node, status, b, parentName, anchorName) {
     const fragmentName = `t_fragment_${fragment.number}`;
     status.imports.add("t_add_fragment");
     b.append(`t_add_fragment(${fragmentName}, ${parentName}, ${anchorName});`);
-    if (fragment.endVarName && node.children.length > 1) {
+    if (fragment.endVarName) {
       status.imports.add("t_next");
       b.append(`t_next(${fragment.endVarName});`);
     }
@@ -292,7 +293,7 @@ function isTextNode(node) {
 
 // src/compile/build/utils/isReactiveAttribute.ts
 function isReactiveAttribute(name, value) {
-  return name.startsWith("{") && name.endsWith("}") || value.startsWith("{") && value.endsWith("}") || name.startsWith("on");
+  return isFullyReactive(name) || isReactive(value) || name.startsWith("on");
 }
 
 // src/compile/build/client/buildFragment.ts
@@ -336,7 +337,7 @@ function buildFragment(node, status, b, parentName, anchorName) {
       status.imports.add("t_fragment");
       const fragmentText = fragment.text.replaceAll("`", "\\`").replaceAll(/\s+/g, " ");
       b.append(
-        `const ${fragmentName} = t_fragment($parent.ownerDocument, t_fragments, ${fragment.number}, \`${fragmentText}\`);`
+        `const ${fragmentName} = t_fragment($parent.ownerDocument!, t_fragments, ${fragment.number}, \`${fragmentText}\`);`
       );
       let fragmentPath = { parent: null, type: "fragment", children: [] };
       let varPaths = /* @__PURE__ */ new Map();
@@ -365,6 +366,7 @@ function maybeAddRootNodeDeclaration(node, fragment, fragmentName, status, b, va
     status.imports.add("t_root");
     const rootName = `t_root_${fragment.number}`;
     const rootPath = `t_root(${fragmentName})`;
+    b.append("// @ts-ignore");
     b.append(`const ${rootName} = ${rootPath};`);
     varPaths.set(rootPath, rootName);
   }
@@ -562,6 +564,9 @@ function declareElementFragmentVars(fragment, node, path, status, b, parentName,
         if (node.tagName === ":element") {
           b.append(`let ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
         } else {
+          if (topLevel && lastChild) {
+            b.append("// @ts-ignore");
+          }
           b.append(`const ${node.varName} = ${varPath} as ${elementTypeName(node)};`);
         }
       }
@@ -637,6 +642,9 @@ function declareTextFragmentVars(fragment, node, path, status, b, varPaths, last
       if (status.options?.useCreateElement) {
         b.append(`let ${node.varName};`);
       } else {
+        if (topLevel && lastChild) {
+          b.append("// @ts-ignore");
+        }
         b.append(`const ${node.varName} = ${varPath};`);
       }
     }
@@ -810,7 +818,7 @@ function buildRun(functionName, functionBody, status, b) {
   b.append(`$run(function ${functionName}() {`);
   for (let varName of status.forVarNames) {
     functionBody = functionBody.replaceAll(
-      new RegExp(`([\\s\\(\\[])${varName}([\\s\\.\\(\\)\\[\\];])`, "g"),
+      new RegExp(`([\\s\\(\\[\\{])${varName}([\\s\\.\\(\\)\\[\\]\\};])`, "g"),
       `$1t_item.data.${varName}$2`
     );
   }
@@ -819,13 +827,13 @@ function buildRun(functionName, functionBody, status, b) {
 }
 
 // src/compile/build/client/buildComponentNode.ts
-function buildComponentNode(node, status, b, parentName, anchorName, root = false) {
+function buildComponentNode(node, status, b, root = false) {
   b.append("");
   b.append("/* @component */");
   const componentHasProps = node.attributes.length || root;
   const propsName = componentHasProps ? nextVarName("props", status) : "undefined";
   if (componentHasProps) {
-    b.append(`const ${propsName} = {};`);
+    b.append(`const ${propsName}: any = {};`);
     for (let { name, value } of node.attributes) {
       if (name === "self" && node.tagName === ":component") {
       } else if (name.startsWith("{") && name.endsWith("}")) {
@@ -868,14 +876,20 @@ function buildComponentNode(node, status, b, parentName, anchorName, root = fals
   const componentHasSlots = node.children.length;
   const slotsName = componentHasSlots ? nextVarName("slots", status) : "undefined";
   if (componentHasSlots) {
-    b.append(`const ${slotsName} = {};`);
+    b.append(`const ${slotsName}: Record<string, SlotRender> = {};`);
     for (let slot of node.children) {
       if (isSpecialNode(slot)) {
         const nameAttribute = slot.attributes.find((a) => a.name === "name");
         const slotName = nameAttribute?.value ? trimQuotes(nameAttribute.value) : "_";
-        b.append(
-          `${slotsName}["${slotName}"] = ($sparent: ParentNode, $sanchor: Node | null, $sprops: Record<PropertyKey, any>, $context: Record<PropertyKey, any>) => {`
-        );
+        const slotParams = [
+          "$sparent: ParentNode",
+          "$sanchor: Node | null",
+          "//@ts-ignore\n$sprops?: Record<PropertyKey, any>",
+          "//@ts-ignore\n$context?: Record<PropertyKey, any>"
+        ];
+        b.append(`${slotsName}["${slotName}"] = (
+${slotParams.join(",\n")}
+) => {`);
         buildFragment(slot, status, b, "$sparent", "$sanchor");
         status.fragmentStack.push({
           fragment: slot.fragment,
@@ -907,7 +921,7 @@ function buildComponentNode(node, status, b, parentName, anchorName, root = fals
 }
 
 // src/compile/build/client/buildAwaitNode.ts
-function buildAwaitNode(node, status, b, parentName, anchorName) {
+function buildAwaitNode(node, status, b) {
   const awaitParentName = node.parentName;
   const awaitAnchorName = node.varName;
   const awaitRangeName = nextVarName("await_range", status);
@@ -1001,7 +1015,7 @@ function trimEnd(text, char) {
 var forLoopRegex = /for\s*\((.+?);.*?;.*?\)/;
 var forLoopVarsRegex = /(?:let\s+|var\s+){0,1}([^\s,;+=]+)(?:\s*=\s*[^,;]+){0,1}/g;
 var forOfRegex = /for\s*\(\s*(?:let\s*|var\s*){0,1}(.+?)\s+(?:of|in).*?\)/;
-function buildForNode(node, status, b, parentName, anchorName) {
+function buildForNode(node, status, b) {
   const forParentName = node.parentName;
   const forAnchorName = node.varName;
   node = node.children[0];
@@ -1086,7 +1100,7 @@ function buildForItem(node, status, b, parentName) {
 }
 
 // src/compile/build/client/buildHtmlNode.ts
-function buildHtmlNode(node, status, b, parentName, anchorName) {
+function buildHtmlNode(node, status, b) {
   const htmlAnchorName = node.varName;
   const htmlParentName = node.parentName || htmlAnchorName + ".parentNode";
   const htmlRangeName = nextVarName("html_range", status);
@@ -1115,7 +1129,7 @@ function buildHtmlBranch(node, status, b, parentName, rangeName) {
 }
 
 // src/compile/build/client/buildIfNode.ts
-function buildIfNode(node, status, b, parentName, anchorName) {
+function buildIfNode(node, status, b) {
   const ifAnchorName = node.varName;
   const ifParentName = node.parentName || ifAnchorName + ".parentNode";
   const ifRangeName = nextVarName("if_range", status);
@@ -1161,7 +1175,7 @@ function buildIfBranch(node, status, b, parentName, rangeName, index) {
 }
 
 // src/compile/build/client/buildReplaceNode.ts
-function buildReplaceNode(node, status, b, parentName, anchorName) {
+function buildReplaceNode(node, status, b) {
   const replaceAnchorName = node.varName;
   const replaceParentName = node.parentName || replaceAnchorName + ".parentNode";
   const replaceRangeName = nextVarName("replace_range", status);
@@ -1207,7 +1221,7 @@ function maybeAppend(text, end) {
 }
 
 // src/compile/build/client/buildSwitchNode.ts
-function buildSwitchNode(node, status, b, parentName, anchorName) {
+function buildSwitchNode(node, status, b) {
   const switchParentName = node.parentName;
   const switchAnchorName = node.varName;
   const switchRangeName = nextVarName("switch_range", status);
@@ -1256,10 +1270,10 @@ function buildSwitchBranch(node, status, b, parentName, rangeName, index) {
 }
 
 // src/compile/build/client/buildControlNode.ts
-function buildControlNode(node, status, b, parentName, anchorName) {
+function buildControlNode(node, status, b) {
   switch (node.operation) {
     case "@if group": {
-      buildIfNode(node, status, b, parentName, anchorName);
+      buildIfNode(node, status, b);
       break;
     }
     case "@if":
@@ -1268,14 +1282,15 @@ function buildControlNode(node, status, b, parentName, anchorName) {
       break;
     }
     case "@switch group": {
-      buildSwitchNode(node, status, b, parentName, anchorName);
+      buildSwitchNode(node, status, b);
+      break;
     }
     case "@case":
     case "@default": {
       break;
     }
     case "@for group": {
-      buildForNode(node, status, b, parentName, anchorName);
+      buildForNode(node, status, b);
       break;
     }
     case "@for":
@@ -1283,7 +1298,7 @@ function buildControlNode(node, status, b, parentName, anchorName) {
       break;
     }
     case "@await group": {
-      buildAwaitNode(node, status, b, parentName, anchorName);
+      buildAwaitNode(node, status, b);
       break;
     }
     case "@await":
@@ -1292,14 +1307,14 @@ function buildControlNode(node, status, b, parentName, anchorName) {
       break;
     }
     case "@replace group": {
-      buildReplaceNode(node, status, b, parentName, anchorName);
+      buildReplaceNode(node, status, b);
       break;
     }
     case "@replace": {
       break;
     }
     case "@html group": {
-      buildHtmlNode(node, status, b, parentName, anchorName);
+      buildHtmlNode(node, status, b);
       break;
     }
     case "@html": {
@@ -1338,7 +1353,7 @@ function buildRun2(functionName, functionBody, status, b) {
 }
 
 // src/compile/build/client/buildElementNode.ts
-function buildElementNode(node, status, b, parentName, anchorName, root = false) {
+function buildElementNode(node, status, b, parentName, root = false) {
   if (status.inHead) {
     if (node.tagName === "title") {
       buildTitleNode(node, status, b);
@@ -1461,13 +1476,13 @@ function buildElementAttributes(node, varName, status, b) {
       if (name === ":self") {
         b.append(`${value} = ${varName};`);
       } else if (name === ":group") {
-        buildBindGroupAttribute(node, varName, name, value, status, b);
+        buildBindGroupAttribute(node, varName, value, status, b);
       } else if (name === ":value" || name === ":checked") {
         buildBindAttribute(node, varName, name, value, status, b);
       } else if (name === ":onmount") {
         buildRun2("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
       } else if (name.startsWith("on")) {
-        buildEventAttribute(node, varName, name, value, status, b);
+        buildEventAttribute(varName, name, value, status, b);
       } else if (name.startsWith(":transition")) {
         buildTransitionAttribute(node, varName, name, value, status, b);
       } else if (name === "class") {
@@ -1477,7 +1492,7 @@ function buildElementAttributes(node, varName, status, b) {
         buildRun("setClasses", `${varName}.className = t_class(${value});`, status, b);
       } else if (name === ":style") {
         status.imports.add("t_style");
-        buildRun("setStyles", `${varName}.style = t_style(${value});`, status, b);
+        buildRun("setStyles", `${varName}.setAttribute("style", t_style(${value}));`, status, b);
       } else if (name.includes("-")) {
         status.imports.add("t_attribute");
         buildRun("setDataAttribute", `t_attribute(${varName}, "${name}", ${value});`, status, b);
@@ -1488,7 +1503,7 @@ function buildElementAttributes(node, varName, status, b) {
     }
   }
 }
-function buildBindGroupAttribute(node, varName, name, value, status, b) {
+function buildBindGroupAttribute(node, varName, value, status, b) {
   let eventName = "change";
   let inputValue = node.attributes.find((a) => a.name === "value")?.value;
   let set = `${value} == ${inputValue}`;
@@ -1535,7 +1550,7 @@ function buildBindAttribute(node, varName, name, value, status, b) {
   status.imports.add("t_event");
   b.append(`t_event(${varName}, "${eventName}", (e) => ${value} = ${inputValue});`);
 }
-function buildEventAttribute(node, varName, name, value, status, b) {
+function buildEventAttribute(varName, name, value, status, b) {
   for (let varName2 of status.forVarNames) {
     value = value.replaceAll(
       new RegExp(`([\\s\\(\\[])${varName2}([\\s\\.\\(\\)\\[\\];])`, "g"),
@@ -1551,18 +1566,18 @@ function buildTransitionAttribute(node, varName, name, value, status, b) {
   let entryVarName = nextVarName("trans_in", status);
   let exitVarName = nextVarName("trans_out", status);
   if (name === ":transition") {
-    b.append(`const ${entryVarName} = ${getAnimationDetails(value, status)};`);
+    b.append(`const ${entryVarName} = ${getAnimationDetails(value)};`);
     b.append(`const ${exitVarName} = ${entryVarName};`);
     b.append(`t_animate(${varName}, ${entryVarName}, ${exitVarName});`);
   } else if (name === ":transition-in") {
     let outAttribute = node.attributes.find((a) => a.name === ":transition-out");
     if (outAttribute && outAttribute.value) {
       let outValue = trimMatched(outAttribute.value, "{", "}");
-      b.append(`const ${entryVarName} = ${getAnimationDetails(value, status)};`);
-      b.append(`const ${exitVarName} = ${getAnimationDetails(outValue, status)};`);
+      b.append(`const ${entryVarName} = ${getAnimationDetails(value)};`);
+      b.append(`const ${exitVarName} = ${getAnimationDetails(outValue)};`);
       b.append(`t_animate(${varName}, ${entryVarName}, ${exitVarName});`);
     } else {
-      b.append(`const ${entryVarName} = ${getAnimationDetails(value, status)};`);
+      b.append(`const ${entryVarName} = ${getAnimationDetails(value)};`);
       b.append(`t_animate(${varName}, ${entryVarName});`);
     }
   } else if (name === ":transition-out") {
@@ -1570,13 +1585,13 @@ function buildTransitionAttribute(node, varName, name, value, status, b) {
     if (inAttribute) {
       return;
     } else {
-      b.append(`const ${exitVarName} = ${getAnimationDetails(value, status)};`);
+      b.append(`const ${exitVarName} = ${getAnimationDetails(value)};`);
       b.append(`t_animate(${varName}, null, ${entryVarName});`);
     }
   } else {
   }
 }
-function getAnimationDetails(value, status) {
+function getAnimationDetails(value) {
   let parts = [];
   let start = 0;
   let squareCount = 0;
@@ -1635,7 +1650,7 @@ function buildHeadNode2(node, status, b) {
 }
 
 // src/compile/build/client/buildSlotNode.ts
-function buildSlotNode(node, status, b, parentName, anchorName) {
+function buildSlotNode(node, status, b) {
   let slotName = node.attributes.find((a) => a.name === "name")?.value;
   slotName = slotName ? trimQuotes(slotName) : "_";
   const propsName = nextVarName("sprops", status);
@@ -1670,9 +1685,13 @@ function buildSlotNode(node, status, b, parentName, anchorName) {
   const slotParentName = node.parentName;
   const slotAnchorName = node.varName;
   b.append(`if ($slots && $slots["${slotName}"]) {`);
-  b.append(
-    `$slots["${slotName}"](${slotParentName}, ${slotAnchorName}, ${slotHasProps ? propsName : "undefined"}, $context)`
-  );
+  let params = [
+    slotParentName,
+    slotAnchorName,
+    slotHasProps ? propsName : "undefined",
+    status.contextProps.length ? "$context" : "undefined"
+  ];
+  b.append(`$slots["${slotName}"](${params.join(", ")})`);
   const fill = node.children.find((c) => isSpecialNode(c) && c.tagName === ":fill");
   if (fill && isSpecialNode(fill) && fill.children.length) {
     b.append(`} else {`);
@@ -1691,18 +1710,18 @@ function buildSlotNode(node, status, b, parentName, anchorName) {
 }
 
 // src/compile/build/client/buildSpecialNode.ts
-function buildSpecialNode(node, status, b, parentName, anchorName, root = false) {
+function buildSpecialNode(node, status, b, parentName, root = false) {
   switch (node.tagName) {
     case ":slot": {
-      buildSlotNode(node, status, b, parentName, anchorName);
+      buildSlotNode(node, status, b);
       break;
     }
     case ":element": {
-      buildElementNode(node, status, b, parentName, anchorName, root);
+      buildElementNode(node, status, b, parentName, root);
       break;
     }
     case ":component": {
-      buildComponentNode(node, status, b, parentName, anchorName, root);
+      buildComponentNode(node, status, b, root);
       break;
     }
     case ":head": {
@@ -1720,7 +1739,7 @@ function buildSpecialNode(node, status, b, parentName, anchorName, root = false)
 }
 
 // src/compile/build/client/buildTextNode.ts
-function buildTextNode(node, status, b, parentName, anchorName) {
+function buildTextNode(node, status, b) {
   let content = node.content || "";
   if (!status.preserveWhitespace) {
     content = content.replaceAll(/\s+/g, " ");
@@ -1810,23 +1829,23 @@ function buildNode(node, status, b, parentName, anchorName, root = false) {
       break;
     }
     case "control": {
-      buildControlNode(node, status, b, parentName, anchorName);
+      buildControlNode(node, status, b);
       break;
     }
     case "component": {
-      buildComponentNode(node, status, b, parentName, anchorName, root);
+      buildComponentNode(node, status, b, root);
       break;
     }
     case "element": {
-      buildElementNode(node, status, b, parentName, anchorName, root);
+      buildElementNode(node, status, b, parentName, root);
       break;
     }
     case "text": {
-      buildTextNode(node, status, b, parentName, anchorName);
+      buildTextNode(node, status, b);
       break;
     }
     case "special": {
-      buildSpecialNode(node, status, b, parentName, anchorName, root);
+      buildSpecialNode(node, status, b, parentName, root);
       break;
     }
     default: {
@@ -1867,8 +1886,8 @@ var importsMap = {
   t_elm: 'import { t_elm } from "${folder}";',
   t_txt: 'import { t_txt } from "${folder}";',
   t_cmt: 'import { t_cmt } from "${folder}";',
-  ListItem: 'import type { ListItem } from "${folder}";',
-  SlotRender: 'import type { SlotRender } from "${folder}";'
+  ListItem: 'import { type ListItem } from "${folder}";',
+  SlotRender: 'import { type SlotRender } from "${folder}";'
 };
 function buildCode(template, options) {
   let b = new Builder();
@@ -1896,13 +1915,14 @@ function buildTemplate(template, imports, b) {
   for (let i = 0; i < script.length; i++) {
     if (script.substring(i, i + "/* @params */".length) === "/* @params */") {
       b.append(script.substring(marker, i));
-      b.append(
-        `$parent: ParentNode,
-				$anchor: Node | null,
-				${current.params || "$props?: Record<PropertyKey, any>"},
-				$context?: Record<PropertyKey, any>,
-				$slots?: Record<string, SlotRender>`
-      );
+      let params = [
+        "$parent: ParentNode",
+        "$anchor: Node | null",
+        current.params ?? `${current.props?.length ? "$props" : "// @ts-ignore\n$props?"}: Record<PropertyKey, any>`,
+        `${current.contextProps?.length ? "" : "// @ts-ignore\n"}$context?: Record<PropertyKey, any>`,
+        `${current.slotProps?.length ? "" : "// @ts-ignore\n"}$slots?: Record<string, SlotRender>`
+      ];
+      b.append(params.join(",\n"));
       marker = i + "/* @params */".length;
     } else if (script.substring(i, i + "/* @start */".length) === "/* @start */") {
       b.append(script.substring(marker, i));
@@ -1920,6 +1940,8 @@ function buildTemplate(template, imports, b) {
         const status = {
           imports,
           props: current.props || [],
+          contextProps: current.contextProps || [],
+          slotProps: current.slotProps || [],
           styleHash: current.style?.hash || "",
           varNames: {},
           fragmentStack: [],
@@ -1989,7 +2011,7 @@ function buildServerComponentNode(node, status, b) {
   const componentHasProps = node.attributes.length;
   const propsName = componentHasProps ? nextVarName("props", status) : "undefined";
   if (componentHasProps) {
-    b.append(`const ${propsName} = {};`);
+    b.append(`const ${propsName}: any = {};`);
     for (let { name, value } of node.attributes) {
       if (name.startsWith("{") && name.endsWith("}")) {
         name = name.substring(1, name.length - 1);
@@ -2014,14 +2036,18 @@ function buildServerComponentNode(node, status, b) {
   const componentHasSlots = node.children.length;
   const slotsName = componentHasSlots ? nextVarName("slots", status) : "undefined";
   if (componentHasSlots) {
-    b.append(`const ${slotsName} = {};`);
+    b.append(`const ${slotsName}: Record<string, ServerSlotRender> = {};`);
     for (let slot of node.children) {
       if (isSpecialNode(slot)) {
         const nameAttribute = slot.attributes.find((a) => a.name === "name");
         const slotName = nameAttribute?.value ? trimQuotes(nameAttribute.value) : "_";
-        b.append(
-          `${slotsName}["${slotName}"] = ($sprops: Record<PropertyKey, any>, $context: Record<PropertyKey, any>) => {`
-        );
+        const slotParams = [
+          "// @ts-ignore\n$sprops?: Record<PropertyKey, any>",
+          "// @ts-ignore\n$context?: Record<PropertyKey, any>"
+        ];
+        b.append(`${slotsName}["${slotName}"] = (
+${slotParams.join(",\n")}
+) => {`);
         b.append(`let $output = "";`);
         for (let child of slot.children) {
           buildServerNode(child, status, b);
@@ -2048,6 +2074,9 @@ function buildServerComponentNode(node, status, b) {
   }
   b.append("");
   b.append(`$output += ${componentName}(${renderParams})`);
+  if (node.tagName === ":component") {
+    status.output += ANCHOR_COMMENT;
+  }
 }
 
 // src/compile/build/server/buildServerAwaitNode.ts
@@ -2104,7 +2133,7 @@ function buildServerForBranch(node, status, b) {
 }
 
 // src/compile/build/server/buildServerHtmlNode.ts
-function buildServerHtmlNode(node, status, b) {
+function buildServerHtmlNode(node, status) {
   status.output += HYDRATION_START_COMMENT;
   for (let branch of node.children) {
     if (isControlNode(branch)) {
@@ -2187,7 +2216,7 @@ function buildServerSwitchNode(node, status, b) {
     status.output = "";
   }
   b.append(`${node.statement} {`);
-  for (let [i, branch] of node.children.filter((c) => isControlNode(c)).entries()) {
+  for (let branch of node.children.filter((c) => isControlNode(c))) {
     if (isControlNode(branch)) {
       buildServerSwitchBranch(branch, status, b);
     }
@@ -2223,6 +2252,7 @@ function buildServerControlNode(node, status, b) {
     }
     case "@switch group": {
       buildServerSwitchNode(node, status, b);
+      break;
     }
     case "@case":
     case "@default": {
@@ -2253,7 +2283,7 @@ function buildServerControlNode(node, status, b) {
       break;
     }
     case "@html group": {
-      buildServerHtmlNode(node, status, b);
+      buildServerHtmlNode(node, status);
       break;
     }
     case "@html": {
@@ -2308,7 +2338,7 @@ var voidTags_default = voidTags;
 
 // src/compile/build/server/buildServerElementNode.ts
 function buildServerElementNode(node, status, b) {
-  let attributes = buildElementAttributes2(node, status, b);
+  let attributes = buildElementAttributes2(node, status);
   if (attributes.length) {
     attributes = " " + attributes;
   }
@@ -2330,7 +2360,7 @@ function buildServerElementNode(node, status, b) {
     status.output += `</${tagName}>`;
   }
 }
-function buildElementAttributes2(node, status, b) {
+function buildElementAttributes2(node, status) {
   let attributes = [];
   for (let { name, value } of node.attributes) {
     if (name === "self" && node.tagName === ":element") {
@@ -2417,7 +2447,7 @@ function buildServerSlotNode(node, status, b) {
   const slotAttributes = node.attributes.filter((a) => a.name !== "name");
   const slotHasProps = slotAttributes.length;
   if (slotHasProps) {
-    b.append(`const ${propsName} = {};`);
+    b.append(`const ${propsName}: any = {};`);
     for (let { name, value } of slotAttributes) {
       if (name.startsWith("{") && name.endsWith("}")) {
         name = name.substring(1, name.length - 1);
@@ -2484,7 +2514,7 @@ function buildServerSpecialNode(node, status, b) {
 }
 
 // src/compile/build/server/buildServerTextNode.ts
-function buildServerTextNode(node, status, b) {
+function buildServerTextNode(node, status) {
   let content = node.content || "";
   if (!status.preserveWhitespace) {
     content = content.replaceAll(/\s+/g, " ");
@@ -2572,7 +2602,7 @@ function buildServerNode(node, status, b) {
       break;
     }
     case "text": {
-      buildServerTextNode(node, status, b);
+      buildServerTextNode(node, status);
       break;
     }
     case "special": {
@@ -2595,7 +2625,7 @@ var importsMap2 = {
   t_attr: 'import { t_attr } from "${folder}";',
   t_class: 'import { t_class } from "${folder}";',
   t_style: 'import { t_style } from "${folder}";',
-  ServerSlotRender: 'import type { ServerSlotRender } from "${folder}";'
+  ServerSlotRender: 'import { type ServerSlotRender } from "${folder}";'
 };
 function buildServerCode(template, options) {
   let b = new Builder();
@@ -2623,17 +2653,15 @@ function buildServerTemplate(template, imports, b, options) {
   for (let i = 0; i < script.length; i++) {
     if (script.substring(i, i + "/* @params */".length) === "/* @params */") {
       b.append(script.substring(marker, i));
-      b.append(
-        `${current.params || "$props?: Record<PropertyKey, any>"},
-				$context?: Record<PropertyKey, any>,
-				$slots?: Record<string, ServerSlotRender>`
-      );
+      let params = [
+        current.params ?? `${current.props?.length ? "$props" : "// @ts-ignore\n$props?"}: Record<PropertyKey, any>`,
+        `${current.contextProps?.length ? "" : "// @ts-ignore\n"}$context?: Record<PropertyKey, any>`,
+        `${current.slotProps?.length ? "" : "// @ts-ignore\n"}$slots?: Record<string, ServerSlotRender>`
+      ];
+      b.append(params.join(",\n"));
       marker = i + "/* @params */".length;
     } else if (script.substring(i, i + "/* @start */".length) === "/* @start */") {
       b.append(script.substring(marker, i));
-      if (current.props?.length) {
-        b.append(`$props ??= {};`);
-      }
       if (current.contextProps?.length) {
         b.append(`$context = Object.assign({}, $context);`);
       }
@@ -2683,9 +2711,9 @@ function build(template, options) {
 }
 
 // src/compile/buildType.ts
-function buildType(name, template, options) {
+function buildType(template, options) {
   let b = new Builder();
-  b.append(`import type { SlotRender } from "${options?.renderFolder || "@torpor/view"}";`);
+  b.append(`import { type SlotRender } from "${options?.renderFolder || "@torpor/view"}";`);
   for (let component of template.components) {
     b.append("");
     b.append(`
@@ -2779,7 +2807,7 @@ function parseInlineScript(status) {
       }
     } else if (accept('"', status) || accept("'", status)) {
       const char = status.source[status.i - 1];
-      for (let j = status.i + 1; j < status.source.length; j++) {
+      for (let j = status.i; j < status.source.length; j++) {
         if (status.source[j] === char && status.source[j - 1] !== "\\") {
           status.i = j + 1;
           break;
@@ -2788,7 +2816,7 @@ function parseInlineScript(status) {
     } else if (accept("`", status)) {
       const char = status.source[status.i - 1];
       let level2 = 0;
-      for (let j = status.i + 1; j < status.source.length; j++) {
+      for (let j = status.i; j < status.source.length; j++) {
         if (status.source[j] === char && status.source[j - 1] !== "\\" && level2 === 0) {
           status.i = j + 1;
           break;
@@ -3211,13 +3239,16 @@ function parseElement(status) {
     }
     current.stack.pop();
   }
-  if (!element.tagName.startsWith(":") && element.tagName.substring(0, 1) === element.tagName.substring(0, 1).toLocaleUpperCase()) {
+  if (!element.tagName.startsWith(":") && /[A-Z]/.test(element.tagName[0])) {
     element.type = "component";
     slottifyChildNodes(element);
   }
   if (isSpecialNode(element)) {
     if (element.tagName === ":slot") {
       slottifyChildNodes(element);
+      const current = status.components[status.components.length - 1];
+      current.slotProps ??= [];
+      current.slotProps.push(element.attributes.find((a) => a.name === "name")?.name ?? "default");
     } else if (element.tagName === ":component") {
       const selfAttribute = element.attributes.find((a) => a.name === "self");
       if (selfAttribute && selfAttribute.value) {
@@ -3580,12 +3611,12 @@ function parseCode(source) {
       }
     } else if (accept("function", status)) {
       consumeSpace(status);
-      if (source[status.i] === source[status.i].toLocaleUpperCase()) {
+      if (/[A-Z]/.test(source[status.i])) {
         parseComponentStart(status);
       }
     } else if (accept("const", status)) {
       consumeSpace(status);
-      if (source[status.i] === source[status.i].toLocaleUpperCase()) {
+      if (/[A-Z]/.test(source[status.i])) {
         const start = status.i;
         consumeAlphaNumeric(status);
         consumeSpace(status);
@@ -3634,7 +3665,8 @@ function parseCode(source) {
           } : void 0,
           style: c.style,
           props: c.props,
-          contextProps: c.contextProps
+          contextProps: c.contextProps,
+          slotProps: c.slotProps
         };
       })
     } : void 0