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

12.

The Values API

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

7 Comments

Sort By

Login or Register to join the conversation

Andromadus 4 years ago edited

Good day there and the rest of the awesome SymfonyCasts team.

I have been using Symfony to develop web apps and recently decided to give Stimulus a try.

The journey has been smooth... Till I found an issue while attempting to use the Values API.

This works:
static values = { myIndex: Number };

However, this doesn't:

 static values = { myIndex: { type: Number } };```

According to the official docs at https://stimulus.hotwired.dev/reference/values , this should be possible.

After some investigation, I discovered some things:

The new syntax (the one that doesn't work) wasn't possible until a recent update to Stimulus (version 3.0.0)
The stimulus core package that Symfony UX/Stimulus bridge uses is on version 2.0.0.

In summary, the stimulus dependency needs an urgent update.

I hope this gets resolved soon though. I'm not sure of what other cool features are available in V3.

Thank you. I wish you all the best.

|

weaverryan SFCASTS Andromadus 4 years ago edited

Hey Andromadus!

Nice to chat with you :). V3 does have some cool stuff - but it's not a giant update. The values API has a new way to define optional values and there's a new debug mode, which I think is really cool. There are a few other things - you can read about them here - https://world.hey.com/hotwi... - but nothing major. The biggest reason they released a version 3 (and not a version 2.1) was that they renamed the package to @hotwired/stimulus. We will add some notes to the tutorial soon - but only once we have updated the Symfony UX tools for Stimulus 3.

> 2. The stimulus core package that Symfony UX/Stimulus bridge uses is on version 2.0.0.

Correct. I have a PR to upgrade to Stimulus 3 - https://github.com/symfony/... - and PR on the UX repository https://github.com/symfony/... - but we're not in a huge rush. I'd like to see the stimulus-use library release their v3 support first, ideally. But all the pieces are in place to support Stimulus 3.

> 1. The new syntax (the one that doesn't work) wasn't possible until a recent update to Stimulus (version 3.0.0)

Totally :). The old syntax works fine. The new syntax only works on Stimulus 3. However, I wouldn't use that syntax (just because it's longer) unless I actually needed to specify a default value for my value.

Let me know if you have any other questions about all of this :). The tl;dr is that Symfony UX will use Stimulus v3 soon & we'll add some notes about it in this tutorial... but other than the package name (and a couple of cool features), nothing much has changed.

Cheers!

|

jvh 5 years ago edited

Hmm, I'm getting this too but I thought it was working earlier - I have WebpackEncoreBundle v1.11.1

there how do I go about debugging why it would not be finding the stimulus_controller function? Thanks!

|

Victor SFCASTS jvh 5 years ago

Hey John,

> how do I go about debugging why it would not be finding the stimulus_controller function? Thanks!

Not sure if it is possible, sorry. I think the best you can do - write a console.log('hit!') in that file to make sure you're hitting that code that is responsible to finding the stimulus_controller function. If it is hit - you will see that "hit!" message in Console tab of your Chrome browser, and if so - you will need to double check your paths to the files, and the regular expression. If it's not hit - you will know the error now, try yo find the reason why it's not hit.

I hope it helps! Sorry I can't help more

Cheers!

|

weaverryan SFCASTS 5 years ago

Woohoo! Thanks for posting back that it worked!

> I stay curious about the upcoming symfony ux

I'm really excited about all this stuff - I'm releasing them as fast as a I can (though, I'm also still coding up the final chapters!)

Cheers!

|

weaverryan SFCASTS 5 years ago edited

Hey there!

Hi back to you from (currently) sunny Grand Rapids, MI :).

Hmm. This function is a new feature in WebpackEncoreBundle v1.11.0. Check what version you have with composer show symfony/webpack-encore-bundle. If it's too old, update it with composer update symfony/webpack-encore-bundle.

Let me know if that helps!

Cheers!

|

weaverryan SFCASTS weaverryan 5 years ago

Oh, also, I should say, if you started coding along with this tutorial RIGHT when it was released... then you installed WebpackEncoreBundle before that feature even existed - it's very new. So that might explain it :)

|

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