Fixing event args

Author: weaverryan

src/LiveComponent/assets/dist/live_controller.js

@@ -2943,8 +2943,6 @@ class LiveControllerDefault extends Controller {
             throw new Error(`No event name provided on element: ${getElementAsTagText(event.currentTarget)}. Did you forget to add the "data-live-event-param" attribute?`);
         }
         const eventInfo = params.event;
-        const eventArgs = Object.assign({}, params);
-        delete eventArgs.event;
         const directives = parseDirectives(eventInfo);
         const emits = [];
         directives.forEach((directive) => {
@@ -2960,7 +2958,7 @@ class LiveControllerDefault extends Controller {
             });
             emits.push({
                 name: directive.action,
-                data: eventArgs,
+                data: directive.named,
                 nameMatch,
             });
         });

src/LiveComponent/assets/src/live_controller.ts

@@ -256,9 +256,6 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
             );
         }
         const eventInfo = params.event;
-        // all other params are considered event arguments
-        const eventArgs = { ...params };
-        delete eventArgs.event;
 
         // data-event="name(product_list)|some_event"
         const directives = parseDirectives(eventInfo);
@@ -277,7 +274,7 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
 
             emits.push({
                 name: directive.action,
-                data: eventArgs,
+                data: directive.named,
                 nameMatch,
             });
         });

src/LiveComponent/assets/test/controller/emit.test.ts

@@ -64,4 +64,28 @@ describe('LiveController Emit Tests', () => {
         // wait a tiny bit - enough for a request to be sent if it was going to be
         await new Promise((resolve) => setTimeout(resolve, 10));
     });
+
+    it('emits event with extra arguments', async () => {
+        const test = await createTest({ renderCount: 0 }, (data: any) => `
+            <div ${initComponent(data, {
+                name: 'simple-component',
+                listeners: [{ event: 'fooEvent', action: 'fooAction' }]
+            })}>
+                Render Count: ${data.renderCount}
+                <button
+                    data-action="live#emit"
+                    data-live-event-param="fooEvent(arg=foo)"
+                >Emit Simple</button>
+            </div>
+        `);
+
+        test.expectsAjaxCall()
+            .expectActionCalled('fooAction', { arg: 'foo' })
+            .serverWillChangeProps((data) => {
+                data.renderCount = 1;
+            })
+
+        getByText(test.element, 'Emit Simple').click();
+        await waitFor(() => expect(test.element).toHaveTextContent('Render Count: 1'));
+    });
 });

src/LiveComponent/doc/index.rst

@@ -2557,6 +2557,15 @@ with an entity name, just like you would in a controller::
         $this->lastProduct = $product;
     }
 
+You can also pass data to a listener when emitting from HTML:
+
+.. code-block:: html
+
+    <button
+        data-action="live#emit"
+        data-live-event-param="productAdded(product=42)"
+    >
+
 Scoping Events
 ~~~~~~~~~~~~~~