@cesarfernandoig/alpine-responsive-plugin/src/index.js

A lightweight Alpine.js plugin that simplifies managing conditional attributes in responsive designs.

import createMediaState from "./create-media-state";
import createGetMobileValueMagic from "./create-get-mobile-value-magic";
import createMobileAttributesDirective from "./create-mobile-attributes-directive";

/**
 * ``Alpine Responsive``
 * Alpine.js plugin to handle responsiveness in the application.
 * This plugin provides utilities to manage media query states
 * and apply conditional attributes based on screen size.
 *
 * @param {Object} Alpine - The Alpine.js instance.
 */
export default function responsive(Alpine) {
  // Creates the media query state using the `createMediaState` function.
  let mediaState = createMediaState(Alpine);

  // Registers a magic helper called "media" that returns the media query state.
	Alpine.magic("media", () => mediaState);

  // Registers a magic helper called "getMobileValue" that allows retrieving conditional values
  // based on whether the device is mobile or not.
	Alpine.magic("getMobileValue", createGetMobileValueMagic(mediaState));

  // Registers a custom directive called "mobileattributes" that applies conditional attributes
  // to elements based on the media query state.
  Alpine.directive("mobileattributes", createMobileAttributesDirective(mediaState));
}