[Live] Add data-error attribute + fix loading behaviour on error

src/Dropzone/assets/src/style.css

@@ -60,7 +60,7 @@
 }
 
 .dropzone-preview-button::before {
-    content: '×';
+    content: "×";
     padding: 3px 7px;
     cursor: pointer;
 }

src/LiveComponent/assets/dist/Component/plugins/ErrorPlugin.d.ts

@@ -0,0 +1,27 @@
+import type { Component } from '../../live_controller';
+import type { PluginInterface } from './PluginInterface';
+export default class ErrorPlugin implements PluginInterface {
+    static errorAttribute: string;
+    static isErrorAttribute: string;
+    static supportedActions: {
+        show: string;
+        hide: string;
+        addClass: string;
+        removeClass: string;
+        addAttribute: string;
+        removeAttribute: string;
+    };
+    attachToComponent(component: Component): void;
+    showErrors(component: Component): void;
+    hideErrors(component: Component): void;
+    private handleErrorToggle;
+    private handleErrorDirective;
+    private getErrorDirectives;
+    private parseErrorAction;
+    private showElement;
+    private hideElement;
+    private addClass;
+    private removeClass;
+    private addAttributes;
+    private removeAttributes;
+}

src/LiveComponent/assets/dist/Component/plugins/LoadingPlugin.d.ts

@@ -1,23 +1,18 @@
-import { type Directive } from '../../Directive/directives_parser';
+import { type ElementDirectives } from '../../Directive/directives_parser';
 import type BackendRequest from '../../Backend/BackendRequest';
 import type Component from '../../Component';
 import type { PluginInterface } from './PluginInterface';
-interface ElementLoadingDirectives {
-    element: HTMLElement | SVGElement;
-    directives: Directive[];
-}
 export default class implements PluginInterface {
     attachToComponent(component: Component): void;
     startLoading(component: Component, targetElement: HTMLElement | SVGElement, backendRequest: BackendRequest): void;
     finishLoading(component: Component, targetElement: HTMLElement | SVGElement): void;
     private handleLoadingToggle;
     private handleLoadingDirective;
-    getLoadingDirectives(component: Component, element: HTMLElement | SVGElement): ElementLoadingDirectives[];
+    getLoadingDirectives(component: Component, element: HTMLElement | SVGElement): ElementDirectives[];
     private showElement;
     private hideElement;
     private addClass;
     private removeClass;
     private addAttributes;
     private removeAttributes;
 }
-export {};

src/LiveComponent/assets/dist/Directive/directives_parser.d.ts

@@ -8,4 +8,8 @@ export interface Directive {
     modifiers: DirectiveModifier[];
     getString: () => string;
 }
+export interface ElementDirectives {
+    element: HTMLElement | SVGElement;
+    directives: Directive[];
+}
 export declare function parseDirectives(content: string | null): Directive[];

src/LiveComponent/assets/dist/HookManager.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentHookName, ComponentHookCallback } from './Component';
+import type { ComponentHookCallback, ComponentHookName } from './Component';
 export default class {
     private hooks;
     register<T extends string | ComponentHookName = ComponentHookName>(hookName: T, callback: ComponentHookCallback<T>): void;

src/LiveComponent/assets/dist/live_controller.js

@@ -2043,12 +2043,17 @@ class Component {
                 !headers.get('X-Live-Redirect')) {
                 const controls = { displayError: true };
                 this.valueStore.pushPendingPropsBackToDirty();
+                this.hooks.triggerHook('loading.state:finished', this.element);
                 this.hooks.triggerHook('response:error', backendResponse, controls);
                 if (controls.displayError) {
                     this.renderError(html);
                 }
                 this.backendRequest = null;
                 thisPromiseResolve(backendResponse);
+                if (this.isRequestPending) {
+                    this.isRequestPending = false;
+                    this.performRequest();
+                }
                 return response;
             }
             this.processRerender(html, backendResponse);
@@ -2946,6 +2951,139 @@ class LazyPlugin {
     }
 }
 
