@stimulus-library/controllers/dist/ajax/load_block_controller.js

A library of useful controllers for Stimulus

import { BaseController, fetchRetry } from "@stimulus-library/utilities";
export class LoadBlockController extends BaseController {
    get _errorMessage() {
        return this.hasErrorMessageValue ? this.errorMessageValue : "This content failed to load";
    }
    get _maxRetries() {
        return this.hasMaxRetriesValue ? this.maxRetriesValue : 1;
    }
    connect() {
    }
    async loadContent(event = null) {
        event === null || event === void 0 ? void 0 : event.preventDefault();
        const self = this;
        const el = this.hasReplaceTarget ? this.replaceTarget : this.el;
        const failure = () => {
            el.replaceWith(this._errorMessage);
            self.dispatchEvent(el, this.eventName("error"));
        };
        try {
            const response = await fetchRetry(this._maxRetries, this.endpointValue);
            if (!response.ok) {
                failure();
            }
            const text = await response.text();
            const newEl = document.createElement("div");
            newEl.innerHTML = text;
            if (this.hasSelectorValue) {
                const selectedContent = newEl.querySelectorAll(this.selectorValue);
                el.replaceWith(...selectedContent);
            }
            else {
                el.replaceWith(...newEl.children);
            }
            self.dispatchEvent(el, this.eventName("success"));
        }
        catch (e) {
            failure();
        }
        finally {
            self.dispatchEvent(el, this.eventName("complete"));
        }
    }
}
LoadBlockController.targets = ["replace"];
LoadBlockController.values = {
    endpoint: String,
    errorMessage: String,
    selector: String,
    maxRetries: Number,
};