feature #466 [WIP] [Live] Make Ajax calls happen in serial, with "queued" changes (weaverryan, kbond)

This PR was merged into the 2.x branch.

Discussion
----------

[WIP] [Live] Make Ajax calls happen in serial, with "queued" changes

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | yes
| Tickets       | None
| License       | MIT

Hi!

Consider the following situation:

A) Model update is made: Ajax call starts
B) An action is triggered BEFORE the Ajax call from (A) finishes.

Previously, we would start a 2nd Ajax call for (B) before the Ajax call from (A) finished... meaning two Ajax calls were happening at the same time. There are a few problems with this: (i) Ajax call (B) is missing any potential data changes from Ajax call (A) and (i) complexity of multiple things loading at once, and potentially finishing in a different order.

This PR simplifies things, which matches Livewire's behavior anyways. Now, the action from (B) will WAIT until the Ajax call from (A) finishes and THEN start. In fact, while an Ajax call is being made, all changes (potentially multiple model updates or actions) will be "queued" and then all set at once on the next request.

TODO:

* [X] Update the backend: for POST requests, the "data" was moved under a `data` key in JSON. Previously the entire body was the "data".
* [X] Update the backend: for POST/action requests, action "arguments" were moved from query parameters to an `args` key in the JSON.
* [x] Frontend: add tests for the `batch` action Ajax calls
* [x] Update the backend: a new fake `/batch` action needs to be added that can handle multiple actions at once
* [ ] A new `updatedModels` is sent on the ajax requests. If the signature fails, use this to give a better error message about what readonly properties were just modified. (in fact, this is the only purpose of sending this new field to the backend at this time).
* [X] ~~Pass a `includeUpdatedModels` value to the Stimulus controller ONLY when in `dev` mode.~~ For consistency, we will always pass the `updatedModels` in our Ajax requests, though this is intended to be "internal" and we won't use it other than to throw better errors.
* [X] ~~(Optional) If the backend has an unexpected exception (i.e. 5xx or maybe some 4xx where we mark that this is a problem we should show the developer), then render the entire HTML exception page (in dev mode only) so the user can see the error.~~ Done in #467

Cheers!

Commits
-------

4fbcebe cs fix and small tweaks
a0c4d3f use `Request::toArray()`
13d7110 mildly reworking to follow the logic of what is happening more clearly (#5)
b47ece1 [Live] add batch action controller
8b1e879 Refactoring towards single request & pending updates

Author: weaverryan

src/LiveComponent/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 2.5.0
+
+-   [BEHAVIOR CHANGE] Previously, Ajax calls could happen in parallel (if
+    you changed a model then triggered an action before the model update Ajax
+    call finished, the action Ajax call would being in parallel). Now, if
+    an Ajax call is currently happening, any future requests will wait until
+    it finishes. Then, all queued changes (potentially multiple model updates
+    or actions) will be sent all at once on the next request.
+
 ## 2.4.0
 
 -   [BC BREAK] Previously, the `id` attribute was used with `morphdom` as the

src/LiveComponent/assets/src/UnsyncedInputContainer.ts

@@ -1,6 +1,6 @@
 export default class UnsyncedInputContainer {
     #mappedFields: Map<string, HTMLElement>;
-    #unmappedFields: Array<HTMLElement>= [];
+    #unmappedFields: Array<HTMLElement> = [];
 
     constructor() {
         this.#mappedFields = new Map();
@@ -20,14 +20,6 @@ export default class UnsyncedInputContainer {
         return [...this.#unmappedFields, ...this.#mappedFields.values()]
     }
 
-    clone(): UnsyncedInputContainer {
-        const container = new UnsyncedInputContainer();
-        container.#mappedFields = new Map(this.#mappedFields);
-        container.#unmappedFields = [...this.#unmappedFields];
-
-        return container;
-    }
-
     allMappedFields(): Map<string, HTMLElement> {
         return this.#mappedFields;
     }

src/LiveComponent/assets/src/ValueStore.ts

@@ -4,6 +4,7 @@ import { normalizeModelName } from './string_utils';
 
 export default class {
     controller: LiveController;
+    updatedModels: string[] = [];
 
     constructor(liveController: LiveController) {
         this.controller = liveController;
@@ -33,6 +34,7 @@ export default class {
      */
     set(name: string, value: any): void {
         const normalizedName = normalizeModelName(name);
+        this.updatedModels.push(normalizedName);
 
         this.controller.dataValue = setDeepData(this.controller.dataValue, normalizedName, value);
     }
@@ -49,4 +51,8 @@ export default class {
     asJson(): string {
         return JSON.stringify(this.controller.dataValue);
     }
+
+    all(): any {
+        return this.controller.dataValue;
+    }
 }