Chapters

46 Chapters | 4:55:39 |

01

Symfony UX

5:34
02

Setting up Webpack Encore

5:11
03

encore watch & Code Splitting

4:06
04

Stimulus Controllers

5:53
05

Magic with Events, Properties & HTML from Ajax

4:43
06

Targets: Finding Elements

6:41
07

Actions: Listening to Events

4:43
08

Bootstrapping a "Color Selector" Form Element

9:06
09

Actions & currentTarget

6:41
10

Element.dataset

4:52
11

State in your Controller

6:26
12

The Values API

7:03
13

On Value Change Callback

8:07
14

Search Suggestions

5:49
15

Ajax with fetch(), Polyfills & async/await

5:24
16

HTML-Returning Ajax Endpoint

6:06
17

Stimulus Behaviors: stimulus-use

6:37
18

Form Submit Confirmation Controller

6:22
19

Making a Configurable, Reusable Controller

7:47
20

Multi Controller Communication

9:09
21

Listening to An Event From Another Controller

6:25
22

Ajax-Powered HTML Updates & a CSS Transition

5:13
23

Symfony UX & Chart.js

7:48
24

stimulus-bridge: How UX Packages Work

6:55
25

Extending a UX Controller

8:43
26

React (or Vue) ❤️ Stimulus

6:48
27

Pass Server Data Directly to React Props

7:02
28

Webpack Bundle Analyzer

4:58
29

Async/Dynamic import()

7:26
30

Magic: Lazy-Loading UX Controllers

5:13
31

Making your Custom Controllers Lazy

3:58
32

Product CRUD

7:42
33

Opening a Modal

8:14
34

Loading a Form into the Modal

8:46
35

Ajax-Submitting an Entire Form

6:25
36

Correcting the Form Action & Preventing Default

4:30
37

Ajax Form Response Status Codes

9:36
38

Ajax Element Reloading Controller

6:23
39

Dispatching an Event from modal-form

4:25
40

Reusing the "Reload Content" Controller

5:12
41

CSS Transitions with useTransition

7:05
42

CSS Transition Classes

5:03
43

Free 3rd Party Controllers!

4:31
44

Using the autocomplete-controller

9:45
45

Autocomplete with Transitions

6:08
46

useTransition in a Neat, Reusable Module

5:00

> JavaScript Frameworks & Tools > Symfony UX: Stimulus

Buy Access to Course

06.

Targets: Finding Elements

|

Autoplay

Previous Chapter

Next Challenge

Login or register to check out the script

11 Comments

Sort By

Login or Register to join the conversation

Lucinda M. 4 years ago edited

Hi, I just wanted to add a bit of info about the static targets = [] syntax, since I've discovered it is not supported in Safari. The workaround is to use the alternative syntax:


static get targets() {
    return [];

1 |

shadowc Lucinda M. 4 years ago edited

Hi Lucinda!

When you run yarn run dev or yarn run watch, Babel is making sure in the background that you end up with code that current browsers can understand (this comes out of the box with encore, by the way!).

So, in reality, the code we end up with is:


Controller.targets = [];

Which is basically ES5 compatible and totally fine!

|

Victor SFCASTS Lucinda M. 4 years ago

Hey Lucinda,

Oh, we didn't know it does not work in Safari somehow. Thanks for reporting it and sharing your solution with others!

Cheers!

|

Samuel W. 5 years ago

Hey Ryan,

great series, like always :D I see you are using PHPStorm as well. Do you know if there is a way to get rid of those "Unresolved variable"-squigglies under the values and target variables?

1 |

Kaizoku Samuel W. 3 years ago

Hi Samuel, 1 year later did you find something ?

|

Victor SFCASTS Samuel W. 5 years ago

Hey Samuel,

Unfortunately, I can't find any PhpStorm plugin for Stimulus, so the only way probably to disable unresolved vars check in the whole project, including JS files. I believe you can do it via PhpStorm Preferences -> search for "Unresolved variable" and uncheck the checkbox on "Unresolved JS var", thought I didn't try this. Here's the screenshot: https://imgur.com/a/NvL6qWz

Or just ignore them and maybe it will be fixed in future versions.

Cheers!

|

Tomasz N. Victor 4 years ago

Hi Victor, maybe SymfonyCast should make that plugin even payble. I would gladly buy it for a dozen / several dozen dollars such a plug and I suspect that many others will also.
Regards.

1 |

Victor SFCASTS Tomasz N. 4 years ago

Hey Hesus,

Thank you for your interest in this :) Unfortunately, we don't create plug-ins for PhpStorm, sorry, we only create tutorials. So it's up to community. If you know how to create PhpStorm plugin - please, feel free to create something that may help.

