@matthesketh/utopia-compiler 0.0.5 → 0.1.0

package/dist/index.cjs

@@ -400,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);
@@ -453,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");
@@ -603,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(", ")} }` : "{}";
@@ -647,7 +647,7 @@ ${fnBody}
   }
 };
 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, "\\'");
@@ -680,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

@@ -368,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);
@@ -421,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");
@@ -571,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(", ")} }` : "{}";
@@ -615,7 +615,7 @@ ${fnBody}
   }
 };
 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, "\\'");
@@ -648,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.5",
+  "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.5"
+    "@matthesketh/utopia-core": "0.1.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",