@matthesketh/utopia-compiler 0.0.4 → 0.1.0

package/dist/index.cjs

@@ -381,6 +381,7 @@ var CodeGenerator = class {
   varCounter = 0;
   helpers = /* @__PURE__ */ new Set();
   scopeId;
+  deferredCallsStack = [];
   generate(ast) {
     const scope = /* @__PURE__ */ new Set();
     const rootElements = ast.filter(
@@ -399,7 +400,7 @@ var CodeGenerator = class {
       this.emit(`const ${fragVar} = createElement('div')`);
       if (this.scopeId) {
         this.helpers.add("setAttr");
-        this.emit(`setAttr(${fragVar}, '${this.scopeId}', '')`);
+        this.emit(`setAttr(${fragVar}, '${escapeStr(this.scopeId)}', '')`);
       }
       for (const node of ast) {
         const childVar = this.genNode(node, scope);
@@ -452,7 +453,7 @@ ${fnBody}
     this.emit(`const ${elVar} = createElement('${node.tag}')`);
     if (this.scopeId) {
       this.helpers.add("setAttr");
-      this.emit(`setAttr(${elVar}, '${this.scopeId}', '')`);
+      this.emit(`setAttr(${elVar}, '${escapeStr(this.scopeId)}', '')`);
     }
     for (const attr of node.attrs) {
       this.helpers.add("setAttr");
@@ -466,6 +467,7 @@ ${fnBody}
       if (dir.kind === "if" || 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) {
@@ -473,6 +475,10 @@ ${fnBody}
         this.emit(`appendChild(${elVar}, ${childVar})`);
       }
     }
+    const deferred = this.deferredCallsStack.pop();
+    for (const line of deferred) {
+      this.emit(line);
+    }
     return elVar;
   }
   // ---- Text & Interpolation -----------------------------------------------
@@ -554,7 +560,7 @@ ${fnBody}
     }
     this.emit(`  return ${innerVar}`);
     this.emit(`}`);
-    this.emit(`createIf(${anchorVar}, () => Boolean(${condition}), ${trueFnVar})`);
+    this.emitOrDefer(`createIf(${anchorVar}, () => Boolean(${condition}), ${trueFnVar})`);
     return anchorVar;
   }
   // ---- Structural: u-for --------------------------------------------------
@@ -588,7 +594,7 @@ ${fnBody}
     }
     this.emit(`  return ${innerVar}`);
     this.emit(`}`);
-    this.emit(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar})`);
+    this.emitOrDefer(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar})`);
     return anchorVar;
   }
   // ---- Component generation -----------------------------------------------
@@ -597,14 +603,14 @@ ${fnBody}
     const propEntries = [];
     for (const a of node.attrs) {
       if (a.value !== null) {
-        propEntries.push(`${a.name}: '${escapeStr(a.value)}'`);
+        propEntries.push(`'${escapeStr(a.name)}': '${escapeStr(a.value)}'`);
       } else {
-        propEntries.push(`${a.name}: true`);
+        propEntries.push(`'${escapeStr(a.name)}': true`);
       }
     }
     for (const d of node.directives) {
       if (d.kind === "bind" && d.arg) {
-        propEntries.push(`${d.arg}: ${this.resolveExpression(d.expression, scope)}`);
+        propEntries.push(`'${escapeStr(d.arg)}': ${this.resolveExpression(d.expression, scope)}`);
       }
     }
     const propsStr = propEntries.length > 0 ? `{ ${propEntries.join(", ")} }` : "{}";
@@ -631,9 +637,17 @@ ${fnBody}
   emit(line) {
     this.code.push(line);
   }
+  emitOrDefer(line) {
+    const stack = this.deferredCallsStack;
+    if (stack.length > 0) {
+      stack[stack.length - 1].push(line);
+    } else {
+      this.emit(line);
+    }
+  }
 };
 function isComponentTag(tag) {
-  return /^[A-Z]/.test(tag);
+  return /^[A-Z][a-zA-Z0-9_$]*$/.test(tag);
 }
 function escapeStr(s) {
   return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
@@ -666,8 +680,28 @@ var ENTITY_MAP = {
 };
 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 (dec) {
+      const code = parseInt(dec, 10);
+      if (code >= 0 && code <= 1114111) {
+        try {
+          return String.fromCodePoint(code);
+        } catch {
+          return match;
+        }
+      }
+      return match;
+    }
+    if (hex) {
+      const code = parseInt(hex, 16);
+      if (code >= 0 && code <= 1114111) {
+        try {
+          return String.fromCodePoint(code);
+        } catch {
+          return match;
+        }
+      }
+      return match;
+    }
     if (named) return ENTITY_MAP[`&${named};`] ?? match;
     return match;
   });