Cheers!

|

Shiraats 5 years ago

Hey

I'm really enjoying this Stimulus series but I have question around sharing data between Controllers. I would this be done? Also how would you update a Target that exist in One Controller with Action that exist in another Controller?

|

weaverryan SFCASTS Shiraats 5 years ago edited

Hey @Shiraats!

Excellent question! To answer it fully, could you think of a real (or kinda real) use case for each part of your question?

but I have question around sharing data between Controllers. How would this be done?

There are ways to make controllers talk to each directly, but I kind of think this is a "last resort". The answer depends on the situation, but there are a few ways. For example, one controller could dispatch an event on a specific element - e.g. this.someElementTarget.dispatchEvent(new Event('some-event-name')). Then, another controller could listen to this event (with an action) on that element - e.g. <span data-action="some-event-name->other-controller-name#methodName">.

I guess this sort of answers both your questions. Another way of sharing data is to set data onto the `dataset</code of elements that both controllers have access to. But again, it depends on your situation. I have not hit many situations yet where I have 2 controllers that need to talk to each other.

Cheers!

|

Shiraats weaverryan 5 years ago edited

Hi weaverryan

Thanks that makes sense. So its something similar to emitting an event in one vuejs component and then listening for that event in another component.

If I had to give an example of a use case in this tutorial it would be like adding an item to my cart which is managed by one controller and then updating the the number of items in the cart in the navbar which is managed by another controller.

1 |

This tutorial works perfectly with Stimulus 3!

Symfony 5.2 Stimulus 2

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
        "doctrine/annotations": "^1.0", // 1.11.1
        "doctrine/doctrine-bundle": "^2.2", // 2.2.3
        "doctrine/doctrine-migrations-bundle": "^3.0", // 3.0.2
        "doctrine/orm": "^2.8", // 2.8.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^5.6", // v5.6.1
        "symfony/asset": "5.2.*", // v5.2.3
        "symfony/console": "5.2.*", // v5.2.3
        "symfony/dotenv": "5.2.*", // v5.2.3
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/form": "5.2.*", // v5.2.3
        "symfony/framework-bundle": "5.2.*", // v5.2.3
        "symfony/property-access": "5.2.*", // v5.2.3
        "symfony/property-info": "5.2.*", // v5.2.3
        "symfony/proxy-manager-bridge": "5.2.*", // v5.2.3
        "symfony/security-bundle": "5.2.*", // v5.2.3
        "symfony/serializer": "5.2.*", // v5.2.3
        "symfony/twig-bundle": "5.2.*", // v5.2.3
        "symfony/ux-chartjs": "^1.1", // v1.2.0
        "symfony/validator": "5.2.*", // v5.2.3
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.1
        "symfony/yaml": "5.2.*", // v5.2.3
        "twig/extra-bundle": "^2.12|^3.0", // v3.2.1
        "twig/intl-extra": "^3.2", // v3.2.1
        "twig/twig": "^2.12|^3.0" // v3.2.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.2.3
        "symfony/maker-bundle": "^1.27", // v1.30.0
        "symfony/monolog-bundle": "^3.0", // v3.6.0
        "symfony/stopwatch": "^5.2", // v5.2.3
        "symfony/var-dumper": "^5.2", // v5.2.3
        "symfony/web-profiler-bundle": "^5.2" // v5.2.3
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.12.13
        "@popperjs/core": "^2.9.1", // 2.9.1
        "@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
        "@symfony/webpack-encore": "^1.0.0", // 1.0.4
        "bootstrap": "^5.0.0-beta2", // 5.0.0-beta2
        "core-js": "^3.0.0", // 3.8.3
        "jquery": "^3.6.0", // 3.6.0
        "react": "^17.0.1", // 17.0.1
        "react-dom": "^17.0.1", // 17.0.1
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "stimulus": "^2.0.0", // 2.0.0
        "stimulus-autocomplete": "^2.0.1-phylor-6095f2a9", // 2.0.1-phylor-6095f2a9
        "stimulus-use": "^0.24.0-1", // 0.24.0-1
        "sweetalert2": "^10.13.0", // 10.14.0
        "webpack-bundle-analyzer": "^4.4.0", // 4.4.0
        "webpack-notifier": "^1.6.0" // 1.13.0
    }
}

Previous Chapter

Next Challenge