feature #264 Send data back and forth as JSON (weaverryan)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

Send data back and forth as JSON

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Tickets       |  Fixes #251 (a bit unrelated, but it fixes it)
| License       | MIT

tl;dr the "data" of your component is now sent via JSON for the Ajax calls. Ajax calls are still made via `GET` (unless you're triggering an action or your data is too long) with a new `?data={... json}`.

**Longer Explanation**

Until now, I've been trying to send data back to the server as `?query` params or as POST data (which is just query params stored in the body of the request).

However, using query parameters simply isn't robust enough. Most notably, it makes handling `null` values impossible. If you have a LiveProp - e.g. `firstName` - on the server set to `null`, how should that be sent back to the server? As `?firstName=`? In that case, how do you distinguish from an empty string? One option is to NOT send `firstName` at all on the Ajax request. But then, what if you have a `LiveProp` that is an array with `['firstName' => null]`? If we don't send `firstName`, the array will dehydrate to an empty array.

In the end, the goal is to effectively "freeze" your component's data, send it to the frontend, and have the frontend send it back. Using query parameters simply isn't robust enough to do this without, but JSON is.

There is no real downside to this: it just felt more pure to send data back and forth as query parameters and return HTML. We still return HTML, but sending JSON will make the behavior solid.

Commits
-------

2b808ea Send data back and forth as JSON

Author: weaverryan

.php-cs-fixer.dist.php

@@ -24,6 +24,7 @@
             ->append([__FILE__])
             ->notPath('#/Fixtures/#')
             ->notPath('#/app/var/#')
+            ->notPath('#/var/cache/#')
             ->notPath('Turbo/Attribute/Broadcast.php') // Need https://github.com/FriendsOfPHP/PHP-CS-Fixer/issues/4702
     )
 ;

package.json

@@ -45,7 +45,8 @@
             "plugin:@typescript-eslint/recommended"
         ],
         "rules": {
-            "@typescript-eslint/no-explicit-any": "off"
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-empty-function": "off"
         },
         "env": {
             "browser": true

src/LiveComponent/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## 2.1.0
 
+-   Your component's live "data" is now send over Ajax as a JSON string.
+    Previously data was sent as pure query parameters or as pure POST data.
+    However, this made it impossible to keep certain data types, like
+    distinguishing between `null` and `''`. This has no impact on end-users.
+
 -   Added `data-live-ignore` attribute. If included in an element, that element
     will not be updated on re-render.
 

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,19 @@ 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(this.dataValue);
+            fetchOptions.headers['Content-Type'] = 'application/json';
         }
         this._onLoadingStart();
         const paramsString = params.toString();
@@ -1358,8 +1309,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) {

src/LiveComponent/assets/src/http_data_helper.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) {

src/LiveComponent/assets/src/live_controller.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.comments).toEqual('hi WEAVER');
     });
 
     it('Sends action named args', async () => {

src/LiveComponent/assets/test/controller/action.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'));
 

src/LiveComponent/assets/test/controller/child.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';
         });