# This is a combination of 6 commits.

# This is the 1st commit message:

WIP heavy refactoring to Component

Initial "hook" system used to reset model field after re-render

Adding a 2nd hook to handle window unloaded

reinit polling after re-render

Adding Component proxy

# This is the commit message #2:

fixing some tests

# This is the commit message #3:

Refactoring loading to a hook

# This is the commit message #4:

fixing tests

# This is the commit message #5:

rearranging

# This is the commit message #6:

Refactoring polling to a separate class

Author: weaverryan

package.json

@@ -48,7 +48,8 @@
         ],
         "rules": {
             "@typescript-eslint/no-explicit-any": "off",
-            "@typescript-eslint/no-empty-function": "off"
+            "@typescript-eslint/no-empty-function": "off",
+            "@typescript-eslint/ban-ts-comment": "off"
         },
         "env": {
             "browser": true

src/LiveComponent/assets/package.json

@@ -29,6 +29,7 @@
         "@hotwired/stimulus": "^3.0.0",
         "@testing-library/dom": "^7.31.0",
         "@testing-library/user-event": "^13.1.9",
+        "@types/node-fetch": "^2.6.2",
         "fetch-mock-jest": "^1.5.1",
         "node-fetch": "^2.6.1"
     }

src/LiveComponent/assets/src/Backend.ts

@@ -0,0 +1,79 @@
+import BackendRequest from './BackendRequest';
+
+export interface BackendInterface {
+    makeRequest(data: any, actions: BackendAction[], updatedModels: string[]): BackendRequest;
+}
+
+export interface BackendAction {
+    name: string,
+    args: Record<string, string>
+}
+
+export default class implements BackendInterface {
+    private url: string;
+    private csrfToken: string|null;
+
+    constructor(url: string, csrfToken: string|null = null) {
+        this.url = url;
+        this.csrfToken = csrfToken;
+    }
+
+    makeRequest(data: any, actions: BackendAction[], updatedModels: string[]): BackendRequest {
+        const splitUrl = this.url.split('?');
+        let [url] = splitUrl
+        const [, queryString] = splitUrl;
+        const params = new URLSearchParams(queryString || '');
+
+        const fetchOptions: RequestInit = {};
+        fetchOptions.headers = {
+            'Accept': 'application/vnd.live-component+html',
+        };
+
+        if (actions.length === 0 && this.willDataFitInUrl(JSON.stringify(data), params)) {
+            params.set('data', JSON.stringify(data));
+            updatedModels.forEach((model) => {
+                params.append('updatedModels[]', model);
+            });
+            fetchOptions.method = 'GET';
+        } else {
+            fetchOptions.method = 'POST';
+            fetchOptions.headers['Content-Type'] = 'application/json';
+            const requestData: any = { data };
+            requestData.updatedModels = updatedModels;
+
+            if (actions.length > 0) {
+                // one or more ACTIONs
+                if (this.csrfToken) {
+                    fetchOptions.headers['X-CSRF-TOKEN'] = this.csrfToken;
+                }
+
+                if (actions.length === 1) {
+                    // simple, single action
+                    requestData.args = actions[0].args;
+
+                    url += `/${encodeURIComponent(actions[0].name)}`;
+                } else {
+                    url += '/_batch';
+                    requestData.actions = actions;
+                }
+            }
+
+            fetchOptions.body = JSON.stringify(requestData);
+        }
+
+        const paramsString = params.toString();
+
+        return new BackendRequest(
+            fetch(`${url}${paramsString.length > 0 ? `?${paramsString}` : ''}`, fetchOptions),
+            actions.map((backendAction) => backendAction.name),
+            updatedModels
+        );
+    }
+
+    private 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 (urlEncodedJsonData + params.toString()).length < 1500;
+    }
+}

src/LiveComponent/assets/src/BackendRequest.ts

@@ -0,0 +1,31 @@
+export default class {
+    promise: Promise<Response>;
+    actions: string[];
+    updatedModels: string[];
+    isResolved = false;
+
+    constructor(promise: Promise<Response>, actions: string[], updateModels: string[]) {
+        this.promise = promise;
+        this.promise.then((response) => {
+            this.isResolved = true;
+
+            return response;
+        });
+        this.actions = actions;
+        this.updatedModels = updateModels;
+    }
+
+    /**
+     * Does this BackendRequest contain at least on action in targetedActions?
+     */
+    containsOneOfActions(targetedActions: string[]): boolean {
+        return (this.actions.filter(action => targetedActions.includes(action))).length > 0;
+    }
+
+    /**
+     * Does this BackendRequest includes updates for any of these models?
+     */
+    areAnyModelsUpdated(targetedModels: string[]): boolean {
+        return (this.updatedModels.filter(model => targetedModels.includes(model))).length > 0;
+    }
+}

src/LiveComponent/assets/src/Component/ModelElementResolver.ts

@@ -0,0 +1,17 @@
+import {getModelDirectiveFromElement} from "../dom_utils";
+
+export interface ModelElementResolver {
+    getModelName(element: HTMLElement): string|null;
+}
+
+export class DataModelElementResolver implements ModelElementResolver {
+    getModelName(element: HTMLElement): string|null {
+        const modelDirective = getModelDirectiveFromElement(element, false);
+
+        if (!modelDirective) {
+            return null;
+        }
+
+        return modelDirective.action;
+    }
+}

