Sending data to the server as JSON instead of urlencoded data

weaverryan · weaverryan · commit c36162c6accd · 2022-02-02T14:45:59.000-05:00
diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
@@ -898,61 +898,6 @@ function combineSpacedArray(parts) {
     return finalParts;
 }
 
-const buildFormKey = function (key, parentKeys) {
-    let fieldName = '';
-    [...parentKeys, key].forEach((name) => {
-        fieldName += fieldName ? `[${name}]` : name;
-    });
-    return fieldName;
-};
-const addObjectToFormData = function (formData, data, parentKeys) {
-    Object.keys(data).forEach((key => {
-        let value = data[key];
-        if (value === true) {
-            value = 1;
-        }
-        if (value === false) {
-            value = 0;
-        }
-        if (value === null) {
-            return;
-        }
-        if (typeof value === 'object') {
-            addObjectToFormData(formData, value, [...parentKeys, key]);
-            return;
-        }
-        formData.append(buildFormKey(key, parentKeys), value);
-    }));
-};
-const addObjectToSearchParams = function (searchParams, data, parentKeys) {
-    Object.keys(data).forEach((key => {
-        let value = data[key];
-        if (value === true) {
-            value = 1;
-        }
-        if (value === false) {
-            value = 0;
-        }
-        if (value === null) {
-            return;
-        }
-        if (typeof value === 'object') {
-            addObjectToSearchParams(searchParams, value, [...parentKeys, key]);
-            return;
-        }
-        searchParams.set(buildFormKey(key, parentKeys), value);
-    }));
-};
-function buildFormData(data) {
-    const formData = new FormData();
-    addObjectToFormData(formData, data, []);
-    return formData;
-}
-function buildSearchParams(searchParams, data) {
-    addObjectToSearchParams(searchParams, data, []);
-    return searchParams;
-}
-
 function setDeepData(data, propertyPath, value) {
     const finalData = JSON.parse(JSON.stringify(data));
     let currentLevelData = finalData;
@@ -1200,13 +1145,18 @@ class default_1 extends Controller {
                 fetchOptions.headers['X-CSRF-TOKEN'] = this.csrfValue;
             }
         }
-        if (!action && this._willDataFitInUrl()) {
-            buildSearchParams(params, this.dataValue);
-            fetchOptions.method = 'GET';
+        let dataAdded = false;
+        if (!action) {
+            const dataJson = JSON.stringify(this.dataValue);
+            if (this._willDataFitInUrl(dataJson, params)) {
+                params.set('data', dataJson);
+                fetchOptions.method = 'GET';
+                dataAdded = true;
+            }
         }
-        else {
+        if (!dataAdded) {
             fetchOptions.method = 'POST';
-            fetchOptions.body = buildFormData(this.dataValue);
+            fetchOptions.body = JSON.stringify({ data: this.dataValue });
         }
         this._onLoadingStart();
         const paramsString = params.toString();
@@ -1358,8 +1308,9 @@ class default_1 extends Controller {
             element.removeAttribute(attribute);
         });
     }
