@matthesketh/utopia-compiler 0.2.0 → 0.3.1

package/dist/index.cjs

@@ -245,7 +245,7 @@ var TemplateParser = class {
       if (this.lookingAt("{{")) {
         flush();
         this.pos += 2;
-        const endIdx = this.source.indexOf("}}", this.pos);
+        const endIdx = this.findInterpolationEnd(this.pos);
         if (endIdx === -1) throw this.error("Unterminated interpolation {{ }}");
         const expression = this.source.slice(this.pos, endIdx).trim();
         nodes.push({ type: 3 /* Interpolation */, expression });
@@ -257,6 +257,39 @@ var TemplateParser = class {
     flush();
     return nodes;
   }
+  // ---- Interpolation end finder -------------------------------------------
+  /**
+   * Find the position of the closing `}}` for an interpolation expression,
+   * respecting JavaScript string literals so that `}}` inside quotes is not
+   * treated as the end delimiter.
+   *
+   * Handles single-quoted, double-quoted, and template literal strings,
+   * including escaped characters within them.
+   */
+  findInterpolationEnd(start) {
+    let pos = start;
+    let inSingle = false;
+    let inDouble = false;
+    let inBacktick = false;
+    while (pos < this.source.length - 1) {
+      const ch = this.source[pos];
+      if ((inSingle || inDouble || inBacktick) && ch === "\\") {
+        pos += 2;
+        continue;
+      }
+      if (!inDouble && !inBacktick && ch === "'") {
+        inSingle = !inSingle;
+      } else if (!inSingle && !inBacktick && ch === '"') {
+        inDouble = !inDouble;
+      } else if (!inSingle && !inDouble && ch === "`") {
+        inBacktick = !inBacktick;
+      } else if (!inSingle && !inDouble && !inBacktick && ch === "}" && this.source[pos + 1] === "}") {
+        return pos;
+      }
+      pos++;
+    }
+    return -1;
+  }
   // ---- Low-level helpers --------------------------------------------------
   readTagName() {
     const start = this.pos;
@@ -412,7 +445,7 @@ var CodeGenerator = class {
 
 ` : "";
     const fnBody = this.code.map((l) => `  ${l}`).join("\n");
-    const moduleCode = `${importLine}function __render() {
+    const moduleCode = `${importLine}function __render(_ctx) {
 ${fnBody}
 }
 `;
@@ -441,6 +474,9 @@ ${fnBody}
     if (forDir) {
       return this.genFor(node, forDir, scope);
     }
+    if (node.tag === "slot") {
+      return this.genSlot(node);
+    }
     if (isComponentTag(node.tag)) {
       return this.genComponent(node, scope);
     }
@@ -678,6 +714,30 @@ ${fnBody}
       this.emit(line);
     }
   }
+  // ---- Slot rendering -----------------------------------------------------
+  /**
+   * Generate code for a `<slot />` element.
+   *
+   * Named slots use `<slot name="foo" />`, defaulting to "default".
+   * The generated code reads from `_ctx.$slots[name]()` if available,
+   * otherwise renders a comment placeholder.
+   */
+  genSlot(node) {
+    const nameAttr = node.attrs.find((a) => a.name === "name");
+    const slotName = nameAttr?.value ?? "default";
+    const slotVar = this.freshVar();
+    this.helpers.add("createComment");
+    if (slotName === "default") {
+      this.emit(
+        `const ${slotVar} = _ctx && _ctx.$slots && _ctx.$slots['default'] ? _ctx.$slots['default']() : (_ctx && _ctx.children instanceof Node ? _ctx.children : createComment('slot'))`
+      );
+    } else {
+      this.emit(
+        `const ${slotVar} = _ctx && _ctx.$slots && _ctx.$slots['${escapeStr(slotName)}'] ? _ctx.$slots['${escapeStr(slotName)}']() : createComment('slot')`
+      );
+    }
+    return slotVar;
+  }
   // ---- Component generation -----------------------------------------------
   genComponent(node, scope) {
     const compVar = this.freshVar();
@@ -696,7 +756,42 @@ ${fnBody}
     }
     const propsStr = propEntries.length > 0 ? `{ ${propEntries.join(", ")} }` : "{}";
     this.helpers.add("createComponent");
-    this.emit(`const ${compVar} = createComponent(${node.tag}, ${propsStr})`);
+    const substantiveChildren = node.children.filter(
+      (c) => c.type === 1 /* Element */ || c.type === 3 /* Interpolation */ || c.type === 2 /* Text */ && c.content.trim() !== ""
+    );
+    if (substantiveChildren.length > 0) {
+      const slotFnVar = this.freshVar();
+      const savedCode = this.code;
+      this.code = [];
+      if (substantiveChildren.length === 1 && substantiveChildren[0].type === 1 /* Element */) {
+        const innerVar = this.genNode(substantiveChildren[0], scope);
+        this.emit(`return ${innerVar}`);
+      } else {
+        this.helpers.add("createElement");
+        this.helpers.add("appendChild");
+        const fragVar = this.freshVar();
+        this.emit(`const ${fragVar} = createElement('div')`);
+        for (const child of node.children) {
+          const childVar = this.genNode(child, scope);
+          if (childVar) {
+            this.emit(`appendChild(${fragVar}, ${childVar})`);
+          }
+        }
+        this.emit(`return ${fragVar}`);
+      }
+      const slotLines = [...this.code];
+      this.code = savedCode;
+      this.emit(`const ${slotFnVar} = () => {`);
+      for (const line of slotLines) {
+        this.emit(`  ${line}`);
+      }
+      this.emit(`}`);
+      this.emit(
+        `const ${compVar} = createComponent(${node.tag}, ${propsStr}, { default: ${slotFnVar} })`
+      );
+    } else {
+      this.emit(`const ${compVar} = createComponent(${node.tag}, ${propsStr})`);
+    }
     return compVar;
   }
   // ---- Expression resolution ----------------------------------------------

package/dist/index.js

@@ -213,7 +213,7 @@ var TemplateParser = class {
       if (this.lookingAt("{{")) {
         flush();
         this.pos += 2;
-        const endIdx = this.source.indexOf("}}", this.pos);
+        const endIdx = this.findInterpolationEnd(this.pos);
         if (endIdx === -1) throw this.error("Unterminated interpolation {{ }}");
         const expression = this.source.slice(this.pos, endIdx).trim();
         nodes.push({ type: 3 /* Interpolation */, expression });
@@ -225,6 +225,39 @@ var TemplateParser = class {
     flush();
     return nodes;
   }
+  // ---- Interpolation end finder -------------------------------------------
+  /**
+   * Find the position of the closing `}}` for an interpolation expression,
+   * respecting JavaScript string literals so that `}}` inside quotes is not
+   * treated as the end delimiter.
+   *
+   * Handles single-quoted, double-quoted, and template literal strings,
+   * including escaped characters within them.
+   */
+  findInterpolationEnd(start) {
+    let pos = start;
+    let inSingle = false;
+    let inDouble = false;
+    let inBacktick = false;
+    while (pos < this.source.length - 1) {
+      const ch = this.source[pos];
+      if ((inSingle || inDouble || inBacktick) && ch === "\\") {
+        pos += 2;
+        continue;
+      }
+      if (!inDouble && !inBacktick && ch === "'") {
+        inSingle = !inSingle;
+      } else if (!inSingle && !inBacktick && ch === '"') {
+        inDouble = !inDouble;
+      } else if (!inSingle && !inDouble && ch === "`") {
+        inBacktick = !inBacktick;
+      } else if (!inSingle && !inDouble && !inBacktick && ch === "}" && this.source[pos + 1] === "}") {
+        return pos;
+      }
+      pos++;
+    }
+    return -1;
+  }
   // ---- Low-level helpers --------------------------------------------------
   readTagName() {
     const start = this.pos;
@@ -380,7 +413,7 @@ var CodeGenerator = class {
 
 ` : "";
     const fnBody = this.code.map((l) => `  ${l}`).join("\n");
-    const moduleCode = `${importLine}function __render() {
+    const moduleCode = `${importLine}function __render(_ctx) {
 ${fnBody}
 }
 `;
@@ -409,6 +442,9 @@ ${fnBody}
     if (forDir) {
       return this.genFor(node, forDir, scope);
     }
+    if (node.tag === "slot") {
+      return this.genSlot(node);
+    }
     if (isComponentTag(node.tag)) {
       return this.genComponent(node, scope);
     }
@@ -646,6 +682,30 @@ ${fnBody}
       this.emit(line);
     }
   }
+  // ---- Slot rendering -----------------------------------------------------
+  /**
+   * Generate code for a `<slot />` element.
+   *
+   * Named slots use `<slot name="foo" />`, defaulting to "default".
+   * The generated code reads from `_ctx.$slots[name]()` if available,
+   * otherwise renders a comment placeholder.
+   */
+  genSlot(node) {
+    const nameAttr = node.attrs.find((a) => a.name === "name");
+    const slotName = nameAttr?.value ?? "default";
+    const slotVar = this.freshVar();
+    this.helpers.add("createComment");
+    if (slotName === "default") {
+      this.emit(
+        `const ${slotVar} = _ctx && _ctx.$slots && _ctx.$slots['default'] ? _ctx.$slots['default']() : (_ctx && _ctx.children instanceof Node ? _ctx.children : createComment('slot'))`
+      );
+    } else {
+      this.emit(
+        `const ${slotVar} = _ctx && _ctx.$slots && _ctx.$slots['${escapeStr(slotName)}'] ? _ctx.$slots['${escapeStr(slotName)}']() : createComment('slot')`
+      );
+    }
+    return slotVar;
+  }
   // ---- Component generation -----------------------------------------------
   genComponent(node, scope) {
     const compVar = this.freshVar();
@@ -664,7 +724,42 @@ ${fnBody}
     }
     const propsStr = propEntries.length > 0 ? `{ ${propEntries.join(", ")} }` : "{}";
     this.helpers.add("createComponent");
-    this.emit(`const ${compVar} = createComponent(${node.tag}, ${propsStr})`);
+    const substantiveChildren = node.children.filter(
+      (c) => c.type === 1 /* Element */ || c.type === 3 /* Interpolation */ || c.type === 2 /* Text */ && c.content.trim() !== ""
+    );
+    if (substantiveChildren.length > 0) {
+      const slotFnVar = this.freshVar();
+      const savedCode = this.code;
+      this.code = [];
+      if (substantiveChildren.length === 1 && substantiveChildren[0].type === 1 /* Element */) {
+        const innerVar = this.genNode(substantiveChildren[0], scope);
+        this.emit(`return ${innerVar}`);
+      } else {
+        this.helpers.add("createElement");
+        this.helpers.add("appendChild");
+        const fragVar = this.freshVar();
+        this.emit(`const ${fragVar} = createElement('div')`);
+        for (const child of node.children) {
+          const childVar = this.genNode(child, scope);
+          if (childVar) {
+            this.emit(`appendChild(${fragVar}, ${childVar})`);
+          }
+        }
+        this.emit(`return ${fragVar}`);
+      }
+      const slotLines = [...this.code];
+      this.code = savedCode;
+      this.emit(`const ${slotFnVar} = () => {`);
+      for (const line of slotLines) {
+        this.emit(`  ${line}`);
+      }
+      this.emit(`}`);
+      this.emit(
+        `const ${compVar} = createComponent(${node.tag}, ${propsStr}, { default: ${slotFnVar} })`
+      );
+    } else {
+      this.emit(`const ${compVar} = createComponent(${node.tag}, ${propsStr})`);
+    }
     return compVar;
   }
   // ---- Expression resolution ----------------------------------------------

package/package.json

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