Sapper: запретить запуск клиентского javascript на сервере

Я начинаю с Sapper ^^ 'Я пытаюсь использовать производное хранилище для поиска и предварительной загрузки некоторых изображений следующим образом:

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;
});

Но оказалось, что я не могу использовать это производное хранилище в компоненте <script> при первом выполнении (ошибка Image is not defined), потому что new Image() не имеет смысла на сервере, кажется логичным x), поэтому я хотя мог полагаться на операторы reactiv внутри компонента в порядке использовать этот магазин. Вот что я сделал:

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

Проблема в том, что проверка currentBackgroundDatas != $backgroundDatas, похоже, выполняется на сервере, и поэтому выдает Image is not defined ошибку.

Есть ли безопасный способ использовать это производное хранилище? В более общем и архитектурном плане, как предотвратить вызов клиентского javascript на сервере?


sapper preload
person SimStuch    schedule 16.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Используйте 1_

import { onMount } from 'svelte';

onMount(() => {

  // will run on the client

});
person Ragland Asir    schedule 17.10.2020
comment
Спасибо ! ОК для использования обратного вызова жизненного цикла, чтобы предотвратить выполнение клиентского javascript на сервере. Но разве это единственный способ? Поскольку в конкретном случае, который я показал, ошибка вызывается $ : if, и, согласно некоторым тестам на REPL, нет возможности использовать его внутри onMount. - person SimStuch; 18.10.2020
comment
Вы могли бы сделать let mounted = false; onMount(() => { mounted = true }); $: if (mounted && currentBackgroundDatas != $backgroundDatas) { } - person Ragland Asir; 28.10.2020