Remove props value trackers

symfony · Nov 9, 2023 · 1809b26 · 1809b26
1 parent 5a10c37
commit 1809b26
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 66 deletions.
diff --git a/src/LiveComponent/assets/dist/Component/plugins/QueryStringPlugin.d.ts b/src/LiveComponent/assets/dist/Component/plugins/QueryStringPlugin.d.ts
@@ -5,7 +5,6 @@ interface QueryMapping {
 }
 export default class implements PluginInterface {
     private readonly mapping;
-    private trackers;
     constructor(mapping: {
         [p: string]: QueryMapping;
     });

diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
@@ -2787,41 +2787,20 @@ class HistoryStrategy {
     }
 }
 
-class Tracker {
-    constructor(mapping, initialValue, initiallyPresentInUrl) {
-        this.mapping = mapping;
-        this.initialValue = JSON.stringify(initialValue);
-        this.initiallyPresentInUrl = initiallyPresentInUrl;
-    }
-    hasReturnedToInitialValue(currentValue) {
-        return JSON.stringify(currentValue) === this.initialValue;
-    }
-}
 class QueryStringPlugin {
     constructor(mapping) {
         this.mapping = mapping;
-        this.trackers = new Map;
     }
     attachToComponent(component) {
-        component.on('connect', (component) => {
-            const urlUtils = new UrlUtils(window.location.href);
-            Object.entries(this.mapping).forEach(([prop, mapping]) => {
-                const tracker = new Tracker(mapping, component.valueStore.get(prop), urlUtils.has(prop));
-                this.trackers.set(prop, tracker);
-            });
-        });
         component.on('render:finished', (component) => {
             const urlUtils = new UrlUtils(window.location.href);
-            this.trackers.forEach((tracker, prop) => {
-                const value = component.valueStore.get(prop);
-                if (!tracker.initiallyPresentInUrl && tracker.hasReturnedToInitialValue(value)) {
-                    urlUtils.remove(tracker.mapping.name);
-                }
-                else {
-                    urlUtils.set(tracker.mapping.name, value);
-                }
+            const currentUrl = urlUtils.toString();
+            Object.entries(this.mapping).forEach(([prop, mapping]) => {
+                urlUtils.set(mapping.name, component.valueStore.get(prop));
             });
-            HistoryStrategy.replace(urlUtils);
+            if (currentUrl !== urlUtils.toString()) {
+                HistoryStrategy.replace(urlUtils);
+            }
         });
     }
 }

diff --git a/src/LiveComponent/assets/src/Component/plugins/QueryStringPlugin.ts b/src/LiveComponent/assets/src/Component/plugins/QueryStringPlugin.ts
@@ -9,51 +9,22 @@ interface QueryMapping {
     name: string,
 }
 
-/**
- * Tracks initial state and prop query mapping.
- */
-class Tracker {
-    readonly mapping: QueryMapping;
-    private readonly initialValue: any;
-    readonly initiallyPresentInUrl: boolean;
-
-    constructor(mapping: QueryMapping, initialValue: any, initiallyPresentInUrl: boolean) {
-        this.mapping = mapping;
-        this.initialValue = JSON.stringify(initialValue);
-        this.initiallyPresentInUrl = initiallyPresentInUrl;
-    }
-    hasReturnedToInitialValue(currentValue: any)  {
-        return JSON.stringify(currentValue) === this.initialValue;
-    }
-}
-
 export default class implements PluginInterface {
-    private trackers = new Map<string,Tracker>;
-
-    constructor(private readonly mapping: {[p: string]: QueryMapping}) {
-    }
+    constructor(private readonly mapping: {[p: string]: QueryMapping}) {}
 
     attachToComponent(component: Component): void {
-        component.on('connect', (component: Component) => {
-            const urlUtils = new UrlUtils(window.location.href);
-            Object.entries(this.mapping).forEach(([prop, mapping]) => {
-                const tracker = new Tracker(mapping, component.valueStore.get(prop), urlUtils.has(prop));
-                this.trackers.set(prop, tracker);
-            });
-        });
-
         component.on('render:finished', (component: Component) => {
             const urlUtils = new UrlUtils(window.location.href);
-            this.trackers.forEach((tracker, prop) => {
-                const value = component.valueStore.get(prop);
-                if (!tracker.initiallyPresentInUrl && tracker.hasReturnedToInitialValue(value)) {
-                    urlUtils.remove(tracker.mapping.name);
-                } else {
-                    urlUtils.set(tracker.mapping.name, value);
-                }
+            const currentUrl = urlUtils.toString();
+
+            Object.entries(this.mapping).forEach(([prop, mapping]) => {
+                urlUtils.set(mapping.name, component.valueStore.get(prop));
             });
 
-            HistoryStrategy.replace(urlUtils);
+            // Only update URL if it has changed
+            if (currentUrl !== urlUtils.toString()) {
+                HistoryStrategy.replace(urlUtils);
+            }
         });
     }
 }