@matthesketh/utopia-compiler 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -245,7 +245,7 @@ var TemplateParser = class {
       if (this.lookingAt("{{")) {
         flush();
         this.pos += 2;
-        const endIdx = this.source.indexOf("}}", this.pos);
+        const endIdx = this.findInterpolationEnd(this.pos);
         if (endIdx === -1) throw this.error("Unterminated interpolation {{ }}");
         const expression = this.source.slice(this.pos, endIdx).trim();
         nodes.push({ type: 3 /* Interpolation */, expression });
@@ -257,6 +257,39 @@ var TemplateParser = class {
     flush();
     return nodes;
   }
+  // ---- Interpolation end finder -------------------------------------------
+  /**
+   * Find the position of the closing `}}` for an interpolation expression,
+   * respecting JavaScript string literals so that `}}` inside quotes is not
+   * treated as the end delimiter.
+   *
+   * Handles single-quoted, double-quoted, and template literal strings,
+   * including escaped characters within them.
+   */
+  findInterpolationEnd(start) {
+    let pos = start;
+    let inSingle = false;
+    let inDouble = false;
+    let inBacktick = false;
+    while (pos < this.source.length - 1) {
+      const ch = this.source[pos];
+      if ((inSingle || inDouble || inBacktick) && ch === "\\") {
+        pos += 2;
+        continue;
+      }
+      if (!inDouble && !inBacktick && ch === "'") {
+        inSingle = !inSingle;
+      } else if (!inSingle && !inBacktick && ch === '"') {
+        inDouble = !inDouble;
+      } else if (!inSingle && !inDouble && ch === "`") {
+        inBacktick = !inBacktick;
+      } else if (!inSingle && !inDouble && !inBacktick && ch === "}" && this.source[pos + 1] === "}") {
+        return pos;
+      }
+      pos++;
+    }
+    return -1;
+  }
   // ---- Low-level helpers --------------------------------------------------
   readTagName() {
     const start = this.pos;
@@ -306,7 +339,9 @@ var TemplateParser = class {
   }
   expect(str) {
     if (!this.lookingAt(str)) {
-      throw this.error(`Expected "${str}" but found "${this.source.slice(this.pos, this.pos + 20)}"`);
+      throw this.error(
+        `Expected "${str}" but found "${this.source.slice(this.pos, this.pos + 20)}"`
+      );
     }
     this.pos += str.length;
   }
@@ -370,7 +405,7 @@ function classifyDirective(name, value) {
   return null;
 }
 function isDirectiveKind(s) {
-  return s === "on" || s === "bind" || s === "if" || s === "for" || s === "model";
+  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "for" || s === "model";
 }
 var CodeGenerator = class {
   constructor(options) {
@@ -402,13 +437,7 @@ var CodeGenerator = class {
         this.helpers.add("setAttr");
         this.emit(`setAttr(${fragVar}, '${escapeStr(this.scopeId)}', '')`);
       }
-      for (const node of ast) {
-        const childVar = this.genNode(node, scope);
-        if (childVar) {
-          this.helpers.add("appendChild");
-          this.emit(`appendChild(${fragVar}, ${childVar})`);
-        }
-      }
+      this.genChildren(fragVar, ast, scope);
       this.emit(`return ${fragVar}`);
     }
     const helperList = Array.from(this.helpers).sort();
@@ -416,7 +445,7 @@ var CodeGenerator = class {
 
 ` : "";
     const fnBody = this.code.map((l) => `  ${l}`).join("\n");
-    const moduleCode = `${importLine}function __render() {
+    const moduleCode = `${importLine}function __render(_ctx) {
 ${fnBody}
 }
 `;
@@ -445,6 +474,9 @@ ${fnBody}
     if (forDir) {
       return this.genFor(node, forDir, scope);
     }
+    if (node.tag === "slot") {
+      return this.genSlot(node);
+    }
     if (isComponentTag(node.tag)) {
       return this.genComponent(node, scope);
     }
@@ -464,21 +496,10 @@ ${fnBody}
       }
     }
     for (const dir of node.directives) {
-      if (dir.kind === "if" || dir.kind === "for") continue;
+      if (dir.kind === "if" || dir.kind === "else" || dir.kind === "for") continue;
       this.genDirective(elVar, dir, scope);
     }
-    this.deferredCallsStack.push([]);
-    for (const child of node.children) {
-      const childVar = this.genNode(child, scope);
-      if (childVar) {
-        this.helpers.add("appendChild");
-        this.emit(`appendChild(${elVar}, ${childVar})`);
-      }
-    }
-    const deferred = this.deferredCallsStack.pop();
-    for (const line of deferred) {
-      this.emit(line);
-    }
+    this.genChildren(elVar, node.children, scope);
     return elVar;
   }
   // ---- Text & Interpolation -----------------------------------------------
@@ -518,7 +539,32 @@ ${fnBody}
     this.helpers.add("addEventListener");
     const event = dir.arg ?? "click";
     const handler = this.resolveExpression(dir.expression, scope);
-    this.emit(`addEventListener(${elVar}, '${escapeStr(event)}', ${handler})`);
+    const modifiers = dir.modifiers;
+    const OPTION_MODS = /* @__PURE__ */ new Set(["once", "capture", "passive"]);
+    const handlerMods = modifiers.filter((m) => !OPTION_MODS.has(m));
+    const optionMods = modifiers.filter((m) => OPTION_MODS.has(m));
+    let handlerExpr = handler;
+    if (handlerMods.length > 0) {
+      const guards = [];
+      const calls = [];
+      for (const mod of handlerMods) {
+        switch (mod) {
+          case "prevent":
+            calls.push("_e.preventDefault()");
+            break;
+          case "stop":
+            calls.push("_e.stopPropagation()");
+            break;
+          case "self":
+            guards.push("if (_e.target !== _e.currentTarget) return");
+            break;
+        }
+      }
+      const body = [...guards, ...calls, `(${handler})(_e)`].join("; ");
+      handlerExpr = `(_e) => { ${body} }`;
+    }
+    const optionsStr = optionMods.length > 0 ? `, { ${optionMods.map((m) => `${m}: true`).join(", ")} }` : "";
+    this.emit(`addEventListener(${elVar}, '${escapeStr(event)}', ${handlerExpr}${optionsStr})`);
   }
   genBind(elVar, dir, scope) {
     this.helpers.add("setAttr");
@@ -533,12 +579,10 @@ ${fnBody}
     this.helpers.add("createEffect");
     const signalRef = this.resolveExpression(dir.expression, scope);
     this.emit(`createEffect(() => setAttr(${elVar}, 'value', ${signalRef}()))`);
-    this.emit(
-      `addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`
-    );
+    this.emit(`addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`);
   }
   // ---- Structural: u-if ---------------------------------------------------
-  genIf(node, dir, scope) {
+  genIf(node, dir, scope, elseNode) {
     this.helpers.add("createIf");
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
@@ -560,7 +604,27 @@ ${fnBody}
     }
     this.emit(`  return ${innerVar}`);
     this.emit(`}`);
-    this.emitOrDefer(`createIf(${anchorVar}, () => Boolean(${condition}), ${trueFnVar})`);
+    let elseArg = "";
+    if (elseNode) {
+      const falseFnVar = this.freshVar();
+      const strippedElse = {
+        ...elseNode,
+        directives: elseNode.directives.filter((d) => d.kind !== "else")
+      };
+      const savedCode2 = this.code;
+      this.code = [];
+      const elseInnerVar = this.genElement(strippedElse, scope);
+      const elseLines = [...this.code];
+      this.code = savedCode2;
+      this.emit(`const ${falseFnVar} = () => {`);
+      for (const line of elseLines) {
+        this.emit(`  ${line}`);
+      }
+      this.emit(`  return ${elseInnerVar}`);
+      this.emit(`}`);
+      elseArg = `, ${falseFnVar}`;
+    }
+    this.emitOrDefer(`createIf(${anchorVar}, () => Boolean(${condition}), ${trueFnVar}${elseArg})`);
     return anchorVar;
   }
   // ---- Structural: u-for --------------------------------------------------
@@ -569,7 +633,9 @@ ${fnBody}
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
     this.emit(`const ${anchorVar} = createComment('u-for')`);
-    const forMatch = dir.expression.match(/^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/);
+    const forMatch = dir.expression.match(
+      /^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/
+    );
     if (!forMatch) {
       throw new Error(`Invalid u-for expression: "${dir.expression}"`);
     }
@@ -578,9 +644,12 @@ ${fnBody}
     const listExpr = this.resolveExpression(forMatch[4].trim(), scope);
     const innerScope = new Set(scope);
     innerScope.add(itemName);
+    const keyDir = node.directives.find((d) => d.kind === "bind" && d.arg === "key");
     const strippedNode = {
       ...node,
-      directives: node.directives.filter((d) => d.kind !== "for")
+      directives: node.directives.filter(
+        (d) => d.kind !== "for" && !(d.kind === "bind" && d.arg === "key")
+      )
     };
     const savedCode = this.code;
     this.code = [];
@@ -594,9 +663,81 @@ ${fnBody}
     }
     this.emit(`  return ${innerVar}`);
     this.emit(`}`);
-    this.emitOrDefer(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar})`);
+    let keyArg = "";
+    if (keyDir) {
+      const keyExpr = this.resolveExpression(keyDir.expression, innerScope);
+      keyArg = `, (${itemName}, ${indexName}) => ${keyExpr}`;
+    }
+    this.emitOrDefer(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar}${keyArg})`);
     return anchorVar;
   }
