@matthesketh/utopia-compiler 0.0.1 → 0.0.3

package/dist/index.cjs

@@ -415,7 +415,7 @@ var CodeGenerator = class {
 
 ` : "";
     const fnBody = this.code.map((l) => `  ${l}`).join("\n");
-    const moduleCode = `${importLine}export default function render(_ctx) {
+    const moduleCode = `${importLine}function __render() {
 ${fnBody}
 }
 `;
@@ -480,7 +480,8 @@ ${fnBody}
     if (!node.content) return null;
     this.helpers.add("createTextNode");
     const v = this.freshVar();
-    this.emit(`const ${v} = createTextNode(${JSON.stringify(node.content)})`);
+    const decoded = decodeEntities(node.content);
+    this.emit(`const ${v} = createTextNode(${JSON.stringify(decoded)})`);
     return v;
   }
   genInterpolation(node, scope) {
@@ -562,12 +563,13 @@ ${fnBody}
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
     this.emit(`const ${anchorVar} = createComment('u-for')`);
-    const forMatch = dir.expression.match(/^\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}"`);
     }
-    const itemName = forMatch[1];
-    const listExpr = this.resolveExpression(forMatch[2].trim(), scope);
+    const itemName = forMatch[1] ?? forMatch[3];
+    const indexName = forMatch[2] ?? "_index";
+    const listExpr = this.resolveExpression(forMatch[4].trim(), scope);
     const innerScope = new Set(scope);
     innerScope.add(itemName);
     const strippedNode = {
@@ -580,7 +582,7 @@ ${fnBody}
     const innerLines = [...this.code];
     this.code = savedCode;
     const renderFnVar = this.freshVar();
-    this.emit(`const ${renderFnVar} = (${itemName}, _index) => {`);
+    this.emit(`const ${renderFnVar} = (${itemName}, ${indexName}) => {`);
     for (const line of innerLines) {
       this.emit(`  ${line}`);
     }
@@ -606,32 +608,21 @@ ${fnBody}
       }
     }
     const propsStr = propEntries.length > 0 ? `{ ${propEntries.join(", ")} }` : "{}";
-    this.emit(`const ${compVar} = _ctx.${node.tag}(${propsStr})`);
+    this.helpers.add("createComponent");
+    this.emit(`const ${compVar} = createComponent(${node.tag}, ${propsStr})`);
     return compVar;
   }
   // ---- Expression resolution ----------------------------------------------
   /**
    * Resolve a template expression to a JS expression.
    *
-   * If the leading identifier is in `scope` (a u-for item variable), it is
-   * emitted as a bare variable reference.  Otherwise it is prefixed with
-   * `_ctx.` to access the component context.
+   * All identifiers are emitted as bare references — user script variables
+   * live at module scope and are accessible via closure.
    */