-    _willDataFitInUrl() {
-        return Object.values(this.dataValue).join(',').length < 1500;
+    _willDataFitInUrl(dataJson, params) {
+        const urlEncodedJsonData = new URLSearchParams(dataJson).toString();
+        return (urlEncodedJsonData + params.toString()).length < 1500;
     }
     _executeMorphdom(newHtml) {
         function htmlToElement(html) {
diff --git a/src/LiveComponent/assets/src/http_data_helper.ts b/src/LiveComponent/assets/src/http_data_helper.ts
diff --git a/src/LiveComponent/assets/src/live_controller.ts b/src/LiveComponent/assets/src/live_controller.ts
@@ -2,7 +2,6 @@ import { Controller } from '@hotwired/stimulus';
 import morphdom from 'morphdom';
 import { parseDirectives, Directive } from './directives_parser';
 import { combineSpacedArray } from './string_utils';
-import { buildFormData, buildSearchParams } from './http_data_helper';
 import { setDeepData, doesDeepPropertyExist, normalizeModelName } from './set_deep_data';
 import { haveRenderedValuesChanged } from './have_rendered_values_changed';
 import { normalizeAttributesForComparison } from './normalize_attributes_for_comparison';
@@ -315,12 +314,21 @@ export default class extends Controller {
             }
         }
 
-        if (!action && this._willDataFitInUrl()) {
-            buildSearchParams(params, this.dataValue);
-            fetchOptions.method = 'GET';
-        } else {
+        let dataAdded = false;
+        if (!action) {
+            const dataJson = JSON.stringify(this.dataValue);
+            if (this._willDataFitInUrl(dataJson, params)) {
+                params.set('data', dataJson);
+                fetchOptions.method = 'GET';
+                dataAdded = true;
+            }
+        }
+
+        // if GET can't be used, fallback to POST
+        if (!dataAdded) {
             fetchOptions.method = 'POST';
-            fetchOptions.body = buildFormData(this.dataValue);
+            fetchOptions.body = JSON.stringify(this.dataValue);
+            fetchOptions.headers['Content-Type'] = 'application/json';
         }
 
         this._onLoadingStart();
@@ -531,9 +539,11 @@ export default class extends Controller {
         })
     }
 
-    _willDataFitInUrl() {
+    _willDataFitInUrl(dataJson: string, params: URLSearchParams) {
+        const urlEncodedJsonData = new URLSearchParams(dataJson).toString();
+
         // if the URL gets remotely close to 2000 chars, it may not fit
-        return Object.values(this.dataValue).join(',').length < 1500;
+        return (urlEncodedJsonData + params.toString()).length < 1500;
     }
 
     _executeMorphdom(newHtml: string) {
diff --git a/src/LiveComponent/assets/test/controller/action.test.ts b/src/LiveComponent/assets/test/controller/action.test.ts
@@ -65,7 +65,8 @@ describe('LiveController Action Tests', () => {
         await waitFor(() => expect(element).toHaveTextContent('Comment Saved!'));
         expect(getByLabelText(element, 'Comments:')).toHaveValue('hi weaver');
 
-        expect(postMock.lastOptions().body.get('comments')).toEqual('hi WEAVER');
+        const bodyData = JSON.parse(postMock.lastOptions().body);
+        expect(bodyData.data.comments).toEqual('hi WEAVER');
     });
 
     it('Sends action named args', async () => {
diff --git a/src/LiveComponent/assets/test/controller/child.test.ts b/src/LiveComponent/assets/test/controller/child.test.ts
@@ -187,7 +187,7 @@ describe('LiveController parent -> child component tests', () => {
         const inputElement = getByLabelText(element, 'Content:');
         await userEvent.clear(inputElement);
         await userEvent.type(inputElement, 'changed content');
-        mockRerender({value: 'changed content'}, childTemplate);
+        mockRerender({value: 'changed content', error: null}, childTemplate);
 
         await waitFor(() => expect(element).toHaveTextContent('Value in child: changed content'));
 
diff --git a/src/LiveComponent/assets/test/controller/model.test.ts b/src/LiveComponent/assets/test/controller/model.test.ts
@@ -44,7 +44,9 @@ describe('LiveController data-model Tests', () => {
         const data = { name: 'Ryan' };
         const { element, controller } = await startStimulus(template(data));
 
-        fetchMock.getOnce('end:?name=Ryan+WEAVER', template({ name: 'Ryan Weaver' }));
+        mockRerender({name: 'Ryan WEAVER'}, template, (data: any) => {
+            data.name = 'Ryan Weaver';
+        });
 
         await userEvent.type(getByLabelText(element, 'Name:'), ' WEAVER', {
             // this tests the debounce: characters have a 10ms delay
@@ -63,7 +65,7 @@ describe('LiveController data-model Tests', () => {
         const data = { name: 'Ryan' };
         const { element, controller } = await startStimulus(template(data));
 
-        fetchMock.getOnce('end:?name=Jan', template({ name: 'Jan' }));
+        mockRerender({name: 'Jan'}, template);
 
         userEvent.click(getByText(element, 'Change name to Jan'));
 
@@ -87,11 +89,9 @@ describe('LiveController data-model Tests', () => {
             ['guy', 150]
         ];
         requests.forEach(([string, delay]) => {
-            fetchMock.getOnce(
-                `end:my_component?name=Ryan${string}`,
-                template({ name: `Ryan${string}_` }),
-                { delay }
-            );
+            mockRerender({name: `Ryan${string}`}, template, (data: any) => {
+                data.name = `Ryan${string}_`;
+            }, { delay });
         });
 
         await userEvent.type(getByLabelText(element, 'Name:'), 'guy', {
@@ -121,7 +121,7 @@ describe('LiveController data-model Tests', () => {
         delete inputElement.dataset.model;
         inputElement.setAttribute('name', 'name');
 
-        mockRerender({name: 'Ryan WEAVER'}, template, (data) => {
+        mockRerender({name: 'Ryan WEAVER'}, template, (data: any) => {
             data.name = 'Ryan Weaver';
         });
 
diff --git a/src/LiveComponent/assets/test/controller/render.test.ts b/src/LiveComponent/assets/test/controller/render.test.ts
@@ -64,13 +64,9 @@ describe('LiveController rendering Tests', () => {
         const data = { name: 'Ryan' };
         const { element } = await startStimulus(template(data));
 
-        fetchMock.get(
-            // name=Ryan is sent to the server
-            'http://localhost/_components/my_component?name=Ryan',
-            // server changes that data
-            template({ name: 'Kevin' }),
-            { delay: 100 }
-        );
+        mockRerender({name: 'Ryan'}, template, (data: any) => {
+            data.name = 'Kevin';
+        }, { delay: 100 });
         // type into the input that is not bound to a model
         userEvent.type(getByLabelText(element, 'Comments:'), '!!');
         getByText(element, 'Reload').click();
@@ -85,13 +81,11 @@ describe('LiveController rendering Tests', () => {
         const data = { name: 'Ryan' };
         const { element } = await startStimulus(template(data));
 
-        fetchMock.get(
-            // name=Ryan is sent to the server
-            'http://localhost/_components/my_component?name=Ryan',
-            // server changes that data
-            template({ name: 'Kevin' }),
-            { delay: 100 }
-        );
+        // name=Ryan is sent to the server
+        mockRerender({name: 'Ryan'}, template, (data: any) => {
+            data.name = 'Kevin';
+        }, { delay: 100 });
+
         // type into the input that is not bound to a model
         const input = getByLabelText(element, 'Comments:');
         input.setAttribute('data-live-ignore', '');
@@ -113,11 +107,14 @@ describe('LiveController rendering Tests', () => {
             template(data, true)
         );
 
-        fetchMock.get(
-            'http://localhost/_components/my_component?name=Ryan',
-            template({ name: 'Kevin' }, true),
+        mockRerender(
+            { name: 'Ryan' },
+            // re-render but passing true as the second arg
+            (data: any) => template(data, true),
+            (data: any) => { data.name = 'Kevin'; },
             { delay: 100 }
         );
+
         const input = getByLabelText(element, 'Comments:');
         input.setAttribute('data-live-ignore', '');
         userEvent.type(input, '!!');
@@ -132,9 +129,12 @@ describe('LiveController rendering Tests', () => {
         const data = { name: 'Ryan' };
         const { element } = await startStimulus(template(data));
 
-        fetchMock.get('end:?name=Ryan', '<div>aloha!</div>', {
-            delay: 100
-        });
+        mockRerender(
+            { name: 'Ryan' },
+            () => '<div>aloha!</div>',
+            () => {},
+            { delay: 100 }
+        );
 
         getByText(element, 'Reload').click();
         // imitate navigating away
diff --git a/src/LiveComponent/assets/test/tools.ts b/src/LiveComponent/assets/test/tools.ts
