debounced Svelte store (JavaScript)

ComponentReader.svelte

<script lang="ts">
  /// ...
  import { customStoreDebouncer /*, storeDebouncer */ } from "./stores/stringStore";
  const stringStoreDebounced = customStoreDebouncer(400); // debounced store read

  $: {
    const text = $stringStoreDebounced; // resolved value, after debounce timeout
    /// ...
  }
</script>

{#if $stringStoreDebounced.length < 3}
  <button on:click={() => alert(1)} title="Prev Page">⏮</button>
{/if}

ComponentWriter.svelte

<script lang="ts">
  import { store } from "../stores/searchText";

  export let placeholder = "";

  function handleInput(target) {
    store.set(target.value); // normal store write
  }
</script>

<input
  type="text"
  on:input={(e) => handleInput(e.target)}
  class:inactive={$store.length <= 2}
  {placeholder}
/>

debouncer.ts

import { get, derived, type Writable } from "svelte/store";

export const debouncer = <T>(store: Writable<T>, timeoutMs = 500) =>
  derived(
    store,
    ($value, set) => {
      const intervalId = setTimeout(() => set($value), timeoutMs);
      return () => clearTimeout(intervalId);
    },
    get(store)
  );

stringStore.ts

import { writable } from "svelte/store";
import { debouncer } from "./debouncer";

export const store = writable<string>("");

export const storeDebouncer = debouncer(store); // default debounce timeout

export const customStoreDebouncer = (timeoutMs?: number) => debouncer(store, timeoutMs); // custom debounce timeout