package/dist/index.js

@@ -349,6 +349,7 @@ var CodeGenerator = class {
   varCounter = 0;
   helpers = /* @__PURE__ */ new Set();
   scopeId;
+  deferredCallsStack = [];
   generate(ast) {
     const scope = /* @__PURE__ */ new Set();
     const rootElements = ast.filter(
@@ -367,7 +368,7 @@ var CodeGenerator = class {
       this.emit(`const ${fragVar} = createElement('div')`);
       if (this.scopeId) {
         this.helpers.add("setAttr");
-        this.emit(`setAttr(${fragVar}, '${this.scopeId}', '')`);
+        this.emit(`setAttr(${fragVar}, '${escapeStr(this.scopeId)}', '')`);
       }
       for (const node of ast) {
         const childVar = this.genNode(node, scope);
@@ -420,7 +421,7 @@ ${fnBody}
     this.emit(`const ${elVar} = createElement('${node.tag}')`);
     if (this.scopeId) {
       this.helpers.add("setAttr");
-      this.emit(`setAttr(${elVar}, '${this.scopeId}', '')`);
+      this.emit(`setAttr(${elVar}, '${escapeStr(this.scopeId)}', '')`);
     }
     for (const attr of node.attrs) {
       this.helpers.add("setAttr");
@@ -434,6 +435,7 @@ ${fnBody}
       if (dir.kind === "if" || 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) {
@@ -441,6 +443,10 @@ ${fnBody}
         this.emit(`appendChild(${elVar}, ${childVar})`);
       }
     }
+    const deferred = this.deferredCallsStack.pop();
+    for (const line of deferred) {
+      this.emit(line);
+    }
     return elVar;
   }
   // ---- Text & Interpolation -----------------------------------------------
@@ -522,7 +528,7 @@ ${fnBody}
     }
     this.emit(`  return ${innerVar}`);
     this.emit(`}`);
-    this.emit(`createIf(${anchorVar}, () => Boolean(${condition}), ${trueFnVar})`);
+    this.emitOrDefer(`createIf(${anchorVar}, () => Boolean(${condition}), ${trueFnVar})`);
     return anchorVar;
   }
   // ---- Structural: u-for --------------------------------------------------
@@ -556,7 +562,7 @@ ${fnBody}
     }
     this.emit(`  return ${innerVar}`);
     this.emit(`}`);
-    this.emit(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar})`);
+    this.emitOrDefer(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar})`);
     return anchorVar;
   }
   // ---- Component generation -----------------------------------------------
@@ -565,14 +571,14 @@ ${fnBody}
     const propEntries = [];
     for (const a of node.attrs) {
       if (a.value !== null) {
-        propEntries.push(`${a.name}: '${escapeStr(a.value)}'`);
+        propEntries.push(`'${escapeStr(a.name)}': '${escapeStr(a.value)}'`);
       } else {
-        propEntries.push(`${a.name}: true`);
+        propEntries.push(`'${escapeStr(a.name)}': true`);
       }
     }
     for (const d of node.directives) {
       if (d.kind === "bind" && d.arg) {
-        propEntries.push(`${d.arg}: ${this.resolveExpression(d.expression, scope)}`);
+        propEntries.push(`'${escapeStr(d.arg)}': ${this.resolveExpression(d.expression, scope)}`);
       }
     }
     const propsStr = propEntries.length > 0 ? `{ ${propEntries.join(", ")} }` : "{}";
@@ -599,9 +605,17 @@ ${fnBody}
   emit(line) {
     this.code.push(line);
   }
+  emitOrDefer(line) {
+    const stack = this.deferredCallsStack;
+    if (stack.length > 0) {
+      stack[stack.length - 1].push(line);
+    } else {
+      this.emit(line);
+    }
+  }
 };
 function isComponentTag(tag) {
-  return /^[A-Z]/.test(tag);
+  return /^[A-Z][a-zA-Z0-9_$]*$/.test(tag);
 }
 function escapeStr(s) {
   return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
@@ -634,8 +648,28 @@ var ENTITY_MAP = {
 };
 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 (dec) {
+      const code = parseInt(dec, 10);
+      if (code >= 0 && code <= 1114111) {
+        try {
+          return String.fromCodePoint(code);
+        } catch {
+          return match;
+        }
+      }
+      return match;
+    }
+    if (hex) {
+      const code = parseInt(hex, 16);
+      if (code >= 0 && code <= 1114111) {
+        try {
+          return String.fromCodePoint(code);
+        } catch {
+          return match;
+        }
+      }
+      return match;
+    }
     if (named) return ENTITY_MAP[`&${named};`] ?? match;
     return match;
   });

package/package.json

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