Files
werkbaum/docs/TASKS.md
T
mhoennigandClaude Opus 4.8 78d1000f61 frontend: Projektgerüst mit Vite — Single-HTML in ES-Module + Bündelung
Erster Schritt der Modularisierung (ROADMAP „tragfähige Codebasis",
TASKS Phase 1). Der bisher einzelne index.html-Prototyp wird zur Vite-App:

- CSS -> src/style.css, gesamtes JS -> src/app.js (noch als ein Modul;
  Parser/Renderer werden in den folgenden Checkboxen herausgelöst).
- index.html ist der Vite-Entry (<script type="module" src="/src/app.js">).
- npm run build (vite + vite-plugin-singlefile) inlint JS+CSS+Favicon (als
  data:-URI) in EINE self-contained dist/index.html -> bleibt file://-tauglich.
- Vitest als Testrunner eingerichtet (tests/, passWithNoTests bis Schritt 2/3).
- Pages-Workflow: Node + npm ci + npm test + npm run build, deployt dist/;
  Favicon-sed entfällt (inline), nur ../LICENSE + Footer-Version bleiben.
- .claude/launch.json auf Vite-Dev-Server (Port 8137) umgestellt.

Entscheidung als D19 dokumentiert (weicht D11 „kein Build-Zwang" bewusst auf,
hält aber D16 file://-Versprechen über die gebündelte Datei). README (de/en)
und frontend/CLAUDE.md um Dev-/Build-/Test-Workflow ergänzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 20:47:23 +02:00

1.9 KiB

Aufgaben

Abhaken beim Erledigen; neue Aufgaben unten anfügen.

Phase 1 — Modularisierung & Tests

  • Projektgerüst: src/ (parser.js, model.js, render.js, app.js), tests/, index.html bindet Module ein; weiterhin ohne Build nutzbar (ES-Module) oder mit minimalem Setup (Vite) — Entscheidung dokumentieren. → Vite gewählt (D19): src/ als ES-Module, npm run build bündelt zu einer self-contained dist/index.html (file://-tauglich). Gerüst steht (aktuell src/app.js + src/style.css); Parser/Renderer werden in den folgenden Checkboxen herausgelöst.
  • Parser extrahieren; Verhalten exakt wie in docs/SPEC.md §1–§8.
  • Unit-Tests für den Parser (Vitest): kanonisches Beispiel aus SPEC §10 als Fixture; Randfälle: gemischte Gates, Tabs/ungleichmäßige Einrückung, URL mit @, mehrere Wurzeln, leere Labels, %% am Zeilenanfang/-ende.
  • Renderer extrahieren (HTML-String-Erzeugung), Snapshot-Tests für Normal- und Vertikalmodus sowie „Untergliederung fehlt“.
  • Warnungs-Modell vereinheitlichen (Zeilennummern, Typen).

Phase 2 — Qualität

  • Barrierefreiheit: Fokusreihenfolge, aria-Labels für Status/Größe/Tags.
  • Druck-Stylesheet (Diagramm ohne Editor-Panel).
  • Fehlertolerantes Parsen weiter ausbauen (unbekannte Statuszeichen melden).

Deployment

  • GitHub-Pages-Workflow angelegt (.github/workflows/pages.yml, siehe docs/DECISIONS.md D16).

Phase 3 — Integrationen (siehe docs/ROADMAP.md)

  • Backend-Gerüst per Spring Initializr in backend/ anlegen (Kotlin, Gradle Kotlin DSL, JDK 21; Konventionen: backend/CLAUDE.md).
  • SVG-Renderer (Layout-Engine) als gemeinsame Basis für Export und Mermaid-Plugin.
  • Mermaid-Plugin-Spike: Detektor + Registrierung, ein Minimalbaum.
  • Taiga-Spike: #ref-Syntax parsen, Status via REST-API auflösen (read-only), Mapping konfigurierbar.