Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TwigComponents] Communication between two component on server-side #1896

Closed
tito10047 opened this issue Jun 7, 2024 · 13 comments
Closed

[TwigComponents] Communication between two component on server-side #1896

tito10047 opened this issue Jun 7, 2024 · 13 comments
Labels
LiveComponent question Further information is requested

Comments

@tito10047
Copy link

Hi,
is it possible to communicate between two components on server-side without emitting a JavaScript event? I have two independent components and I need to send an event from one component to the other.

I need to emit it when the page is rendered without user input.

I need exactly this:
When one (one from many) component is rendered, its loaded from database some status. In some algoritmus is calculated and detected if is going something wrong.
In second compoent I want detect if in some components of this page is going wrong and if yes change icon of its element.

Any idea how I can do this?
Thanks

@tito10047 tito10047 changed the title Communication between two component on server-side [TwigComponents] Communication between two component on server-side Jun 7, 2024
@WebMamba
Copy link
Collaborator

WebMamba commented Jun 8, 2024

You can simply use the emit function from ComponentToolsTrait https://symfony.com/bundles/ux-live-component/current/index.html#communication-between-components-emitting-events

@smnandre
Copy link
Member

smnandre commented Jun 9, 2024

Well,

without emitting a JavaScript event

If you meant "emitting a Javascript myself" @WebMamba is 100% right to say "events" are the way to communicate between instances.

If you meant "with no event beeing dispatched or passing by the front well... it's not possible. As state holders, live components are in the DOM browsers and thus they will need to pass by the Live Controller at a certain point.

Finally, if you meant "between two components that do not know anything about the other, but as a developer i in fact do", then you maybe could use classic PHP Event dispatch ?

@smnandre smnandre added LiveComponent question Further information is requested labels Jun 9, 2024
@tito10047
Copy link
Author

I talking about classic twigComponent, not live component.
Yes, its third scenario.
But how I can listen event in one component thats dispatched in other component? that is not posible in symfony, not? because listener must be self services, not twig components.

@smnandre
Copy link
Member

You are right,

I'd also say personnaly that maybe they even should not do this, as component are often more "isolated context" than statefull scopes.

What is your real use case there ? Maybe we can suggest alternative solutions ?

@tito10047
Copy link
Author

tito10047 commented Jun 12, 2024

I want change favicon based on status from other components.
I have 2 types of component that change page status in 10 instances. so in page is 20 components. I want from some this component call FaviconComponent for change favicon on page.
This 20 instances do some calculations and result is some status o fomething. if one status is danger, i want change favicon

@smnandre
Copy link
Member

You could do the opposite: all your livecomponents triggers some event when they compute/change status.

And another one listen to these events and refresh the favicon.

What do you think ?

@tito10047
Copy link
Author

Yes, this is exactly what I want. But I did not use livecomponent. only normal twig component.

Now Im changed everything to livecomponent and, of corse, its working. But question from root comment is not answered. How to send event in normnal twig component.

@smnandre
Copy link
Member

Twig components have no state, they are destroyed immediately after render, so they cannot "send" events to the backend, receive other ones, etc etc as no one could answer or use them.

You could use custom Event from Symfony EventDispatcher dispatched from your TwigComponent as I said, but not sure you'd fine exactly what you want there.

So, i think i do have already answered in fact. Nicely and trying to help as much as possible.

@tito10047
Copy link
Author

Yes, I want use symfony EventDispatcher!
But I dont know how. How I can listen event in twig component.
I need send symfony event from one component to another, but I think this is not possible.

@smnandre
Copy link
Member

A Twig component cannot receive event, so no.

@tito10047
Copy link
Author

Thanks

@tito10047
Copy link
Author

tito10047 commented Oct 1, 2024

Hi, I have again same problem in another project.
I have two live components in page. RestaurantCount that show filtered restaurnts count and RestaurantGrid that show restaurants in list.
I want emit event "updateRestaurantCount" from RestaurantGrid after component loaded restaurants from database and Listen it in RestaurantCount. But this is not possible on first page render.

When I update RestaurantGrid with ajax, then count us updated corectly, but On first page load is not work, because there is not layer to send ajax request to load component.

How I can do some like this? take restaurant count from one component and render it in another component? I dont want make two same queries in two components.

@tito10047 tito10047 reopened this Oct 1, 2024
@smnandre
Copy link
Member

smnandre commented Oct 5, 2024

You could potentially reuse the same RestaurantSearch service across both components, storing relevant data within the service instance to avoid duplicate queries.

Alternatively, depending on the nature of your query (e.g., Doctrine ORM entities, external API, etc.), you could implement a caching mechanism within the service to optimize performance.

Another approach might be introducing a third component, such as a ViewController, that listens to changes in the filters, computes the search results based on those filters, and sends the data to the view. This data would include both the result count and the grid.

In this scenario, the RestaurantGrid could be a simple TwigComponent without state (which I would also recommend for your RestaurantCount, as its sole responsibility seems to be displaying the number of results).

@symfony symfony locked and limited conversation to collaborators Oct 5, 2024
@smnandre smnandre converted this issue into discussion #2238 Oct 5, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
LiveComponent question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants