[Reusable Bundle] Multiple controllers directories

[cavasinf]

note There is no "discussion" enabled on this repo, so I am creating an issue to ask questions.

Question

Is there a way to add multiple controllers directories and import them automatically?

Context

We have an internal reusable bundle to share logic between ours Symfony projects.

Here is the structure:

namespace	path
Bundle	lib/my-bundle/assets/controllers
App	assets/controllers

What should be a good approach

1.In the App controller.json add a way to import other bootstrap.js Like:

     {
         "controllers": [ ],
         "entrypoints": [
             "../lib/my-bundle/assets/bootstrap.js"
         ]
     }

2.Add multiple context when calling a startStimulusApp https://github.com/symfony/stimulus-bridge/blob/d58dc502386573b93cc7442939b4053620ab7966/src/index.ts#L20

What I have tried

Looking at Symfony UX how they import controllers, it uses packages.json. Trying to make it work for our reusable bundle I've ended up like this:

// lib/my-bundle/package.json
{
  "name": "@my-bundle/standard",
  "main": "assets/controllers/controller.js",
  "types": "assets/controllers/controller.d.ts",
  "symfony": {
    "controllers": {
      "user-form": {
        "main": "assets/controllers/user-form_controller.ts",
        "webpackMode": "eager",
        "fetch": "eager",
        "enabled": true
      },
      "other-form": {
        //...
      },
      "another-form": {
        //...
      }
    }
  },
}

Problems

1. Error at compile, ask to enable TypeScriptLoader or it is already the case

   warning Error loading ./node_modules/@my-bundle/standard/assets/controllers/user-form_controller.ts FIX To process TypeScript files:

   1. Add Encore.enableTypeScriptLoader() to your webpack.config.js file.

2. We need to declare each controller is this file.

3. In the app project import each controller inside the controller.json.

4. We have to declare a main controller and types?

[weaverryan]

Hi!

After calling startStimulusApp() for one directory, you get an Application object back. You can use the normal stimulus functionality to load further contexts - use this package https://github.com/hotwired/stimulus-webpack-helpers

I hope that helps!

[cavasinf]

Hi @weaverryan, Thanks for the link!

At the end, here's what I've put with full path:

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,
    /\.(j|t)sx?$/
));

const myBundleContext = require.context(
    "../lib/my-bundle/assets/controllers",
    true,
    /\.(j|t)sx?$/
)
app.load(definitionsFromContext(myBundleContext ))

I don't know why but, when I use the bundle package name from the package.json I still have the webpack ts error..

package.js

{
    "license": "proprietary",
    "private": true,
    "devDependencies": {
        "@my-bundle": "file:lib/my-bundle"
    }
}

lib/my-bundle/package.js

{
  "name": "@my-bundle",
  "license": "MIT",
  "version": "0.1.0"
}

bootstrap.js

// bootstrap.js
const myBundleContext = require.context(
    "@my-bundle/assets/controllers",
    true,
    /\.(j|t)sx?$/
)
app.load(definitionsFromContext(myBundleContext ))

warning yarn run v1.22.19 $ encore dev Running webpack ...

ERROR Failed to compile with 1 errors 7:16:18 AM

Error loading ./node_modules/@my-bundle/assets/controllers/user-form_controller.ts

FIX To process TypeScript files:

1. Add Encore.enableTypeScriptLoader() to your webpack.config.js file.