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

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;
+    }
 }