alpine

Alpine.js

Für die meisten Dinge gehen Sie zu den Alpine Docs: Alpine Docs

Sie können gerne Aktualisierungen der Dokumente einreichen, indem Sie eine PR an dieses Repo senden. Dokumente befinden sich im Verzeichnis /packages/docs .

Bleiben Sie hier für beitragsbezogene Informationen.

Suchen Sie nach V2-Dokumenten? hier sind sie

Beitragsleitfaden:

Schnellstart

• Klonen Sie dieses Repo lokal
• Führen Sie npm install und npm run build aus
• Fügen Sie die Datei /packages/alpinejs/dist/cdn.js aus einem <script> -Tag auf einer Webseite ein und schon kann es losgehen!

Kurze Tour

Sie können alles installieren mit: npm install im Stammverzeichnis dieses Repos, nachdem Sie es lokal geklont haben.

Dieses Repo ist ein „Mono-Repo“, das NPM-Arbeitsbereiche zum Verwalten der Pakete verwendet. Jedes Paket hat seinen eigenen Ordner im Verzeichnis /packages .

Anstatt für jedes Paket separate Builds ausführen zu müssen, werden alle Paketpakete mit demselben Befehl verwaltet: npm run build

Hier ist ein kurzer Blick auf jedes Paket in diesem Repo:

Paket	Beschreibung
alpinejs	Das Haupt-Repo von Alpine mit dem gesamten Kern von Alpine
Zusammenbruch	Ein Plugin zum Erweitern und Reduzieren von Elementen mithilfe flüssiger Animationen
csp	Ein Repo zur Bereitstellung eines „CSP-sicheren“ Builds von Alpine
Dokumente	Die Alpendokumentation
Fokus	Ein Plugin, mit dem Sie den Fokus innerhalb eines Elements verwalten können
Geschichte	Ein Plugin zum Binden von Daten an Abfragezeichenfolgenparameter mithilfe der Verlaufs-API (Name wird sich wahrscheinlich ändern)
schneiden	Ein Plugin zum Auslösen von JS-Ausdrücken basierend auf Elementen, die sich mit dem Ansichtsfenster überschneiden
Maske	Ein Plugin zum automatischen Formatieren eines Texteingabefelds während der Benutzereingabe
morph	Ein Plugin zum intelligenten Morphing von HTML (wie Morphdom) innerhalb der Seite
bestehen	Ein Plugin zum Beibehalten des Alpenstatus über Seitenladevorgänge hinweg

Die kompilierten JS-Dateien (als Ergebnis der Ausführung von npm run [build/watch] ), die beispielsweise als <script> -Tag eingefügt werden sollen, werden im Verzeichnis packages/[package]/dist jedes Pakets gespeichert.

Jedes Paket sollte mindestens über Folgendes verfügen: einen „cdn“-Build, der sich selbst initialisiert und mithilfe des src Attributs in ein <script defer> -Tag eingebunden werden kann, sowie eine module.[esm/cjs].js Datei, die zum Importieren verwendet wird als JS-Modul (cjs für Knoten, esm für alles andere).

Die Bündelung für Alpine V3 wird ausschließlich von ESBuild übernommen. Die gesamte Konfiguration für diese Builds wird in der Datei scripts/build.js gespeichert.

Testen

In diesem Repo werden zwei verschiedene Testtools verwendet: Cypress (für Integrationstests) und Jest (für Unit-Tests).

Alle Tests werden im Ordner /tests unter /tests/cypress und /tests/jest gespeichert.

Sie können beide über die Befehlszeile ausführen mit: npm run test

Wenn Sie nur Cypress ausführen und dessen Benutzeroberfläche öffnen möchten (empfohlen während der Entwicklung), können Sie Folgendes ausführen: npm run cypress

Wenn Sie nur Jest-Tests ausführen möchten, können Sie npm run jest wie normale und zielspezifische Tests ausführen. Sie können Befehlszeilen-Konfigurationsoptionen angeben, die an den Befehl „jest“ weitergeleitet werden sollen -- etwa mit: npm run jest -- --watch