svelte:window bind:devicePixelRatio

[ion1]

Describe the problem

window.devicePixelRatio can change, for example when the user zooms or drags the window to another display. I am currently using the following (based on boilerplate code from MDN) to track the changes:

import { readable } from "svelte/store";

const devicePixelRatio = readable<number | null>(
  typeof window !== "undefined" ? window.devicePixelRatio : null,
  function start(set) {
    if (typeof window === "undefined") return;

    let removeListener = () => {};

    function updatePixelRatio() {
      removeListener();

      const media = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
      media.addEventListener("change", updatePixelRatio);
      removeListener = () => {
        media.removeEventListener("change", updatePixelRatio);
      };

      set(window.devicePixelRatio);
    }

    updatePixelRatio();

    return function stop() {
      removeListener();
    };
  }
);

It would be convenient if Svelte provided this functionality through svelte:window.

Describe the proposed solution

<svelte:window bind:devicePixelRatio={r}/>

Alternatives considered

The alternative is just to use the boilerplate code.

Importance

nice to have

[Conduitry]

This binding is now supported in 3.59.0.