+  // ---- Children processing (handles u-if / u-else pairing) ----------------
+  genChildren(parentVar, children, scope) {
+    this.deferredCallsStack.push([]);
+    let i = 0;
+    while (i < children.length) {
+      const child = children[i];
+      if (child.type === 1 /* Element */) {
+        const ifDir = child.directives.find((d) => d.kind === "if");
+        if (ifDir) {
+          let elseNode;
+          let skipTo = i + 1;
+          for (let j = i + 1; j < children.length; j++) {
+            const next = children[j];
+            if (next.type === 2 /* Text */ && !next.content.trim()) continue;
+            if (next.type === 1 /* Element */ && next.directives.some((d) => d.kind === "else")) {
+              elseNode = next;
+              skipTo = j + 1;
+            }
+            break;
+          }
+          const childVar2 = this.genIf(child, ifDir, scope, elseNode);
+          this.helpers.add("appendChild");
+          this.emit(`appendChild(${parentVar}, ${childVar2})`);
+          i = skipTo;
+          continue;
+        }
+        if (child.directives.some((d) => d.kind === "else")) {
+          i++;
+          continue;
+        }
+      }
+      const childVar = this.genNode(child, scope);
+      if (childVar) {
+        this.helpers.add("appendChild");
+        this.emit(`appendChild(${parentVar}, ${childVar})`);
+      }
+      i++;
+    }
+    const deferred = this.deferredCallsStack.pop();
+    for (const line of deferred) {
+      this.emit(line);
+    }
+  }
+  // ---- Slot rendering -----------------------------------------------------
+  /**
+   * Generate code for a `<slot />` element.
+   *
+   * Named slots use `<slot name="foo" />`, defaulting to "default".
+   * The generated code reads from `_ctx.$slots[name]()` if available,
+   * otherwise renders a comment placeholder.
+   */
+  genSlot(node) {
+    const nameAttr = node.attrs.find((a) => a.name === "name");
+    const slotName = nameAttr?.value ?? "default";
+    const slotVar = this.freshVar();
+    this.helpers.add("createComment");
+    if (slotName === "default") {
+      this.emit(
+        `const ${slotVar} = _ctx && _ctx.$slots && _ctx.$slots['default'] ? _ctx.$slots['default']() : (_ctx && _ctx.children instanceof Node ? _ctx.children : createComment('slot'))`
+      );
+    } else {
+      this.emit(
+        `const ${slotVar} = _ctx && _ctx.$slots && _ctx.$slots['${escapeStr(slotName)}'] ? _ctx.$slots['${escapeStr(slotName)}']() : createComment('slot')`
+      );
+    }
+    return slotVar;
+  }
   // ---- Component generation -----------------------------------------------
   genComponent(node, scope) {
     const compVar = this.freshVar();
@@ -615,7 +756,42 @@ ${fnBody}
     }
     const propsStr = propEntries.length > 0 ? `{ ${propEntries.join(", ")} }` : "{}";
     this.helpers.add("createComponent");
