[LiveComponent] Add informations for AssetMapper and Stimulus

[TBoileau]

I tried to reproduce this part of the documentation, without success.

There's no bug, just some missing information in the documentation.

How to reproduce this issue :

• Create a webapp project

• Install AssetMapper : composer require symfony/asset-mapper symfony/asset symfony/twig-pack

• Install LiveComponent : composer require symfony/ux-live-component

• Install Stimulus : composer require symfony/ux-live-component

• Create a Live component :

<?php

declare(strict_types=1);

namespace App\Component;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent('foo')]
class FooComponent
{
    use DefaultActionTrait;


    #[LiveProp]
    public int $count = 0;

    #[LiveAction]
    public function increase(): void
    {
        $this->count++;
    }
}

• Create the Twig file :

<div {{ attributes.defaults(stimulus_controller('foo')) }}>
    {{ count }}
</div>

• And create the stimulus controller foo_controller.js :

import { Controller } from '@hotwired/stimulus';
import { getComponent } from '@symfony/ux-live-component';

export default class extends Controller {
    async initialize() {
        this.component = await getComponent(this.element);

        this.component.action('increase');
    }
}

• First error in the browser console :

Uncaught TypeError: Failed to resolve module specifier "@symfony/ux-live-component". Relative references must start with either "/", "./", or "../".

• To fix this error, I add a new entry in importmap.php :

<?php

return [
    //...
    '@symfony/ux-live-component' => [
        'path' => '@symfony/ux-live-component/live_controller.js',
    ],
];

• New error in the browser console :

Uncaught (in promise) Error: Component not found for element <div data-controller="foo live" [...]

• To fix this, I add a new entry in assets/controllers.json :

{
  "controllers": {
    "@symfony/ux-live-component": {
      "live": {
        "enabled": true,
        "fetch": "eager"
      }
    }
  },
  "entrypoints": []
}

• And now, we can see the property count increase to 1 and re-render the component automatically.

So I've added a bit of documentation, but please excuse my poor English.

[WebMamba]

I think I know what goes wrong here. You installed the LiveComponent bundle before the StimulusBundle. This is explained in the doc here https://symfony.com/bundles/ux-live-component/current/index.html#installation :

Before you start, make sure you have [StimulusBundle configured in your app]

But like you, I made the mistake multiple times.
So I don't think we should talk about the assets/controller.json here, but maybe we can add a more detailed section on how to install the Stimulus Bundle directly into this page. Or maybe write something more visual that the StimulusBundle should be installed first. And I wonder if when installing the LiveComponentBundle we can execute the StimulusBundle recipe?

[TBoileau]

I think it might be a good idea to give a little more highlight to the message you quote in the documentation.

[WebMamba]

Same thing here this is part of the StimulusBundle recipe

[weaverryan]

I've just merged a PR to add docs about installing StimulusBundle before LiveComponents (or any other package). Hopefully that will help :).

Cheers!