Skip to content

Commit 0e5abca

Browse files
smnandresmnandre
committed
Unlock controller loading & logDebugActivity
log `controller#lazy:loading` & `controller#lazy:loaded`
1 parent f681ec8 commit 0e5abca

File tree

2 files changed

+75
-38
lines changed

2 files changed

+75
-38
lines changed

‎src/StimulusBundle/assets/dist/loader.js‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,30 +25,50 @@ class StimulusLazyControllerHandler {
2525
this.lazyLoadNewControllers(document.documentElement);
2626
}
2727
lazyLoadExistingControllers(element) {
28-
this.queryControllerNamesWithin(element).forEach((controllerName) => this.loadLazyController(controllerName));
28+
Array.from(element.querySelectorAll(`[${controllerAttribute}]`))
29+
.flatMap(extractControllerNamesFrom)
30+
.forEach((controllerName) => this.loadLazyController(controllerName));
2931
}
30-
async loadLazyController(name) {
31-
if (canRegisterController(name, this.application)) {
32-
if (this.lazyControllers[name] === undefined) {
33-
return;
34-
}
35-
const controllerModule = await this.lazyControllers[name]();
36-
registerController(name, controllerModule.default, this.application);
32+
loadLazyController(name) {
33+
if (!this.lazyControllers[name]) {
34+
return;
35+
}
36+
const controllerLoader = this.lazyControllers[name];
37+
delete this.lazyControllers[name];
38+
if (!canRegisterController(name, this.application)) {
39+
return;
3740
}
41+
this.application.logDebugActivity(name, 'lazy:loading');
42+
controllerLoader()
43+
.then((controllerModule) => {
44+
this.application.logDebugActivity(name, 'lazy:loaded');
45+
registerController(name, controllerModule.default, this.application);
46+
})
47+
.catch((error) => {
48+
console.error(`Error loading controller "${name}":`, error);
49+
});
3850
}
3951
lazyLoadNewControllers(element) {
52+
if (Object.keys(this.lazyControllers).length === 0) {
53+
return;
54+
}
4055
new MutationObserver((mutationsList) => {
41-
for (const { attributeName, target, type } of mutationsList) {
42-
switch (type) {
43-
case 'attributes': {
44-
if (attributeName === controllerAttribute &&
45-
target.getAttribute(controllerAttribute)) {
46-
extractControllerNamesFrom(target).forEach((controllerName) => this.loadLazyController(controllerName));
56+
for (const mutation of mutationsList) {
57+
switch (mutation.type) {
58+
case 'childList': {
59+
for (const node of mutation.addedNodes) {
60+
if (node instanceof Element) {
61+
extractControllerNamesFrom(node).forEach((controllerName) => {
62+
this.loadLazyController(controllerName);
63+
});
64+
}
4765
}
4866
break;
4967
}
50-
case 'childList': {
51-
this.lazyLoadExistingControllers(target);
68+
case 'attributes': {
69+
if (mutation.attributeName === controllerAttribute) {
70+
extractControllerNamesFrom(mutation.target).forEach((controllerName) => this.loadLazyController(controllerName));
71+
}
5272
}
5373
}
5474
}
@@ -58,9 +78,6 @@ class StimulusLazyControllerHandler {
5878
childList: true,
5979
});
6080
}
61-
queryControllerNamesWithin(element) {
62-
return Array.from(element.querySelectorAll(`[${controllerAttribute}]`)).flatMap(extractControllerNamesFrom);
63-
}
6481
}
6582
function registerController(name, controller, application) {
6683
if (canRegisterController(name, application)) {

‎src/StimulusBundle/assets/src/loader.ts‎

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -64,38 +64,58 @@ class StimulusLazyControllerHandler {
6464
}
6565

6666
private lazyLoadExistingControllers(element: Element) {
67-
Array.from(element.querySelectorAll(`[${controllerAttribute}]`)).flatMap(extractControllerNamesFrom).forEach(
68-
(controllerName) => this.loadLazyController(controllerName)
69-
);
67+
Array.from(element.querySelectorAll(`[${controllerAttribute}]`))
68+
.flatMap(extractControllerNamesFrom)
69+
.forEach((controllerName) => this.loadLazyController(controllerName));
7070
}
7171

72-
private async loadLazyController(name: string) {
73-
if (canRegisterController(name, this.application)) {
74-
if (this.lazyControllers[name] === undefined) {
75-
return;
76-
}
72+
private loadLazyController(name: string) {
73+
if (!this.lazyControllers[name]) {
74+
return;
75+
}
7776

78-
const controllerModule = await this.lazyControllers[name]();
77+
// Delete the loader to avoid loading it twice
78+
const controllerLoader = this.lazyControllers[name];
79+
delete this.lazyControllers[name];
7980

80-
registerController(name, controllerModule.default, this.application);
81+
if (!canRegisterController(name, this.application)) {
82+
return;
8183
}
84+
85+
this.application.logDebugActivity(name, 'lazy:loading');
86+
87+
controllerLoader()
88+
.then((controllerModule) => {
89+
this.application.logDebugActivity(name, 'lazy:loaded');
90+
registerController(name, controllerModule.default, this.application);
91+
})
92+
.catch((error) => {
93+
console.error(`Error loading controller "${name}":`, error);
94+
});
8295
}
8396

8497
private lazyLoadNewControllers(element: Element) {
98+
if (Object.keys(this.lazyControllers).length === 0) {
99+
return;
100+
}
85101
new MutationObserver((mutationsList) => {
86-
for (const { attributeName, target, type } of mutationsList) {
87-
switch (type) {
102+
for (const mutation of mutationsList) {
103+
switch (mutation.type) {
88104
case 'childList': {
89-
this.lazyLoadExistingControllers(target as Element);
105+
// @ts-ignore
106+
for (const node of mutation.addedNodes) {
107+
if (node instanceof Element) {
108+
extractControllerNamesFrom(node).forEach((controllerName) => {
109+
this.loadLazyController(controllerName);
110+
});
111+
}
112+
}
90113
break;
91114
}
92-
115+
93116
case 'attributes': {
94-
if (
95-
attributeName === controllerAttribute &&
96-
(target as Element).getAttribute(controllerAttribute)
97-
) {
98-
extractControllerNamesFrom(target as Element).forEach((controllerName) =>
117+
if (mutation.attributeName === controllerAttribute) {
118+
extractControllerNamesFrom(mutation.target as Element).forEach((controllerName) =>
99119
this.loadLazyController(controllerName)
100120
);
101121
}

0 commit comments

Comments
 (0)