@matthesketh/utopia-compiler 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -306,7 +306,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 +372,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 +404,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();
@@ -464,21 +460,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 +503,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 +543,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 +568,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 +597,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 +608,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 +627,57 @@ ${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);
+    }
+  }
   // ---- Component generation -----------------------------------------------
   genComponent(node, scope) {
     const compVar = this.freshVar();

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

@@ -274,7 +274,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 +340,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 +372,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();
@@ -432,21 +428,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 +471,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 +511,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 +536,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 +565,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 +576,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 +595,57 @@ ${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);
+    }
+  }
   // ---- Component generation -----------------------------------------------
   genComponent(node, scope) {
     const compVar = this.freshVar();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-compiler",
-  "version": "0.1.0",
+  "version": "0.2.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.2.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",