Алексей, а могли бы ещё уточнить, зачем используется
await new Promise(r => setTimeout(r, Math.random() + 1 * 1000));
Я так понимаю это просто рандомная задержка и пытаюсь понять как это переделать в периодический опрос сервера, но с таких количеством асинхронных штук пока не складывается картинка

А это по приколу. Чтобы ты смог увидеть "loading..." глазами. Сервер слишком быстро отвечает.

Тебе надо периодично влиять на items. Как только он поменяется всё перестроится.

а можно просто запихать getProcessesInfo().then(updateItems) в setInterval?

Быстро накидал вот так:
> https://svelte.dev/repl/ca6ec045bbff4a5284ddc1ddc21d5f1e?version=3.37.0

Здесь нет слежения за таймаутом (надо чистить). В целом тебе надо понять как и на что реагирует шаблон (на изменение перменных) и от этого думать.

Решение далеко неидеальное, просто накидал PoC. Думай дальше сам.

Ууу. Всё жёстче и жёстче :)
Спасибо, пошёл разбираться

На неделе попалась нетривиальная проблема. Несложная, но может быть полезно новичкам. Поэтому традиционная пятничная задачка от меня в качестве конкурса(приз как всегда - почёт и уважение) на лучшее решение.

Ситуация: с сервера приходит готовый HTML код, в котором есть определенные плейсхолдеры. Нужно в приложении отрендерить этот HTML и так, чтобы вместо плейсхолдеров вставлялись соответствующие Svelte-компоненты.

Пример условия:

<script>
    import Counter from './Counter.svelte';
    import Switcher from './Switcher.svelte';
  
    const placeholders = {
        switcher: Switcher,
        counter: Counter
    }
  
    let html = `
      <h1>Placeholders as components</h1>
  
      <h2>Counter component</h2>
      %counter%

      <h2>Switcher component</h2>
      %switcher%`;
</script>
...

Ну и кейсы у вас Алексей, — врагу не пожелаешь 😂

<img src="" onerror="mountComponent(this, $1)">

)))

нетривиальненько =)

ну самое простое туда скрипт теги вместо %name% вставлять =)

Но они не исполнятся если через innerHTML присваивать эту строку

а onerror исполнится =)

сделать replace тегов на элементы, потом пройтись по этим элементам (querySelectorAll), и забиндить на каждый элменет свой компонент (для этого возможно понадобится варпер если свелт не умеет)

Да, всё верно - @marktanashchuk в личку примерно то же самое прислал уже. Но неттривальный вариант с <img onerror> (в сочетании с replaceWith) вместо элементов мне понравился необычностью =) Семантику только портит.

Ну и мой вариант примерно такой же - https://svelte.dev/repl/72608bd155f44473b422d845c31988f6?version=3.37.0

аве регексп

чуть короче :)

https://svelte.dev/repl/57a3b5b8cdc5416aa354d78977ba1d86?version=3.37.0

только компоненты что-то съехали 🧐