Properly building StimulusBundle assets

Author: weaverryan

rollup.config.js

@@ -62,6 +62,8 @@ const moveTypescriptDeclarationsPlugin = (packagePath) => ({
 });
 
 const files = glob.sync('src/*/assets/src/*controller.ts');
+// custom handling for StimulusBundle
+files.push('src/StimulusBundle/assets/src/loader.ts');
 module.exports = files.map((file) => {
     const packageRoot = path.join(file, '..', '..');
     const packagePath = path.join(packageRoot, 'package.json');
@@ -71,6 +73,11 @@ module.exports = files.map((file) => {
         ...(packageData.peerDependencies ? Object.keys(packageData.peerDependencies) : [])
     ];
 
+    // custom handling for StimulusBundle
+    if (file.includes('StimulusBundle')) {
+        peerDependencies.push('./controllers.js');
+    }
+
     return {
         input: file,
         output: {

src/StimulusBundle/assets/controllers.ts

@@ -0,0 +1,10 @@
+import { ControllerConstructor } from '@hotwired/stimulus';
+export declare const eagerControllers: {
+    [key: string]: ControllerConstructor;
+};
+export declare const lazyControllers: {
+    [key: string]: () => Promise<{
+        default: ControllerConstructor;
+    }>;
+};
+export declare const isApplicationDebug = false;

src/StimulusBundle/assets/dist/controllers.d.ts

@@ -0,0 +1,3 @@
+import { Application } from '@hotwired/stimulus';
+export declare const loadControllers: (application: Application) => void;
+export declare const startStimulusApp: () => Application;

src/StimulusBundle/assets/dist/loader.d.ts

@@ -1,80 +1,73 @@
-/**
- * Starts the Stimulus application and reads a map dump in the DOM to load controllers.
- *
- * Inspired by stimulus-loading.js from stimulus-rails.
- */
 import { Application } from '@hotwired/stimulus';
-import { eagerControllers, lazyControllers, isApplicationDebug } from './controllers.js';
+import { eagerControllers, isApplicationDebug, lazyControllers } from './controllers.js';
 
 const controllerAttribute = 'data-controller';
-
-export const loadControllers = (application) => {
-    // loop over the controllers map and require each controller
+const loadControllers = (application) => {
     for (const name in eagerControllers) {
         registerController(name, eagerControllers[name], application);
     }
-
     loadLazyControllers(application);
 };
-
-export const startStimulusApp = () => {
+const startStimulusApp = () => {
     const application = Application.start();
     application.debug = isApplicationDebug;
-
     loadControllers(application);
-
     return application;
 };
-
 function registerController(name, controller, application) {
     if (canRegisterController(name, application)) {
-        application.register(name, controller)
+        application.register(name, controller);
     }
 }
-
 function loadLazyControllers(application) {
-    lazyLoadExistingControllers(application, document);
-    lazyLoadNewControllers(application, document)
+    lazyLoadExistingControllers(application, document.documentElement);
+    lazyLoadNewControllers(application, document.documentElement);
 }
-
 function lazyLoadExistingControllers(application, element) {
-  queryControllerNamesWithin(element).forEach(controllerName => loadController(controllerName, application))
+    queryControllerNamesWithin(element).forEach(controllerName => loadController(controllerName, application));
 }
 function queryControllerNamesWithin(element) {
-  return Array.from(element.querySelectorAll(`[${controllerAttribute}]`)).map(extractControllerNamesFrom).flat()
+    return Array.from(element.querySelectorAll(`[${controllerAttribute}]`)).map(extractControllerNamesFrom).flat();
 }
 function extractControllerNamesFrom(element) {
-  return element.getAttribute(controllerAttribute).split(/\s+/).filter(content => content.length)
+    const controllerNameValue = element.getAttribute(controllerAttribute);
+    if (!controllerNameValue) {
+        return [];
+    }
+    return controllerNameValue.split(/\s+/).filter(content => content.length);
 }
 function lazyLoadNewControllers(application, element) {
-  new MutationObserver((mutationsList) => {
-    for (const { attributeName, target, type } of mutationsList) {
-      switch (type) {
-        case 'attributes': {
-          if (attributeName === controllerAttribute && target.getAttribute(controllerAttribute)) {
-            extractControllerNamesFrom(target).forEach(controllerName => loadController(controllerName, application))
-          }
-        }
-
-        case 'childList': {
-          lazyLoadExistingControllers(application, target)
+    new MutationObserver((mutationsList) => {
+        for (const { attributeName, target, type } of mutationsList) {
+            switch (type) {
+                case 'attributes': {
+                    if (attributeName === controllerAttribute && target.getAttribute(controllerAttribute)) {
+                        extractControllerNamesFrom(target).forEach(controllerName => loadController(controllerName, application));
+                    }
+                    break;
+                }
+                case 'childList': {
+                    lazyLoadExistingControllers(application, target);
+                }
+            }
         }
-      }
-    }
-  }).observe(element, { attributeFilter: [controllerAttribute], subtree: true, childList: true })
+    }).observe(element, {
+        attributeFilter: [controllerAttribute],
+        subtree: true,
+        childList: true,
+    });
 }
-function canRegisterController(name, application){
-  return !application.router.modulesByIdentifier.has(name)
+function canRegisterController(name, application) {
+    return !application.router.modulesByIdentifier.has(name);
 }
-
 async function loadController(name, application) {
     if (canRegisterController(name, application)) {
         if (lazyControllers[name] === undefined) {
             console.error(`Failed to autoload controller: ${name}`);
         }
-
         const controllerModule = await (lazyControllers[name]());
-
         registerController(name, controllerModule.default, application);
     }
 }
+
+export { loadControllers, startStimulusApp };

src/StimulusBundle/assets/dist/loader.js

@@ -0,0 +1,6 @@
+// This file is dynamically rewritten by StimulusBundle + AssetMapper.
+import { ControllerConstructor } from '@hotwired/stimulus';
+
+export const eagerControllers: { [key: string]: ControllerConstructor } = {};
+export const lazyControllers: { [key: string]: () => Promise<{ default: ControllerConstructor }> } = {};
+export const isApplicationDebug = false;

src/StimulusBundle/assets/loader.ts

@@ -0,0 +1,101 @@
+/**
+ * Starts the Stimulus application and reads a map dump in the DOM to load controllers.
+ *
+ * Inspired by stimulus-loading.js from stimulus-rails.
+ */
+import { Application, ControllerConstructor } from '@hotwired/stimulus';
+import {
+    eagerControllers,
+    lazyControllers,
+    isApplicationDebug,
+} from './controllers.js';
+
+const controllerAttribute = 'data-controller';
+
+export const loadControllers = (application: Application) => {
+    // loop over the controllers map and require each controller
+    for (const name in eagerControllers) {
+        registerController(name, eagerControllers[name], application);
+    }
+
+    loadLazyControllers(application);
+};
+
+export const startStimulusApp = () => {
+    const application = Application.start();
+    application.debug = isApplicationDebug;
+
+    loadControllers(application);
+
+    return application;
+};
+
+function registerController(name: string, controller: ControllerConstructor, application: Application) {
+    if (canRegisterController(name, application)) {
+        application.register(name, controller);
+    }
+}
+
+function loadLazyControllers(application: Application) {
+    lazyLoadExistingControllers(application, document.documentElement);
+    lazyLoadNewControllers(application, document.documentElement);
+}
+
+function lazyLoadExistingControllers(application: Application, element: Element) {
+    queryControllerNamesWithin(element).forEach(controllerName => loadController(controllerName, application));
+}
+
+function queryControllerNamesWithin(element: Element) {
+    return Array.from(element.querySelectorAll(`[${controllerAttribute}]`)).map(extractControllerNamesFrom).flat();
+}
+
+function extractControllerNamesFrom(element: Element): string[] {
+    const controllerNameValue = element.getAttribute(controllerAttribute);
+
+    if (!controllerNameValue) {
+        return [];
+    }
+
+    return controllerNameValue.split(/\s+/).filter(content => content.length);
+}
+
+function lazyLoadNewControllers(application: Application, element: Element) {
+    new MutationObserver((mutationsList) => {
+        for (const { attributeName, target, type } of mutationsList) {
+            switch (type) {
+                case 'attributes': {
+                    if (attributeName === controllerAttribute && (target as Element).getAttribute(controllerAttribute)) {
+                        extractControllerNamesFrom(target as Element).forEach(controllerName => loadController(controllerName, application));
+                    }
+
+                    break;
+                }
+
+                case 'childList': {
+                    lazyLoadExistingControllers(application, target as Element);
+                }
+            }
+        }
+    }).observe(element, {
+        attributeFilter: [controllerAttribute],
+        subtree: true,
+        childList: true,
+    });
+}
+
+function canRegisterController(name: string, application: Application) {
+    // @ts-ignore
+    return !application.router.modulesByIdentifier.has(name);
+}
+
+async function loadController(name: string, application: Application) {
+    if (canRegisterController(name, application)) {
+        if (lazyControllers[name] === undefined) {
+            console.error(`Failed to autoload controller: ${name}`);
+        }
+
+        const controllerModule = await (lazyControllers[name]());
+
+        registerController(name, controllerModule.default, application);
+    }
+}