-  resolveExpression(expr, scope) {
+  resolveExpression(expr, _scope) {
     const trimmed = expr.trim();
     if (!trimmed) return "''";
-    const leadIdMatch = trimmed.match(/^([a-zA-Z_$][\w$]*)/);
-    if (!leadIdMatch) {
-      return trimmed;
-    }
-    const leadId = leadIdMatch[1];
-    if (scope.has(leadId)) {
-      return trimmed;
-    }
-    if (trimmed.includes("=>")) {
-      return trimmed;
-    }
-    return `_ctx.${trimmed}`;
+    return trimmed;
   }
   // ---- Utilities ----------------------------------------------------------
   freshVar() {
@@ -647,6 +638,40 @@ function isComponentTag(tag) {
 function escapeStr(s) {
   return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
 }
+var ENTITY_MAP = {
+  "&": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'",
+  "&apos;": "'",
+  "&nbsp;": "\xA0",
+  "&mdash;": "\u2014",
+  "&ndash;": "\u2013",
+  "&lsquo;": "\u2018",
+  "&rsquo;": "\u2019",
+  "&ldquo;": "\u201C",
+  "&rdquo;": "\u201D",
+  "&bull;": "\u2022",
+  "&hellip;": "\u2026",
+  "&copy;": "\xA9",
+  "&reg;": "\xAE",
+  "&trade;": "\u2122",
+  "&rarr;": "\u2192",
+  "&larr;": "\u2190",
+  "&uarr;": "\u2191",
+  "&darr;": "\u2193",
+  "&times;": "\xD7",
+  "&divide;": "\xF7"
+};
+function decodeEntities(text) {
+  return text.replace(/&(?:#(\d+)|#x([0-9a-fA-F]+)|(\w+));/g, (match, dec, hex, named) => {
+    if (dec) return String.fromCodePoint(parseInt(dec, 10));
+    if (hex) return String.fromCodePoint(parseInt(hex, 16));
+    if (named) return ENTITY_MAP[`&${named};`] ?? match;
+    return match;
+  });
+}
 function generate(ast, options) {
   const gen = new CodeGenerator(options);
   return gen.generate(ast);
@@ -810,6 +835,7 @@ function compile(source, options = {}) {
   if (body) {
     parts.push(body);
   }
+  parts.push("export default { render: __render }");
   const code = parts.join("\n\n") + "\n";
   return { code, css };
 }

package/dist/index.js

@@ -383,7 +383,7 @@ var CodeGenerator = class {
 
 ` : "";
     const fnBody = this.code.map((l) => `  ${l}`).join("\n");
-    const moduleCode = `${importLine}export default function render(_ctx) {
+    const moduleCode = `${importLine}function __render() {
 ${fnBody}
 }
 `;
@@ -448,7 +448,8 @@ ${fnBody}
     if (!node.content) return null;
     this.helpers.add("createTextNode");
     const v = this.freshVar();
-    this.emit(`const ${v} = createTextNode(${JSON.stringify(node.content)})`);
+    const decoded = decodeEntities(node.content);
+    this.emit(`const ${v} = createTextNode(${JSON.stringify(decoded)})`);
     return v;
   }
   genInterpolation(node, scope) {
@@ -530,12 +531,13 @@ ${fnBody}
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
     this.emit(`const ${anchorVar} = createComment('u-for')`);
-    const forMatch = dir.expression.match(/^\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}"`);
     }
-    const itemName = forMatch[1];
-    const listExpr = this.resolveExpression(forMatch[2].trim(), scope);
+    const itemName = forMatch[1] ?? forMatch[3];
+    const indexName = forMatch[2] ?? "_index";
+    const listExpr = this.resolveExpression(forMatch[4].trim(), scope);
     const innerScope = new Set(scope);
     innerScope.add(itemName);
     const strippedNode = {
@@ -548,7 +550,7 @@ ${fnBody}
     const innerLines = [...this.code];
     this.code = savedCode;
     const renderFnVar = this.freshVar();
-    this.emit(`const ${renderFnVar} = (${itemName}, _index) => {`);
+    this.emit(`const ${renderFnVar} = (${itemName}, ${indexName}) => {`);
     for (const line of innerLines) {
       this.emit(`  ${line}`);
     }
@@ -574,32 +576,21 @@ ${fnBody}
       }
     }
     const propsStr = propEntries.length > 0 ? `{ ${propEntries.join(", ")} }` : "{}";
-    this.emit(`const ${compVar} = _ctx.${node.tag}(${propsStr})`);
+    this.helpers.add("createComponent");
+    this.emit(`const ${compVar} = createComponent(${node.tag}, ${propsStr})`);
     return compVar;
   }
   // ---- Expression resolution ----------------------------------------------
   /**
    * Resolve a template expression to a JS expression.
    *
-   * If the leading identifier is in `scope` (a u-for item variable), it is
-   * emitted as a bare variable reference.  Otherwise it is prefixed with
-   * `_ctx.` to access the component context.
+   * All identifiers are emitted as bare references — user script variables
+   * live at module scope and are accessible via closure.
    */
-  resolveExpression(expr, scope) {
+  resolveExpression(expr, _scope) {
     const trimmed = expr.trim();
     if (!trimmed) return "''";
-    const leadIdMatch = trimmed.match(/^([a-zA-Z_$][\w$]*)/);
-    if (!leadIdMatch) {
-      return trimmed;
-    }
-    const leadId = leadIdMatch[1];
-    if (scope.has(leadId)) {
-      return trimmed;
-    }
-    if (trimmed.includes("=>")) {
-      return trimmed;
-    }
-    return `_ctx.${trimmed}`;
+    return trimmed;
   }
   // ---- Utilities ----------------------------------------------------------
   freshVar() {
@@ -615,6 +606,40 @@ function isComponentTag(tag) {
 function escapeStr(s) {
   return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
 }
+var ENTITY_MAP = {
+  "&": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'",
+  "&apos;": "'",
+  "&nbsp;": "\xA0",
+  "&mdash;": "\u2014",
+  "&ndash;": "\u2013",
+  "&lsquo;": "\u2018",
+  "&rsquo;": "\u2019",
+  "&ldquo;": "\u201C",
+  "&rdquo;": "\u201D",
+  "&bull;": "\u2022",
+  "&hellip;": "\u2026",
+  "&copy;": "\xA9",
+  "&reg;": "\xAE",
+  "&trade;": "\u2122",
+  "&rarr;": "\u2192",
+  "&larr;": "\u2190",
+  "&uarr;": "\u2191",
+  "&darr;": "\u2193",
+  "&times;": "\xD7",
+  "&divide;": "\xF7"
+};
+function decodeEntities(text) {
+  return text.replace(/&(?:#(\d+)|#x([0-9a-fA-F]+)|(\w+));/g, (match, dec, hex, named) => {
+    if (dec) return String.fromCodePoint(parseInt(dec, 10));
+    if (hex) return String.fromCodePoint(parseInt(hex, 16));
+    if (named) return ENTITY_MAP[`&${named};`] ?? match;
+    return match;
+  });
+}
 function generate(ast, options) {
   const gen = new CodeGenerator(options);
   return gen.generate(ast);
@@ -778,6 +803,7 @@ function compile(source, options = {}) {
   if (body) {
     parts.push(body);
   }
+  parts.push("export default { render: __render }");
   const code = parts.join("\n\n") + "\n";
   return { code, css };
 }

package/package.json

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