stimulus

Name: stimulus
Author: smnandre

163stars12forks

How to install stimulus?

smnandre/symfony-ux-skills/stimulus

$npx -y skills add smnandre/symfony-ux-skills --skill stimulus

Installs into the current project.

Summary

Stimulus JS framework for Symfony UX -- client-side behavior via HTML data attributes, zero server round-trips. Use when creating controllers for DOM manipulation, handling click/input/submit events, managing targets and values, wiring outlets between controllers, wrapping third-

Files · 1

View on GitHub

SKILL.md

1	# Stimulus
2
3	Modest JavaScript framework that connects JS objects to HTML via data attributes. Stimulus does not render HTML -- it augments server-rendered HTML with behavior.
4
5	The mental model: HTML is the source of truth, JavaScript controllers attach to elements, and data attributes are the wiring. No build step required with AssetMapper.
6
7	## Quick Reference
8
9	```
10	data-controller="name" attach controller to element
11	data-name-target="item" mark element as a target
12	data-action="event->name#method" bind event to controller method
13	data-name-key-value="..." pass typed data to controller
14	data-name-key-class="..." configure CSS class names
15	data-name-other-outlet=".selector" reference another controller instance
16	```
17
18	## Controller Skeleton
19
20	```javascript
21	// assets/controllers/example_controller.js
22	import { Controller } from '@hotwired/stimulus';
23
24	export default class extends Controller {
25	static targets = ['input', 'output'];
26	static values = { url: String, delay: { type: Number, default: 300 } };
27	static classes = ['loading'];
28	static outlets = ['other'];
29
30	connect() {
31	// Called when controller connects to DOM
32	}
33
34	disconnect() {
35	// Called when controller disconnects -- clean up here
36	}
37
38	submit(event) {
39	// Action method
40	}
41	}
42	```
43
44	File naming convention: `hello_controller.js` maps to `data-controller="hello"`. Subdirectories use `--` as separator: `components/modal_controller.js` maps to `data-controller="components--modal"`.
45
46	## HTML Wiring Examples
47
48	### Basic Controller
49
50	```html
51	<div data-controller="hello">
52	<input data-hello-target="name" type="text">
53	<button data-action="click->hello#greet">Greet</button>
54	<span data-hello-target="output"></span>
55	</div>
56	```
57
58	### Values from Server (Twig)
59
60	Pass server data to controllers via value attributes. Values are typed and automatically parsed.
61
62	```html
63	<div data-controller="map"
64	data-map-latitude-value="{{ place.lat }}"
65	data-map-longitude-value="{{ place.lng }}"
66	data-map-zoom-value="12">
67	</div>
68	```
69
70	Available types: `String`, `Number`, `Boolean`, `Array`, `Object`. Values trigger `{name}ValueChanged()` callbacks when mutated.
71
72	### Actions
73
74	The format is `event->controller#method`. Default events exist per element type (click for buttons, input for inputs, submit for forms) so the event can be omitted.
75
76	```html
77	{# Explicit event #}
78	<button data-action="click->hello#greet">Greet</button>
79
80	{# Default event (click for button) #}
81	<button data-action="hello#greet">Greet</button>
82
83	{# Multiple actions on same element #}
84	<input type="text"
85	data-action="focus->field#highlight blur->field#normalize input->field#validate">
86
87	{# Prevent default #}
88	<form data-action="submit->form#validate:prevent">
89
90	{# Keyboard shortcuts #}
91	<div data-action="keydown.esc@window->modal#close">
92	<input data-action="keydown.enter->modal#submit keydown.ctrl+s->modal#save">
93
94	{# Global events (window/document) #}
95	<div data-action="resize@window->sidebar#adjust click@document->sidebar#closeOutside">
96	```
97
98	### CSS Classes
99
100	Externalize CSS class names so controllers stay generic:
101
102	```html
103	<button data-controller="button"
104	data-button-loading-class="opacity-50 cursor-wait"
105	data-button-active-class="bg-blue-600"
106	data-action="click->button#submit">
107	Submit
108	</button>
109	```
110
111	```javascript
112	// In controller
113	this.element.classList.add(...this.loadingClasses);
114	```
115
116	### Multiple Controllers
117
118	An element can have multiple controllers:
119
120	```html
121	<div data-controller="dropdown tooltip"
122	data-action="mouseenter->tooltip#show mouseleave->tooltip#hide">
123	<button data-action="click->dropdown#toggle">Menu</button>
124	<ul data-dropdown-target="menu" hidden>...</ul>
125	</div>
126	```
127
128	### Outlets (Cross-Controller Communication)
129
130	Reference other con

