Fix Obsidian listener accumulation (#141)

Author: chhoumann

src/ui/obsidian/Slider.svelte

@@ -2,7 +2,7 @@
     import { SliderComponent } from "obsidian";
     import type { CSSObject } from "src/types/CSSObject";
     import extractStylesFromObj from "src/utility/extractStylesFromObj";
-    import { afterUpdate, createEventDispatcher, onMount } from "svelte";
+    import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
     export let value: number;
     export let limits: [min: number, max: number] | [min: number, max: number, step: number];
@@ -13,36 +13,49 @@
     const dispatch = createEventDispatcher();
 
     let slider: SliderComponent;
-    let styles: CSSObject;
+    let styles: CSSObject = {};
+    let changeHandler: ((event: Event) => void) | null = null;
 
     // This is not a complete implementation. I implemented what I needed.
 
     onMount(() => {
         slider = new SliderComponent(sliderRef);
 
-        updateSliderAttributes(slider);
+        changeHandler = (event: Event) => {
+            const newValue = Number((event.target as HTMLInputElement).value);
+            dispatch("change", { value: newValue });
+        };
+
+        slider.sliderEl.addEventListener("input", changeHandler);
     });
 
-    afterUpdate(() => {
-        updateSliderAttributes(slider);
+    onDestroy(() => {
+        if (slider?.sliderEl && changeHandler) {
+            slider.sliderEl.removeEventListener("input", changeHandler);
+        }
     });
 
-    function updateSliderAttributes(sldr: SliderComponent) {
-        if (value !== undefined) sldr.setValue(value);
-        if (limits) {
-            if (limits.length === 2) {
-                sldr.setLimits(limits[0], limits[1], 1);
+    $: if (slider) {
+        updateSliderAttributes(slider, value, limits, styles);
+    }
+
+    function updateSliderAttributes(
+        sldr: SliderComponent,
+        currentValue: number,
+        currentLimits: [min: number, max: number] | [min: number, max: number, step: number],
+        currentStyles: CSSObject
+    ) {
+        if (currentValue !== undefined) sldr.setValue(currentValue);
+        if (currentLimits) {
+            if (currentLimits.length === 2) {
+                sldr.setLimits(currentLimits[0], currentLimits[1], 1);
             } else {
-                sldr.setLimits(limits[0], limits[1], limits[2]);
+                sldr.setLimits(currentLimits[0], currentLimits[1], currentLimits[2]);
             }
         }
-        if (styles) {
-            sldr.sliderEl.setAttr("style", extractStylesFromObj(styles));
+        if (currentStyles) {
+            sldr.sliderEl.setAttr("style", extractStylesFromObj(currentStyles));
         }
-
-        sldr.onChange((value: number) => {
-            dispatch("change", { value });
-        });
     }
 </script>
 

src/ui/obsidian/Text.svelte

@@ -2,7 +2,7 @@
     import { TextComponent } from "obsidian";
     import type { CSSObject } from "src/types/CSSObject";
     import extractStylesFromObj from "src/utility/extractStylesFromObj";
-    import { afterUpdate, createEventDispatcher, onMount } from "svelte";
+    import { createEventDispatcher, onDestroy, onMount } from "svelte";
 
     export let value: string = "";
     export let disabled: boolean = false;
@@ -17,33 +17,48 @@
 
     let text: TextComponent;
     let styles: CSSObject = {};
+    let textChangeHandler: ((event: Event) => void) | null = null;
 
     onMount(() => {
         text = new TextComponent(textRef);
 
-        updateTextComponentAttributes(text);
+        textChangeHandler = (event: Event) => {
+            const newValue = (event.target as HTMLInputElement).value;
+            value = newValue;
+            dispatch("change", { value: newValue });
+        };
+
+        text.inputEl.addEventListener("input", textChangeHandler);
     });
 
-    afterUpdate(() => {
-        updateTextComponentAttributes(text);
+    onDestroy(() => {
+        if (text?.inputEl && textChangeHandler) {
+            text.inputEl.removeEventListener("input", textChangeHandler);
+        }
     });
 
-    function updateTextComponentAttributes(component: TextComponent) {
-        if (value !== undefined) component.setValue(value);
-        if (disabled) component.setDisabled(disabled);
-        if (placeholder) component.setPlaceholder(placeholder);
-        if (type) component.inputEl.type = type;
-        if (styles) {
-            text.inputEl.setAttr("style", extractStylesFromObj(styles));
+    $: if (text) {
+        updateTextComponentAttributes(text, value, disabled, placeholder, type, styles);
+    }
+
+    function updateTextComponentAttributes(
+        component: TextComponent,
+        currentValue: string,
+        isDisabled: boolean,
+        currentPlaceholder: string,
+        currentType: "text" | "password" | "email" | "number" | "tel" | "url",
+        currentStyles: CSSObject
+    ) {
+        if (currentValue !== undefined) component.setValue(currentValue);
+        if (isDisabled) component.setDisabled(isDisabled);
+        if (currentPlaceholder) component.setPlaceholder(currentPlaceholder);
+        if (currentType) component.inputEl.type = currentType;
+        if (currentStyles) {
+            component.inputEl.setAttr("style", extractStylesFromObj(currentStyles));
         }
         if (component?.inputEl) {
             el = component.inputEl;
         }
-
-        component.onChange((newValue: string) => {
-            value = newValue;
-            dispatch("change", { value: newValue });
-        });
     }
 </script>