+class ErrorPlugin {
+    attachToComponent(component) {
+        component.on('response:error', () => {
+            this.showErrors(component);
+        });
+        component.on('request:started', () => {
+            this.hideErrors(component);
+        });
+        this.hideErrors(component);
+    }
+    showErrors(component) {
+        this.handleErrorToggle(component, true, component.element);
+    }
+    hideErrors(component) {
+        this.handleErrorToggle(component, false, component.element);
+    }
+    handleErrorToggle(component, isError, targetElement) {
+        this.getErrorDirectives(component, targetElement).forEach(({ element, directives }) => {
+            if (isError) {
+                this.addAttributes(element, [ErrorPlugin.isErrorAttribute]);
+            }
+            else {
+                this.removeAttributes(element, [ErrorPlugin.isErrorAttribute]);
+            }
+            directives.forEach((directive) => {
+                this.handleErrorDirective(element, isError, directive);
+            });
+        });
+    }
+    handleErrorDirective(element, isError, directive) {
+        const finalAction = this.parseErrorAction(directive.action, isError);
+        switch (finalAction) {
+            case ErrorPlugin.supportedActions.show:
+                this.showElement(element);
+                break;
+            case ErrorPlugin.supportedActions.hide:
+                this.hideElement(element);
+                break;
+            case ErrorPlugin.supportedActions.addClass:
+                this.addClass(element, directive.args);
+                break;
+            case ErrorPlugin.supportedActions.removeClass:
+                this.removeClass(element, directive.args);
+                break;
+            case ErrorPlugin.supportedActions.addAttribute:
+                this.addAttributes(element, directive.args);
+                break;
+            case ErrorPlugin.supportedActions.removeAttribute:
+                this.removeAttributes(element, directive.args);
+                break;
+            default:
+                throw new Error(`Unknown ${ErrorPlugin.errorAttribute} action "${finalAction}". Supported actions are: ${Object.values(`"${ErrorPlugin.supportedActions}"`).join(', ')}.`);
+        }
+    }
+    getErrorDirectives(component, element) {
+        const errorDirectives = [];
+        let matchingElements = [...Array.from(element.querySelectorAll(`[${ErrorPlugin.errorAttribute}]`))];
+        matchingElements = matchingElements.filter((elt) => elementBelongsToThisComponent(elt, component));
+        if (element.hasAttribute(ErrorPlugin.errorAttribute)) {
+            matchingElements = [element, ...matchingElements];
+        }
+        matchingElements.forEach((element) => {
+            if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
+                throw new Error(`Element "${element.nodeName}" is not supported for ${ErrorPlugin.errorAttribute} directives. Only HTMLElement and SVGElement are supported.`);
+            }
+            const directives = parseDirectives(element.getAttribute(ErrorPlugin.errorAttribute) || 'show');
+            directives.forEach((directive) => {
+                if (directive.modifiers.length > 0) {
+                    throw new Error(`Modifiers are not supported for ${ErrorPlugin.errorAttribute} directives, but the following were found: "{${directive.modifiers.map((modifier) => `${modifier.name}: ${modifier.value}}`).join(', ')}" for element with tag "${element.nodeName}".`);
+                }
+            });
+            errorDirectives.push({
+                element,
+                directives,
+            });
+        });
+        return errorDirectives;
+    }
+    parseErrorAction(action, isError) {
+        switch (action) {
+            case ErrorPlugin.supportedActions.show:
+                return isError ? 'show' : 'hide';
+            case ErrorPlugin.supportedActions.hide:
+                return isError ? 'hide' : 'show';
+            case ErrorPlugin.supportedActions.addClass:
+                return isError ? 'addClass' : 'removeClass';
+            case ErrorPlugin.supportedActions.removeClass:
+                return isError ? 'removeClass' : 'addClass';
+            case ErrorPlugin.supportedActions.addAttribute:
+                return isError ? 'addAttribute' : 'removeAttribute';
+            case ErrorPlugin.supportedActions.removeAttribute:
+                return isError ? 'removeAttribute' : 'addAttribute';
+            default:
+                throw new Error(`Unknown ${ErrorPlugin.errorAttribute} action "${action}". Supported actions are: ${Object.values(`"${ErrorPlugin.supportedActions}"`).join(', ')}.`);
+        }
+    }
+    showElement(element) {
+        element.style.display = 'revert';
+    }
+    hideElement(element) {
+        element.style.display = 'none';
+    }
+    addClass(element, classes) {
+        element.classList.add(...combineSpacedArray(classes));
+    }
+    removeClass(element, classes) {
+        element.classList.remove(...combineSpacedArray(classes));
+        if (element.classList.length === 0) {
+            element.removeAttribute('class');
+        }
+    }
+    addAttributes(element, attributes) {
+        attributes.forEach((attribute) => {
+            element.setAttribute(attribute, '');
+        });
+    }
+    removeAttributes(element, attributes) {
+        attributes.forEach((attribute) => {
+            element.removeAttribute(attribute);
+        });
+    }
+}
+ErrorPlugin.errorAttribute = 'data-live-error';
+ErrorPlugin.isErrorAttribute = 'data-live-is-error';
+ErrorPlugin.supportedActions = {
+    show: 'show',
+    hide: 'hide',
+    addClass: 'addClass',
+    removeClass: 'removeClass',
+    addAttribute: 'addAttribute',
+    removeAttribute: 'removeAttribute',
+};
+
 class LiveControllerDefault extends Controller {
     constructor() {
         super(...arguments);
@@ -3094,6 +3232,7 @@ class LiveControllerDefault extends Controller {
         }
         const plugins = [
             new LoadingPlugin(),
+            new ErrorPlugin(),
             new LazyPlugin(),
             new ValidatedFieldsPlugin(),
             new PageUnloadingPlugin(),

src/LiveComponent/assets/src/Component/index.ts

@@ -315,6 +315,7 @@ export default class Component {
             ) {
                 const controls = { displayError: true };
                 this.valueStore.pushPendingPropsBackToDirty();
+                this.hooks.triggerHook('loading.state:finished', this.element);
                 this.hooks.triggerHook('response:error', backendResponse, controls);
 
                 if (controls.displayError) {
@@ -324,6 +325,13 @@ export default class Component {
                 this.backendRequest = null;
                 thisPromiseResolve(backendResponse);
 
+                // If there's another request pending, perform it now
+                // This will also ensure that the error state is cleared
+                if (this.isRequestPending) {
+                    this.isRequestPending = false;
+                    this.performRequest();
+                }
+
                 return response;
             }