@matthesketh/utopia-compiler 0.0.1 → 0.0.2

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}
 }
 `;
@@ -562,12 +562,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 +581,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 +607,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() {
@@ -810,6 +800,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}
 }
 `;
@@ -530,12 +530,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 +549,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 +575,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() {
@@ -778,6 +768,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.2",
   "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.2"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",