htm-transform 0.1.6 → 0.1.7

package/index.js

@@ -68,7 +68,7 @@ export default function transform(code, options = {}) {
    * @param {any} loc - The loc object with line/column info
    */
   function setLocationRecursive(node, start, end, loc) {
-    if (!node || typeof node !== 'object') return;
+    if (!node || typeof node !== "object" || !node.type) return;
 
     node.start = start;
     node.end = end;
@@ -81,17 +81,24 @@ export default function transform(code, options = {}) {
       const value = node[key];
       if (Array.isArray(value)) {
         for (const child of value) {
-          if (child && typeof child === 'object' && child.type) {
+          if (child && typeof child === "object" && child.type) {
             setLocationRecursive(child, start, end, loc);
           }
         }
-      } else if (value && typeof value === 'object' && value.type) {
+      } 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;
@@ -112,8 +119,12 @@ export default function transform(code, options = {}) {
         }
         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
@@ -129,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 });

package/package.json

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

package/test.js

@@ -420,28 +420,80 @@ test("handles empty closing tag shorthand", () => {
   assert.strictEqual(normalize(output), normalize(expected));
 });
 
-test("handles html template in array with JSDoc comment", () => {
+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 {
-  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;
+  #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");
+  }
+}`;
 
-  // 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"));
+  assert.strictEqual(normalize(output), normalize(expected));
 });

package/HostCard.js

@@ -1,283 +0,0 @@
-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>
-      <//>
-    `;
-  }
-}