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

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

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

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


5
3 117
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>