-    this.emit(`const ${compVar} = createComponent(${node.tag}, ${propsStr})`);
+    const substantiveChildren = node.children.filter(
+      (c) => c.type === 1 /* Element */ || c.type === 3 /* Interpolation */ || c.type === 2 /* Text */ && c.content.trim() !== ""
+    );
+    if (substantiveChildren.length > 0) {
+      const slotFnVar = this.freshVar();
+      const savedCode = this.code;
+      this.code = [];
+      if (substantiveChildren.length === 1 && substantiveChildren[0].type === 1 /* Element */) {
+        const innerVar = this.genNode(substantiveChildren[0], scope);
+        this.emit(`return ${innerVar}`);
+      } else {
+        this.helpers.add("createElement");
+        this.helpers.add("appendChild");
+        const fragVar = this.freshVar();
+        this.emit(`const ${fragVar} = createElement('div')`);
+        for (const child of node.children) {
+          const childVar = this.genNode(child, scope);
+          if (childVar) {
+            this.emit(`appendChild(${fragVar}, ${childVar})`);
+          }
+        }
+        this.emit(`return ${fragVar}`);
+      }
+      const slotLines = [...this.code];
+      this.code = savedCode;
+      this.emit(`const ${slotFnVar} = () => {`);
+      for (const line of slotLines) {
+        this.emit(`  ${line}`);
+      }
+      this.emit(`}`);
+      this.emit(
+        `const ${compVar} = createComponent(${node.tag}, ${propsStr}, { default: ${slotFnVar} })`
+      );
+    } else {
+      this.emit(`const ${compVar} = createComponent(${node.tag}, ${propsStr})`);
+    }
     return compVar;
   }
   // ---- Expression resolution ----------------------------------------------

