Remove Component from event

Author: smnandre

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

@@ -145,8 +145,8 @@ export default class Component {
      *     * render:started (html: string, response: BackendResponse, controls: { shouldRender: boolean }) => {}
      *     * render:finished (component: Component) => {}
      *     * response:error (backendResponse: BackendResponse, controls: { displayError: boolean }) => {}
-     *     * loading.state:started (element: HTMLElement, request: BackendRequest, component: Component) => {}
-     *     * loading.state:finished (element: HTMLElement, component: Component) => {}
+     *     * loading.state:started (element: HTMLElement, request: BackendRequest) => {}
+     *     * loading.state:finished (element: HTMLElement) => {}
      *     * model:set (model: string, value: any, component: Component) => {}
      */
     on(hookName: string, callback: (...args: any[]) => void): void {
@@ -383,7 +383,7 @@ export default class Component {
             this.valueStore.getUpdatedPropsFromParent(),
             filesToSend,
         );
-        this.hooks.triggerHook('loading.state:started', this.element, this.backendRequest, this);
+        this.hooks.triggerHook('loading.state:started', this.element, this.backendRequest);
 
         this.pendingActions = [];
         this.valueStore.flushDirtyPropsToPending();
@@ -453,7 +453,7 @@ export default class Component {
         // remove the loading behavior now so that when we morphdom
         // "diffs" the elements, any loading differences will not cause
         // elements to appear different unnecessarily
-        this.hooks.triggerHook('loading.state:finished', this.element, this);
+        this.hooks.triggerHook('loading.state:finished', this.element);
 
         /**
          * For any models modified since the last request started, grab

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

@@ -16,10 +16,10 @@ interface ElementLoadingDirectives {
 
 export default class implements PluginInterface {
     attachToComponent(component: Component): void {
-        component.on('loading.state:started', (element: HTMLElement, request: BackendRequest, component: Component) => {
+        component.on('loading.state:started', (element: HTMLElement, request: BackendRequest) => {
             this.startLoading(component, element, request);
         });
-        component.on('loading.state:finished', (element: HTMLElement, component: Component) => {
+        component.on('loading.state:finished', (element: HTMLElement) => {
             this.finishLoading(component, element);
         });
         // hide "loading" elements to begin with

src/LiveComponent/doc/index.rst

@@ -889,8 +889,8 @@ The following hooks are available (along with the arguments that are passed):
 * ``render:started`` args ``(html: string, response: BackendResponse, controls: { shouldRender: boolean })``
 * ``render:finished`` args ``(component: Component)``
 * ``response:error`` args ``(backendResponse: BackendResponse, controls: { displayError: boolean })``
-* ``loading.state:started`` args ``(element: HTMLElement, request: BackendRequest, component: Component)``
-* ``loading.state:finished`` args ``(element: HTMLElement, component: Component)``
+* ``loading.state:started`` args ``(element: HTMLElement, request: BackendRequest)``
+* ``loading.state:finished`` args ``(element: HTMLElement)``
 * ``model:set`` args ``(model: string, value: any, component: Component)``
 
 Loading States