Remove work arounds for dispatch target events

- See https://github.com/hotwired/stimulus/issues/642
- Adopt streamlined approach in SwapController for 'targetElement'
pull/10836/head
LB Johnston 2023-08-17 20:40:23 +10:00 zatwierdzone przez Storm Heg
rodzic 7e3988a438
commit dfaa488add
2 zmienionych plików z 17 dodań i 20 usunięć

Wyświetl plik

@ -71,10 +71,7 @@ export class DropdownController extends Controller<HTMLElement> {
} }
const onShown = () => { const onShown = () => {
this.dispatch('shown', { this.dispatch('shown', { target: window.document });
// work around for target type bug https://github.com/hotwired/stimulus/issues/642
target: ((key = 'document') => window[key])(),
});
}; };
return { return {

Wyświetl plik

@ -90,8 +90,6 @@ export class SwapController extends Controller<
searchLazy?: { (...args: any[]): void; cancel(): void }; searchLazy?: { (...args: any[]): void; cancel(): void };
/** Debounced function to submit the serialised form and then replace the DOM */ /** Debounced function to submit the serialised form and then replace the DOM */
submitLazy?: { (...args: any[]): void; cancel(): void }; submitLazy?: { (...args: any[]): void; cancel(): void };
/** Element that receives the fetch result HTML output */
targetElement?: HTMLElement;
/** /**
* Ensure we have backwards compatibility with setting window.headerSearch * Ensure we have backwards compatibility with setting window.headerSearch
@ -139,7 +137,7 @@ export class SwapController extends Controller<
: this.element; : this.element;
this.srcValue = this.srcValue =
this.srcValue || formContainer?.getAttribute('action') || ''; this.srcValue || formContainer?.getAttribute('action') || '';
this.targetElement = this.getTarget(this.targetValue); const target = this.target;
// set up icons // set up icons
this.iconElement = null; this.iconElement = null;
@ -159,10 +157,14 @@ export class SwapController extends Controller<
this.submitLazy = debounce(this.submit.bind(this), this.waitValue); this.submitLazy = debounce(this.submit.bind(this), this.waitValue);
// dispatch event for any initial action usage // dispatch event for any initial action usage
this.dispatch('ready', { cancelable: false }); this.dispatch('ready', { cancelable: false, target });
} }
getTarget(targetValue = this.targetValue) { /**
* Element that receives the fetch result HTML output
*/
get target() {
const targetValue = this.targetValue;
const targetElement = document.querySelector(targetValue); const targetElement = document.querySelector(targetValue);
const foundTarget = targetElement && targetElement instanceof HTMLElement; const foundTarget = targetElement && targetElement instanceof HTMLElement;
@ -189,12 +191,13 @@ export class SwapController extends Controller<
* Toggle the visual spinner icon if available and ensure content about * Toggle the visual spinner icon if available and ensure content about
* to be replaced is flagged as busy. * to be replaced is flagged as busy.
*/ */
loadingValueChanged(isLoading: boolean) { loadingValueChanged(isLoading: boolean, isLoadingPrevious) {
const target = isLoadingPrevious === undefined ? null : this.target; // ensure we avoid DOM interaction before connect
if (isLoading) { if (isLoading) {
this.targetElement?.setAttribute('aria-busy', 'true'); target?.setAttribute('aria-busy', 'true');
this.iconElement?.setAttribute('href', '#icon-spinner'); this.iconElement?.setAttribute('href', '#icon-spinner');
} else { } else {
this.targetElement?.removeAttribute('aria-busy'); target?.removeAttribute('aria-busy');
this.iconElement?.setAttribute('href', this.iconValue); this.iconElement?.setAttribute('href', this.iconValue);
} }
} }
@ -282,6 +285,7 @@ export class SwapController extends Controller<
| string | string
| (CustomEvent<{ url: string }> & { params?: { url?: string } }), | (CustomEvent<{ url: string }> & { params?: { url?: string } }),
) { ) {
const target = this.target;
/** Parse a request URL from the supplied param, as a string or inside a custom event */ /** Parse a request URL from the supplied param, as a string or inside a custom event */
const requestUrl = const requestUrl =
(typeof data === 'string' (typeof data === 'string'
@ -297,8 +301,7 @@ export class SwapController extends Controller<
const beginEvent = this.dispatch('begin', { const beginEvent = this.dispatch('begin', {
cancelable: true, cancelable: true,
detail: { requestUrl }, detail: { requestUrl },
// Stimulus dispatch target element type issue https://github.com/hotwired/stimulus/issues/642 target: this.target,
target: this.targetElement as HTMLInputElement,
}) as CustomEvent<{ requestUrl: string }>; }) as CustomEvent<{ requestUrl: string }>;
if (beginEvent.defaultPrevented) return Promise.resolve(); if (beginEvent.defaultPrevented) return Promise.resolve();
@ -314,13 +317,11 @@ export class SwapController extends Controller<
return response.text(); return response.text();
}) })
.then((results) => { .then((results) => {
const targetElement = this.targetElement as HTMLElement; target.innerHTML = results;
targetElement.innerHTML = results;
this.dispatch('success', { this.dispatch('success', {
cancelable: false, cancelable: false,
detail: { requestUrl, results }, detail: { requestUrl, results },
// Stimulus dispatch target element type issue https://github.com/hotwired/stimulus/issues/642 target,
target: targetElement as HTMLInputElement,
}); });
return results; return results;
}) })
@ -329,8 +330,7 @@ export class SwapController extends Controller<
this.dispatch('error', { this.dispatch('error', {
cancelable: false, cancelable: false,
detail: { error, requestUrl }, detail: { error, requestUrl },
// Stimulus dispatch target element type issue https://github.com/hotwired/stimulus/issues/642 target,
target: this.targetElement as HTMLInputElement,
}); });
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.error(`Error fetching ${requestUrl}`, error); console.error(`Error fetching ${requestUrl}`, error);