Ich habe htmx durch eine einfache Webkomponente ersetzt

(Bildnachweis: https://www.maicar.com/GML/Ajax1.html)

Vor kurzem habe ich auf Mastodon ein Gespräch darüber geführt, wie ich Htmx mit großem Erfolg verwendet habe, und jemand hat mich in meinen Erwähnungen dazu herausgefordert, und dass Htmx tatsächlich eine ziemlich starke Abhängigkeit darstellt, wenn man bedenkt, wofür ich es verwende. Sie haben mich mit diesem Beitrag und allem verlinkt.

Zuerst war ich etwas genervt. Ich dachte, dass es mir ziemlich gut gelingt, die Dinge leichtgewichtig zu halten, und Htmx hat mir gute Dienste geleistet, aber dann habe ich den Hut aufgesetzt, den ich die ganze Zeit über zu tragen versucht habe, wenn es darum geht, die Art und Weise, wie ich Webentwicklung mache, neu zu erfinden : Sind meine Annahmen richtig? Kann ich es besser machen?

Also habe ich meine gesamte Nutzung von htmx durch eine winzige, 100 Zeilen lange Vanillajs-Webkomponente ersetzt, die ich vollständig in diesen Beitrag einbeziehen werde:

export class AjaxIt extends HTMLElement {
  constructor() {
    super();
    this.addEventListener("submit", this.#handleSubmit);
    this.addEventListener("click", this.#handleClick);
  }

  #handleSubmit(e: SubmitEvent) {
    const form = e.target as HTMLFormElement;
    if (form.parentElement !== this) return;
    e.preventDefault();
    const beforeEv = new CustomEvent("ajax-it:beforeRequest", {
      bubbles: true,
      composed: true,
      cancelable: true,
    });
    form.dispatchEvent(beforeEv);
    if (beforeEv.defaultPrevented) {
      return;
    }
    const data = new FormData(form);
    form.dispatchEvent(new CustomEvent("ajax-it:beforeSend", { bubbles: true, composed: true }));
    const action = (e.submitter as HTMLButtonElement | null)?.formAction || form.action;
    (async () => {
      try {
        const res = await fetch(action, {
          method: form.method || "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "Ajax-It": "true",
          },
          body: new URLSearchParams(data as unknown as Record<string, string>),
        });
        if (!res.ok) {
          throw new Error("request failed");
        }
        form.dispatchEvent(new CustomEvent("ajax-it:afterRequest", { bubbles: true, composed: true }));
        const text = await res.text();
        this.#injectReplacements(text, new URL(res.url).hash);
      } catch {
        form.dispatchEvent(new CustomEvent("ajax-it:requestFailed", { bubbles: true, composed: true }));
      }
    })();
  }

  #handleClick(e: MouseEvent) {
    const anchor = e.target as HTMLAnchorElement;
    if (anchor.tagName !== "A" || anchor.parentElement !== this) return;
    e.preventDefault();
    anchor.dispatchEvent(new CustomEvent("ajax-it:beforeRequest", { bubbles: true, composed: true }));
    anchor.dispatchEvent(new CustomEvent("ajax-it:beforeSend", { bubbles: true, composed: true }));
    (async () => {
      try {
        const res = await fetch(anchor.href, {
          method: "GET",
          headers: {
            "Ajax-It": "true",
          },
        });
        if (!res.ok) {
          throw new Error("request failed");
        }
        anchor.dispatchEvent(new CustomEvent("ajax-it:afterRequest", { bubbles: true, composed: true }));
        const text = await res.text();
        this.#injectReplacements(text, new URL(res.url).hash);
      } catch {
        anchor.dispatchEvent(new CustomEvent("ajax-it:requestFailed", { bubbles: true, composed: true }));
      }
    })();
  }

  #injectReplacements(html: string, hash: string) {
    setTimeout(() => {
      const div = document.createElement("div");
      div.innerHTML = html;
      const mainTargetConsumed = !!hash && !!div.querySelector(
        hash,
      );
      const elements = [...div.querySelectorAll("[id]") ?? []];
      for (const element of elements.reverse()) {
        // If we have a parent that's already going to replace us, don't bother,
        // it will be dragged in when we replace the ancestor.
        const parentWithID = element.parentElement?.closest("[id]");
        if (parentWithID && document.getElementById(parentWithID.id)) {
          continue;
        }
        document.getElementById(element.id)?.replaceWith(element);
      }
      if (mainTargetConsumed) return;
      if (hash) {
        document
          .querySelector(hash)
          ?.replaceWith(...div.childNodes || []);
      }
    });
  }
}
customElements.define("ajax-it", AjaxIt);

