Blog-Eintrag bearbeiten

Als ich das erste Mal gebeten wurde, mir Stimulus anzusehen, war ich ehrlich gesagt überfordert. Ich schaute mir den Code auf der offiziellen Webseite an und dachte nur: "Hä? Warum sollte man damit arbeiten? Das wirkt doch kompliziert und zerstört den HTML-Code!"
 

Damals ging ich noch davon aus, dass es am einfachsten sei, einfach eine JavaScript-Datei einzubinden und den benötigten HTML-Bereich direkt im JavaScript zu erzeugen.
Doch je mehr ich mich mit Stimulus beschäftigte, desto mehr verstand ich die Philosophie dahinter. Und heute muss ich sagen: Wow. Für jemanden wie mich, der Ordnung liebt, ist Stimulus ein echtes Geschenk.

Es ist nicht übertrieben, wenn Hotwire sagt, dass man damit HTML und JavaScript perfekt voneinander trennen kann. Laien, die den HTML-Code sehen, fragen sich vielleicht, wie das Ganze überhaupt funktioniert. Denn abgesehen von ein paar kleinen Attributen wie data-controller, deutet nichts darauf hin, dass im Hintergrund JavaScript am Werk ist.

Ich muss zugeben: Obwohl mir Stimulus in Erinnerung geblieben ist, musste ich mir meine alten Skripte noch einmal ansehen, um wieder in den Flow zu kommen. Doch kaum war ich wieder drin, erinnerte ich mich auch daran, warum meine Liebe zu diesem Framework so stark gewachsen ist.

Hier ein kleines Beispiel: 

<section class="mb-20" data-controller="blogPage">
  <div id="blogContainer" data-blogPage-target="blogContainer"></div>
  <template id="blogTemplate">
    <h2 class="inline-block text-6xl mt-5 mb-10 border-b-4 text-red-500 border-orange-400 pb-2 font-bold"></h2>
    <p>Veröffentlicht am <span class="text-red-500"></span></p>
    <div class="content mt-5"></div>
    <div class="mt-10 mb-20 flex">
      <small class="text-gray-500 italic">Letzte Änderung:</small>
    </div>
  </template>
</section>

Die Datei blog.lib.php zieht ihre Inhalte aus einer JSON-Datei.
Also muss es irgendwo ein fetch() oder eine async-Funktion geben, oder? Ganz genau.
 

Willst du jetzt meine dazugehörige JavaScript-Datei sehen?
Hier ist sie: 

import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";

export default class extends Controller {
    static targets = [
        "blogContainer"
    ];

    connect() {
        this.blogRequest();
    }

    async blogRequest() {
        const response = await fetch("/assets/api/blog/blog.json");
        const daten = await response.json();
        const template = document.querySelector("#blogTemplate");
        daten.forEach(eintrag => {
            const clone = template.content.cloneNode(true);
            clone.querySelector("h2").textContent = eintrag.headline;
            clone.querySelector("p span").textContent = this.formatDate(eintrag.created_at);
            clone.querySelector(".content").innerHTML = eintrag.content;
            clone.querySelector("small span").textContent = this.formatDate(eintrag.changed_at);

            this.blogContainerTarget.appendChild(clone);
        });
    }

    formatDate(dateString) {
        const date = new Date(dateString);
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const year = date.getFullYear();
        const hour = String(date.getHours()).padStart(2, '0');
        const minute = String(date.getMinutes()).padStart(2, '0');
        return `${day}.${month}.${year} um ${hour}:${minute} Uhr`;
    }
}

Sexy, oder?
So kurz, so elegant und dennoch alles, was mein Blog braucht.
Ich freue mich schon darauf, noch tiefer in Stimulus einzutauchen und weitere Komponenten damit zu bauen.