Free 3rd Party Controllers!

Hey @weaverryan do you have a solution you could share to somehow include controllers directory that is stored in a bundle? So except for including assets/controllers also to include vendor/myname/bundle/Resources/assets/controller? I cannot figure it out.

Hey Tomasz-I !

Hmm, that's an interesting question! You have a few options:

a) Simplest: Manually register them. With this solution, you're not loading an entire directory from a bundle, you just register the controllers you need one-by-one. I mention this first, because it's perfectly straightforward. In bootstrap.js:

import SomeImportedController from '../vendor/myname/bundle/Resources/assets/controller/some_controller.js';

// all the normal stuff

app.register('some_controller_name', SomeImportedController);

b) Next simplest, and more of what you are after: importing an entire directory. The startStimulusApp() function doesn't really have an "open door" to make this easy, so you just need to do it a bit more manually :).

import { startStimulusApp } from '@symfony/stimulus-bridge';
import { definitionsFromContext } from '@hotwired/stimulus-webpack-helpers';

// 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?$/
));

app.load(definitionsFromContext(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!../vendor/myname/bundle/Resources/assets/controller',
    true,
    /\.[jt]sx?$/
)));

I haven't tested that (so let me know!) but that should to the trick. The definitionsFromContext is normally called FOR you inside of startStimulusApp. So basically, this extra stuff at the bottom is replicating what happens inside of that function.

c) the fancy option. Cause, we like fancy things, right!

This option involves treating your application like a "ux package". This is two steps:

1) Add your "bundle" to package.json as a "package" under the "require"

"@vendor/your-bundle-name": "file: vendor/myname/bundle/Resources/assets"

Then run yarn install -f or npm install --force. You can actually use this part of the solution with solutions (a) and (b) if you want. It just means that, instead of referring to the paths with ../vednor/myname/bundle..., you can reference as @vendor/your-bundle-name/controller... which is kind of cool :).

Anyways, to register your controllers, you would update your controllers.json file to point at them:

{
    "controllers": {
        "@vendor/your-bundle-name": {
            "controller1": {
                "enabled": true,
                "fetch": "eager"
            }
        }
    },
    "entrypoints": []
}

This would create a controller called "@vendor/your-bundle-name/controller1". To tell the system exactly where this file lives, in your vendor/myname/bundle/Resources/assets directory, you would have a package.json file that would include, among the normal stuff, this:

    "symfony": {
        "controllers": {
            "controller1": {
                "main": "dist/controller1.js",
                "webpackMode": "eager",
                "fetch": "eager",
                "enabled": true
            }
        }
    },

The disadvantage of this is that... it's more work! And you can't load the entire directory automatically. The advantage would be if you are releasing a bundle that you would share with this world. By adding all of this config, when the user installs your bundle, their package.json and controllers.json files would automatically update, and they would get the new controller by doing zero other setup.

Phew! Probably a longer answer than you wanted, but I really liked the question :).

Cheers!

I'm in the same class as Jay - trying to stay current with Symfony just for "fun" since 2.3. In a project in Symfony 6.0.6 & yarn 3.2.0, I tried to add
stimulus-autocomplete@2. Compiling webpack failed with:

"./node_modules/stimulus-autocomplete/dist/stimulus-autocomplete.js" contains a reference to the file "stimulus". This file can not be found, please check it for typos or update it if the file got moved.

So I did "yarn remove stimulus-autocomplete", followed by "yarn add stimulus-autocomple@3". Webpack compiled nicely.

Hey geoB!

> I'm in the same class as Jay - trying to stay current with Symfony just for "fun" since 2.3

That's impressive!

> In a project in Symfony 6.0.6 & yarn 3.2.0, I tried to add
stimulus-autocomplete@2. Compiling webpack failed with:

Yup, if you're in a fresh Symfony project (which will be using Stimulus 3), then you want the latest stimulus-autocomplete version (version 3). We recommended installing version 2 in this tutorial only because the actual code I'm using (and the code in the course download) using Stimulus 2. To be it simply: Stimulus 2 ❤️ stimulus-autocomplete 2, and Stimulus 3 ❤️ stimulus-autocomplete 3.

Cheers!

I had to "yarn add stimulus-autocomplete@2" to get javascripts to build without error. Latest stimulus-autocomplete is 3, which has stimulus 3 as a dependency. But when upgraded stimulus then stimulus-bridge was not happy, and once again javascripts would not build.
As an aside, any ballpark timeframe on getting stimulus-bridge to work with stimulus 3, Ryan? OR, does stimulus 3 add anything worth being hurried about? Maybe stick with stimulus 2?

Hey @Jay Gee!

Ah, yay! stimulus-autocomplete has been updated for Stimulus 3 - that's good news :). So, some excellent questions here. Let me do my best to answer them:

> I had to "yarn add stimulus-autocomplete@2" to get javascripts to build without error.

Thanks - we'll update the script & video to show that :).

> As an aside, any ballpark timeframe on getting stimulus-bridge to work with stimulus 3, Ryan?

All the PR's to do this already exist - https://github.com/symfony/... and https://github.com/symfony/.... We were mostly waiting for the ecosystem to start releasing support - like stimulus-autocomplete, but also stimulus-use (which has not released support yet) https://github.com/stimulus...

> OR, does stimulus 3 add anything worth being hurried about? Maybe stick with stimulus 2?

Stimulus 3 is... no big deal! They released a new major version basically because thy changed the name of the library from "stimulus" to "@hotwired/stimulus". If it weren't for that, v3 would be v 2.1. They DID add a couple of nice features - https://world.hey.com/hotwi... - but it's all pretty minor stuff.

Anyways, once Symfony UX DOES give you Stimulus v3, we'll be adding some notes to this tutorial to mention some things... but Stimulus v2 is basically identical to Stimulus v3.

Cheers!

Awesome, thanks for the swift and thorough reply Ryan! I will add that Symfonycasts (I started when it was KNP U) is a Godsend for me. I'm so thankful for you, Leanna, and the entire Symfonycast crew! I've been following Symfony since 2.3. Completely self-taught and it's not my everyday job. I will also say that Stimulus integration has been the most exciting thing for me since learning Symfony!

Hey @Jay Gee!

Ah, you've been around since Symfony 2.3! It's been awhile - and things were pretty crazy way back then. Thanks for sticking with us - even more impressive if this isn't your everyday job! It should be! ;)

> I will also say that Stimulus integration has been the most exciting thing for me since learning Symfony!

I feel that same way - along with Turbo. It's completely changed the JavaScript paradigm for me, and allowed me to get that single-page-app experience with a "normal" app. We've been prepping the SymfonyCasts codebase for Turbo (mostly be refactoring legacy JavaScript into Stimulus, of course) - and I'm super excited.

Cheers!