[Vue] Allow passing multiple contexts

src/Vue/Resources/assets/dist/register_controller.js

@@ -1,11 +1,17 @@
-function registerVueControllerComponents(context) {
+function registerVueControllerComponents(contexts) {
     const vueControllers = {};
     const importAllVueComponents = (r) => {
         r.keys().forEach((key) => (vueControllers[key] = r(key).default));
     };
-    importAllVueComponents(context);
+
+    [].concat(contexts).forEach((context) => importAllVueComponents(context));
+
     window.resolveVueComponent = (name) => {
-        const component = vueControllers[`./${name}.vue`];
+        const component = Object.values(
+            Object.fromEntries(
+                Object.entries(vueControllers).filter(([key]) => key.endsWith(`${name}.vue`)))
+        )[0];
+
         if (typeof component === 'undefined') {
             throw new Error('Vue controller "' + name + '" does not exist');
         }

src/Vue/Resources/assets/src/register_controller.ts

@@ -9,18 +9,21 @@
 
 'use strict';
 
-export function registerVueControllerComponents(context: __WebpackModuleApi.RequireContext) {
+export function registerVueControllerComponents(contexts: any) {
     const vueControllers: { [key: string]: object } = {};
 
     const importAllVueComponents = (r: __WebpackModuleApi.RequireContext) => {
         r.keys().forEach((key) => (vueControllers[key] = r(key).default));
     };
 
-    importAllVueComponents(context);
+    [].concat(contexts).forEach((context: __WebpackModuleApi.RequireContext) => importAllVueComponents(context));
 
     // Expose a global Vue loader to allow rendering from the Stimulus controller
     (window as any).resolveVueComponent = (name: string): object => {
-        const component = vueControllers[`./${name}.vue`];
+        const component = Object.values(
+            Object.fromEntries(Object.entries(vueControllers).filter(([key]) => key.endsWith(`${name}.vue`)))
+        )[0];
+
         if (typeof component === 'undefined') {
             throw new Error(`Vue controller "${name}" does not exist`);
         }

src/Vue/Resources/assets/test/fixtures/entry/Entry.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>This entry is called {{ entry }}</h1>
+</template>

src/Vue/Resources/assets/test/register_controller.test.ts

@@ -11,16 +11,32 @@
 
 import {registerVueControllerComponents} from '../src/register_controller';
 import {createRequireContextPolyfill} from './util/require_context_poylfill';
-import Hello from './fixtures/Hello.vue'
+import Hello from './fixtures/common/Hello.vue'
+import Entry from './fixtures/entry/Entry.vue'
 
 require.context = createRequireContextPolyfill(__dirname);
 
-describe('registerVueControllerComponents', () => {
+describe('registerSingleVueControllerComponentContext', () => {
     it('test', () => {
         registerVueControllerComponents(require.context('./fixtures', true, /\.vue$/));
         const resolveComponent = (window as any).resolveVueComponent;
 
         expect(resolveComponent).not.toBeUndefined();
         expect(resolveComponent('Hello')).toBe(Hello);
+        expect(resolveComponent('Entry')).toBe(Entry);
+    });
+});
+
+describe('registerMultipleVueControllerComponentsContexts', () => {
+    it('test', () => {
+        registerVueControllerComponents([
+            require.context('./fixtures/common', true, /\.vue$/),
+            require.context('./fixtures/entry', true, /\.vue$/)
+        ]);
+        const resolveComponent = (window as any).resolveVueComponent;
+
+        expect(resolveComponent).not.toBeUndefined();
+        expect(resolveComponent('Hello')).toBe(Hello);
+        expect(resolveComponent('Entry')).toBe(Entry);
     });
 });