Alpine JS Library support

Drupal 💙 Alpine.js

This module exclusively uses the Drupal Library system to find and process javascript files that are either a Alpine Plugin or a script that needs to be loaded before Alpine.start is executed.

In order to add your script or scripts to be recognized by this module, you need to add an extra property to the attributes section of the .js file.

drupal.alpine_plugin:
  version: VERSION
  js:
    js/drupal.itemsjs.js: { attributes: { alpine_js: true } }
  dependencies:
    - alpine_js/alpine_js

Alpine Plugin

If your code contains a Alpine.js plugin you need to implement a listener for alpine:init event.

const myPlugin = function (Alpine) {
  Alpine.directive('directive',(el) => {
    // The actual code of your directive
  });
}

document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(myPlugin);
})

Config screen

Changelog

3.0.1

• Upgraded AlpineJS and AlpineJS-CSP to 3.13.3
• Added Official Alpine Plugins anchor, collapse, focus, intersect and persist
• Added option to fully disable loading AlpineJS unless it's required by either attach_library, libraries.yml in a theme or as dependencies on another library
• Removed the need to add alpine_js/alpine to your library definition if the attributes: { alpinejs: true} is added to one of the javascript files on your library
• Attachment order of Alpine, Plugin and your libary files is Alpine Plugins -> Custom defined plugins -> AlpineJS or AlpineJS-CSP
• Added Links to the Plugin documentation on the settings screen
• This version might work on Drupal 9.5, but is only tested on Drupal 10.x

3.0.0

• Tagged first release, we have been using this in production for the 1st quarter of 2023 without any issues.
• Upgraded AlpineJS and AlpineJS-CSP to 3.12.0
• Fixed a regression issue in the UI showing a false state that CSP version was enabled if you updated from an older dev release.
• Dropped support for EOL Drupal version (9.3 and earlier)
• Updated minimal PHP to 8.0 in composer.json as 7.4 is EOL