# Frontend-Bibliotheken: Composer/npm und Versions-Upgrades Wie die früher per CDN eingebundenen Frontend-Bibliotheken lokal verwaltet werden können und was ein Upgrade auf aktuelle Versionen an Code-Anpassungen erfordert. > **Umsetzungsstand** (siehe `CHANGELOG.md`): Die risikoarmen Schritte 1–2 der > Reihenfolge unten sind **erledigt**. Alle Bibliotheken kommen lokal aus > `library/` (kein CDN mehr), deklariert über `package.json`, eingebunden über den > zentralen `partials/head.php`. FontAwesome ist von drei parallelen Versionen auf > **eine** vereinheitlicht (5.15.4 — also innerhalb v5, noch **nicht** der v6-Sprung), > jQuery auf **3.7.1**, PDF.js auf **4.10.38** aktualisiert — Letzteres als > **Legacy-ESM-Build** (Import als ES-Modul, lokaler `.mjs`-Worker), nicht als der > unten erwähnte UMD-Build. **Noch offen:** FontAwesome 5 → 6 (Schritt 3), Bootstrap > 4 → 5 samt `bootstrap-select`-Ersatz (Schritt 4) und der unverdrahtete Dark-Mode. > Der „Ausgangsbefund" beschreibt den Zustand **vor** diesen Schritten. ## Ausgangsbefund - **11 PHP-Dateien** mit eigenem ``; der komplette CDN-Stack ist in ~10 davon 1:1 dupliziert. - Bootstrap 4.3.1, jQuery 3.3.1, Popper 1.14.7, bootstrap-select 1.13.9, FontAwesome in **drei** Versionen parallel (v5.7.1 / v5.8.1 / v5.9.0). - **PDF.js 3.11.174** nur in `dokumente/index.php` (inkl. hartkodierter Worker-URL). - **Dropzone** liegt bereits lokal unter `library/`. - **jQuery-UI: nicht vorhanden** (kein Treffer) — fällt als Thema weg. - Inline-Kopplung an die Bootstrap-JS-API: ~25× `data-toggle`, ~24× `data-dismiss`, 4× `data-target`, teils tief in PHP-`echo`-Ausgaben. - ~56 `fa…`-Klassen über ~14 Dateien. - `bootstrap-select`-API aktiv genutzt (`selectpicker({...})`, `.selectpicker('val')`, `.selectpicker('deselectAll')`) in `detail/*` und `settings/`. - `library/darkBootstrap.min.css` liegt vor, wird aber **nirgends** eingebunden — die `darkMode`-Session-Logik in `header.php` ist noch nicht verdrahtet. ## 1. Composer (PHP) vs. npm (JS/CSS) - **Composer bleibt reine PHP-Domäne.** Frontend-Libs gehören dort nicht hinein. Composer nur für PHP (aktuell `vlucas/phpdotenv`). - **npm ist die richtige Quelle für alle Frontend-Assets.** Alle Bibliotheken existieren als npm-Pakete (`bootstrap`, `jquery`, `@popperjs/core`, `@fortawesome/fontawesome-free`, `bootstrap-select`, `pdfjs-dist`, `dropzone`). ### Wie Assets ohne Build-Schritt auf die Seite kommen Deployment erfolgt per `git pull` **ohne** Build-Schritt (deshalb ist `vendor/` bereits mitversioniert). `node_modules` gehört **nie** ins Repo. Damit: **Empfehlung — Weg A („npm als Bezugsquelle, kopierte `dist/`-Dateien"):** `package.json` deklariert die Abhängigkeiten; die fertigen `dist/`-Dateien werden nach `library/` gelegt und wie bisher per lokalem Pfad referenziert (genau wie Dropzone heute schon). Die kopierten `dist/`-Assets werden **mitcommittet** (das JS-Pendant zu `vendor/`), `node_modules` ignoriert. Deploy bleibt reines `git pull`. Kein Bundler nötig. **Weg B (Vite/echter Bundler)** bringt Tree-Shaking und SCSS-Kompilierung, aber einen Build-Schritt, der mit dem git-pull-Deploy kollidiert. Nur später gezielt erwägen, falls ein echtes SCSS-Theme (Farben, Dark-Mode) gebaut werden soll — auch dann bleibt das Ergebnis ein committetes `dist/`-Artefakt. ## 2. Upgrade auf aktuelle Versionen — Drop-in vs. Breaking ### Drop-in / unkritisch - **jQuery 3.3.1 → 3.7.x**: reines Minor-Upgrade, keine Breaking Changes für den Nutzungsstil. Datei tauschen. (Kein Sprung auf 4.x nötig.) - **PDF.js → aktuell**: betrifft nur `dokumente/index.php`; Legacy/UMD-Build weiter verfügbar. Wichtig: Worker-Version muss exakt zur API passen, die hartkodierte `workerSrc`-URL auf den lokalen Pfad umstellen. Isoliert. - **Dropzone**: bereits lokal, nur bei Bedarf aktualisieren. ### Breaking Changes **Bootstrap 4.3.1 → 5.x — das große Thema:** - jQuery-Entkopplung (BS5-JS braucht kein jQuery, nutzt Popper 2 im Bundle). jQuery bleibt aber wegen des eigenen Codes; die separate Popper-1-Einbindung entfällt. - **`data-*` → `data-bs-*`** (~53 Fundstellen, viele inline in `echo`-Strings). - **Klassen-Umbenennungen**: `mr-*`→`me-*`, `ml-*`→`ms-*`, `pl-*/pr-*`→`ps-*/pe-*`, `dropdown-menu-right`→`dropdown-menu-end`, `form-inline` entfällt, `no-gutters`→`g-0`, `sr-only`→`visually-hidden`, `badge-*`→`bg-*`, `close`→`btn-close`, `custom-select`/`custom-control` → neue Form-Klassen. - **`bootstrap-select` ist der kritische Blocker**: 1.13.x ist nicht BS5-kompatibel. Das aktiv genutzte Widget (Mehrfachauswahl in `detail/*`, `settings/`) muss **ersetzt** werden — realistische Optionen: **Tom Select** oder **Choices.js** (vanilla, kein jQuery, gepflegt). Kein Datei-Tausch, sondern eine kleine Teil-Neuimplementierung inkl. JS-Init und Markup. Aufwand BS5 gesamt: **das umfangreichste Einzelvorhaben** — als eigenes Projekt behandeln, nicht nebenbei. **FontAwesome 5 → 6/7:** - Zuerst der größte Gewinn: von **drei parallelen Versionen auf eine** vereinheitlichen (unabhängig vom Major-Sprung). - 5 → 6: überwiegend Drop-in; in der Free-Variante bleiben `fas`/`fab` gültig, nur einzelne umbenannte/umgezogene Icons prüfen. Bei 56 Verwendungen schnell durchgesehen. Empfehlung: auf **FontAwesome 6 Free** vereinheitlichen. **Popper 1 → 2:** kein eigenes Vorhaben — kommt mit dem BS5-Bundle; nur die separaten Popper-1-`