dynamically import components?

[tryggs]

Is it even possible?

I have an array of components to import... how would I go about doing that?

[hartwm]

Here is an example based on page params

<script lang="ts" > 
  import {page} from '$app/stores'
  let imports = import.meta.glob(`/src/page/*.svelte`)
  let defaultContent = imports[`/src/page/base.svelte`]  
  $: dynamicContent = imports[`/src/page/${$page.params.uri}.svelte`] 
  $: component = (dynamicContent) ? dynamicContent : defaultContent
</script>  

<div class="page-content">   
  {#await component() then module}
    <svelte:component this={module.default} {post} />
  {/await}  
</div>

with page being the directory of the components you are looking to import

[tryggs]

Hello, thank you!
could you please clarify what everything means? what I want to do is to import components based on an array and not the page params :)

Thanks again!!

[PlopTheReal]

Maybe something like this:

<script>
    let components= ["Button","ShakingButton"]

    const loadComponent = async (component) => {
        return (await import(`../lib/components/${component}.svelte`)).default;
    }
</script>

{#each components as componentName}
{#await loadComponent(componentName)}
	<p>...waiting</p>
{:then comp}
	<svelte:component this={comp} />
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}
{/each}