#audio #radio #webperfomance

https://www.svelteradio.com/episodes/performance-on-the-web-with-houssein-djirdeh

Всем привет! Попробую задать местным гуру нубический вопрос.

Итак, есть страница. Статичная. На ней присутствует несколько свелте-приложений, как-нибудь так:

<div id="app1"></div>
<div id="app2"></div>

И есть некое API, которое должно быть источником данных для этих приложений. Понятное дело, API должно вызываться чем-то вроде

{#await promise then value}
value is {value}
{/await}

Но есть проблемка. Разные приложения используют одни и те же данные (это нормально и не является ошибкой проектирования). А дёргать одно и то же API несколько раз ох как не хочется. Это же лишние накладные расходы.

Вроде по чату гуляла ссылка общего стора с общими данными для нескольких svelte приложений

В мало кому известном, но до сих пор любимом мной riotjs есть возможность смонтировать все приложения (компоненты и т.п.) тогда, когда это надо мне. Собственно, так я обычно и делал. Сначала — фетч из API, потом уже монтировка и/или наполнение данными всего, что динамически рендерится на странице. А вот как сделать это на свелте — ума не приложу.

Марк, это было бы очень неплохо 8) Да вот только как её найти?

ну их можно создавать через new используя конструктор
экспортировать конструкторы приложений в какой-нибудь объект, который можно будет вызывать потом

можно сделать рутовый компонент, который будет запускать стор, где лежат данные из API и после того как они загрузились - показывать компоненты приложений

Привет ребят. Подскажите, пожалуйста, может кто сталкивался. Svelte + Webpack
Вебпак ругает на такие испорты в CSS компоненте свелта - background-image: url('../img/cross.svg');
Ошибка:
ERROR in ./source/somecomponent.svelte.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--6-2!./source/somecomponent.svelte.css)
   Module not found: Error: Can't resolve '../img/cross.svg' in '/Users/.........../source/somecomponen'
    @ ./source/somecomponen.svelte.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--6-2!./source/somecomponen.svelte.css)
Обычно, если вебпаку указать правильный пусть в URL CSS свойств, он находит нормально. Может в свелт-компоненте нужно немного не такой пусть указывать?

Решается через:
             {
               loader: css-loader,
               options: {
                 url: false,
               },
             },
Но тогда не могу протавить хеши файлам

ку, css'ка компонента создаётся рядом с компонентом в виртуальной фске, наверное относительно неё и путь ?

еее да. Только импорт ужасный)  background-image: url('../../../../../public/img/cross.svg');

может настроить алиасы ?

resolve modules ставишь рут папку и нодмодули, в урлах пишешь урлы от рут папки

По идее просто js файл для store иметь и его подключать в приложениях

https://stackoverflow.com/a/60113711/13912694

но там вроде ещё ~перед урлом надо ставить

Правда не помню обновляются ли полученные данные из стора в одном приложении если из другого там переменную изменить

У меня ща так

Типо ещё на рут дописать?

эммм волна в алиасе это ногострел какойтт