Add Stimulus in Sylius 1.13

stimulus_in_sylius1_13.md

requirements
StimulusJS	know stimulusJs.
webpack	know webpack encore
Sylius	test on v1.13
PHP	8.3

How to implement stimulusJS in the Sylius(1.13).

First, install the StimulusBundle

composer require symfony/stimulus-bundle

npm  install --force

and then Edit the webpack.config.js. he contains two config object to the Admin and Shop. we go to config the shop in this exemple.

Add 'enableStimulusBrige(line 16) init the stimulus config

Encore
    .setOutputPath('public/build/app/shop')
    .setPublicPath('/build/app/shop')
    .enableStimulusBridge('./assets/controllers.json')
    .addEntry('app-shop-entry', './assets/shop/entry.js')
    .disableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSassLoader();

in the assets folder

./assets

• create a folder "controllers"
• create a file "controllers.json" and add this content

  {
    "controllers": [],
    "entrypoints": []
  }     

• create the new file "bootstrap.js" and add this content.

    // assets/bootstrap.js
    import { startStimulusApp } from '@symfony/stimulus-bridge';

    // Registers Stimulus controllers from controllers.json and in the controllers/ directory
    export const app = startStimulusApp(require.context(
        '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
        true,
    /\.[jt]sx?$/
    ));

• Now we can add bootstrap in the main js file Shop "assets/shop/entry.js"

import '../bootstrap';

from now we can use the Stimulus controller. let's go to the test.

we will create a traditional hello_controller to validate the configuration. "assets/controllers/hello_controller.js"

import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
  connect() {
    this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
    console.log('Hello Stimulus! Edit me in assets/controllers/hello_controller.js');
  }
}

we can call a stimulus controller like this:

   <div {{ stimulus_controller('hello') }}>
        <h1>Je suis la </h1>
    </div>

don't forget to run the assets build command and use often clear:cache after update

npm run watch