htm-transform 0.1.4 → 0.1.6

package/HostCard.js

@@ -0,0 +1,283 @@
+import { Component, createRef } from "preact";
+/** @import { RefObject } from "preact"; */
+
+import html from "~/util/preact/html.js";
+
+/** @import Core from "~/app/lib/core/core.js" */
+/** @import { Host } from "~/lib/types.js"; */
+
+import Button from "~/component/Button.js";
+import Icon from "~/component/Icon.js";
+
+import { signal } from "@preact/signals";
+import { ApiError, deleteMachine } from "~/lib/preact/api.js";
+import { alert } from "~/util/preact/alert.js";
+import { persist } from "~/util/preact/persist.js";
+import { PromiseSignal } from "~/util/preact/promise.js";
+import Dropdown from "~/component/Dropdown.js";
+/** @import { DropdownItem } from "~/component/Dropdown.js"; */
+import Modal from "~/component/Modal.js";
+import HelpModal, { promptOnConnection } from "~/app/component/HelpModal.js";
+import Tooltip from "~/component/Tooltip.js";
+/** @import { TriggerProps } from "~/component/Tooltip.js" */
+
+import button from "~/style/button.js";
+import util from "~/style/util.js";
+import { adopt } from "~/util/css.js";
+import sheet from "./HostCard.module.css" with { type: "css" };
+import { hosts, me } from "~/lib/preact/queries.js";
+
+const css = adopt(sheet);
+
+const lastConnected = signal(/** @type {Record<string, number>} */ ({}));
+persist(lastConnected, "last_connected");
+
+const dt = new Intl.DateTimeFormat("en-us", {
+  dateStyle: "long",
+  timeStyle: "short",
+});
+
+/**
+ * @typedef {object} Props
+ * @prop {Core} core
+ * @prop {Host} host
+ */
+
+/** @extends {Component<Props>} */
+export default class HostCard extends Component {
+  me = me();
+  hosts = hosts();
+  deleting = signal(false);
+
+  /** @type {RefObject<Modal>} */
+  modalRef = createRef();
+
+  onConnect() {
+    if (promptOnConnection.value) {
+      this.modalRef.current?.open();
+    } else {
+      this.connect();
+    }
+  }
+
+  connect() {
+    this.props.core.connect(this.props.host);
+    lastConnected.value = {
+      ...lastConnected.value,
+      [this.props.host.id]: Date.now(),
+    };
+  }
+
+  get lastConnectedAt() {
+    const lastConnectedAt = lastConnected.value[this.props.host.id];
+    if (lastConnectedAt) return `Last connected on ${dt.format(new Date(lastConnectedAt))}`;
+    return "Never connected";
+  }
+
+  get actions() {
+    const host = this.props.host;
+
+    /** @type {DropdownItem[]} */
+    const actions = [
+      {
+        text: html`Copy ID: <span class=${util.textId}>${host.id.slice(0, 24)}</span>`,
+        onSelect: () => {
+          navigator.clipboard.writeText(host.id);
+          alert(`${host.name} ID copied to the clipboard!`);
+        },
+      },
+    ];
+
+    // we only show the delete button for your own computers
+    const canDelete = this.me.data?.id === host.user_id;
+    if (canDelete) {
+      actions.push({
+        text: "Delete",
+        icon: "trash",
+        disabled: host.is_online, // we only allow you to delete if it's offline
+        onSelect: () => {
+          this.deleting.value = true;
+        },
+      });
+    }
+
+    return actions;
+  }
+
+  render() {
+    const { host, core } = this.props;
+    const showBuild = core.debug && host.channel !== "" && !host.channel.startsWith("release");
+
+    return html`
+      <div class=${css.hostCard} data-id=${host.id}>
+        <span class=${css.icon}>
+          <${Icon} name=${host.is_online ? "windows-online" : "windows-offline"} size=${42} />
+        </span>
+        <div class=${css.info}>
+          <div class=${css.title}>
+            <h2>${host.name || html`<span style="opacity:0.5;">Unnamed Computer</span>`}</h2>
+            <span class=${css.status} data-online=${host.is_online}>
+              ${host.is_online ? "Online" : "Offline"}
+            </span>
+          </div>
+          <div class=${css.hostinfo}>
+            <span>${this.lastConnectedAt}</span>
+            ${showBuild && html`<code>${host.channel}/${host.version}</code>`}
+          </div>
+        </div>
+        <div class=${css.right}>
+          ${this.renderConnectButton()}
+          <${Dropdown}
+            id="host-dropdown-${host.id}"
+            placement="bottom-end"
+            trigger=${html`
+              <button
+                type="button"
+                class=${button.button}
+                data-level="tertiary"
+                data-size="small"
+                popovertarget="host-dropdown-${host.id}"
+              >
+                <${Icon} name="menu" label="menu" size=${12} />
+              </button>
+            `}
+            items=${this.actions}
+          />
+        </div>
+      </div>
+      <${HelpModal} modalRef=${this.modalRef} displayHideCheckbox onClose=${() => this.connect()} />
+      <${DeleteModal}
+        id=${host.id}
+        name=${host.name}
+        open=${this.deleting.value}
+        onClose=${() => {
+          this.deleting.value = false;
+        }}
+        onDelete=${() => this.hosts.fetch()}
+      />
+    `;
+  }
+
+  renderConnectButton() {
+    const { host, core } = this.props;
+    if (!host.is_online) return null;
+
+    const clients = core.clients;
+    const connectingToThisHost = clients[host.peer_id]?.status === "connecting";
+
+    if (connectingToThisHost) {
+      return html`
+        <${Button}
+          level="primary"
+          kind="negative"
+          onClick=${() => this.props.core.clientWithdrawOffer(host.peer_id)}
+        >
+          <${Icon} name="loader" />
+          Cancel
+        <//>
+      `;
+    }
+
+    // ensure vanity and breaking versions match on both client and host
+    const re = /(\d+)\.(\d+)\.\d+(?:-.+)?/;
+    const [, clientVanity, clientBreaking] = core.info.version.match(re) ?? [];
+    const [, hostVanity, hostBreaking] = host.version.match(re) ?? [];
+    const versionsMatch = clientVanity === hostVanity && clientBreaking === hostBreaking;
+
+    const connectingToAnyHost = Object.values(clients).some((c) => c.status === "connecting");
+    const hosting = core.hostGuests.length > 0 && !core.connectWhileHosting;
+
+    const disabled = !core.connected || hosting || connectingToAnyHost || !versionsMatch;
+
+    let tooltip = "";
+    if (hosting) {
+      tooltip = "You can't connect to another computer while guests are connected to you.";
+    } else if (!versionsMatch) {
+      tooltip = `Your app's version is not compatible with ${host.name}.`;
+    }
+
+    return tooltip
+      ? html`
+          <${Tooltip} contents=${tooltip}>
+            ${(/** @type {TriggerProps} */ { ref, ...trigger }) =>
+              html`<${Button} disabled level="primary" innerRef=${ref} ...${trigger}>Connect<//>`}
+          <//>
+        `
+      : html`
+          <${Button}
+            level="primary"
+            loading=${connectingToThisHost}
+            disabled=${disabled}
+            onClick=${() => this.onConnect()}
+          >
+            Connect
+          <//>
+        `;
+  }
+}
+
+class DeleteMachineError extends ApiError {
+  /** @override */
+  get messages() {
+    return {
+      [ApiError.noField]: {
+        not_found: "Couldn't find this computer. It may have already been deleted.",
+      },
+    };
+  }
+}
+
+/**
+ * @typedef {object} DeleteModalProps
+ * @prop {string} id
+ * @prop {string} name
+ * @prop {boolean} open
+ * @prop {() => void} onClose
+ * @prop {() => void} onDelete
+ */
+
+/** @extends  {Component<DeleteModalProps>}  */
+class DeleteModal extends Component {
+  deleteMachine = new PromiseSignal(async () => {
+    await deleteMachine(this.props.id);
+    alert(`Successfully deleted ${this.props.name}`, { type: "success" });
+    this.props.onDelete();
+    this.props.onClose();
+  });
+
+  render() {
+    const { name, open, onClose } = this.props;
+
+    const error = this.deleteMachine.error && DeleteMachineError.from(this.deleteMachine.error);
+
+    return html`
+      <${Modal} title="Delete ${name}?" open=${open} onClose=${onClose}>
+        <div class=${css.deleteModal}>
+          <p>You'll be able to add ${name} again by opening Phaze on that computer.</p>
+          <p class=${css.error}>${error?.message}</p>
+          <form
+            class=${css.actions}
+            onSubmit=${(/** @type {SubmitEvent} */ ev) => {
+              if (ev.submitter?.getAttribute("formmethod") === "dialog") return;
+              ev.preventDefault();
+              this.deleteMachine.invoke();
+            }}
+          >
+            <${Button}
+              type="submit"
+              level="primary"
+              kind="negative"
+              value="delete"
+              loading=${this.deleteMachine.loading}
+            >
+              Delete
+            <//>
+            <${Button} type="submit" formmethod="dialog" disabled=${this.deleteMachine.loading}>
+              Cancel
+            <//>
+          </form>
+        </div>
+      <//>
+    `;
+  }
+}

package/index.js

@@ -1,6 +1,6 @@
 import * as acorn from "acorn";
 import { generate } from "astring";
-import { simple } from "acorn-walk";
+import { attachComments, makeTraveler } from "astravel";
 
 /**
  * @typedef {Object} ElementNode
@@ -46,40 +46,94 @@ import { simple } from "acorn-walk";
 export default function transform(code, options = {}) {
   const { pragma = "h", tag: tagName = "html", import: importConfig } = options;
 
+  /** @type {Array<import('acorn').Comment>} */
+  const comments = [];
+
   const ast = /** @type {import('acorn').Program} */ (
     acorn.parse(code, {
       ecmaVersion: "latest",
       sourceType: "module",
+      locations: true,
+      onComment: comments,
     })
   );
 
   let hasTransformation = false;
 
-  simple(ast, {
-    /**
-     * @param {import('acorn').TaggedTemplateExpression} node
-     */
-    TaggedTemplateExpression(node) {
+  /**
+   * 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') 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({
+    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);
+        return;
       }
+      // Continue traversal for non-matching nodes
+      this.super.TaggedTemplateExpression.call(this, node, state);
     },
   });
 
+  traveler.go(ast);
+
   // Add import statement if specified and transformation occurred
   if (hasTransformation && importConfig?.from && importConfig?.name) {
     addImportDeclaration(ast, importConfig.from, importConfig.name);
   }
 
-  return generate(ast);
+  // Attach comments to AST nodes
+  if (comments.length > 0) {
+    attachComments(ast, comments);
+  }
+
+  return generate(ast, { comments: true });
 }
 
 /**
@@ -286,6 +340,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.4",
+  "version": "0.1.6",
   "description": "Transform htm tagged templates into h function calls using acorn",
   "type": "module",
   "main": "index.js",
@@ -26,7 +26,7 @@
   "license": "MPL-2.0",
   "dependencies": {
     "acorn": "^8.11.3",
-    "acorn-walk": "^8.3.2",
+    "astravel": "^0.6.1",
     "astring": "^1.8.6"
   },
   "devDependencies": {

package/test.js

@@ -7,449 +7,441 @@ function normalize(str) {
   return str.replace(/\s+/g, " ").trim();
 }
 
-describe("htm-transform", () => {
-  test("transforms simple element", () => {
-    const input = `const result = html\`<h1 id=hello>Hello world!</h1>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("h1", {
+test("transforms simple element", () => {
+  const input = `const result = html\`<h1 id=hello>Hello world!</h1>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("h1", {
   id: "hello"
 }, "Hello world!");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("transforms element with dynamic class and content", () => {
-    const input = `const result = html\`<div class=\${className}>\${content}</div>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("div", {
+test("transforms element with dynamic class and content", () => {
+  const input = `const result = html\`<div class=\${className}>\${content}</div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", {
   class: className
 }, content);`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("transforms component with props", () => {
-    const input = `const result = html\`<\${Header} name="ToDo's" />\`;`;
-    const output = transform(input);
-    const expected = `const result = h(Header, {
+test("transforms component with props", () => {
+  const input = `const result = html\`<\${Header} name="ToDo's" />\`;`;
+  const output = transform(input);
+  const expected = `const result = h(Header, {
   name: "ToDo's"
 });`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("transforms multiple root elements into array", () => {
-    const input = `const result = html\`
+test("transforms multiple root elements into array", () => {
+  const input = `const result = html\`
   <h1 id=hello>Hello</h1>
   <div class=world>World!</div>
 \`;`;
-    const output = transform(input);
-    const expected = `const result = [h("h1", {
+  const output = transform(input);
+  const expected = `const result = [h("h1", {
     id: "hello"
   }, "Hello"), h("div", {
     class: "world"
   }, "World!")];`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("transforms nested elements", () => {
-    const input = `const result = html\`<div><p>Hello</p><p>World</p></div>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("div", null, h("p", null, "Hello"), h("p", null, "World"));`;
+test("transforms nested elements", () => {
+  const input = `const result = html\`<div><p>Hello</p><p>World</p></div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", null, h("p", null, "Hello"), h("p", null, "World"));`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("transforms spread props", () => {
-    const input = `const result = html\`<div ...\${props}>Content</div>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("div", props, "Content");`;
+test("transforms spread props", () => {
+  const input = `const result = html\`<div ...\${props}>Content</div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", props, "Content");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("transforms mixed props and spread", () => {
-    const input = `const result = html\`<div class="test" ...\${props}>Content</div>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("div", {
+test("transforms mixed props and spread", () => {
+  const input = `const result = html\`<div class="test" ...\${props}>Content</div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", {
   class: "test",
   ...props
 }, "Content");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("transforms self-closing tags", () => {
-    const input = `const result = html\`<img src="test.jpg" alt="Test" />\`;`;
-    const output = transform(input);
-    const expected = `const result = h("img", {
+test("transforms self-closing tags", () => {
+  const input = `const result = html\`<img src="test.jpg" alt="Test" />\`;`;
+  const output = transform(input);
+  const expected = `const result = h("img", {
   src: "test.jpg",
   alt: "Test"
 });`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("transforms elements with boolean attributes", () => {
-    const input = `const result = html\`<input type="checkbox" checked disabled />\`;`;
-    const output = transform(input);
-    const expected = `const result = h("input", {
+test("transforms elements with boolean attributes", () => {
+  const input = `const result = html\`<input type="checkbox" checked disabled />\`;`;
+  const output = transform(input);
+  const expected = `const result = h("input", {
   type: "checkbox",
   checked: true,
   disabled: true
 });`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("preserves other code unchanged", () => {
-    const input = `const foo = 'bar';\nconst result = html\`<div>Test</div>\`;\nconsole.log(foo);`;
-    const output = transform(input);
-    const expected = `const foo = 'bar';
+test("preserves other code unchanged", () => {
+  const input = `const foo = 'bar';\nconst result = html\`<div>Test</div>\`;\nconsole.log(foo);`;
+  const output = transform(input);
+  const expected = `const foo = 'bar';
 const result = h("div", null, "Test");
 console.log(foo);`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
-
-  test("handles custom pragma option", () => {
-    const input = `const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, { pragma: "React.createElement" });
-    const expected = `const result = React.createElement("div", null, "Test");`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+test("handles custom pragma option", () => {
+  const input = `const result = html\`<div>Test</div>\`;`;
+  const output = transform(input, { pragma: "React.createElement" });
+  const expected = `const result = React.createElement("div", null, "Test");`;
 
-  test("handles custom tag name option", () => {
-    const input = `const result = htm\`<div>Test</div>\`;`;
-    const output = transform(input, { tag: "htm" });
-    const expected = `const result = h("div", null, "Test");`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+test("handles custom tag name option", () => {
+  const input = `const result = htm\`<div>Test</div>\`;`;
+  const output = transform(input, { tag: "htm" });
+  const expected = `const result = h("div", null, "Test");`;
 
-  test("transforms element with multiple dynamic children", () => {
-    const input = `const result = html\`<ul>\${items.map(i => html\`<li>\${i}</li>\`)}</ul>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("ul", null, items.map(i => h("li", null, i)));`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+test("transforms element with multiple dynamic children", () => {
+  const input = `const result = html\`<ul>\${items.map(i => html\`<li>\${i}</li>\`)}</ul>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("ul", null, items.map(i => h("li", null, i)));`;
 
-  test("transforms component with closing tag", () => {
-    const input = `const result = html\`<\${Wrapper}>Content</\${Wrapper}>\`;`;
-    const output = transform(input);
-    const expected = `const result = h(Wrapper, null, "Content");`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+test("transforms component with closing tag", () => {
+  const input = `const result = html\`<\${Wrapper}>Content</\${Wrapper}>\`;`;
+  const output = transform(input);
+  const expected = `const result = h(Wrapper, null, "Content");`;
 
-  test("transforms empty element", () => {
-    const input = `const result = html\`<div></div>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("div", null);`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+test("transforms empty element", () => {
+  const input = `const result = html\`<div></div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", null);`;
 
-  test("does not add import when import option is omitted", () => {
-    const input = `const result = html\`<div>Test</div>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("div", null, "Test");`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+test("does not add import when import option is omitted", () => {
+  const input = `const result = html\`<div>Test</div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", null, "Test");`;
 
-  test("adds import statement when import config is specified", () => {
-    const input = `const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      import: { from: "preact", name: "h" },
-    });
-    const expected = `import {h} from "preact";
-const result = h("div", null, "Test");`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
+test("adds import statement when import config is specified", () => {
+  const input = `const result = html\`<div>Test</div>\`;`;
+  const output = transform(input, {
+    import: { from: "preact", name: "h" },
   });
+  const expected = `import {h} from "preact";
+const result = h("div", null, "Test");`;
 
-  test("adds import for React.createElement", () => {
-    const input = `const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      pragma: "createElement",
-      import: { from: "react", name: "createElement" },
-    });
-    const expected = `import {createElement} from "react";
-const result = createElement("div", null, "Test");`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
+test("adds import for React.createElement", () => {
+  const input = `const result = html\`<div>Test</div>\`;`;
+  const output = transform(input, {
+    pragma: "createElement",
+    import: { from: "react", name: "createElement" },
   });
+  const expected = `import {createElement} from "react";
+const result = createElement("div", null, "Test");`;
 
-  test("does not add import when only from is specified", () => {
-    const input = `const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      import: { from: "preact" },
-    });
-    const expected = `const result = h("div", null, "Test");`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
+test("does not add import when only from is specified", () => {
+  const input = `const result = html\`<div>Test</div>\`;`;
+  const output = transform(input, {
+    import: { from: "preact" },
   });
+  const expected = `const result = h("div", null, "Test");`;
 
-  test("does not add import when only name is specified", () => {
-    const input = `const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      import: { name: "h" },
-    });
-    const expected = `const result = h("div", null, "Test");`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
+test("does not add import when only name is specified", () => {
+  const input = `const result = html\`<div>Test</div>\`;`;
+  const output = transform(input, {
+    import: { name: "h" },
   });
+  const expected = `const result = h("div", null, "Test");`;
+
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("does not duplicate existing import", () => {
-    const input = `import { h } from 'preact';
+test("does not duplicate existing import", () => {
+  const input = `import { h } from 'preact';
 const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      import: { from: "preact", name: "h" },
-    });
-    const expected = `import {h} from 'preact';
+  const output = transform(input, {
+    import: { from: "preact", name: "h" },
+  });
+  const expected = `import {h} from 'preact';
 const result = h("div", null, "Test");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("adds import before existing imports", () => {
-    const input = `import { useState } from 'preact/hooks';
+test("adds import before existing imports", () => {
+  const input = `import { useState } from 'preact/hooks';
 const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      import: { from: "preact", name: "h" },
-    });
-    const expected = `import {h} from "preact";
+  const output = transform(input, {
+    import: { from: "preact", name: "h" },
+  });
+  const expected = `import {h} from "preact";
 import {useState} from 'preact/hooks';
 const result = h("div", null, "Test");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("adds import before code when no imports exist", () => {
-    const input = `const foo = 'bar';
+test("adds import before code when no imports exist", () => {
+  const input = `const foo = 'bar';
 const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      import: { from: "preact", name: "h" },
-    });
-    const expected = `import {h} from "preact";
+  const output = transform(input, {
+    import: { from: "preact", name: "h" },
+  });
+  const expected = `import {h} from "preact";
 const foo = 'bar';
 const result = h("div", null, "Test");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("does not duplicate import when importing same export from same module", () => {
-    const input = `import { h } from 'preact';
+test("does not duplicate import when importing same export from same module", () => {
+  const input = `import { h } from 'preact';
 import { render } from 'preact';
 const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      import: { from: "preact", name: "h" },
-    });
-    const expected = `import {h} from 'preact';
+  const output = transform(input, {
+    import: { from: "preact", name: "h" },
+  });
+  const expected = `import {h} from 'preact';
 import {render} from 'preact';
 const result = h("div", null, "Test");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("adds import even if same module is imported with different exports", () => {
-    const input = `import { render } from 'preact';
+test("adds import even if same module is imported with different exports", () => {
+  const input = `import { render } from 'preact';
 const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      import: { from: "preact", name: "h" },
-    });
-    const expected = `import {h} from "preact";
+  const output = transform(input, {
+    import: { from: "preact", name: "h" },
+  });
+  const expected = `import {h} from "preact";
 import {render} from 'preact';
 const result = h("div", null, "Test");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("handles multiple htm transformations with import", () => {
-    const input = `const a = html\`<div>A</div>\`;
+test("handles multiple htm transformations with import", () => {
+  const input = `const a = html\`<div>A</div>\`;
 const b = html\`<span>B</span>\`;`;
-    const output = transform(input, {
-      import: { from: "preact", name: "h" },
-    });
-    const expected = `import {h} from "preact";
+  const output = transform(input, {
+    import: { from: "preact", name: "h" },
+  });
+  const expected = `import {h} from "preact";
 const a = h("div", null, "A");
 const b = h("span", null, "B");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
-
-  test("works with different module paths", () => {
-    const input = `const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      import: { from: "preact/compat", name: "h" },
-    });
-    const expected = `import {h} from "preact/compat";
-const result = h("div", null, "Test");`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
+test("works with different module paths", () => {
+  const input = `const result = html\`<div>Test</div>\`;`;
+  const output = transform(input, {
+    import: { from: "preact/compat", name: "h" },
   });
-
-  test("works with scoped packages", () => {
-    const input = `const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      import: { from: "@preact/signals", name: "h" },
-    });
-    const expected = `import {h} from "@preact/signals";
+  const expected = `import {h} from "preact/compat";
 const result = h("div", null, "Test");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
+  assert.strictEqual(normalize(output), normalize(expected));
+});
+
+test("works with scoped packages", () => {
+  const input = `const result = html\`<div>Test</div>\`;`;
+  const output = transform(input, {
+    import: { from: "@preact/signals", name: "h" },
   });
+  const expected = `import {h} from "@preact/signals";
+const result = h("div", null, "Test");`;
 
-  test("adds import with custom pragma matching name", () => {
-    const input = `const result = html\`<div>Test</div>\`;`;
-    const output = transform(input, {
-      pragma: "myH",
-      import: { from: "my-library", name: "myH" },
-    });
-    const expected = `import {myH} from "my-library";
-const result = myH("div", null, "Test");`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
+test("adds import with custom pragma matching name", () => {
+  const input = `const result = html\`<div>Test</div>\`;`;
+  const output = transform(input, {
+    pragma: "myH",
+    import: { from: "my-library", name: "myH" },
   });
+  const expected = `import {myH} from "my-library";
+const result = myH("div", null, "Test");`;
 
-  test("handles empty file with import config", () => {
-    const input = ``;
-    const output = transform(input, {
-      import: { from: "preact", name: "h" },
-    });
-    const expected = ``;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
+test("handles empty file with import config", () => {
+  const input = ``;
+  const output = transform(input, {
+    import: { from: "preact", name: "h" },
   });
+  const expected = ``;
 
-  test("handles file with only imports", () => {
-    const input = `import { useState } from 'preact/hooks';`;
-    const output = transform(input, {
-      import: { from: "preact", name: "h" },
-    });
-    const expected = `import {useState} from 'preact/hooks';`;
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-    assert.strictEqual(normalize(output), normalize(expected));
+test("handles file with only imports", () => {
+  const input = `import { useState } from 'preact/hooks';`;
+  const output = transform(input, {
+    import: { from: "preact", name: "h" },
   });
+  const expected = `import {useState} from 'preact/hooks';`;
 
-  test("spread at beginning means later props override", () => {
-    const input = `const result = html\`<div ...\${props} class="test">Content</div>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("div", {
+  assert.strictEqual(normalize(output), normalize(expected));
+});
+
+test("spread at beginning means later props override", () => {
+  const input = `const result = html\`<div ...\${props} class="test">Content</div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", {
   ...props,
   class: "test"
 }, "Content");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("spread between props preserves order", () => {
-    const input = `const result = html\`<div id="foo" ...\${props} class="test">Content</div>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("div", {
+test("spread between props preserves order", () => {
+  const input = `const result = html\`<div id="foo" ...\${props} class="test">Content</div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", {
   id: "foo",
   ...props,
   class: "test"
 }, "Content");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("handles attributes with hyphens", () => {
-    const input = `const result = html\`<div data-value="test" aria-label="label">Content</div>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("div", {
+test("handles attributes with hyphens", () => {
+  const input = `const result = html\`<div data-value="test" aria-label="label">Content</div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", {
   "data-value": "test",
   "aria-label": "label"
 }, "Content");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("handles dynamic attributes with hyphens", () => {
-    const input = `const result = html\`<div data-id=\${id} aria-label=\${label}>Content</div>\`;`;
-    const output = transform(input);
-    const expected = `const result = h("div", {
+test("handles dynamic attributes with hyphens", () => {
+  const input = `const result = html\`<div data-id=\${id} aria-label=\${label}>Content</div>\`;`;
+  const output = transform(input);
+  const expected = `const result = h("div", {
   "data-id": id,
   "aria-label": label
 }, "Content");`;
 
-    assert.strictEqual(normalize(output), normalize(expected));
-  });
+  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", {
+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));
-  });
+  assert.strictEqual(normalize(output), normalize(expected));
+});
 
-  test("todo", () => {
-    const input = `import html from "~/util/preact/html.js";
-    /** @import { JSX } from "preact" */
-
-    import button from "~/style/button.js";
-    import Icon from "./Icon.js";
-
-    import { adopt } from "~/util/css.js";
-    import sheet from "./Button.module.css" with { type: "css" };
-    const css = adopt(sheet);
-
-    /**
-     * @typedef {object} Props
-     * @property {"primary" | "secondary" | "tertiary"} [level = "secondary"]
-     * @property {"neutral" | "positive" | "negative"} [kind = "neutral"]
-     * @property {"small" | "base" | "large"} [size = "base"]
-     * @property {boolean} [loading]
-     * @property {string} [popovertarget]
-     * @property {(el: HTMLButtonElement) => void} [innerRef]
-     */
-
-    /** @param {Props & JSX.ButtonHTMLAttributes<HTMLButtonElement>} props */
-    export default function Button(props) {
-	const {
-		level,
-		kind = "neutral",
-		size = "base",
-		loading,
-		disabled,
-		type = "button",
-		children,
-		innerRef: ref,
-		...rest
-	} = props;
-
-	return html\`
-		<button
-			class="\${css.wrapper} \${button.button}"
-			data-level=\${level}
-			data-kind=\${kind}
-			data-size=\${size}
-			type=\${type}
-			disabled=\${disabled || loading}
-			ref=\${ref}
-			...\${rest}
-		>
-			<span class="\${css.layer} \${css.contents}">\${children}</span>
-			\${loading
-				? html\`
-						<span class="\${css.layer} \${css.loader}">
-						<\${Icon} class="\${css.loader}" name="loader" />
-						</span>
-					\`
-				: null}
-		</button>
-	\`;
-    }
-`;
-
-    const output = transform(input);
-  });
+test("preserves comments", () => {
+  const input = `// This is a comment
+const x = html\`<div>Hello</div>\`;
+// Another comment
+const y = 42;`;
+  const output = transform(input);
+  const expected = `// This is a comment
+const x = h("div", null, "Hello");
+// Another comment
+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("handles html template in array with JSDoc comment", () => {
+  const input = `class Foo {
+  get actions() {
+    /** @type {Action[]} */
+    const actions = [
+      {
+        text: html\`<span>Test</span>\`,
+      },
+    ];
+
+    actions.push({
+      text: "Do the Thing",
+      disabled: item.foo, // comment on same line
+    });
+
+    return actions;
+  }
+}`;
+  const output = transform(input);
+
+  // Should transform the html template without losing location info that causes attachComments to fail
+  assert.ok(output.includes('h("span", null, "Test")'));
+  assert.ok(output.includes("/** @type"));
+  assert.ok(output.includes("// comment on same line"));
 });

package/tsconfig.json

@@ -8,7 +8,7 @@
     "emitDeclarationOnly": true,
     "allowJs": true,
     "checkJs": true,
-    "skipLibCheck": true,
+    "removeComments": false,
   },
   "include": ["index.js"],
   "exclude": ["node_modules", "test.js"],