@collie-lang/compiler 1.2.0 → 1.3.1

package/dist/index.js

@@ -1,337 +1,36 @@
-// src/codegen.ts
-function generateRenderModule(root, options) {
-  const { prelude, propsType, propsDestructure, jsx, isTsx } = buildModuleParts(root, options);
-  const parts = [...prelude, propsType];
-  if (!isTsx) {
-    parts.push(`/** @param {any} props */`);
-  }
-  const functionLines = [
-    isTsx ? "export function render(props: any) {" : "export function render(props) {"
-  ];
-  if (propsDestructure) {
-    functionLines.push(`  ${propsDestructure}`);
-  }
-  functionLines.push(`  return ${jsx};`, `}`);
-  parts.push(functionLines.join("\n"));
-  return parts.join("\n\n");
-}
-function buildModuleParts(root, options) {
-  const { jsxRuntime, flavor } = options;
-  const isTsx = flavor === "tsx";
-  const aliasEnv = buildClassAliasEnvironment(root.classAliases);
-  const jsx = renderRootChildren(root.children, aliasEnv);
-  const propsDestructure = emitPropsDestructure(root.props);
-  const prelude = [];
-  if (root.clientComponent) {
-    prelude.push(`"use client";`);
-  }
-  if (jsxRuntime === "classic" && templateUsesJsx(root)) {
-    prelude.push(`import React from "react";`);
-  }
-  const propsType = emitPropsType(root.props, flavor);
-  return { prelude, propsType, propsDestructure, jsx, isTsx };
-}
-function buildClassAliasEnvironment(decl) {
-  const env = /* @__PURE__ */ new Map();
-  if (!decl) {
-    return env;
-  }
-  for (const alias of decl.aliases) {
-    env.set(alias.name, alias.classes);
-  }
-  return env;
-}
-function renderRootChildren(children, aliasEnv) {
-  return emitNodesExpression(children, aliasEnv, /* @__PURE__ */ new Set());
-}
-function templateUsesJsx(root) {
-  if (root.children.length === 0) {
-    return false;
-  }
-  if (root.children.length > 1) {
-    return true;
-  }
-  return nodeUsesJsx(root.children[0]);
-}
-function nodeUsesJsx(node) {
-  if (node.type === "Element" || node.type === "Text" || node.type === "Component") {
-    return true;
-  }
-  if (node.type === "Expression" || node.type === "JSXPassthrough") {
-    return false;
-  }
-  if (node.type === "Conditional") {
-    return node.branches.some((branch) => branchUsesJsx(branch));
-  }
-  if (node.type === "For") {
-    return node.body.some((child) => nodeUsesJsx(child));
-  }
-  return false;
-}
-function branchUsesJsx(branch) {
-  if (!branch.body.length) {
-    return false;
-  }
-  return branch.body.some((child) => nodeUsesJsx(child));
-}
-function emitNodeInJsx(node, aliasEnv, locals) {
-  if (node.type === "Text") {
-    return emitText(node, locals);
-  }
-  if (node.type === "Expression") {
-    return `{${emitExpressionValue(node.value, locals)}}`;
-  }
-  if (node.type === "JSXPassthrough") {
-    return `{${emitJsxExpression(node.expression, locals)}}`;
-  }
-  if (node.type === "Conditional") {
-    return `{${emitConditionalExpression(node, aliasEnv, locals)}}`;
-  }
-  if (node.type === "For") {
-    return `{${emitForExpression(node, aliasEnv, locals)}}`;
-  }
-  if (node.type === "Component") {
-    return wrapWithGuard(emitComponent(node, aliasEnv, locals), node.guard, "jsx", locals);
-  }
-  return wrapWithGuard(emitElement(node, aliasEnv, locals), node.guard, "jsx", locals);
-}
-function emitElement(node, aliasEnv, locals) {
-  const expanded = expandClasses(node.classes, aliasEnv);
-  const classAttr = expanded.length ? ` className="${expanded.join(" ")}"` : "";
-  const attrs = emitAttributes(node.attributes, aliasEnv, locals);
-  const allAttrs = classAttr + attrs;
-  const children = emitChildrenWithSpacing(node.children, aliasEnv, locals);
-  if (children.length > 0) {
-    return `<${node.name}${allAttrs}>${children}</${node.name}>`;
-  } else {
-    return `<${node.name}${allAttrs} />`;
-  }
-}
-function emitComponent(node, aliasEnv, locals) {
-  const attrs = emitAttributes(node.attributes, aliasEnv, locals);
-  const slotProps = emitSlotProps(node, aliasEnv, locals);
-  const allAttrs = `${attrs}${slotProps}`;
-  const children = emitChildrenWithSpacing(node.children, aliasEnv, locals);
-  if (children.length > 0) {
-    return `<${node.name}${allAttrs}>${children}</${node.name}>`;
-  } else {
-    return `<${node.name}${allAttrs} />`;
-  }
-}
-function emitChildrenWithSpacing(children, aliasEnv, locals) {
-  if (children.length === 0) {
-    return "";
-  }
-  const parts = [];
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i];
-    const emitted = emitNodeInJsx(child, aliasEnv, locals);
-    parts.push(emitted);
-    if (i < children.length - 1) {
-      const nextChild = children[i + 1];
-      const needsSpace = child.type === "Text" && (nextChild.type === "Element" || nextChild.type === "Component" || nextChild.type === "Expression" || nextChild.type === "JSXPassthrough");
-      if (needsSpace) {
-        parts.push(" ");
-      }
-    }
-  }
-  return parts.join("");
-}
-function emitAttributes(attributes, aliasEnv, locals) {
-  if (attributes.length === 0) {
-    return "";
-  }
-  return attributes.map((attr) => {
-    if (attr.value === null) {
-      return ` ${attr.name}`;
-    }
-    return ` ${attr.name}=${emitAttributeValue(attr.value, locals)}`;
-  }).join("");
-}
-function emitSlotProps(node, aliasEnv, locals) {
-  if (!node.slots || node.slots.length === 0) {
-    return "";
-  }
-  return node.slots.map((slot) => {
-    const expr = emitNodesExpression(slot.children, aliasEnv, locals);
-    return ` ${slot.name}={${expr}}`;
-  }).join("");
-}
-function wrapWithGuard(rendered, guard, context, locals) {
-  if (!guard) {
-    return rendered;
-  }
-  const condition = emitExpressionValue(guard, locals);
-  const expression = `(${condition}) && ${rendered}`;
-  return context === "jsx" ? `{${expression}}` : expression;
-}
-function emitForExpression(node, aliasEnv, locals) {
-  const arrayExpr = emitExpressionValue(node.arrayExpr, locals);
-  const nextLocals = new Set(locals);
-  nextLocals.add(node.itemName);
-  const body = emitNodesExpression(node.body, aliasEnv, nextLocals);
-  return `(${arrayExpr} ?? []).map((${node.itemName}) => ${body})`;
-}
-function expandClasses(classes, aliasEnv) {
-  const result = [];
-  for (const cls of classes) {
-    const match = cls.match(/^\$([A-Za-z_][A-Za-z0-9_]*)$/);
-    if (!match) {
-      result.push(cls);
-      continue;
-    }
-    const aliasClasses = aliasEnv.get(match[1]);
-    if (!aliasClasses) {
-      continue;
+// src/rewrite.ts
+function createTemplateEnv(propsDecls) {
+  const propAliases = /* @__PURE__ */ new Map();
+  if (propsDecls) {
+    for (const decl of propsDecls) {
+      propAliases.set(decl.name, decl.kind);
     }
-    result.push(...aliasClasses);
   }
-  return result;
-}
-function emitExpressionValue(expression, locals) {
-  return rewriteExpression(expression, locals);
+  return {
+    propAliases,
+    localsStack: []
+  };
 }
-function emitJsxExpression(expression, locals) {
-  const trimmed = expression.trimStart();
-  if (trimmed.startsWith("<")) {
-    return rewriteJsxExpression(expression, locals);
-  }
-  return rewriteExpression(expression, locals);
+function pushLocals(env, names) {
+  const locals = new Set(names);
+  env.localsStack.push(locals);
 }
-function emitAttributeValue(value, locals) {
-  const trimmed = value.trim();
-  if (trimmed.startsWith('"') || trimmed.startsWith("'")) {
-    return value;
-  }
-  if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
-    const inner = trimmed.slice(1, -1);
-    const rewritten = rewriteExpression(inner, locals);
-    return `{${rewritten}}`;
-  }
-  return rewriteExpression(trimmed, locals);
+function popLocals(env) {
+  env.localsStack.pop();
 }
-function emitText(node, locals) {
-  if (!node.parts.length) {
-    return "";
-  }
-  return node.parts.map((part) => {
-    if (part.type === "text") {
-      return escapeText(part.value);
+function isLocal(env, name) {
+  for (let i = env.localsStack.length - 1; i >= 0; i--) {
+    if (env.localsStack[i].has(name)) {
+      return true;
     }
-    return `{${emitExpressionValue(part.value, locals)}}`;
-  }).join("");
-}
-function emitConditionalExpression(node, aliasEnv, locals) {
-  if (!node.branches.length) {
-    return "null";
-  }
-  const first = node.branches[0];
-  if (node.branches.length === 1 && first.test) {
-    const test = emitExpressionValue(first.test, locals);
-    return `(${test}) && ${emitBranchExpression(first, aliasEnv, locals)}`;
-  }
-  const hasElse = node.branches[node.branches.length - 1].test === void 0;
-  let fallback = hasElse ? emitBranchExpression(node.branches[node.branches.length - 1], aliasEnv, locals) : "null";
-  const startIndex = hasElse ? node.branches.length - 2 : node.branches.length - 1;
-  if (startIndex < 0) {
-    return fallback;
-  }
-  for (let i = startIndex; i >= 0; i--) {
-    const branch = node.branches[i];
-    const test = branch.test ? emitExpressionValue(branch.test, locals) : "false";
-    fallback = `(${test}) ? ${emitBranchExpression(branch, aliasEnv, locals)} : ${fallback}`;
-  }
-  return fallback;
-}
-function emitBranchExpression(branch, aliasEnv, locals) {
-  return emitNodesExpression(branch.body, aliasEnv, locals);
-}
-function emitNodesExpression(children, aliasEnv, locals) {
-  if (children.length === 0) {
-    return "null";
-  }
-  if (children.length === 1) {
-    return emitSingleNodeExpression(children[0], aliasEnv, locals);
-  }
-  return `<>${children.map((child) => emitNodeInJsx(child, aliasEnv, locals)).join("")}</>`;
-}
-function emitSingleNodeExpression(node, aliasEnv, locals) {
-  if (node.type === "Expression") {
-    return emitExpressionValue(node.value, locals);
-  }
-  if (node.type === "JSXPassthrough") {
-    return emitJsxExpression(node.expression, locals);
-  }
-  if (node.type === "Conditional") {
-    return emitConditionalExpression(node, aliasEnv, locals);
-  }
-  if (node.type === "For") {
-    return emitForExpression(node, aliasEnv, locals);
-  }
-  if (node.type === "Element") {
-    return wrapWithGuard(emitElement(node, aliasEnv, locals), node.guard, "expression", locals);
-  }
-  if (node.type === "Component") {
-    return wrapWithGuard(emitComponent(node, aliasEnv, locals), node.guard, "expression", locals);
-  }
-  if (node.type === "Text") {
-    return `<>${emitNodeInJsx(node, aliasEnv, locals)}</>`;
-  }
-  return emitNodeInJsx(node, aliasEnv, locals);
-}
-function emitPropsType(props, flavor) {
-  if (flavor === "tsx") {
-    return emitTsPropsType(props);
-  }
-  return emitJsDocPropsType(props);
-}
-function emitJsDocPropsType(props) {
-  if (!props) {
-    return "/** @typedef {any} Props */";
-  }
-  if (!props.fields.length) {
-    return "/** @typedef {{}} Props */";
-  }
-  const fields = props.fields.map((field) => {
-    const optional = field.optional ? "?" : "";
-    return `${field.name}${optional}: ${field.typeText}`;
-  }).join("; ");
-  return `/** @typedef {{ ${fields} }} Props */`;
-}
-function emitTsPropsType(props) {
-  if (!props || props.fields.length === 0) {
-    return "export type Props = Record<string, never>;";
   }
-  const lines = props.fields.map((field) => {
-    const optional = field.optional ? "?" : "";
-    return `  ${field.name}${optional}: ${field.typeText};`;
-  });
-  return ["export interface Props {", ...lines, "}"].join("\n");
+  return false;
 }
-function emitPropsDestructure(props) {
-  if (!props || props.fields.length === 0) {
-    return null;
+function isPropAlias(env, name) {
+  if (isLocal(env, name)) {
+    return false;
   }
-  const names = props.fields.map((field) => field.name);
-  return `const { ${names.join(", ")} } = props ?? {};`;
-}
-function escapeText(value) {
-  return value.replace(/[&<>{}]/g, (char) => {
-    switch (char) {
-      case "&":
-        return "&amp;";
-      case "<":
-        return "&lt;";
-      case ">":
-        return "&gt;";
-      case "{":
-        return "&#123;";
-      case "}":
-        return "&#125;";
-      default:
-        return char;
-    }
-  });
+  return env.propAliases.has(name);
 }
 var IGNORED_IDENTIFIERS = /* @__PURE__ */ new Set([
   "null",
@@ -384,13 +83,15 @@ var RESERVED_KEYWORDS = /* @__PURE__ */ new Set([
   "with",
   "yield"
 ]);
-function emitIdentifier(name) {
-  return `props?.${name}`;
-}
-function rewriteExpression(expression, locals) {
+function rewriteExpression(expression, env) {
   let i = 0;
   let state = "code";
   let output = "";
+  const usedBare = /* @__PURE__ */ new Set();
+  const usedPropsDot = /* @__PURE__ */ new Set();
+  const callSitesBare = /* @__PURE__ */ new Set();
+  const callSitesPropsDot = /* @__PURE__ */ new Set();
+  const rewrittenAliases = /* @__PURE__ */ new Set();
   while (i < expression.length) {
     const ch = expression[i];
     if (state === "code") {
@@ -428,12 +129,37 @@ function rewriteExpression(expression, locals) {
         const prevNonSpace = findPreviousNonSpace(expression, start - 1);
         const nextNonSpace = findNextNonSpace(expression, i);
         const isMemberAccess = prevNonSpace === ".";
-        const isObjectKey = nextNonSpace === ":";
-        if (isMemberAccess || isObjectKey || locals.has(name) || shouldIgnoreIdentifier(name)) {
+        const isObjectKey = nextNonSpace === ":" && (prevNonSpace === "{" || prevNonSpace === ",");
+        const isCall = nextNonSpace === "(";
+        if (prevNonSpace === "." && start >= 2) {
+          const propsStart = findPreviousIdentifierStart(expression, start - 2);
+          if (propsStart !== null) {
+            const possibleProps = expression.slice(propsStart, start - 1).trim();
+            if (possibleProps === "props") {
+              usedPropsDot.add(name);
+              if (isCall) {
+                callSitesPropsDot.add(name);
+              }
+            }
+          }
+        }
+        if (isMemberAccess || isObjectKey || isLocal(env, name) || shouldIgnoreIdentifier(name)) {
           output += name;
           continue;
         }
-        output += emitIdentifier(name);
+        if (isPropAlias(env, name)) {
+          output += `props.${name}`;
+          rewrittenAliases.add(name);
+          if (isCall) {
+            callSitesBare.add(name);
+          }
+          continue;
+        }
+        usedBare.add(name);
+        if (isCall) {
+          callSitesBare.add(name);
+        }
+        output += name;
         continue;
       }
       output += ch;
@@ -505,11 +231,16 @@ function rewriteExpression(expression, locals) {
       continue;
     }
   }
-  return output;
+  return { code: output, usedBare, usedPropsDot, callSitesBare, callSitesPropsDot, rewrittenAliases };
 }
-function rewriteJsxExpression(expression, locals) {
+function rewriteJsxExpression(expression, env) {
   let output = "";
   let i = 0;
+  const usedBare = /* @__PURE__ */ new Set();
+  const usedPropsDot = /* @__PURE__ */ new Set();
+  const callSitesBare = /* @__PURE__ */ new Set();
+  const callSitesPropsDot = /* @__PURE__ */ new Set();
+  const rewrittenAliases = /* @__PURE__ */ new Set();
   while (i < expression.length) {
     const ch = expression[i];
     if (ch === "{") {
@@ -518,15 +249,20 @@ function rewriteJsxExpression(expression, locals) {
         output += expression.slice(i);
         break;
       }
-      const rewritten = rewriteExpression(braceResult.content, locals);
-      output += `{${rewritten}}`;
+      const result = rewriteExpression(braceResult.content, env);
+      output += `{${result.code}}`;
+      for (const name of result.usedBare) usedBare.add(name);
+      for (const name of result.usedPropsDot) usedPropsDot.add(name);
+      for (const name of result.callSitesBare) callSitesBare.add(name);
+      for (const name of result.callSitesPropsDot) callSitesPropsDot.add(name);
+      for (const name of result.rewrittenAliases) rewrittenAliases.add(name);
       i = braceResult.endIndex + 1;
       continue;
     }
     output += ch;
     i++;
   }
-  return output;
+  return { code: output, usedBare, usedPropsDot, callSitesBare, callSitesPropsDot, rewrittenAliases };
 }
 function readBalancedBraces(source, startIndex) {
   let i = startIndex;
@@ -616,34 +352,385 @@ function readBalancedBraces(source, startIndex) {
       continue;
     }
   }
-  return null;
+  return null;
+}
+function findPreviousNonSpace(text, index) {
+  for (let i = index; i >= 0; i--) {
+    const ch = text[i];
+    if (!/\s/.test(ch)) {
+      return ch;
+    }
+  }
+  return null;
+}
+function findNextNonSpace(text, index) {
+  for (let i = index; i < text.length; i++) {
+    const ch = text[i];
+    if (!/\s/.test(ch)) {
+      return ch;
+    }
+  }
+  return null;
+}
+function findPreviousIdentifierStart(text, index) {
+  let i = index;
+  while (i >= 0 && /\s/.test(text[i])) {
+    i--;
+  }
+  if (i < 0) return null;
+  if (!isIdentifierPart(text[i])) {
+    return null;
+  }
+  while (i > 0 && isIdentifierPart(text[i - 1])) {
+    i--;
+  }
+  return i;
+}
+function isIdentifierStart(ch) {
+  return /[A-Za-z_$]/.test(ch);
+}
+function isIdentifierPart(ch) {
+  return /[A-Za-z0-9_$]/.test(ch);
+}
+function shouldIgnoreIdentifier(name) {
+  return IGNORED_IDENTIFIERS.has(name) || RESERVED_KEYWORDS.has(name);
+}
+
+// src/codegen.ts
+function generateRenderModule(root, options) {
+  const { prelude, propsType, propsDestructure, jsx, isTsx } = buildModuleParts(root, options);
+  const parts = [...prelude, propsType];
+  if (!isTsx) {
+    parts.push(`/** @param {any} props */`);
+  }
+  const functionLines = [
+    isTsx ? "export function render(props: any) {" : "export function render(props) {"
+  ];
+  if (propsDestructure) {
+    functionLines.push(`  ${propsDestructure}`);
+  }
+  functionLines.push(`  return ${jsx};`, `}`);
+  parts.push(functionLines.join("\n"));
+  return parts.join("\n\n");
+}
+function buildModuleParts(root, options) {
+  const { jsxRuntime, flavor } = options;
+  const isTsx = flavor === "tsx";
+  const aliasEnv = buildClassAliasEnvironment(root.classAliases);
+  const env = createTemplateEnv(root.propsDecls);
+  const jsx = renderRootChildren(root.children, aliasEnv, env);
+  const propsDestructure = emitPropsDestructure(root.props);
+  const prelude = [];
+  if (root.clientComponent) {
+    prelude.push(`"use client";`);
+  }
+  if (jsxRuntime === "classic" && templateUsesJsx(root)) {
+    prelude.push(`import React from "react";`);
+  }
+  const propsType = emitPropsType(root.props, flavor);
+  return { prelude, propsType, propsDestructure, jsx, isTsx };
+}
+function buildClassAliasEnvironment(decl) {
+  const env = /* @__PURE__ */ new Map();
+  if (!decl) {
+    return env;
+  }
+  for (const alias of decl.aliases) {
+    env.set(alias.name, alias.classes);
+  }
+  return env;
+}
+function renderRootChildren(children, aliasEnv, env) {
+  return emitNodesExpression(children, aliasEnv, env);
+}
+function templateUsesJsx(root) {
+  if (root.children.length === 0) {
+    return false;
+  }
+  if (root.children.length > 1) {
+    return true;
+  }
+  return nodeUsesJsx(root.children[0]);
+}
+function nodeUsesJsx(node) {
+  if (node.type === "Element" || node.type === "Text" || node.type === "Component") {
+    return true;
+  }
+  if (node.type === "Expression" || node.type === "JSXPassthrough") {
+    return false;
+  }
+  if (node.type === "Conditional") {
+    return node.branches.some((branch) => branchUsesJsx(branch));
+  }
+  if (node.type === "For") {
+    return node.body.some((child) => nodeUsesJsx(child));
+  }
+  return false;
+}
+function branchUsesJsx(branch) {
+  if (!branch.body.length) {
+    return false;
+  }
+  return branch.body.some((child) => nodeUsesJsx(child));
+}
+function emitNodeInJsx(node, aliasEnv, env) {
+  if (node.type === "Text") {
+    return emitText(node, env);
+  }
+  if (node.type === "Expression") {
+    return `{${emitExpressionValue(node.value, env)}}`;
+  }
+  if (node.type === "JSXPassthrough") {
+    return `{${emitJsxExpression(node.expression, env)}}`;
+  }
+  if (node.type === "Conditional") {
+    return `{${emitConditionalExpression(node, aliasEnv, env)}}`;
+  }
+  if (node.type === "For") {
+    return `{${emitForExpression(node, aliasEnv, env)}}`;
+  }
+  if (node.type === "Component") {
+    return wrapWithGuard(emitComponent(node, aliasEnv, env), node.guard, "jsx", env);
+  }
+  return wrapWithGuard(emitElement(node, aliasEnv, env), node.guard, "jsx", env);
+}
+function emitElement(node, aliasEnv, env) {
+  const expanded = expandClasses(node.classes, aliasEnv);
+  const classAttr = expanded.length ? ` className="${expanded.join(" ")}"` : "";
+  const attrs = emitAttributes(node.attributes, aliasEnv, env);
+  const allAttrs = classAttr + attrs;
+  const children = emitChildrenWithSpacing(node.children, aliasEnv, env);
+  if (children.length > 0) {
+    return `<${node.name}${allAttrs}>${children}</${node.name}>`;
+  } else {
+    return `<${node.name}${allAttrs} />`;
+  }
+}
+function emitComponent(node, aliasEnv, env) {
+  const attrs = emitAttributes(node.attributes, aliasEnv, env);
+  const slotProps = emitSlotProps(node, aliasEnv, env);
+  const allAttrs = `${attrs}${slotProps}`;
+  const children = emitChildrenWithSpacing(node.children, aliasEnv, env);
+  if (children.length > 0) {
+    return `<${node.name}${allAttrs}>${children}</${node.name}>`;
+  } else {
+    return `<${node.name}${allAttrs} />`;
+  }
+}
+function emitChildrenWithSpacing(children, aliasEnv, env) {
+  if (children.length === 0) {
+    return "";
+  }
+  const parts = [];
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const emitted = emitNodeInJsx(child, aliasEnv, env);
+    parts.push(emitted);
+    if (i < children.length - 1) {
+      const nextChild = children[i + 1];
+      const needsSpace = child.type === "Text" && (nextChild.type === "Element" || nextChild.type === "Component" || nextChild.type === "Expression" || nextChild.type === "JSXPassthrough");
+      if (needsSpace) {
+        parts.push(" ");
+      }
+    }
+  }
+  return parts.join("");
+}
+function emitAttributes(attributes, aliasEnv, env) {
+  if (attributes.length === 0) {
+    return "";
+  }
+  return attributes.map((attr) => {
+    if (attr.value === null) {
+      return ` ${attr.name}`;
+    }
+    return ` ${attr.name}=${emitAttributeValue(attr.value, env)}`;
+  }).join("");
+}
+function emitSlotProps(node, aliasEnv, env) {
+  if (!node.slots || node.slots.length === 0) {
+    return "";
+  }
+  return node.slots.map((slot) => {
+    const expr = emitNodesExpression(slot.children, aliasEnv, env);
+    return ` ${slot.name}={${expr}}`;
+  }).join("");
+}
+function wrapWithGuard(rendered, guard, context, env) {
+  if (!guard) {
+    return rendered;
+  }
+  const condition = emitExpressionValue(guard, env);
+  const expression = `(${condition}) && ${rendered}`;
+  return context === "jsx" ? `{${expression}}` : expression;
+}
+function emitForExpression(node, aliasEnv, env) {
+  const arrayExpr = emitExpressionValue(node.arrayExpr, env);
+  pushLocals(env, [node.itemName]);
+  const body = emitNodesExpression(node.body, aliasEnv, env);
+  popLocals(env);
+  return `(${arrayExpr} ?? []).map((${node.itemName}) => ${body})`;
+}
+function expandClasses(classes, aliasEnv) {
+  const result = [];
+  for (const cls of classes) {
+    const match = cls.match(/^\$([A-Za-z_][A-Za-z0-9_]*)$/);
+    if (!match) {
+      result.push(cls);
+      continue;
+    }
+    const aliasClasses = aliasEnv.get(match[1]);
+    if (!aliasClasses) {
+      continue;
+    }
+    result.push(...aliasClasses);
+  }
+  return result;
+}
+function emitExpressionValue(expression, env) {
+  return rewriteExpression(expression, env).code;
+}
+function emitJsxExpression(expression, env) {
+  const trimmed = expression.trimStart();
+  if (trimmed.startsWith("<")) {
+    return rewriteJsxExpression(expression, env).code;
+  }
+  return rewriteExpression(expression, env).code;
+}
+function emitAttributeValue(value, env) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith('"') || trimmed.startsWith("'")) {
+    return value;
+  }
+  if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
+    const inner = trimmed.slice(1, -1);
+    const rewritten = rewriteExpression(inner, env).code;
+    return `{${rewritten}}`;
+  }
+  return rewriteExpression(trimmed, env).code;
+}
+function emitText(node, env) {
+  if (!node.parts.length) {
+    return "";
+  }
+  return node.parts.map((part) => {
+    if (part.type === "text") {
+      return escapeText(part.value);
+    }
+    return `{${emitExpressionValue(part.value, env)}}`;
+  }).join("");
+}
+function emitConditionalExpression(node, aliasEnv, env) {
+  if (!node.branches.length) {
+    return "null";
+  }
+  const first = node.branches[0];
+  if (node.branches.length === 1 && first.test) {
+    const test = emitExpressionValue(first.test, env);
+    return `(${test}) && ${emitBranchExpression(first, aliasEnv, env)}`;
+  }
+  const hasElse = node.branches[node.branches.length - 1].test === void 0;
+  let fallback = hasElse ? emitBranchExpression(node.branches[node.branches.length - 1], aliasEnv, env) : "null";
+  const startIndex = hasElse ? node.branches.length - 2 : node.branches.length - 1;
+  if (startIndex < 0) {
+    return fallback;
+  }
+  for (let i = startIndex; i >= 0; i--) {
+    const branch = node.branches[i];
+    const test = branch.test ? emitExpressionValue(branch.test, env) : "false";
+    fallback = `(${test}) ? ${emitBranchExpression(branch, aliasEnv, env)} : ${fallback}`;
+  }
+  return fallback;
+}
+function emitBranchExpression(branch, aliasEnv, env) {
+  return emitNodesExpression(branch.body, aliasEnv, env);
+}
+function emitNodesExpression(children, aliasEnv, env) {
+  if (children.length === 0) {
+    return "null";
+  }
+  if (children.length === 1) {
+    return emitSingleNodeExpression(children[0], aliasEnv, env);
+  }
+  return `<>${children.map((child) => emitNodeInJsx(child, aliasEnv, env)).join("")}</>`;
 }
-function findPreviousNonSpace(text, index) {
-  for (let i = index; i >= 0; i--) {
-    const ch = text[i];
-    if (!/\s/.test(ch)) {
-      return ch;
-    }
+function emitSingleNodeExpression(node, aliasEnv, env) {
+  if (node.type === "Expression") {
+    return emitExpressionValue(node.value, env);
   }
-  return null;
+  if (node.type === "JSXPassthrough") {
+    return emitJsxExpression(node.expression, env);
+  }
+  if (node.type === "Conditional") {
+    return emitConditionalExpression(node, aliasEnv, env);
+  }
+  if (node.type === "For") {
+    return emitForExpression(node, aliasEnv, env);
+  }
+  if (node.type === "Element") {
+    return wrapWithGuard(emitElement(node, aliasEnv, env), node.guard, "expression", env);
+  }
+  if (node.type === "Component") {
+    return wrapWithGuard(emitComponent(node, aliasEnv, env), node.guard, "expression", env);
+  }
+  if (node.type === "Text") {
+    return `<>${emitNodeInJsx(node, aliasEnv, env)}</>`;
+  }
+  return emitNodeInJsx(node, aliasEnv, env);
 }
-function findNextNonSpace(text, index) {
-  for (let i = index; i < text.length; i++) {
-    const ch = text[i];
-    if (!/\s/.test(ch)) {
-      return ch;
-    }
+function emitPropsType(props, flavor) {
+  if (flavor === "tsx") {
+    return emitTsPropsType(props);
   }
-  return null;
+  return emitJsDocPropsType(props);
 }
-function isIdentifierStart(ch) {
-  return /[A-Za-z_$]/.test(ch);
+function emitJsDocPropsType(props) {
+  if (!props) {
+    return "/** @typedef {any} Props */";
+  }
+  if (!props.fields.length) {
+    return "/** @typedef {{}} Props */";
+  }
+  const fields = props.fields.map((field) => {
+    const optional = field.optional ? "?" : "";
+    return `${field.name}${optional}: ${field.typeText}`;
+  }).join("; ");
+  return `/** @typedef {{ ${fields} }} Props */`;
 }
-function isIdentifierPart(ch) {
-  return /[A-Za-z0-9_$]/.test(ch);
+function emitTsPropsType(props) {
+  if (!props || props.fields.length === 0) {
+    return "export type Props = Record<string, never>;";
+  }
+  const lines = props.fields.map((field) => {
+    const optional = field.optional ? "?" : "";
+    return `  ${field.name}${optional}: ${field.typeText};`;
+  });
+  return ["export interface Props {", ...lines, "}"].join("\n");
 }
-function shouldIgnoreIdentifier(name) {
-  return IGNORED_IDENTIFIERS.has(name) || RESERVED_KEYWORDS.has(name);
+function emitPropsDestructure(props) {
+  if (!props || props.fields.length === 0) {
+    return null;
+  }
+  const names = props.fields.map((field) => field.name);
+  return `const { ${names.join(", ")} } = props ?? {};`;
+}
+function escapeText(value) {
+  return value.replace(/[&<>{}]/g, (char) => {
+    switch (char) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case "{":
+        return "&#123;";
+      case "}":
+        return "&#125;";
+      default:
+        return char;
+    }
+  });
 }
 
 // src/html-codegen.ts
@@ -1439,6 +1526,185 @@ function offsetSpan(base, index, length) {
     }
   };
 }
+function enforcePropAliases(root) {
+  if (!root.propsDecls || root.propsDecls.length === 0) {
+    return [];
+  }
+  const diagnostics = [];
+  const declaredProps = new Map(root.propsDecls.map((d) => [d.name, d]));
+  const allUsage = collectTemplateUsage(root);
+  for (const name of allUsage.usedBare) {
+    if (!declaredProps.has(name) && !shouldIgnoreForDiagnostics(name)) {
+      diagnostics.push({
+        severity: "warning",
+        code: "props.missingDeclaration",
+        message: `Identifier "${name}" is used without "props." but is not declared in #props. Declare "${name}" in #props or use "props.${name}".`
+      });
+    }
+  }
+  for (const [name, decl] of declaredProps) {
+    const usedAsBare = allUsage.usedBareAliases.has(name);
+    const usedAsProps = allUsage.usedPropsDot.has(name);
+    if (!usedAsBare && !usedAsProps) {
+      diagnostics.push({
+        severity: "warning",
+        code: "props.unusedDeclaration",
+        message: `Prop "${name}" is declared in #props but never used in this template.`,
+        span: decl.span
+      });
+    }
+  }
+  for (const name of allUsage.usedPropsDot) {
+    if (declaredProps.has(name)) {
+      diagnostics.push({
+        severity: "warning",
+        code: "props.style.nonPreferred",
+        message: `"props.${name}" is unnecessary because "${name}" is declared in #props. Use "{${name}}" instead.`
+      });
+    }
+  }
+  for (const [name, decl] of declaredProps) {
+    const isCallable = decl.kind === "callable";
+    const usedAsCall = allUsage.callSitesBare.has(name);
+    const usedAsValue = allUsage.usedBareAliases.has(name) && !usedAsCall;
+    if (isCallable && usedAsValue) {
+      diagnostics.push({
+        severity: "warning",
+        code: "props.style.nonPreferred",
+        message: `"${name}" is declared as callable in #props (${name}()) but used as a value.`
+      });
+    } else if (!isCallable && usedAsCall) {
+      diagnostics.push({
+        severity: "warning",
+        code: "props.style.nonPreferred",
+        message: `"${name}" is declared as a value in #props but used as a function call.`
+      });
+    }
+  }
+  return diagnostics;
+}
+function collectTemplateUsage(root) {
+  const usage = {
+    usedBare: /* @__PURE__ */ new Set(),
+    usedBareAliases: /* @__PURE__ */ new Set(),
+    usedPropsDot: /* @__PURE__ */ new Set(),
+    callSitesBare: /* @__PURE__ */ new Set(),
+    callSitesPropsDot: /* @__PURE__ */ new Set()
+  };
+  const env = createTemplateEnv(root.propsDecls);
+  function mergeResult(result) {
+    for (const name of result.usedBare) {
+      usage.usedBare.add(name);
+    }
+    for (const name of result.rewrittenAliases) {
+      usage.usedBareAliases.add(name);
+    }
+    for (const name of result.usedPropsDot) {
+      usage.usedPropsDot.add(name);
+    }
+    for (const name of result.callSitesBare) {
+      usage.callSitesBare.add(name);
+    }
+    for (const name of result.callSitesPropsDot) {
+      usage.callSitesPropsDot.add(name);
+    }
+  }
+  function analyzeExpression(expr) {
+    if (!expr) return;
+    const result = rewriteExpression(expr, env);
+    mergeResult(result);
+  }
+  function analyzeJsxExpression(expr) {
+    if (!expr) return;
+    const result = rewriteJsxExpression(expr, env);
+    mergeResult(result);
+  }
+  function walkNode(node) {
+    switch (node.type) {
+      case "Text":
+        for (const part of node.parts) {
+          if (part.type === "expr") {
+            analyzeExpression(part.value);
+          }
+        }
+        break;
+      case "Expression":
+        analyzeExpression(node.value);
+        break;
+      case "JSXPassthrough":
+        analyzeJsxExpression(node.expression);
+        break;
+      case "Element":
+        if (node.guard) {
+          analyzeExpression(node.guard);
+        }
+        for (const attr of node.attributes) {
+          if (attr.value) {
+            analyzeAttributeValue(attr.value);
+          }
+        }
+        for (const child of node.children) {
+          walkNode(child);
+        }
+        break;
+      case "Component":
+        if (node.guard) {
+          analyzeExpression(node.guard);
+        }
+        for (const attr of node.attributes) {
+          if (attr.value) {
+            analyzeAttributeValue(attr.value);
+          }
+        }
+        if (node.slots) {
+          for (const slot of node.slots) {
+            for (const child of slot.children) {
+              walkNode(child);
+            }
+          }
+        }
+        for (const child of node.children) {
+          walkNode(child);
+        }
+        break;
+      case "Conditional":
+        for (const branch of node.branches) {
+          if (branch.test) {
+            analyzeExpression(branch.test);
+          }
+          for (const child of branch.body) {
+            walkNode(child);
+          }
+        }
+        break;
+      case "For":
+        analyzeExpression(node.arrayExpr);
+        for (const child of node.body) {
+          walkNode(child);
+        }
+        break;
+    }
+  }
+  function analyzeAttributeValue(value) {
+    const trimmed = value.trim();
+    if (trimmed.startsWith('"') || trimmed.startsWith("'")) {
+      return;
+    }
+    if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
+      const inner = trimmed.slice(1, -1);
+      analyzeExpression(inner);
+    } else {
+      analyzeExpression(trimmed);
+    }
+  }
+  for (const child of root.children) {
+    walkNode(child);
+  }
+  return usage;
+}
+function shouldIgnoreForDiagnostics(name) {
+  return IGNORED_IDENTIFIERS2.has(name) || RESERVED_KEYWORDS2.has(name);
+}
 
 // src/parser.ts
 var TEMPLATE_ID_PATTERN = /^[A-Za-z][A-Za-z0-9._-]*$/;
@@ -1755,6 +2021,7 @@ function parseTemplateBlock(lines, lineOffsets, startIndex, endIndex, options) {
         );
       } else {
         root.props = { fields: [] };
+        root.propsDecls = [];
       }
       if (level === 0) {
         propsBlockLevel = level;
@@ -1809,6 +2076,23 @@ function parseTemplateBlock(lines, lineOffsets, startIndex, endIndex, options) {
         );
         continue;
       }
+      const decl = parsePropDecl(lineContent, lineNumber, indent + 1, lineOffset, diagnostics);
+      if (decl && root.propsDecls) {
+        const existing = root.propsDecls.find((d) => d.name === decl.name);
+        if (existing) {
+          pushDiag(
+            diagnostics,
+            "COLLIE106",
+            `Duplicate prop declaration "${decl.name}".`,
+            lineNumber,
+            indent + 1,
+            lineOffset,
+            trimmed.length
+          );
+        } else {
+          root.propsDecls.push(decl);
+        }
+      }
       continue;
     }
     if (classesBlockLevel !== null && level > classesBlockLevel) {
@@ -2221,6 +2505,7 @@ function parseTemplateBlock(lines, lineOffsets, startIndex, endIndex, options) {
     diagnostics.push(...enforceDialect(root, options.dialect));
     diagnostics.push(...enforceProps(root, options.dialect.props));
   }
+  diagnostics.push(...enforcePropAliases(root));
   return { root, diagnostics };
 }
 function buildLineOffsets(lines) {
@@ -2271,7 +2556,7 @@ function parseConditionalHeader(kind, lineContent, lineNumber, column, lineOffse
     pushDiag(
       diagnostics,
       "COLLIE201",
-      kind === "if" ? "Invalid @if syntax. Use @if <condition>." : "Invalid @elseIf syntax. Use @elseIf <condition>.",
+      kind === "if" ? "Invalid @if syntax. Use @if (condition)." : "Invalid @elseIf syntax. Use @elseIf (condition).",
       lineNumber,
       column,
       lineOffset,
@@ -2295,29 +2580,36 @@ function parseConditionalHeader(kind, lineContent, lineNumber, column, lineOffse
   }
   const remainderTrimmed = remainder.trimStart();
   const usesParens = remainderTrimmed.startsWith("(");
+  if (!usesParens) {
+    pushDiag(
+      diagnostics,
+      "COLLIE211",
+      kind === "if" ? "@if requires parentheses: @if (condition)" : "@elseIf requires parentheses: @elseIf (condition)",
+      lineNumber,
+      column,
+      lineOffset,
+      trimmed.length || token.length
+    );
+    return null;
+  }
   let testRaw = "";
   let remainderRaw = "";
-  if (usesParens) {
-    const openIndex = trimmed.indexOf("(", token.length);
-    const closeIndex = trimmed.lastIndexOf(")");
-    if (openIndex === -1 || closeIndex <= openIndex) {
-      pushDiag(
-        diagnostics,
-        "COLLIE201",
-        kind === "if" ? "Invalid @if syntax. Use @if <condition>." : "Invalid @elseIf syntax. Use @elseIf <condition>.",
-        lineNumber,
-        column,
-        lineOffset,
-        trimmed.length || token.length
-      );
-      return null;
-    }
-    testRaw = trimmed.slice(openIndex + 1, closeIndex);
-    remainderRaw = trimmed.slice(closeIndex + 1);
-  } else {
-    testRaw = remainderTrimmed;
-    remainderRaw = "";
+  const openIndex = trimmed.indexOf("(", token.length);
+  const closeIndex = trimmed.lastIndexOf(")");
+  if (openIndex === -1 || closeIndex <= openIndex) {
+    pushDiag(
+      diagnostics,
+      "COLLIE212",
+      kind === "if" ? "Unclosed parentheses in @if ( ... )" : "Unclosed parentheses in @elseIf ( ... )",
+      lineNumber,
+      column,
+      lineOffset,
+      trimmed.length || token.length
+    );
+    return null;
   }
+  testRaw = trimmed.slice(openIndex + 1, closeIndex);
+  remainderRaw = trimmed.slice(closeIndex + 1);
   const test = testRaw.trim();
   if (!test) {
     pushDiag(
@@ -2366,7 +2658,20 @@ function parseElseHeader(lineContent, lineNumber, column, lineOffset, diagnostic
   const token = "@else";
   const tokenSpan = createSpan(lineNumber, column, token.length, lineOffset);
   const remainderRaw = match[1] ?? "";
-  const inlineBody = remainderRaw.trim();
+  const remainderTrimmed = remainderRaw.trim();
+  if (remainderTrimmed.startsWith("(")) {
+    pushDiag(
+      diagnostics,
+      "COLLIE213",
+      "@else does not accept a condition",
+      lineNumber,
+      column,
+      lineOffset,
+      trimmed.length || 4
+    );
+    return null;
+  }
+  const inlineBody = remainderTrimmed;
   const remainderOffset = trimmed.length - remainderRaw.length;
   const leadingWhitespace = remainderRaw.length - inlineBody.length;
   const inlineColumn = inlineBody.length > 0 ? column + remainderOffset + leadingWhitespace : void 0;
@@ -2380,12 +2685,12 @@ function parseElseHeader(lineContent, lineNumber, column, lineOffset, diagnostic
 }
 function parseForHeader(lineContent, lineNumber, column, lineOffset, diagnostics) {
   const trimmed = lineContent.trimEnd();
-  const match = trimmed.match(/^@for\s+([A-Za-z_][A-Za-z0-9_]*)\s+in\s+(.+)$/);
-  if (!match) {
+  const token = "@for";
+  if (!trimmed.startsWith(token)) {
     pushDiag(
       diagnostics,
       "COLLIE210",
-      "Invalid @for syntax. Use @for itemName in arrayExpr.",
+      "Invalid @for syntax. Use @for (item in array).",
       lineNumber,
       column,
       lineOffset,
@@ -2393,15 +2698,55 @@ function parseForHeader(lineContent, lineNumber, column, lineOffset, diagnostics
     );
     return null;
   }
-  const token = "@for";
   const tokenSpan = createSpan(lineNumber, column, token.length, lineOffset);
+  const remainder = trimmed.slice(token.length).trimStart();
+  if (!remainder.startsWith("(")) {
+    pushDiag(
+      diagnostics,
+      "COLLIE211",
+      "@for requires parentheses: @for (item in array)",
+      lineNumber,
+      column,
+      lineOffset,
+      trimmed.length || 4
+    );
+    return null;
+  }
+  const openIndex = trimmed.indexOf("(", token.length);
+  const closeIndex = trimmed.lastIndexOf(")");
+  if (openIndex === -1 || closeIndex <= openIndex) {
+    pushDiag(
+      diagnostics,
+      "COLLIE212",
+      "Unclosed parentheses in @for ( ... )",
+      lineNumber,
+      column,
+      lineOffset,
+      trimmed.length || 4
+    );
+    return null;
+  }
+  const content = trimmed.slice(openIndex + 1, closeIndex).trim();
+  const match = content.match(/^([A-Za-z_][A-Za-z0-9_]*)\s+in\s+(.+)$/);
+  if (!match) {
+    pushDiag(
+      diagnostics,
+      "COLLIE210",
+      "Invalid @for syntax. Use @for (item in array).",
+      lineNumber,
+      column,
+      lineOffset,
+      trimmed.length || 4
+    );
+    return null;
+  }
   const itemName = match[1];
   const arrayExprRaw = match[2];
   if (!itemName || !arrayExprRaw) {
     pushDiag(
       diagnostics,
       "COLLIE210",
-      "Invalid @for syntax. Use @for itemName in arrayExpr.",
+      "Invalid @for syntax. Use @for (item in array).",
       lineNumber,
       column,
       lineOffset,
@@ -2423,8 +2768,9 @@ function parseForHeader(lineContent, lineNumber, column, lineOffset, diagnostics
     return null;
   }
   const arrayExprLeadingWhitespace = arrayExprRaw.length - arrayExprRaw.trimStart().length;
-  const arrayExprStart = trimmed.length - arrayExprRaw.length;
-  const arrayExprColumn = column + arrayExprStart + arrayExprLeadingWhitespace;
+  const contentStart = openIndex + 1;
+  const arrayExprStartInContent = content.length - arrayExprRaw.length;
+  const arrayExprColumn = column + contentStart + arrayExprStartInContent + arrayExprLeadingWhitespace;
   const arrayExprSpan = createSpan(lineNumber, arrayExprColumn, arrayExpr.length, lineOffset);
   return { itemName, arrayExpr, token, tokenSpan, arrayExprSpan };
 }
@@ -3319,6 +3665,53 @@ function parseAndAddAttribute(attrStr, attributes, diagnostics, lineNumber, colu
     }
   }
 }
+function parsePropDecl(line, lineNumber, column, lineOffset, diagnostics) {
+  const trimmed = line.trim();
+  if (trimmed.includes(":") || trimmed.includes("<") || trimmed.includes("?")) {
+    pushDiag(
+      diagnostics,
+      "COLLIE104",
+      'Types are not supported in #props yet. Use "name" or "name()".',
+      lineNumber,
+      column,
+      lineOffset,
+      trimmed.length
+    );
+    return null;
+  }
+  const callableMatch = trimmed.match(/^([A-Za-z_$][A-Za-z0-9_$]*)\(\)$/);
+  if (callableMatch) {
+    const name = callableMatch[1];
+    const nameStart = line.indexOf(name);
+    const nameColumn = column + nameStart;
+    return {
+      name,
+      kind: "callable",
+      span: createSpan(lineNumber, nameColumn, name.length, lineOffset)
+    };
+  }
+  const valueMatch = trimmed.match(/^([A-Za-z_$][A-Za-z0-9_$]*)$/);
+  if (valueMatch) {
+    const name = valueMatch[1];
+    const nameStart = line.indexOf(name);
+    const nameColumn = column + nameStart;
+    return {
+      name,
+      kind: "value",
+      span: createSpan(lineNumber, nameColumn, name.length, lineOffset)
+    };
+  }
+  pushDiag(
+    diagnostics,
+    "COLLIE105",
+    'Invalid #props declaration. Use "name" or "name()".',
+    lineNumber,
+    column,
+    lineOffset,
+    trimmed.length
+  );
+  return null;
+}
 function pushDiag(diagnostics, code, message, line, column, lineOffset, length = 1) {
   diagnostics.push({
     severity: "error",