Sie verwenden es so:

<ajax-it>
  <form action="/some/url">
    <input name=name>
  </form>
</ajax-it>

Und das ist es! Alle in der Antwort enthaltenen Elemente mit einer ID werden ersetzt, wenn die Antwort zurückkommt. Es funktioniert für Elemente auch!

Das Element funktioniert im Wesentlichen auf zwei Arten:

1. Wenn Ihre Aktion oder Href einen Hash enthält, wird das Element auf oder der aktuellen Seite mit einer ID, die mit diesem Hash übereinstimmt, durch den Inhalt der gesamten Antwort ersetzt.
2. Wenn Ihr zurückgegebener HTML-Code Elemente enthält, die selbst IDs haben, und diese IDs im aktuellen Dokument übereinstimmen, werden diese Elemente zuerst ersetzt (und von der oben genannten Ersetzung der „gesamten Antwort“ ausgeschlossen). Dies ist im Wesentlichen die Art und Weise, wie Sie „Out-of-Band“-Swaps (auch bekannt als hx-swap-oob) durchführen.

Also, mit etwas HTML wie diesem:

<div id=extra-stuff></div>
<div id=user-list></div>

<ajax-it>
  <a href="/users/list#put-it-here">
    Get users
  </a>
</ajax-it>

und eine Serverantwort wie diese:

<ul>
  <li>user 1
  <li>user 2
</ul>

Das Ergebnis ist:

<ul>
  <li>user 1
  <li>user 2
</ul>


  
    Get users
  

Aber wenn Ihre Antwort gewesen wäre:

<ul>
  <li>user 1
  <li>user 2
</ul>

Hello, I'm out-of-band

Sie hätten am Ende Folgendes erhalten:

Hello, I'm out-of-band
<ul>
  <li>user 1
  <li>user 2
</ul>


  
    Get users
  

...mit der id=extra-stuff außerhalb des Bandes ausgetauscht und dem

normal getauscht.

Um die Idempotenz aufrechtzuerhalten, verwende ich jedoch nicht die Hash-Version von Dingen und stelle nur sicher, dass alle meine Antwortelemente über angehängte IDs verfügen:


<ul id=user-list>
  <li>user 1
  <li>user 2
</ul>

<p id=extra-stuff>Hello, I'm out-of-band</p>

Wodurch das

id und machen Sie einen Klick auf wiederholt idempotent (wie zu erwarten). In diesem Fall kann Ihr href einfach href="/users/list" lauten.

Es wird außerdem vollständig schrittweise verbessert: Solange Ihr Aktionsattribut auf einen regulären Endpunkt verweist, verhalten sich die Dinge wie erwartet, wenn JS nicht funktioniert oder nicht geladen werden kann. Alles, worauf Sie auf der Serverseite achten müssen, ist ein Ajax-It: true-Header, damit Sie mit minimalem HTML statt einer vollständigen Antwort antworten können.

Großes Lob und Dank an htmz, auf dem dies weitgehend basiert, außer dass ich es mit AJAX anstelle des Iframe-Tricks machen musste, weil ich tatsächlich Lebenszyklusereignisse brauchte, um einige der Offline-Tricks, die ich mache, auszuführen.

Trotzdem: Prost. Fühlen Sie sich frei, das Element in Ihren eigenen Sachen zu verwenden! Betrachten Sie es als gemeinfrei :)

Das obige ist der detaillierte Inhalt vonIch habe htmx durch eine einfache Webkomponente ersetzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!