htm-transform 0.1.5 → 0.1.7

package/index.js

@@ -60,20 +60,71 @@ export default function transform(code, options = {}) {
 
   let hasTransformation = false;
 
+  /**
+   * Recursively sets location information on all nodes in an AST subtree
+   * @param {any} node - The AST node to process
+   * @param {number} start - The start position
+   * @param {number} end - The end position
+   * @param {any} loc - The loc object with line/column info
+   */
+  function setLocationRecursive(node, start, end, loc) {
+    if (!node || typeof node !== "object" || !node.type) return;
+
+    node.start = start;
+    node.end = end;
+    if (loc) {
+      node.loc = loc;
+    }
+
+    // Recursively set location for all child nodes
+    for (const key in node) {
+      const value = node[key];
+      if (Array.isArray(value)) {
+        for (const child of value) {
+          if (child && typeof child === "object" && child.type) {
+            setLocationRecursive(child, start, end, loc);
+          }
+        }
+      } else if (value && typeof value === "object" && value.type) {
+        setLocationRecursive(value, start, end, loc);
+      }
+    }
+  }
+
   const traveler = makeTraveler({
+    PropertyDefinition(node, state) {
+      // Skip private fields with null values (astravel can't handle them)
+      if (node.value === null) {
+        return;
+      }
+      this.super.PropertyDefinition.call(this, node, state);
+    },
     TaggedTemplateExpression(node, state) {
       if (node.tag.type === "Identifier" && node.tag.name === tagName) {
         hasTransformation = true;
         const transformed = transformTaggedTemplate(node, pragma);
 
+        // Preserve original location information
+        const originalStart = node.start;
+        const originalEnd = node.end;
+        const originalLoc = node.loc;
+
+        // Set location info recursively on transformed tree
+        setLocationRecursive(transformed, originalStart, originalEnd, originalLoc);
+
         // Replace the node with the transformed version
         const mutableNode = /** @type {Record<string, unknown>} */ (/** @type {unknown} */ (node));
         for (const key in mutableNode) {
           delete mutableNode[key];
         }
         Object.assign(node, transformed);
-        // Continue traversing into the transformed node to handle nested templates
-        this.go(node, state);
+
+        // Manually traverse child nodes for nested html templates
+        // We use the default traversal for the new node type
+        const newNodeType = transformed.type;
+        if (this.super[newNodeType]) {
+          this.super[newNodeType].call(this, node, state);
+        }
         return;
       }
       // Continue traversal for non-matching nodes
@@ -89,8 +140,28 @@ export default function transform(code, options = {}) {
   }
 
   // Attach comments to AST nodes
+  // Workaround: attachComments can't handle private fields with null values
+  // Temporarily mark them so we can restore them after
   if (comments.length > 0) {
+    const nullFields = [];
+    const markNullFields = makeTraveler({
+      PropertyDefinition(node) {
+        if (node.value === null) {
+          nullFields.push(node);
+          // Create a placeholder literal so astravel can traverse it
+          node.value = /** @type {any} */ ({ type: 'Literal', value: null, start: node.start, end: node.end, loc: node.loc });
+        }
+        this.super.PropertyDefinition.call(this, node);
+      },
+    });
+    markNullFields.go(ast);
+
     attachComments(ast, comments);
+
+    // Restore null values
+    for (const node of nullFields) {
+      node.value = null;
+    }
   }
 
   return generate(ast, { comments: true });
@@ -300,6 +371,15 @@ function tokenize(template) {
   while (i < template.length) {
     // Check for tag
     if (template[i] === "<") {
+      // Check for empty closing tag <//>
+      if (template.slice(i, i + 4) === "<//>") {
+        /** @type {Token} */
+        const closeToken = { type: "closeTag", tag: "" };
+        tokens.push(closeToken);
+        i += 4;
+        continue;
+      }
+
       const tagMatch = template.slice(i).match(/^<(\/?)([a-zA-Z0-9_${}]+)([^>]*?)(\/?)>/);
 
       if (tagMatch) {

package/package.json

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

package/test.js

@@ -403,3 +403,97 @@ const y = 42;`;
 
   assert.strictEqual(normalize(output), normalize(expected));
 });
+
+test("handles nested html in logical OR expression", () => {
+  const input = `const result = html\`<div>\${name || html\`<span>Default</span>\`}</div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", null, name || h("span", null, "Default"));`;
+
+  assert.strictEqual(normalize(output), normalize(expected));
+});
+
+test("handles empty closing tag shorthand", () => {
+  const input = `const result = html\`<\${Button}>Click<//>\`;`;
+  const output = transform(input);
+  const expected = `const result = h(Button, null, "Click");`;
+
+  assert.strictEqual(normalize(output), normalize(expected));
+});
+
+test("preserves location info when html template is in array with inline comment", () => {
+  const input = `const arr = [{ foo: html\`<span class=\${"hello"}>bar</span>\` }];
+arr.push({
+  foo: "bar", // inline comment
+});
+`;
+  const output = transform(input);
+  const expected = `const arr = [{
+  foo: h("span", {
+    class: "hello"
+  }, "bar")
+}];
+arr.push({
+  // inline comment
+  foo: "bar"
+});`;
+
+  assert.strictEqual(normalize(output), normalize(expected));
+});
+
+test("handles private class fields with html templates", () => {
+  const input = `class Alert {
+  #timeout;
+
+  render() {
+    return html\`<div>Test</div>\`;
+  }
+}`;
+  const output = transform(input);
+  const expected = `class Alert {
+  #timeout;
+
+  render() {
+    return h("div", null, "Test");
+  }
+}`;
+
+  assert.strictEqual(normalize(output), normalize(expected));
+});
+
+test("transforms html template in private field initializer", () => {
+  const input = `class Foo {
+  #element = html\`<div>Test</div>\`;
+}`;
+  const output = transform(input);
+  const expected = `class Foo {
+  #element = h("div", null, "Test");
+}`;
+
+  assert.strictEqual(normalize(output), normalize(expected));
+});
+
+test("handles multiple private fields with JSDoc comments", () => {
+  const input = `class Foo {
+  /** @type {string | undefined} */
+  #timeout;
+  /** @type {number | undefined} */
+  #count;
+
+  render() {
+    return html\`<div>Test</div>\`;
+  }
+}`;
+
+  const output = transform(input);
+  const expected = `class Foo {
+  /** @type {string | undefined}*/
+  #timeout;
+  /** @type {number | undefined}*/
+  #count;
+  render() {
+    return h("div", null, "Test");
+  }
+}`;
+
+  assert.strictEqual(normalize(output), normalize(expected));
+});