Documentation needed

[zmitic]

I am super-excited for Stimulus+Turbo and already using both but being JS noob, it is very hard to figure how to configure integration with Symfony.

Example:

this is how my bootstrap.js looks like ATM

// loads controllers from my WIP bundle (not yet OSS). Usage is figured by guessing
export const goodies = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./../vendor/...long-path-here.../public/js/dynamic_form',
    true,
    /\.(j|t)sx?$/
));

// admin-only controllers
export const adminApp = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers/admin',
    true,
    /\.(j|t)sx?$/
));

// same setup for future public controllers, not shown here

---

Is it wrong? Absolutely but at least I can play with these new toys.

So is it possible to have some idiot-proof instructions how to separate application controllers (so not everything is in one folder)? Maybe even a way to read nested folders like controllers/admin/users_page/chat/small_controller.js that would not require editing bootstrap.js?

Also; how to create bundles with Stimulus controllers. I tried to figure it from ux bundle but it is hard; most Symfony users are backend developers and not familiar with nodejs packages and how to build them.

---

Offtopic:

I really want to express gratitude for Stimulus integration. It was super-easy to integrate google-places FormType, JS is loaded only when field is focused... No more observers that look for specific element loaded via AJAX.

My site is so fast, it is basically blink and you'll miss it.

[devsigner-xyz]

I'm in a similar situation, I have context separated controllers, but I think the ability to create bootstrap.js per context would be needed, as with a single bootstrap.js a lot of JavaScript is included on pages where it shouldn't be.

I'm in a similar situation, I have context separated controllers, but I think the ability to create bootstrap.js per context would be needed, as with a single bootstrap.js a lot of JavaScript is included on pages where it shouldn't be.

I've tried doing something similar to what you are trying but it doesn't work:

// bootstrap_context_1.js
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers/context_1_controllers_directory',
    true,
    /\.(j|t)sx?$/
));

// bootstrap_context_2.js
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers/context_2_controllers_directory',
    true,
    /\.(j|t)sx?$/
));

So that I could then use each bootstrap.js in the corresponding Encore entrypoint.

// entrypoint_context_1.js
import 'bootstrap_context_1'

// entrypoint_context_2.js
import 'bootstrap_context_2'

And even doing this there would be problems for common components that you want to reuse between different contexts because of the directory structure and the nomenclature that you have to use to use those controllers.

[weaverryan]

Btw, my current "go to" is to, as much as possible, have only one entrypoint in Webpack. If you're worried about packing too much into your one entry package, i take advantage of the "lazy controllers" feature. For example, if we have a stimulus controller that's only used on one page, we'll lazily import that controller.

[zmitic]

@weaverryan Do you have any ELI5 advice how to write controllers inside bundles, and have them connected during install?

[ThomasLandauer]

Taking the idea from https://github.com/symfony/stimulus-bridge/issues/44#issuecomment-1064176223, I found a way: https://stackoverflow.com/q/74448824/1668200

Besides, I think this issue here is mostly the same as https://github.com/symfony/stimulus-bridge/issues/44 , so one of them could be closed.

[weaverryan]

I'll close this, as #44 has a more direct issue description.