Sapper : prevent client javascript to run on server

Question

I'm beginning with Sapper ^^' I'm trying to use a derived store to find and preload some images as following :

export const backgroundDatas = derived([id, backgroundsRegistry], ([$id, $backgroundsRegistry]) => {
    let datas = $backgroundsRegistry ? $backgroundsRegistry[$id] : null;

    if(datas && !datas.preload)
    {
        datas.preload = new Image();
        datas.preload.src = datas.url;
    }

    return datas;
});

But it appeared I couldn't use that derived store in component <script> first execution (Image is not defined error) because new Image() doesn't make sense on the server, seems logical x), so I though I could rely on reactiv statements inside the component in order to use that store. Here is what I did :

$: if (currentBackgroundDatas != $backgroundDatas)
  {
    // make some animation to change background
  }

The problem is that the check currentBackgroundDatas != $backgroundDatas seems to be evaluated on the server, and therefore is throwing Image is not defined error.

Is there any safe way to use that derived store ? In a more generic and architectural way, how do you prevent client javascript to be called on server ?

Answer 1

Use onMount

import { onMount } from 'svelte';

onMount(() => {

  // will run on the client

});