package/dist/index.d.cts

@@ -84,7 +84,7 @@ interface Directive {
     expression: string;
     modifiers: string[];
 }
-type DirectiveKind = 'on' | 'bind' | 'if' | 'for' | 'model';
+type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'for' | 'model';
 /** Exported for testing — parse a template string into an AST. */
 declare function parseTemplate(source: string): TemplateNode[];
 

package/dist/index.d.ts

@@ -84,7 +84,7 @@ interface Directive {
     expression: string;
     modifiers: string[];
 }
-type DirectiveKind = 'on' | 'bind' | 'if' | 'for' | 'model';
+type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'for' | 'model';
 /** Exported for testing — parse a template string into an AST. */
 declare function parseTemplate(source: string): TemplateNode[];
 

package/dist/index.js

@@ -213,7 +213,7 @@ var TemplateParser = class {
       if (this.lookingAt("{{")) {
         flush();
         this.pos += 2;
-        const endIdx = this.source.indexOf("}}", this.pos);
+        const endIdx = this.findInterpolationEnd(this.pos);
         if (endIdx === -1) throw this.error("Unterminated interpolation {{ }}");
         const expression = this.source.slice(this.pos, endIdx).trim();
         nodes.push({ type: 3 /* Interpolation */, expression });
@@ -225,6 +225,39 @@ var TemplateParser = class {
     flush();
     return nodes;
   }
+  // ---- Interpolation end finder -------------------------------------------
+  /**
+   * Find the position of the closing `}}` for an interpolation expression,
+   * respecting JavaScript string literals so that `}}` inside quotes is not
+   * treated as the end delimiter.
+   *
+   * Handles single-quoted, double-quoted, and template literal strings,
+   * including escaped characters within them.
+   */
+  findInterpolationEnd(start) {
+    let pos = start;
+    let inSingle = false;
+    let inDouble = false;
+    let inBacktick = false;
+    while (pos < this.source.length - 1) {
+      const ch = this.source[pos];
+      if ((inSingle || inDouble || inBacktick) && ch === "\\") {
+        pos += 2;
+        continue;
+      }
+      if (!inDouble && !inBacktick && ch === "'") {
+        inSingle = !inSingle;
+      } else if (!inSingle && !inBacktick && ch === '"') {
+        inDouble = !inDouble;
+      } else if (!inSingle && !inDouble && ch === "`") {
+        inBacktick = !inBacktick;
+      } else if (!inSingle && !inDouble && !inBacktick && ch === "}" && this.source[pos + 1] === "}") {
+        return pos;
+      }
+      pos++;
+    }
+    return -1;
+  }
   // ---- Low-level helpers --------------------------------------------------
   readTagName() {
     const start = this.pos;
@@ -274,7 +307,9 @@ var TemplateParser = class {
   }
   expect(str) {
     if (!this.lookingAt(str)) {
-      throw this.error(`Expected "${str}" but found "${this.source.slice(this.pos, this.pos + 20)}"`);
+      throw this.error(
+        `Expected "${str}" but found "${this.source.slice(this.pos, this.pos + 20)}"`
+      );
     }
     this.pos += str.length;
   }
@@ -338,7 +373,7 @@ function classifyDirective(name, value) {
   return null;
 }
 function isDirectiveKind(s) {
-  return s === "on" || s === "bind" || s === "if" || s === "for" || s === "model";
+  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "for" || s === "model";
 }
 var CodeGenerator = class {
   constructor(options) {
@@ -370,13 +405,7 @@ var CodeGenerator = class {
         this.helpers.add("setAttr");
         this.emit(`setAttr(${fragVar}, '${escapeStr(this.scopeId)}', '')`);
       }
-      for (const node of ast) {
-        const childVar = this.genNode(node, scope);
-        if (childVar) {
-          this.helpers.add("appendChild");
-          this.emit(`appendChild(${fragVar}, ${childVar})`);
-        }
-      }
+      this.genChildren(fragVar, ast, scope);
       this.emit(`return ${fragVar}`);
     }
     const helperList = Array.from(this.helpers).sort();
@@ -384,7 +413,7 @@ var CodeGenerator = class {
 
 ` : "";
     const fnBody = this.code.map((l) => `  ${l}`).join("\n");
-    const moduleCode = `${importLine}function __render() {
+    const moduleCode = `${importLine}function __render(_ctx) {
 ${fnBody}
 }
 `;
@@ -413,6 +442,9 @@ ${fnBody}
     if (forDir) {
       return this.genFor(node, forDir, scope);
     }
+    if (node.tag === "slot") {
+      return this.genSlot(node);
+    }
     if (isComponentTag(node.tag)) {
       return this.genComponent(node, scope);
     }
@@ -432,21 +464,10 @@ ${fnBody}
       }
     }
     for (const dir of node.directives) {
-      if (dir.kind === "if" || dir.kind === "for") continue;
+      if (dir.kind === "if" || dir.kind === "else" || dir.kind === "for") continue;
       this.genDirective(elVar, dir, scope);
     }
-    this.deferredCallsStack.push([]);
-    for (const child of node.children) {
-      const childVar = this.genNode(child, scope);
-      if (childVar) {
-        this.helpers.add("appendChild");
-        this.emit(`appendChild(${elVar}, ${childVar})`);
-      }
-    }
-    const deferred = this.deferredCallsStack.pop();
-    for (const line of deferred) {
-      this.emit(line);
-    }
+    this.genChildren(elVar, node.children, scope);
     return elVar;
   }
   // ---- Text & Interpolation -----------------------------------------------
@@ -486,7 +507,32 @@ ${fnBody}
     this.helpers.add("addEventListener");
     const event = dir.arg ?? "click";
     const handler = this.resolveExpression(dir.expression, scope);
-    this.emit(`addEventListener(${elVar}, '${escapeStr(event)}', ${handler})`);
+    const modifiers = dir.modifiers;
+    const OPTION_MODS = /* @__PURE__ */ new Set(["once", "capture", "passive"]);
+    const handlerMods = modifiers.filter((m) => !OPTION_MODS.has(m));
+    const optionMods = modifiers.filter((m) => OPTION_MODS.has(m));
+    let handlerExpr = handler;
+    if (handlerMods.length > 0) {
+      const guards = [];
+      const calls = [];
+      for (const mod of handlerMods) {
+        switch (mod) {
+          case "prevent":
+            calls.push("_e.preventDefault()");
+            break;
+          case "stop":
+            calls.push("_e.stopPropagation()");
+            break;
+          case "self":
+            guards.push("if (_e.target !== _e.currentTarget) return");
+            break;
+        }
+      }
+      const body = [...guards, ...calls, `(${handler})(_e)`].join("; ");
+      handlerExpr = `(_e) => { ${body} }`;
+    }
+    const optionsStr = optionMods.length > 0 ? `, { ${optionMods.map((m) => `${m}: true`).join(", ")} }` : "";
+    this.emit(`addEventListener(${elVar}, '${escapeStr(event)}', ${handlerExpr}${optionsStr})`);
   }
   genBind(elVar, dir, scope) {
     this.helpers.add("setAttr");
@@ -501,12 +547,10 @@ ${fnBody}
     this.helpers.add("createEffect");
     const signalRef = this.resolveExpression(dir.expression, scope);
     this.emit(`createEffect(() => setAttr(${elVar}, 'value', ${signalRef}()))`);
-    this.emit(
-      `addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`
-    );
+    this.emit(`addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`);
   }
   // ---- Structural: u-if ---------------------------------------------------
-  genIf(node, dir, scope) {
+  genIf(node, dir, scope, elseNode) {
     this.helpers.add("createIf");
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
@@ -528,7 +572,27 @@ ${fnBody}
     }
     this.emit(`  return ${innerVar}`);
     this.emit(`}`);
-    this.emitOrDefer(`createIf(${anchorVar}, () => Boolean(${condition}), ${trueFnVar})`);
+    let elseArg = "";
+    if (elseNode) {
+      const falseFnVar = this.freshVar();
+      const strippedElse = {
+        ...elseNode,
+        directives: elseNode.directives.filter((d) => d.kind !== "else")
+      };
+      const savedCode2 = this.code;
+      this.code = [];
+      const elseInnerVar = this.genElement(strippedElse, scope);
+      const elseLines = [...this.code];
+      this.code = savedCode2;
+      this.emit(`const ${falseFnVar} = () => {`);
+      for (const line of elseLines) {
+        this.emit(`  ${line}`);
+      }
+      this.emit(`  return ${elseInnerVar}`);
+      this.emit(`}`);
+      elseArg = `, ${falseFnVar}`;
+    }
+    this.emitOrDefer(`createIf(${anchorVar}, () => Boolean(${condition}), ${trueFnVar}${elseArg})`);
     return anchorVar;
   }
   // ---- Structural: u-for --------------------------------------------------
@@ -537,7 +601,9 @@ ${fnBody}
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
     this.emit(`const ${anchorVar} = createComment('u-for')`);
-    const forMatch = dir.expression.match(/^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/);
+    const forMatch = dir.expression.match(
+      /^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/
+    );
     if (!forMatch) {
       throw new Error(`Invalid u-for expression: "${dir.expression}"`);
     }
@@ -546,9 +612,12 @@ ${fnBody}
     const listExpr = this.resolveExpression(forMatch[4].trim(), scope);
     const innerScope = new Set(scope);
     innerScope.add(itemName);
+    const keyDir = node.directives.find((d) => d.kind === "bind" && d.arg === "key");
     const strippedNode = {
       ...node,
-      directives: node.directives.filter((d) => d.kind !== "for")
+      directives: node.directives.filter(
+        (d) => d.kind !== "for" && !(d.kind === "bind" && d.arg === "key")
+      )
     };
     const savedCode = this.code;
     this.code = [];
@@ -562,9 +631,81 @@ ${fnBody}
     }
     this.emit(`  return ${innerVar}`);
     this.emit(`}`);
-    this.emitOrDefer(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar})`);
+    let keyArg = "";
+    if (keyDir) {
+      const keyExpr = this.resolveExpression(keyDir.expression, innerScope);
+      keyArg = `, (${itemName}, ${indexName}) => ${keyExpr}`;
+    }
+    this.emitOrDefer(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar}${keyArg})`);
     return anchorVar;
   }
