Можно ли динамически загружать шаблон Svelte во время выполнения?

Question

Я посмотрел на документацию для [<svelte:component>] ( здесь), но, похоже, мне пришлось бы import все возможные шаблоны во время компиляции.

Можно ли в Svelte загрузить любое количество произвольных шаблонов из чего-то вроде fetch() вызов на основе действий пользователя? Затем ввести в него данные?

Было бы неэффективно использовать <slot> что-то вроде этого, если я планирую обновить его после начальной загрузки?

Answer 1

Технически возможно создать компонент из исходного текста - например, REPL это делает- поскольку компилятору все равно, работает ли он в Node или в браузере. Но это определенно не рекомендуется! (Это побеждает объект использования Svelte, так как компилятор несколько большой.)

Вместо этого вы можете динамически импортировать сами компоненты, если вы используете Rollup (с experimentalDynamicImport а также experimentalCodeSplitting) или веб-пакет:

<button on:click="loadChatbox()">
  chat to a customer service representative
</button>

{#if ChatBox}
  <svelte:component this={ChatBox}/>
{/if}

<script>
  export default {
    methods: {
      async loadChatbox() {
        const { default: Chatbox } = await import('./Chatbox.html');
        this.set({ Chatbox });
      }
    }
  };
</script>