Sapper / Svelte можно условно ввозить комплектующие?

В Sapper я пытаюсь импортировать компонент, только если он отображается на стороне клиента (с использованием onMount). Есть ли что-то похожее на React Suspense и React.lazy? Или есть другой подход?


person riccardolardi    schedule 12.09.2020    source источник
comment
Я знаю библиотеку под названием svelte-lazy, которая позволяет выполнять ленивую загрузку.   -  person johannchopin    schedule 12.09.2020


Ответы (1)


Вы, конечно, можете сделать это таким образом, да:

<script>
  import { onMount } from 'svelte';
    
  let Thing;
    
  onMount(async () => {
    Thing = (await import('./Thing.svelte')).default;
  });
</script>

<svelte:component this={Thing} answer={42}>
  <p>some slotted content</p>
</svelte:component>

Демо здесь.

В качестве альтернативы вы можете обернуть это в компонент:

<!-- Loader.svelte -->
<script>
  import { onMount } from 'svelte';
    
  let loader;
  let Component;
    
  onMount(async () => {
    Component = (await loader()).default;
  });
    
  export { loader as this };
</script>

<svelte:component this={Component} {...$$restProps}>
  <slot></slot>
</svelte:component>

{#if !Component}
  <slot name="fallback"></slot>
{/if}
<Loader
  this={() => import('./Thing.svelte')}
  answer={42}
>
  <p>some slotted content</p>
  <p slot="fallback">loading...</p>
</Loader>

Демо здесь. Предостережение при таком подходе состоит в том, что слоты, отличные от default, не будут «перенаправляться» на базовый компонент.

person Rich Harris    schedule 12.09.2020