+  // ---- Children processing (handles u-if / u-else pairing) ----------------
+  genChildren(parentVar, children, scope) {
+    this.deferredCallsStack.push([]);
+    let i = 0;
+    while (i < children.length) {
+      const child = children[i];
+      if (child.type === 1 /* Element */) {
+        const ifDir = child.directives.find((d) => d.kind === "if");
+        if (ifDir) {
+          let elseNode;
+          let skipTo = i + 1;
+          for (let j = i + 1; j < children.length; j++) {
+            const next = children[j];
+            if (next.type === 2 /* Text */ && !next.content.trim()) continue;
+            if (next.type === 1 /* Element */ && next.directives.some((d) => d.kind === "else")) {
+              elseNode = next;
+              skipTo = j + 1;
+            }
+            break;
+          }
+          const childVar2 = this.genIf(child, ifDir, scope, elseNode);
+          this.helpers.add("appendChild");
+          this.emit(`appendChild(${parentVar}, ${childVar2})`);
+          i = skipTo;
+          continue;
+        }
+        if (child.directives.some((d) => d.kind === "else")) {
+          i++;
+          continue;
+        }
+      }
+      const childVar = this.genNode(child, scope);
+      if (childVar) {
+        this.helpers.add("appendChild");
+        this.emit(`appendChild(${parentVar}, ${childVar})`);
+      }
+      i++;
+    }
+    const deferred = this.deferredCallsStack.pop();
+    for (const line of deferred) {
+      this.emit(line);
+    }
+  }
+  // ---- Slot rendering -----------------------------------------------------
+  /**
+   * Generate code for a `<slot />` element.
+   *
+   * Named slots use `<slot name="foo" />`, defaulting to "default".
+   * The generated code reads from `_ctx.$slots[name]()` if available,
+   * otherwise renders a comment placeholder.
+   */
+  genSlot(node) {
+    const nameAttr = node.attrs.find((a) => a.name === "name");
+    const slotName = nameAttr?.value ?? "default";
+    const slotVar = this.freshVar();
+    this.helpers.add("createComment");
+    if (slotName === "default") {
+      this.emit(
+        `const ${slotVar} = _ctx && _ctx.$slots && _ctx.$slots['default'] ? _ctx.$slots['default']() : (_ctx && _ctx.children instanceof Node ? _ctx.children : createComment('slot'))`
+      );
+    } else {
+      this.emit(
+        `const ${slotVar} = _ctx && _ctx.$slots && _ctx.$slots['${escapeStr(slotName)}'] ? _ctx.$slots['${escapeStr(slotName)}']() : createComment('slot')`
+      );
+    }
+    return slotVar;
+  }
   // ---- Component generation -----------------------------------------------
   genComponent(node, scope) {
     const compVar = this.freshVar();
@@ -583,7 +724,42 @@ ${fnBody}
     }
     const propsStr = propEntries.length > 0 ? `{ ${propEntries.join(", ")} }` : "{}";
     this.helpers.add("createComponent");
