Send live action arguments to backend

Author: norkunas

src/LiveComponent/assets/dist/live_controller.js

@@ -1070,7 +1070,7 @@ class default_1 extends Controller {
         directives.forEach((directive) => {
             const _executeAction = () => {
                 this._clearWaitingDebouncedRenders();
-                this._makeRequest(directive.action);
+                this._makeRequest(directive.action, directive.args.length > 0 ? directive.args : directive.named);
             };
             let handled = false;
             directive.modifiers.forEach((modifier) => {
@@ -1162,11 +1162,23 @@ class default_1 extends Controller {
             }, this.debounceValue || DEFAULT_DEBOUNCE);
         }
     }
-    _makeRequest(action) {
+    _makeRequest(action, values) {
         const splitUrl = this.urlValue.split('?');
         let [url] = splitUrl;
         const [, queryString] = splitUrl;
         const params = new URLSearchParams(queryString || '');
+        let valueParams = null;
+        if (Array.isArray(values)) {
+            valueParams = new URLSearchParams();
+            values.forEach((v, i) => valueParams.set(i, v));
+        }
+        else if (typeof values === 'object' && Object.keys(values).length > 0) {
+            valueParams = new URLSearchParams();
+            Object.keys(values).forEach(k => valueParams.set(k, values[k]));
+        }
+        if (valueParams !== null) {
+            params.set('values', valueParams.toString());
+        }
         const fetchOptions = {};
         fetchOptions.headers = {
             'Accept': 'application/vnd.live-component+json',

src/LiveComponent/assets/src/live_controller.ts

@@ -144,7 +144,7 @@ export default class extends Controller {
                 // taking precedence
                 this._clearWaitingDebouncedRenders();
 
-                this._makeRequest(directive.action);
+                this._makeRequest(directive.action, directive.args.length > 0 ? directive.args : directive.named);
             }
 
             let handled = false;
@@ -296,11 +296,24 @@ export default class extends Controller {
         }
     }
 
-    _makeRequest(action: string|null) {
+    _makeRequest(action: string|null, values: Array<string>|object) {
         const splitUrl = this.urlValue.split('?');
         let [url] = splitUrl
         const [, queryString] = splitUrl;
         const params = new URLSearchParams(queryString || '');
+        let valueParams = null;
+
+        if (Array.isArray(values)) {
+            valueParams = new URLSearchParams();
+
+            values.forEach((v, i) => valueParams.set(i, v));
+        } else if (typeof values === 'object' && Object.keys(values).length > 0) {
+            valueParams = new URLSearchParams(values);
+        }
+
+        if (valueParams !== null) {
+            params.set('values', valueParams.toString());
+        }
 
         const fetchOptions: RequestInit = {};
         fetchOptions.headers = {

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

@@ -29,12 +29,16 @@ describe('LiveController Action Tests', () => {
                 >
             </label>
             
+            ${data.isChanged ? 'Comment Changed!' : ''}
             ${data.isSaved ? 'Comment Saved!' : ''}
 
             <button
                 data-action="live#action"
                 data-action-name="save"
             >Save</button>
+            
+            <button data-action="live#action" data-action-name="updateSimple(a, b, c)">Update simple</button>
+            <button data-action="live#action" data-action-name="updateNamed(a=1, b=2, c=3)">Update named</button>
         </div>
     `;
 
@@ -64,4 +68,46 @@ describe('LiveController Action Tests', () => {
 
         expect(postMock.lastOptions().body.get('comments')).toEqual('hi WEAVER');
     });
+
+    it('Sends action simple args', async () => {
+        const data = { comments: 'hi' };
+        const { element } = await startStimulus(template(data));
+
+        const postMock = fetchMock.postOnce('http://localhost/_components/my_component/updateSimple?values=0%3Da%261%3Db%262%3Dc', {
+            html: template({ comments: ' a b c', isChanged: true }),
+            data: { isChanged: true }
+        });
+
+        await userEvent.type(getByLabelText(element, 'Comments:'), 'a b c');
+
+        getByText(element, 'Update simple').click();
+
+        await waitFor(() => expect(element).toHaveTextContent('Comment Changed!'));
+        expect(getByLabelText(element, 'Comments:')).toHaveValue(' a b c');
+
+        fetchMock.done();
+
+        expect(postMock.lastOptions().body.get('comments')).toEqual('hia b c');
+    });
+
+    it('Sends action named args', async () => {
+        const data = { comments: 'hi' };
+        const { element } = await startStimulus(template(data));
+
+        const postMock = fetchMock.postOnce('http://localhost/_components/my_component/updateNamed?values=a%3D1%26b%3D2%26c%3D3', {
+            html: template({ comments: ' a=1 b=2 c=3', isChanged: true }),
+            data: { isChanged: true }
+        });
+
+        await userEvent.type(getByLabelText(element, 'Comments:'), 'a b c');
+
+        getByText(element, 'Update named').click();
+
+        await waitFor(() => expect(element).toHaveTextContent('Comment Changed!'));
+        expect(getByLabelText(element, 'Comments:')).toHaveValue(' a=1 b=2 c=3');
+
+        fetchMock.done();
+
+        expect(postMock.lastOptions().body.get('comments')).toEqual('hia b c');
+    });
 });