htm-transform 0.1.2 → 0.1.3

package/index.js

@@ -328,8 +328,37 @@ function resolvePlaceholders(nodes, placeholders) {
         if (key.startsWith("__EXPR_")) {
           // Handle spread props (key is the placeholder)
           newProps["...spread"] = { type: "expression", expr: placeholderMap.get(key) };
-        } else if (typeof value === "string" && value.startsWith("__EXPR_")) {
+        } else if (typeof value === "string" && placeholderMap.has(value)) {
+          // Single placeholder value
           newProps[key] = { type: "expression", expr: placeholderMap.get(value) };
+        } else if (typeof value === "string" && value.includes("__EXPR_")) {
+          // Template string with placeholders - create TemplateLiteral
+          const parts = value.split(/(__EXPR_\d+__)/);
+          const quasis = [];
+          const expressions = [];
+
+          for (let i = 0; i < parts.length; i++) {
+            if (i % 2 === 0) {
+              // Static string part
+              quasis.push({
+                type: "TemplateElement",
+                value: { raw: parts[i], cooked: parts[i] },
+                tail: i === parts.length - 1,
+              });
+            } else {
+              // Expression placeholder
+              expressions.push(placeholderMap.get(parts[i]));
+            }
+          }
+
+          newProps[key] = {
+            type: "expression",
+            expr: {
+              type: "TemplateLiteral",
+              quasis,
+              expressions,
+            },
+          };
         } else {
           newProps[key] = value;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "htm-transform",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Transform htm tagged templates into h function calls using acorn",
   "type": "module",
   "main": "index.js",

package/test.js

@@ -380,4 +380,14 @@ const result = myH("div", null, "Test");`;
 
     assert.strictEqual(normalize(output), normalize(expected));
   });
+
+  test("handles template literals in attribute values", () => {
+    const input = `const result = html\`<div class="\${css.foo} \${css.bar}">Test</div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", {
+  class: \`\${css.foo} \${css.bar}\`
+}, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
 });