-    this.emit(`const ${compVar} = createComponent(${node.tag}, ${propsStr})`);
+    const substantiveChildren = node.children.filter(
+      (c) => c.type === 1 /* Element */ || c.type === 3 /* Interpolation */ || c.type === 2 /* Text */ && c.content.trim() !== ""
+    );
+    if (substantiveChildren.length > 0) {
+      const slotFnVar = this.freshVar();
+      const savedCode = this.code;
+      this.code = [];
+      if (substantiveChildren.length === 1 && substantiveChildren[0].type === 1 /* Element */) {
+        const innerVar = this.genNode(substantiveChildren[0], scope);
+        this.emit(`return ${innerVar}`);
+      } else {
+        this.helpers.add("createElement");
+        this.helpers.add("appendChild");
+        const fragVar = this.freshVar();
+        this.emit(`const ${fragVar} = createElement('div')`);
+        for (const child of node.children) {
+          const childVar = this.genNode(child, scope);
+          if (childVar) {
+            this.emit(`appendChild(${fragVar}, ${childVar})`);
+          }
+        }
+        this.emit(`return ${fragVar}`);
+      }
+      const slotLines = [...this.code];
+      this.code = savedCode;
+      this.emit(`const ${slotFnVar} = () => {`);
+      for (const line of slotLines) {
+        this.emit(`  ${line}`);
+      }
+      this.emit(`}`);
+      this.emit(
+        `const ${compVar} = createComponent(${node.tag}, ${propsStr}, { default: ${slotFnVar} })`
+      );
+    } else {
+      this.emit(`const ${compVar} = createComponent(${node.tag}, ${propsStr})`);
+    }
     return compVar;
   }
   // ---- Expression resolution ----------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-compiler",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Compiler for .utopia single-file components",
   "type": "module",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "dist"
   ],
   "dependencies": {
-    "@matthesketh/utopia-core": "0.1.0"
+    "@matthesketh/utopia-core": "0.3.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",