Estoy creando un componente de menú personalizable y flexible para Svelte Kit. Debe tener las siguientes propiedades:

• puede contener un recuento de elementos variables: un título, un formulario con controles arbitrarios, un área de notificación opcional y una lista de botones de llamada a la acción;

• debe envolver todos estos elementos subsiguientes en...

• debe abstraer la importación de componentes del artículo

• debería ser fácil de usar

Básicamente, algo que usa ranuras y fragmentos como ese:

 <!-- $lib/GameMenu.svelte --> <script lang="ts"> // abstraction of importing calls here... import Heading from '$lib/game-menu/Heading.svelte' import Norice from '$lib/game-menu/Notice.svelte' import Button from '$lib/game-menu/Button.svelte' // and so forth... </script> <div class="game-menu"> </div>

Para invocarlo a otro templario, simplemente hacemos esto:

 <!-- src/routes/index.svelte --> <script lang="ts"> import GameMenu from '$lib/GameMenu.svelte' </script> <GameMenu> <slot name="title"> An awesome title... </slot> <slot name="notice"> <p> How to add a varialbe numbver of buttons at the bottom of the menu ?</p> <p> title, menu and buttons each needs to be wrapped inside their own div.item ? </p> </slot> <svelte:frgement slot="buttons"> <!-- each button should be wrapped in a div.item --> <button class="buttons">Call To Action 1</button> <button class="buttons">Call To Action 2</button> <button class="buttons">Call To Action 3</button> <button class="buttons">Call To Action 4</button> </svelte:fragment> </GameMenu>

¿Cómo hacer esas cosas?

Saludos.

==== EDITAR =====

Mi primer pensamiento fue escribir algo como:

 <!-- $lib/GameMenu.svelte --> ... {#each Object.keys($$slots) as key } <div class="item"> {#if key === "title" } .... {/if} ... </div> {/each}

...pero no asegura el ordenamiento de las llaves...

Otra solución fue definir claves a priori con:

 let keys = ['title', 'form', 'notice', 'buttons']

en la etiqueta del script de GameMenu... pero ¿qué hay de considerar varios botones?

Mis primeros objetivos fueron automatizar los aspectos de creación del menú flexible y eliminar las llamadas repetitivas para importar a subcomponentes, al crear varias series de páginas de GameMenu, similares a las de un asistente.

O