Skip to content

Commit

Permalink
Merge branch 'symfony:2.x' into 2.x
Browse files Browse the repository at this point in the history
  • Loading branch information
smnandre authored Aug 13, 2024
2 parents 9b3ecbe + 92ad2de commit 9480ab5
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 22 deletions.
2 changes: 1 addition & 1 deletion src/Map/doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ This bundle aims at following the same Backward Compatibility promise as
the Symfony framework:
https://symfony.com/doc/current/contributing/code/bc.html

.. _`the Symfony UX initiative`: https://symfony.com/ux
.. _`the Symfony UX initiative`: https://ux.symfony.com/
.. _StimulusBundle configured in your app: https://symfony.com/bundles/StimulusBundle/current/index.html
.. _`Google`: https://github.com/symfony/symfony-ux/blob/{version}/src/Map/src/Bridge/Google/README.md
.. _`Leaflet`: https://github.com/symfony/symfony-ux/blob/{version}/src/Map/src/Bridge/Leaflet/README.md
42 changes: 21 additions & 21 deletions ux.symfony.com/cookbook/component_architecture.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@ title: Component architecture
description: Rules and pattern to work with components
image: images/cookbook/component-architecture.png
tags:
- javascript
- symfony
- JavaScript
- Symfony
author: Mathéo Daninos
published_at: '2024-08-02'
---

## Introduction

In SymfonyUX exist two packages: [TwigComponents](https://symfony.com/bundles/ux-twig-component/current/index.html) and [LiveComponent](https://symfony.com/bundles/ux-live-component/current/index.html).
In Symfony UX exist two packages: [TwigComponents](https://symfony.com/bundles/ux-twig-component/current/index.html) and [LiveComponent](https://symfony.com/bundles/ux-live-component/current/index.html).
Those two packages allow you to create reusable components in your Symfony application.
But the component architecture is not exclusive to Symfony, it is a design pattern that can be applied to any programming language or framework.
And the js world already implement this architecture for long time, on many different frameworks like React, Vue, or Svelte.
So, a set of rules and pattern has already be defined to work with components. This is why SymfonyUX try to be as close as possible to those rules.
So let's see what are those rules!
But the component architecture is not exclusive to Symfony, it's a design pattern that can be applied to any programming language or framework.
And the Javascript world already implements this architecture for long time, on many different frameworks like React, Vue, or Svelte.
So, a set of rules and patterns has already be defined to work with components. This is why Symfony UX tries to be as close as possible to those rules.
So, let's see what those rules are!

## 4 Rules

Expand All @@ -43,27 +43,25 @@ Or you can make composition with the following syntax:

```twig
<twig:Card>
<twig:CardHeader>
<h2>My Card</h2>
</twig:CardHeader>
<twig:CardBody>
<p>This is the content of my card.</p>
</twig:CardBody>
<twig:Icon name="info"/>
<twig:Button>
<twig:Icon name="close" />
</twig:Button>
</twig:Card>
```

So here we Card component, and we give to the content of this component mutliple other components.
So here we have a Card component, and we give to the content of this component two other components.

### Independence

This is a really important rule, and not obvious. But your component should leave on his own context,
he should not be aware of the rest of the page. You should to talk one component into a page, to another and it should work exactly the same.
This rule make your component trully reusable.
This is a really important rule, and not obvious. But your component should live on his own context,
it should not be aware of the rest of the page. You should be able to take a component into a page, from another and it should work exactly the same.
This rule makes your component truly reusable.

***How does it work into Symfony?***

Symfony keep the context of the page into the context of your component. So this your own responsability to follow this rules.
But notice that if there are conflic between a variable from the context page and your component, your component context override the page context.
Symfony keeps the context of the page into the context of your component. So this your own responsibility to follow those rules.
But notice that if there are conflicts between a variable from the context page and your component, your component context overrides the page context.

### Props

Expand Down Expand Up @@ -119,7 +117,7 @@ And when the loading is done, the state `loading` can be set to `false` and the

***How does it work into Symfony?***

In symfony you 2 different approach to handle state. The first one is to use stimulus directly
In Symfony you have two different approaches to handle state. The first one is to use stimulus directly
in to your component. What we recommend to do is to set a controller stimulus at the root of your component.

```twig
Expand Down Expand Up @@ -161,9 +159,11 @@ the following component:
#[AsLiveComponent]
class Button
{
#[LiveProp]
use DefaultActionTrait;

public int $clicks = 0;

#[LiveAction]
public function increment()
{
$this->clicks++;
Expand Down

0 comments on commit 9480ab5

Please sign in to comment.