| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
.jss-Dateien.\n- Low-Code-Aktionen: Nutzen Sie eingebaute Aktionen wie increment, decrement und toggle direkt im HTML mit dem data-action-Attribut.\n- Pro-Code-Methoden: Definieren Sie komplexe Logik in einem <script>-Block und binden Sie sie mit data-event an das DOM.\n- Scoped CSS: Stile in einem <css>-Block gelten standardmäßig nur für die jeweilige Komponente. Kein unkontrolliertes Überschreiben von Stilen mehr.\n- Props: Geben Sie Daten von Eltern- an Kind-Komponenten weiter, sowohl statisch als auch dynamisch.\n\n## So schreibt man eine JSS-Komponente\n\nEine Komponente ist eine einfache .jss-Datei, die drei Teile enthalten kann:\n\n1. Template (<div ...>): Die HTML-Struktur Ihrer Komponente.\n2. Script (<script>(...)<\/script>): Ein optionaler Block, der die Logik der Komponente definiert (Daten, Methoden, Props).\n3. CSS (<css>...</css>): Optionale, gekapselte Stile für die Komponente.\n\n### Beispiel 1: main-app.jss (mit Logik)\n\nDiese Komponente definiert einen Zustand (user1) und verwendet eine Kind-Komponente (<user-card>), der sie Daten übergibt.\n\nhtml\n<html name="main-app">\n <div>\n <h1>Hallo, {{ global.appName }}!</h1>\n <p>Das ist unsere Haupt-App.</p>\n <user-card \n username="{{user1.name}}" \n :userage="user1.age"\n data-event-reset="click" \n >\n </user-card>\n <button data-action:click="increment(user1.age)">Happy Birthday, {{ user1.name }}!</button>\n </div>\n\n <script>\n ({ \n data: {\n user1: { name: \'Alice\', age: 30 }\n },\n methods: {\n reset() {\n this.user1.age = 0;\n console.log("Das Alter wurde zurückgesetzt!");\n }\n }\n })\n </script>\n\n <css>\n p {\n color: blue;\n }\n </css>\n</html>\n\n\n### Beispiel 2: user-card.jss (rein präsentativ)\n\nDiese Komponente empfängt nur Daten (props) und zeigt sie an. Sie hat keine eigene Logik.\n\nhtml\n<html name="user-card">\n <div>\n <p><b>User:</b> {{ username }}</p>\n <p><b>Age:</b> {{ userage }}</p>\n <button data-event-reset="click">Reset Age</button>\n </div>\n\n <script>\n ({\n props: [\'username\', \'userage\']\n })\n </script>\n\n <css>\n div {\n border: 1px solid #ccc;\n padding: 10px;\n margin-top: 10px;\n border-radius: 5px;\n }\n </css>\n</html>\n\n\n## Wie es funktioniert\n\nDas Kern-Skript (frontend/app.js) ist der "Runtime". Es wird auf Ihrer Seite eingebunden und übernimmt folgende Aufgaben:\n\n1. Laden & Parsen: Lädt alle .jss-Dateien.\n2. Komponenten registrieren: Analysiert die Dateien und registriert die Komponenten.\n3. DOM aufbauen: Sucht nach den Komponenten-Tags (z.B. <main-app>) und rendert sie.\n4. Reaktivität herstellen: Überwacht alle Daten auf Änderungen und aktualisiert das DOM bei Bedarf automatisch.\n\n## Lizenz\n\nMIT\n