mcpField
D
drupal-javascript

drupal-javascript

github.com/edutrulDevelopment7351 installsUpdated 21w ago
Repository

About drupal-javascript

A Drupal JavaScript reference for developers building module behaviors and AJAX interactions. It covers library definitions, Drupal behaviors, settings, and custom AJAX commands across JavaScript and PHP.

Key features

  1. 01Define JavaScript and CSS libraries
  2. 02Attach libraries from Twig templates
  3. 03Use Drupal behaviors with `once`
  4. 04Read values from `drupalSettings`
  5. 05Implement standard and custom AJAX commands

Use cases

  1. 01Add reusable JavaScript and CSS to a Drupal module
  2. 02Prevent behavior code from processing elements repeatedly
  3. 03Build AJAX responses with custom commands

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/edutrul/drupal-ai --skill drupal-javascript

After installing, type/drupal-javascriptin Claude Code to confirm it loaded.

Bundled filesREADME.md

Details

From the project README

Drupal JavaScript

Defining a Library (*.libraries.yml)

# my_module.libraries.yml
my-behavior:
  version: 1.0
  js:
    js/my-behavior.js: {}
  css:
    component:
      css/my-style.css: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/once

Drupal Behavior Pattern

// js/my-behavior.js
(function (Drupal, once) {
  'use strict';

  Drupal.behaviors.myBehavior = {
    attach(context, settings) {
      // Use `once` to prevent double-processing
      once('my-behavior', '.my-selector', context).forEach(function (element) {
        // Process element
        element.addEventListener('click', function (e) {
          e.preventDefault();
          // Handle click
        });
      });
    },
    detach(context, settings, trigger) {
      // Clean up if needed (e.g., 'unload' trigger)
    },
  };
}(Drupal, once));

Attaching a Library in Twig

Attach a JavaScript/CSS library from a Twig template:

{{ attach_library('my_module/my-behavior') }}

Accessing drupalSettings in JS

Drupal.behaviors.myBehavior = {
  attach(context, settings) {
    const myKey = settings.myModule?.key;
    if (myKey) {
      console.log('Value:', myKey);
    }
  },
};

AJAX Commands from PHP

use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\ReplaceCommand;
use Drupal\Core\Ajax\InvokeCommand;
use Drupal\Core\Ajax\HtmlCommand;

$response = new AjaxResponse();
$response->addCommand(new ReplaceCommand('#wrapper', $build));
$response->addCommand(new HtmlCommand('#message', $this->t('Done!')));
$response->addCommand(new InvokeCommand('.my-class', 'addClass', ['active']));
return $response;

Custom AJAX Command

// Register command
Drupal.AjaxCommands.prototype.myCommand = function (ajax, response, status) {
  document.querySelector(response.selector).textContent = response.data;
};

// PHP side
use Drupal\Core\Ajax\CommandInterface;

final class MyCommand implements CommandInterface {
  public function __construct(
    private readonly string $selector,
    private readonly string $data,
  ) {}

  public function render(): array {
    return [
      'command' => 'myCommand',
      'selector' => $this->selector,
      'data' => $this->data,
    ];
  }
}

Custom Drupal AJAX Commands

Use this pattern when creating a custom AJAX command with:

  • Drupal.AjaxCommands.prototype
  • a matching PHP CommandInterface class
  • a custom command name returned in the AJAX response

This is for defining new AJAX command types, not general form AJAX callbacks.

Comments

Markdown supported