drupal-javascript

Name: drupal-javascript
Author: edutrul

64stars13forks

How to install drupal-javascript?

edutrul/drupal-ai/drupal-javascript

$npx -y skills add edutrul/drupal-ai --skill drupal-javascript

Installs into the current project.

Summary

Drupal JavaScript behaviors, libraries.yml, drupalSettings, attach_library(), and custom client-side AJAX commands using Drupal.AjaxCommands.prototype.

Files · 1

View on GitHub

SKILL.md

1	# Drupal JavaScript
2
3	## Defining a Library (*.libraries.yml)
4
5	```yaml
6	# my_module.libraries.yml
7	my-behavior:
8	version: 1.0
9	js:
10	js/my-behavior.js: {}
11	css:
12	component:
13	css/my-style.css: {}
14	dependencies:
15	- core/drupal
16	- core/jquery
17	- core/once
18	```
19
20	## Drupal Behavior Pattern
21
22	```javascript
23	// js/my-behavior.js
24	(function (Drupal, once) {
25	'use strict';
26
27	Drupal.behaviors.myBehavior = {
28	attach(context, settings) {
29	// Use `once` to prevent double-processing
30	once('my-behavior', '.my-selector', context).forEach(function (element) {
31	// Process element
32	element.addEventListener('click', function (e) {
33	e.preventDefault();
34	// Handle click
35	});
36	});
37	},
38	detach(context, settings, trigger) {
39	// Clean up if needed (e.g., 'unload' trigger)
40	},
41	};
42	}(Drupal, once));
43	```
44
45	## Attaching a Library in Twig
46
47	Attach a JavaScript/CSS library from a Twig template:
48
49	```twig
50	{{ attach_library('my_module/my-behavior') }}
51	```
52
53	## Accessing drupalSettings in JS
54
55	```javascript
56	Drupal.behaviors.myBehavior = {
57	attach(context, settings) {
58	const myKey = settings.myModule?.key;
59	if (myKey) {
60	console.log('Value:', myKey);
61	}
62	},
63	};
64	```
65
66	## AJAX Commands from PHP
67
68	```php
69	use Drupal\Core\Ajax\AjaxResponse;
70	use Drupal\Core\Ajax\ReplaceCommand;
71	use Drupal\Core\Ajax\InvokeCommand;
72	use Drupal\Core\Ajax\HtmlCommand;
73
74	$response = new AjaxResponse();
75	$response->addCommand(new ReplaceCommand('#wrapper', $build));
76	$response->addCommand(new HtmlCommand('#message', $this->t('Done!')));
77	$response->addCommand(new InvokeCommand('.my-class', 'addClass', ['active']));
78	return $response;
79	```
80
81	## Custom AJAX Command
82
83	```javascript
84	// Register command
85	Drupal.AjaxCommands.prototype.myCommand = function (ajax, response, status) {
86	document.querySelector(response.selector).textContent = response.data;
87	};
88	```
89
90	```php
91	// PHP side
92	use Drupal\Core\Ajax\CommandInterface;
93
94	final class MyCommand implements CommandInterface {
95	public function __construct(
96	private readonly string $selector,
97	private readonly string $data,
98	) {}
99
100	public function render(): array {
101	return [
102	'command' => 'myCommand',
103	'selector' => $this->selector,
104	'data' => $this->data,
105	];
106	}
107	}
108	```
109
110	## Custom Drupal AJAX Commands
111
112	Use this pattern when creating a custom AJAX command with:
113
114	- `Drupal.AjaxCommands.prototype`
115	- a matching PHP `CommandInterface` class
116	- a custom command name returned in the AJAX response
117
118	This is for defining new AJAX command types, not general form AJAX callbacks.

People who liked this also viewed

6 picks

Type

hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026262k37k
request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026165k181k
analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026161k507
explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026161k507
ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026149k181k

drupal-javascript

64stars13forks

View on GitHub

How to install drupal-javascript?

edutrul/drupal-ai/drupal-javascript

$npx -y skills add edutrul/drupal-ai --skill drupal-javascript

Installs into the current project.

Summary

Drupal JavaScript behaviors, libraries.yml, drupalSettings, attach_library(), and custom client-side AJAX commands using Drupal.AjaxCommands.prototype.

Files · 1

View on GitHub

SKILL.md

1	# Drupal JavaScript
2
3	## Defining a Library (*.libraries.yml)
4
5	```yaml
6	# my_module.libraries.yml
7	my-behavior:
8	version: 1.0
9	js:
10	js/my-behavior.js: {}
11	css:
12	component:
13	css/my-style.css: {}
14	dependencies:
15	- core/drupal
16	- core/jquery
17	- core/once
18	```
19
20	## Drupal Behavior Pattern
21
22	```javascript
23	// js/my-behavior.js
24	(function (Drupal, once) {
25	'use strict';
26
27	Drupal.behaviors.myBehavior = {
28	attach(context, settings) {
29	// Use `once` to prevent double-processing
30	once('my-behavior', '.my-selector', context).forEach(function (element) {
31	// Process element
32	element.addEventListener('click', function (e) {
33	e.preventDefault();
34	// Handle click
35	});
36	});
37	},
38	detach(context, settings, trigger) {
39	// Clean up if needed (e.g., 'unload' trigger)
40	},
41	};
42	}(Drupal, once));
43	```
44
45	## Attaching a Library in Twig
46
47	Attach a JavaScript/CSS library from a Twig template:
48
49	```twig
50	{{ attach_library('my_module/my-behavior') }}
51	```
52
53	## Accessing drupalSettings in JS
54
55	```javascript
56	Drupal.behaviors.myBehavior = {
57	attach(context, settings) {
58	const myKey = settings.myModule?.key;
59	if (myKey) {
60	console.log('Value:', myKey);
61	}
62	},
63	};
64	```
65
66	## AJAX Commands from PHP
67
68	```php
69	use Drupal\Core\Ajax\AjaxResponse;
70	use Drupal\Core\Ajax\ReplaceCommand;
71	use Drupal\Core\Ajax\InvokeCommand;
72	use Drupal\Core\Ajax\HtmlCommand;
73
74	$response = new AjaxResponse();
75	$response->addCommand(new ReplaceCommand('#wrapper', $build));
76	$response->addCommand(new HtmlCommand('#message', $this->t('Done!')));
77	$response->addCommand(new InvokeCommand('.my-class', 'addClass', ['active']));
78	return $response;
79	```
80
81	## Custom AJAX Command
82
83	```javascript
84	// Register command
85	Drupal.AjaxCommands.prototype.myCommand = function (ajax, response, status) {
86	document.querySelector(response.selector).textContent = response.data;
87	};
88	```
89
90	```php
91	// PHP side
92	use Drupal\Core\Ajax\CommandInterface;
93
94	final class MyCommand implements CommandInterface {
95	public function __construct(
96	private readonly string $selector,
97	private readonly string $data,
98	) {}
99
100	public function render(): array {
101	return [
102	'command' => 'myCommand',
103	'selector' => $this->selector,
104	'data' => $this->data,
105	];
106	}
107	}
108	```
109
110	## Custom Drupal AJAX Commands
111
112	Use this pattern when creating a custom AJAX command with:
113
114	- `Drupal.AjaxCommands.prototype`
115	- a matching PHP `CommandInterface` class
116	- a custom command name returned in the AJAX response
117
118	This is for defining new AJAX command types, not general form AJAX callbacks.

People who liked this also viewed

6 picks

Type