es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Svelte: construye componentes en un módulo AMD dentro de Rollup.

27 Jul, 2023 Programación 
<script lang="ts">
    export let name; // nombre del widget
    let childComponent;

    import { onMount } from 'svelte';
    onMount(() => {
        switch(name) {
            case 'Widget1':
                import('./Widget1-69d8780f.js')
                    .then(res => childComponent = res.default)
                    .catch(err=> { throw "No se puede cargar el componente `" + name+ '` ' +  err.message; });
                break;

            case 'Widget2':
                import('./Widget2-69d8780f.js')
                    .then(res => childComponent = res.default)
                    .catch(err=> { throw "No se puede cargar el componente `" + name + '` ' +  err.message; });
                break;

            // más casos ...

            default:
                throw "Componente desconocido `" + name + '` ';
        }

    });

</script>

<svelte:component this={childComponent}>

</svelte:component>

El código anterior funciona bien excepto por los casos largos.

Mi proyecto de Svelte está empaquetado en AMD por rollup.
Ej. Widget1.svelte se compila en Widget1-69d8780f.js que se carga de forma perezosa.

¿Puede rollup construir mis widgets en un módulo AMD individual sin listarlos en el código?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, rollup puede construir tus widgets en módulos AMD individuales sin enumerarlos en el código. Puedes utilizar la funcionalidad de importación dinámica de rollup para lograr esto.

    En lugar de enumerar todos los componentes del widget en la declaración switch, puedes importarlos dinámicamente utilizando la función import().

    Por ejemplo, puedes reemplazar la declaración switch con:

    async function loadComponent() {
  try {
    const module = await import(`./${name}.svelte`);
    return module.default;
  } catch (err) {
    throw new Error(`No se puede cargar el componente '${name}': ${err.message}`);
  }
}

let childComponent;
onMount(() => {
  loadComponent().then(component => {
    childComponent = component;
  }).catch(err => {
    throw new Error(err);
  });
});

    Este código importa dinámicamente el componente basado en la propiedad name pasada, y lo asigna a childComponent.

    Ten en cuenta que este código utiliza una función async para cargar el componente, lo que te permite utilizar await y capturar cualquier error en el bloque try/catch.

    Al utilizar este método, rollup creará automáticamente módulos AMD individuales para cada componente del widget sin necesidad de enumerarlos todos en el código.

Comments are closed.