@matthesketh/utopia-compiler 0.7.0 → 0.7.2

package/dist/index.cjs

@@ -418,7 +418,7 @@ function classifyDirective(name, value) {
   return null;
 }
 function isDirectiveKind(s) {
-  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model" || s === "transition";
+  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model" || s === "html" || s === "transition";
 }
 var CodeGenerator = class {
   constructor(options) {
@@ -547,6 +547,9 @@ ${fnBody}
       case "model":
         this.genModel(elVar, dir, scope);
         break;
+      case "html":
+        this.genHtml(elVar, dir, scope);
+        break;
       case "transition":
         this.genTransition(elVar, dir);
         break;
@@ -560,6 +563,10 @@ ${fnBody}
     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));
+    const IS_HANDLER_REF = /^[\w$.]+$/;
+    const IS_ARROW_FN = /^\s*(?:\(.*?\)|[\w$]+)\s*=>/;
+    const hasExpression = handler !== "''";
+    const isInlineExpr = hasExpression && !IS_HANDLER_REF.test(handler) && !IS_ARROW_FN.test(handler);
     let handlerExpr = handler;
     if (handlerMods.length > 0) {
       const guards = [];
@@ -577,8 +584,18 @@ ${fnBody}
             break;
         }
       }
-      const body = [...guards, ...calls, `(${handler})(_e)`].join("; ");
-      handlerExpr = `(_e) => { ${body} }`;
+      if (!hasExpression) {
+        const body = [...guards, ...calls].join("; ");
+        handlerExpr = `(_e) => { ${body} }`;
+      } else if (isInlineExpr) {
+        const body = [...guards, ...calls, handler.replace(/\$event/g, "_e")].join("; ");
+        handlerExpr = `(_e) => { ${body} }`;
+      } else {
+        const body = [...guards, ...calls, `(${handler})(_e)`].join("; ");
+        handlerExpr = `(_e) => { ${body} }`;
+      }
+    } else if (isInlineExpr) {
+      handlerExpr = `(_e) => { ${handler.replace(/\$event/g, "_e")} }`;
     }
     const optionsStr = optionMods.length > 0 ? `, { ${optionMods.map((m) => `${m}: true`).join(", ")} }` : "";
     this.emit(`addEventListener(${elVar}, '${escapeStr(event)}', ${handlerExpr}${optionsStr})`);
@@ -598,6 +615,12 @@ ${fnBody}
     this.emit(`createEffect(() => setAttr(${elVar}, 'value', ${signalRef}()))`);
     this.emit(`addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`);
   }
+  // ---- u-html ---------------------------------------------------------------
+  genHtml(elVar, dir, scope) {
+    this.helpers.add("setHtml");
+    const expr = this.resolveExpression(dir.expression, scope);
+    this.emit(`setHtml(${elVar}, () => ${expr})`);
+  }
   // ---- u-transition ---------------------------------------------------------
   genTransition(elVar, dir) {
     this.helpers.add("createTransition");

package/dist/index.d.cts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -385,7 +385,7 @@ function classifyDirective(name, value) {
   return null;
 }
 function isDirectiveKind(s) {
-  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model" || s === "transition";
+  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model" || s === "html" || s === "transition";
 }
 var CodeGenerator = class {
   constructor(options) {
@@ -514,6 +514,9 @@ ${fnBody}
       case "model":
         this.genModel(elVar, dir, scope);
         break;
+      case "html":
+        this.genHtml(elVar, dir, scope);
+        break;
       case "transition":
         this.genTransition(elVar, dir);
         break;
@@ -527,6 +530,10 @@ ${fnBody}
     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));
+    const IS_HANDLER_REF = /^[\w$.]+$/;
+    const IS_ARROW_FN = /^\s*(?:\(.*?\)|[\w$]+)\s*=>/;
+    const hasExpression = handler !== "''";
+    const isInlineExpr = hasExpression && !IS_HANDLER_REF.test(handler) && !IS_ARROW_FN.test(handler);
     let handlerExpr = handler;
     if (handlerMods.length > 0) {
       const guards = [];
@@ -544,8 +551,18 @@ ${fnBody}
             break;
         }
       }
-      const body = [...guards, ...calls, `(${handler})(_e)`].join("; ");
-      handlerExpr = `(_e) => { ${body} }`;
+      if (!hasExpression) {
+        const body = [...guards, ...calls].join("; ");
+        handlerExpr = `(_e) => { ${body} }`;
+      } else if (isInlineExpr) {
+        const body = [...guards, ...calls, handler.replace(/\$event/g, "_e")].join("; ");
+        handlerExpr = `(_e) => { ${body} }`;
+      } else {
+        const body = [...guards, ...calls, `(${handler})(_e)`].join("; ");
+        handlerExpr = `(_e) => { ${body} }`;
+      }
+    } else if (isInlineExpr) {
+      handlerExpr = `(_e) => { ${handler.replace(/\$event/g, "_e")} }`;
     }
     const optionsStr = optionMods.length > 0 ? `, { ${optionMods.map((m) => `${m}: true`).join(", ")} }` : "";
     this.emit(`addEventListener(${elVar}, '${escapeStr(event)}', ${handlerExpr}${optionsStr})`);
@@ -565,6 +582,12 @@ ${fnBody}
     this.emit(`createEffect(() => setAttr(${elVar}, 'value', ${signalRef}()))`);
     this.emit(`addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`);
   }
+  // ---- u-html ---------------------------------------------------------------
+  genHtml(elVar, dir, scope) {
+    this.helpers.add("setHtml");
+    const expr = this.resolveExpression(dir.expression, scope);
+    this.emit(`setHtml(${elVar}, () => ${expr})`);
+  }
   // ---- u-transition ---------------------------------------------------------
   genTransition(elVar, dir) {
     this.helpers.add("createTransition");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-compiler",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Compiler for .utopia single-file components",
   "type": "module",
   "license": "MIT",
@@ -38,11 +38,11 @@
   "files": [
     "dist"
   ],
-  "dependencies": {
-    "@matthesketh/utopia-core": "0.7.0"
-  },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",
     "dev": "tsup src/index.ts --format esm,cjs --dts --watch"
+  },
+  "dependencies": {
+    "@matthesketh/utopia-core": "^0.7.x"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Matt Hesketh
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.