htm-transform 0.1.5 → 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

@@ -60,18 +60,58 @@ 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') 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;
@@ -300,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.5",
+  "version": "0.1.6",
   "description": "Transform htm tagged templates into h function calls using acorn",
   "type": "module",
   "main": "index.js",

package/test.js

@@ -403,3 +403,45 @@ 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"));
+});