People who liked this also viewed

6 picks

Type

stimulus

163stars12forks

View on GitHub

How to install stimulus?

smnandre/symfony-ux-skills/stimulus

$npx -y skills add smnandre/symfony-ux-skills --skill stimulus

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Stimulus
2
3	Modest JavaScript framework that connects JS objects to HTML via data attributes. Stimulus does not render HTML -- it augments server-rendered HTML with behavior.
4
5	The mental model: HTML is the source of truth, JavaScript controllers attach to elements, and data attributes are the wiring. No build step required with AssetMapper.
6
7	## Quick Reference
8
9	```
10	data-controller="name" attach controller to element
11	data-name-target="item" mark element as a target
12	data-action="event->name#method" bind event to controller method
13	data-name-key-value="..." pass typed data to controller
14	data-name-key-class="..." configure CSS class names
15	data-name-other-outlet=".selector" reference another controller instance
16	```
17
18	## Controller Skeleton
19
20	```javascript
21	// assets/controllers/example_controller.js
22	import { Controller } from '@hotwired/stimulus';
23
24	export default class extends Controller {
25	static targets = ['input', 'output'];
26	static values = { url: String, delay: { type: Number, default: 300 } };
27	static classes = ['loading'];
28	static outlets = ['other'];
29
30	connect() {
31	// Called when controller connects to DOM
32	}
33
34	disconnect() {
35	// Called when controller disconnects -- clean up here
36	}
37
38	submit(event) {
39	// Action method
40	}
41	}
42	```
43
44	File naming convention: `hello_controller.js` maps to `data-controller="hello"`. Subdirectories use `--` as separator: `components/modal_controller.js` maps to `data-controller="components--modal"`.
45
46	## HTML Wiring Examples
47
48	### Basic Controller
49
50	```html
51	<div data-controller="hello">
52	<input data-hello-target="name" type="text">
53	<button data-action="click->hello#greet">Greet</button>
54	<span data-hello-target="output"></span>
55	</div>
56	```
57
58	### Values from Server (Twig)
59
60	Pass server data to controllers via value attributes. Values are typed and automatically parsed.
61
62	```html
63	<div data-controller="map"
64	data-map-latitude-value="{{ place.lat }}"
65	data-map-longitude-value="{{ place.lng }}"
66	data-map-zoom-value="12">
67	</div>
68	```
69
70	Available types: `String`, `Number`, `Boolean`, `Array`, `Object`. Values trigger `{name}ValueChanged()` callbacks when mutated.
71
72	### Actions
73
74	The format is `event->controller#method`. Default events exist per element type (click for buttons, input for inputs, submit for forms) so the event can be omitted.
75
76	```html
77	{# Explicit event #}
78	<button data-action="click->hello#greet">Greet</button>
79
80	{# Default event (click for button) #}
81	<button data-action="hello#greet">Greet</button>
82
83	{# Multiple actions on same element #}
84	<input type="text"
85	data-action="focus->field#highlight blur->field#normalize input->field#validate">
86
87	{# Prevent default #}
88	<form data-action="submit->form#validate:prevent">
89
90	{# Keyboard shortcuts #}
91	<div data-action="keydown.esc@window->modal#close">
92	<input data-action="keydown.enter->modal#submit keydown.ctrl+s->modal#save">
93
94	{# Global events (window/document) #}
95	<div data-action="resize@window->sidebar#adjust click@document->sidebar#closeOutside">
96	```
97
98	### CSS Classes
99
100	Externalize CSS class names so controllers stay generic:
101
102	```html
103	<button data-controller="button"
104	data-button-loading-class="opacity-50 cursor-wait"
105	data-button-active-class="bg-blue-600"
106	data-action="click->button#submit">
107	Submit
108	</button>
109	```
110
111	```javascript
112	// In controller
113	this.element.classList.add(...this.loadingClasses);
114	```
115
116	### Multiple Controllers
117
118	An element can have multiple controllers:
119
120	```html
121	<div data-controller="dropdown tooltip"
122	data-action="mouseenter->tooltip#show mouseleave->tooltip#hide">
123	<button data-action="click->dropdown#toggle">Menu</button>
124	<ul data-dropdown-target="menu" hidden>...</ul>
125	</div>
126	```
127
128	### Outlets (Cross-Controller Communication)
129
130	Reference other con

People who liked this also viewed

6 picks

Type