Возможно ли внедрить svelte-компонент в существующую страницу (не SPA)?

Question

[gigachel]

Возможно ли встроить компонент sveltejs v3 (v3.svelte.technology) в существующую html страницу? Чтобы этот компонент получал пропсы со страницы. Наподобие как vue-компонент можно вставить в любую часть страницы.
В примерах, которые я нашел - svelte-компоненты вставляются в другие компоненты.

Answer 1

[Павел Малышев]

Привет! В целом тут 2 варианта:
1) Использовать Custom Elements:

<my-component answer="99"></my-component>

2) Написать небольшую хелпер-функцию:

// mount-helper.js
export function mount(target, Component) {
      return new Component({
            target,
            props: target.dataset
       });
}

<div id="my-component" data-answer="99"></div>

import { mount } from './mount-helper.js';
import MyComponent from './MyComponent.svelte';

mount(document.getElementById('my-component'), MyComponent);

Comments

[Леонид]

А как в самом MyComponent.svelte получить и обработать переданный answer?

[Павел Малышев]

Леонид, MyComponent.svelte это уже совершенно обычный Svelte компонент. answer передан ему как пропс. Соответственно просто читайте доку по Svelte, можно на русском: https://ru.svelte.dev/

Кратко (MyComponent.svelte):

<h1>{answer}</h1>

<script>
   export let answer = '';
</script>

p/s так как пример упрощенный, нужно еще не забыть, что все data-аттрибуты - это исключительно строки, поэтому в mount хорошо бы еще предусмотреть какое-то приведение типов.

[Леонид]

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

[Леонид]

PaulMaly, Спасибо - разобрался. Второй вариант самый гибкий. Все получилось. Еще раз спасибо.

[romanown]

Леонид, так написать бы для тех кто так же ищет решение полезно будет.

Answer 2

[Ivan Brezhnev]

Ссылка на статью с документацией и примером https://v3.svelte.technology/docs#client-side-comp...

Comments

[Ivan Brezhnev]

import App from './App.svelte';

const app = new App({
  target: document.body, // вместо document.body укажите любой другой html element
                         // например document.getElementById('some-widget');
                         // где some-widget - <div id="some-widget"></div>
  props: {
    // assuming App.svelte contains something like
    // `export let answer`:
    answer: 42
  }
});

[gigachel]

Иван Брежнев, да, это видел.
Только как мне из html прокинуть пропсы в этот компонент? Вариант <div id="some-widget" answer={99}></div> - не сработает (значение останется 42).

[Ivan Brezhnev]

Из html, насколько мне известно, никак.

[Ivan Brezhnev]

Попробуй написать в канала по Svelte, там точно подскажут.

https://t.me/sveltejs

[gigachel]

Спасибо, попробую.