src/LiveComponent/assets/src/Component/UnsyncedInputsTracker.ts

@@ -0,0 +1,105 @@
+import {ModelElementResolver} from "./ModelElementResolver";
+
+export default class {
+    private readonly element: HTMLElement;
+    private readonly modelElementResolver: ModelElementResolver;
+    /** Fields that have changed, but whose value is not set back onto the value store */
+    private readonly unsyncedInputs: UnsyncedInputContainer;
+
+    private elementEventListeners: Array<{ event: string, callback: (event: any) => void }> = [
+        { event: 'input', callback: (event) => this.handleInputEvent(event) },
+    ];
+
+    constructor(element: HTMLElement, modelElementResolver: ModelElementResolver) {
+        this.element = element;
+        this.modelElementResolver = modelElementResolver;
+        this.unsyncedInputs = new UnsyncedInputContainer();
+    }
+
+    activate(): void {
+        this.elementEventListeners.forEach(({event, callback}) => {
+            this.element.addEventListener(event, callback);
+        });
+    }
+
+    deactivate(): void {
+        this.elementEventListeners.forEach(({event, callback}) => {
+            this.element.removeEventListener(event, callback);
+        });
+    }
+
+    markModelAsSynced(modelName: string): void {
+        this.unsyncedInputs.markModelAsSynced(modelName);
+    }
+
+    private handleInputEvent(event: Event) {
+        const target = event.target as Element;
+        if (!target) {
+            return;
+        }
+
+        this.updateModelFromElement(target)
+    }
+
+    private updateModelFromElement(element: Element) {
+        // TODO: put back this child element check
+        // if (!elementBelongsToThisController(element, this)) {
+        //     return;
+        // }
+
+        if (!(element instanceof HTMLElement)) {
+            throw new Error('Could not update model for non HTMLElement');
+        }
+
+        const modelName = this.modelElementResolver.getModelName(element);
+        // track any inputs that are "unsynced"
+        this.unsyncedInputs.add(element, modelName);
+    }
+
+    getUnsyncedInputs(): HTMLElement[] {
+        return this.unsyncedInputs.all();
+    }
+
+    getModifiedModels(): string[] {
+        return Array.from(this.unsyncedInputs.getModifiedModels());
+    }
+}
+
+/**
+ * Tracks field & models whose values are "unsynced".
+ *
+ * Unsynced means that the value has been updated inside of
+ * a field (e.g. an input), but that this new value hasn't
+ * yet been set onto the actual model data. It is "unsynced"
+ * from the underlying model data.
+ */
+export class UnsyncedInputContainer {
+    #mappedFields: Map<string, HTMLElement>;
+    #unmappedFields: Array<HTMLElement> = [];
+
+    constructor() {
+        this.#mappedFields = new Map();
+    }
+
+    add(element: HTMLElement, modelName: string|null = null) {
+        if (modelName) {
+            this.#mappedFields.set(modelName, element);
+
+            return;
+        }
+
+        this.#unmappedFields.push(element);
+    }
+
+    all(): HTMLElement[] {
+        return [...this.#unmappedFields, ...this.#mappedFields.values()]
+    }
+
+    markModelAsSynced(modelName: string): void {
+        this.#mappedFields.delete(modelName);
+    }
+
+    getModifiedModels(): string[] {
+        return Array.from(this.#mappedFields.keys());
+    }
+}

src/LiveComponent/assets/src/ValueStore.ts renamed to src/LiveComponent/assets/src/Component/ValueStore.ts

@@ -1,13 +1,12 @@
-import { getDeepData, setDeepData } from './data_manipulation_utils';
-import { LiveController } from './live_controller';
-import { normalizeModelName } from './string_utils';
+import { getDeepData, setDeepData } from '../data_manipulation_utils';
+import { normalizeModelName } from '../string_utils';
 
 export default class {
-    controller: LiveController;
     updatedModels: string[] = [];
+    private data: any = {};
 
-    constructor(liveController: LiveController) {
-        this.controller = liveController;
+    constructor(data: any) {
+        this.data = data;
     }
 
     /**
@@ -20,7 +19,7 @@ export default class {
     get(name: string): any {
         const normalizedName = normalizeModelName(name);
 
-        return getDeepData(this.controller.dataValue, normalizedName);
+        return getDeepData(this.data, normalizedName);
     }
 
     has(name: string): boolean {
@@ -38,7 +37,7 @@ export default class {
             this.updatedModels.push(normalizedName);
         }
 
-        this.controller.dataValue = setDeepData(this.controller.dataValue, normalizedName, value);
+        this.data = setDeepData(this.data, normalizedName, value);
     }
 
     /**
@@ -47,21 +46,14 @@ export default class {
     hasAtTopLevel(name: string): boolean {
         const parts = name.split('.');
 
-        return this.controller.dataValue[parts[0]] !== undefined;
-    }
-
-    asJson(): string {
-        return JSON.stringify(this.controller.dataValue);
+        return this.data[parts[0]] !== undefined;
     }
 
     all(): any {
-        return this.controller.dataValue;
+        return this.data;
     }
 
-    /**
-     * Are any of the passed models currently "updated"?
-     */
-    areAnyModelsUpdated(targetedModels: string[]): boolean {
-        return (this.updatedModels.filter(modelName => targetedModels.includes(modelName))).length > 0;
+    reinitialize(data: any) {
+        this.data = data;
     }
 }