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

28.

Webpack Bundle Analyzer

|

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 Challenge

Next Chapter

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

15 Comments

Sort By

Login or Register to join the conversation

Benjamin-A 4 years ago edited

On my windows 10 env I've got a syntax error runing webpack-bundle-analyzer command because the json file had a BOM.

Couldn't read webpack bundle stats from "D:\STINO\code-stimulus\mine\stats.json":<br />SyntaxError: Unexpected token � in JSON at position 0

I removed the BOM and it worked !

|

Stuart-N Benjamin-A 1 year ago

how did you remove it I have the same issue

|

Benjamin-A Stuart-N 1 year ago

I guess just by removing the first (invisible) character ?

|

Stuart-N Benjamin-A 1 year ago edited

Well I tried that firstly there isn't anything to see in notepad. So i searched online and found the following.

So I used Hex Editor Neo and found spurious characters prior to the opening curly brace and deleted those. Then re ran the webpack analyzer and got this new error..

Couldn't read webpack bundle stats from "C:\Apache24\htdocs\symfonyux\stats.json":
SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)

|

Victor SFCASTS Stuart-N 1 year ago

Hey Stuart,

Hm, probably try to open that file in the IDE like PhpStorm, it has syntax highlighting for JSON files, probably it will hint you on the problematic spot. Or try some online json validators - may help as well.

Cheers!

|

Stuart-N Stuart-N 1 year ago

lol going round in circles every time I delete the characters and rerun the analyzer they just re-appear. Think I will have to find another method possibly.

|

Victor SFCASTS Stuart-N 1 year ago

Hey Stuart,

Are you on Windows? It might be related I think. you need to try change that file in a different editor, probably with the correct chartset/encoding.

I hope that helps!

Cheers!

|

Stuart-N Victor 1 year ago

Apologies for the delay been doing the family guy stuff over xmas...

Yes a windows machine and i normally use VS code so Ill try phpstorm to check the characters.

|

Stuart-N Stuart-N 1 year ago

phpStorm gave the same problem..

yarn run v1.22.22
$ C:\Apache24\htdocs\symfonyux\node_modules.bin\webpack-bundle-analyzer stats.json public/build
Couldn't read webpack bundle stats from "C:\Apache24\htdocs\symfonyux\stats.json":
SyntaxError: Unexpected token '�', "��{"ha"... is not valid JSON
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS C:\Apache24\htdocs\symfonyux>
Going to look for online file validator

|

Victor SFCASTS Stuart-N 1 year ago

Hey Stuart,

Yeah, Windows is probably most likely guilty here. Yeah, you definitely need to fix the encoding somehow, IIRC Notepad++ editor for Windows allows you to save in different encodings, probably other apps too, but you need to google how to do it correctly. I suppose you need UTF-8 encoding, but if that does not help, probably try the reverse: Windows-1251.

Sorry can't help more on it, I hope it will helps!

Cheers!

|

Stuart-N Victor 1 year ago

found a little work around upload the generated file to
JSON Validator / Formatter

then downloaded its version and replaced the original and it works.

A bit clunky but gets the result

|

Victor SFCASTS Stuart-N 1 year ago

Hey Stuart,

I'm glad to hear it worked for you wit this workaround, and thanks for confirming it worked for you this way, I bet it might be useful for our Windows friends :)

It still sounds like you should fix the encoding somehow in your OS... but at least you unblock yourself with this workaround, well done!

Cheers!

1 |

MolloKhan SFCASTS Benjamin-A 4 years ago

Hey Benjamin,

It's always tricky to make things work on Windows. Thanks for sharing your solution

Cheers!

|

Ian-M 5 years ago edited

...Not webpack-bundle-analyser which does exist but isn't related

|

MolloKhan SFCASTS Ian-M 5 years ago

Ha! Who would imagine... thanks for sharing it to others. Cheers!

|

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 Challenge

Next Chapter