Possibility to target a composant instance by its id when emitting an event

[pink6440]

Hello,

I was wondering it there was a specific reason to not be able to target a specific composant instance when emitting an event.

why does i need this ?
Targetting a component by its name made all instances be notified of an event ;
Sometimes, i just want to notify the first parent or a specific component instance (when many component of same class are present in the page).

Also, it can avoid many unneccessary XHR requests when an event is emitted.

I had modify the live_controller.js to handle the case of the component name parameter is looking like #componentId but i was wondering if there was a specific reason to not have this feature from the start.

[smnandre]

How would you do this in Javascript & DOM Events ? Or in PHP / Symfony with EventDispatcher ?

[pink6440]

According to what i had understood about the way it works :

• the event is emitted from php side (using the usual UX emit method)

• but the dispatching of the event to the targeted instance should be done with the javascript side

• the idea is to make all things works like with a basic emit usage

• for now, it does not solve the case of targeting the first parent, only the case of targeting a component by its id

Here is a basic example of usage ;

Example : (on the php side)

• instanciation of the component emitting the event :

{{ component('componentA',{id : 'componentA1' } }}
{{ component('componentA',{id : 'componentA2',friend: '#componentA1' } }}

• in the componentA source :

#[LiveComponent(name: "componentA")]
class MyComponentA {

  #[LiveProperty]
  public ?string $friend = null ;

  public someMethod() {
    ...
    if ($this->friend) {
      $this->emit('hello',$this->friend);   //  eg : $this->emit('hello','#componentA1');
    }
    
  }
  
 #[LiveListener('hello')]
  public function onHello() {
    ...
  }

}

My way to do it for now

• It's a first try
• On the live_controller.js, around line 148 :

const findComponents = (currentComponent, onlyParents, onlyMatchName) => {
    const components = [];
    componentMapByComponent.forEach((componentName, component) => {

        // handling cases for componentName is starting with a #
        
        if (onlyMatchName && onlyMatchName[0]=='#' && '#' + component.id == onlyMatchName) {
            components.push(component);
            return ;
        }
        
        // handling cases for componentName is starting with a #

        if (onlyParents && (currentComponent === component || !component.element.contains(currentComponent.element))) {
            return;
        }

        if (onlyMatchName && componentName !== onlyMatchName) {
            return;
        }

        components.push(component);
    });
    return components;
};

[smnandre]

To be honest my question was more "how would you do this if you were not using LiveComponent?"

Because event very rarely allow a recipient...

To me, the second we start targetting a specific instance, it's not an event but a message/command 🤷

But this is a feature that would please more than one person, so :)