So, what can @coderabbitai do?

✅ It can be configured to match your needs (style, what they analyze, skipping PRs with a specific tag/drafts, and more).
✅ Add code suggestions
✅ Provide nitpick comments
✅ Generate a PR summary
✅ Fix our English 😅
...and many more :D

Some time ago I started my open-source pet project, but as usual when we talk about solo maintaining, there's a high risk of accidental mistakes.

Also, for the past few months, I've been more into using AI on a daily basis. This thread is about a tool helping in a code review. 🧵
#AIforDevs

8/ The next example is managing product attributes. It's really huge and it required a lot of work. We won't dive into details (still, we're in a thread on X), but just see what you're able to do with Symfony UX, PHP code, and 14 lines of custom JavaScript code 🌞.

6/ Statistics

The main driver to create statistics as a separate component was to allow putting them anywhere, without a need to pass data down.

Component resolves data and creates a chart. Thanks to live actions without reloading a page, we can change the time span and move between periods.

3/ From a back-end perspective, a live component is a service having data and actions.

Calling the `/_component/MyLiveComponent/myActionName` route results in invoking the `myActionName` method in the `MyLiveComponent` class.

Of course, the class and method must be configured (attributes).

2/ From the front-end perspective, the live component is an element with a bounded `live` controller (via the `data-controller` attribute).

Thanks to it, we can define that after clicking a button, an HTTP request is sent to a specific route with a live component name and action name.

Day #4 of #SymfonyUXExplained is dedicated to... Live Components! In my opinion, the most important part of the Symfony UX.

Today, we'll see:
🤔 What are Live Components?
🤔 How does it work?
🤔 Real-life examples
🤔 Summary

Are you ready 👀🧵👇🏻

8/ Then in our code (which is a form theme in this case), we use the `stimulus_controller` Twig helper to point out that our `CompoundFormErrors` controller should be bound.

Such a created controller works for both full-page reloads and dynamic changes 🥳.

7/ We have a Stimulus controller. `Initialize` and `connect` are lifecycle events. In the first one we declare a mutation observer that informs us about changes in the DOM. The second one is run when a component is mounted and runs the check for the first time.

At least in simple words 😅.

6/ Sylius has a custom stimulus controller to display the number of errors a form has.

So we need some JavaScript code that looks for fields with a specific CSS class marking that a specific field has an error.

Let's see how it's done! 👇🏻

4/ Moreover, Symfony UX takes this integration to a higher level. Instead of writing the data-controler="..." manually, it provides Twig functions like render_chart(...). So, rendering a chart is as simple as you might see on the example below.

3/ How does Symfony UX use it? Stimulus is the heart of Symfony UX.

You can find it in almost any Symfony UX package! The main goal of Stimulus in Symfony UX here is to provide binding, so once we mark div with `data-controller="symfony--ux-chartjs--chart"` it will initialize Chart.js in it!

2/ Below we might see an example code we can find on both React and Stimulus pages.

You can imagine that your #Symfony app is already existing. Without rewriting your whole app to React, you can simply, behavior by behavior, add Stimulus to your page.

Next day, next #SymfonyUXExplained. Part 3 more precisely 😎.

Today's topic is not strictly Symfony UX, but, being honest, we'll talk about the heart of Symfony UX. What do I mean?! Stimulus ⚡️

🤔 What is Stimulus?

🤔 How does Symfony UX use it?

🤔 Examples!

... and more 🧵.

But for years we've been using this approach in some places in @Sylius, as we had no better way to handle it. As you might see on the screenshots, it's easier to pass data to components, because we might pass whole objects, whereas controllers can take only scalar or array data as query params.