Телеграмм чат группы sveltejs страница 5737

Size: a a a

Svelte [svelt]

2020 November 19

в main.js

const hero = document.querySelector('.hero').innerHTML;
const main = document.querySelector('main').innerHTML;

while(document.body.childElementCount > 1) document.body.firstChild.remove();

const app = new App({
  target: document.body,
  anchor: document.body.firstChild,
  props: {
    hero,
    main,
  }
});

источник

02:28пожаловаться #1

1 1 in Svelte [svelt]

а где-то внутри, под управлением роутера есть HomePage.svelte, до которого те пропсы пробрасываются. и там отрисовываются

<script>
  export let hidden = false;
  export let hero = '';
  export let main = '';
</script>

<section class="hero" class:hidden>
    {@html hero}
</section>

<main class:hidden>
    {@html main}
</main>

источник

02:32пожаловаться #2

Igor Filippov in Svelte [svelt]

1 1

у меня похожая задача возникла: прикручиваю свелт к уже существующему статическому сайту. банально был одностраничный лэндинг с формочкой заказа, пришло время туда клиентский кабинет прикрутить. и с одной стороны не хочется всю статику по свелтовским компонентам распихивать и разводить возню с ssr, а с другой стороны надо как-то статикой управлять.
в результате, сделал топорно, в лоб: при монтировании основного компонента (по дефолту это в main.js) сначала позабирал innerHTML у нужных элементов, потом вычистил их из дома, а свелтовскому компоненту указал anchor, чтобы он в нужном месте встал (в моём случае перед футером) и передал вытащенную разметку пропсами.
решение не идеальное (хотя ничего не моргает, но есть одна лишняя перерисовка, плюс слишком сильная зависимость от структуры хтмл, и так далее) но вполне рабочее, и удалось вообще не менять структуру разметки - все css анимации и прочая интерактивность на странице продолжают работать.

Пейдж спид сравнивал до и после?

источник

02:42пожаловаться #3

1 1 in Svelte [svelt]

профайлером гонял - первая отрисовка (она же самая большая) сразу после загрузки статики, морганий нет в том числе на покадровых скриншотах.

источник

02:44пожаловаться #4

1 1 in Svelte [svelt]

потыкал лайтхаусом на локалхосте - что со скриптом, что без него, performance 100.

источник

02:56пожаловаться #5

Alexander Ponomarev in Svelte [svelt]