Описание
Alpine.js — «jQuery для современного веба»: интерактивность описывается атрибутами прямо в разметке — x-data задаёт состояние, x-show, x-if, x-for и x-model управляют поведением, лёгкие весом с десятки килобайт без сборки и зависимостей, идеален для лендингов, админок и прототипов, отлично сочетается с серверным рендерингом и Tailwind. Позволяет добавлять сложное поведение без полноценного SPA-стека.
Что умеет:
— добавлять реактивность в обычный HTML;
— управлять состоянием атрибутами;
— работать без сборки;
— весить десятки килобайт.
Полная документация ниже — автоматически из репозитория alpinejs/alpine (ветка main). Оригинальные материалы проекта распространяются на условиях его лицензии.
Alpine.js
Go to the Alpine docs for most things: Alpine Docs
You are welcome to submit updates to the docs by submitting a PR to this repo. Docs are located in the /packages/docs directory.
Stay here for contribution-related information.
Looking for V2 docs? here they are
Contribution Guide:
Quickstart
- clone this repo locally
- run
npm install&npm run build - Include the
/packages/alpinejs/dist/cdn.jsfile from a<script>tag on a webpage and you’re good to go!
Brief Tour
You can get everything installed with: npm install in the root directory of this repo after cloning it locally.
This repo is a "mono-repo" using npm workspaces for managing the packages. Each package has its own folder in the /packages directory.
Rather than having to run separate builds for each package, all package bundles are handled with the same command: npm run build
Here’s a brief look at each package in this repo:
| Package | Description |
|---|---|
| alpinejs | The main Alpine repo with all of Alpine’s core |
| collapse | A plugin for expanding and collapsing elements using smooth animations |
| csp | A repo to provide a "CSP safe" build of Alpine |
| docs | The Alpine documentation |
| focus | A plugin that allows you to manage focus inside an element |
| history | A plugin for binding data to query string parameters using the history API (name is likely to change) |
| intersect | A plugin for triggering JS expressions based on elements intersecting with the viewport |
| mask | A plugin for automatically formatting a text input field as a user types |
| morph | A plugin for morphing HTML (like morphdom) inside the page intelligently |
| persist | A plugin for persisting Alpine state across page loads |
The compiled JS files (as a result of running npm run [build/watch]) to be included as a <script> tag for example are stored in each package’s packages/[package]/dist directory.
Each package should at least have: a "cdn" build that is self-initializing and can be included using the src attribute in a <script defer> tag, and a module.[esm/cjs].js file that is used for importing as a JS module (cjs for node, esm for everything else).
The bundling for Alpine V3 is handled exclusively by ESBuild. All of the configuration for these builds is stored in the scripts/build.js file.
Testing
There are 2 different testing tools used in this repo: Cypress (for integration tests), and Vitest (for unit tests).
All tests are stored inside the /tests folder under /tests/cypress and /tests/vitest.
If you wish to only run Cypress and open it’s user interface (recommended during development), you can run: npm run cypress
If you wish to only run Vitest tests, you can run npm run vitest like normal and target specific tests.