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.js file from a `` 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:

The compiled JS files (as a result of running npm run [build/watch]) to be included as a `tag for example are stored in each package'spackages/[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 `tag, and amodule.[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.