Este, mi primer ejemplo de código de Svelte, es una recopilación de algunos de los ejemplos del tutorial de Svelte, más los 3 últimos ejemplos que son un ejemplo de mantenimiento de una gestión de películas.

Como os he indicado, en muchos de estos ejemplos he utilizado las IA’s (ChatGPT, Geminis y DeepSeek). La de DeepSeek, es la que más se confunde, pero en todos los casos, los resultados son bastantes buenos.

Objetivo

Disponer de una App, que me permita recordar los ejemplos del tutorial y algunos ejemplos adicionales, de cara a que me sirva de recordatorio rápido.

Demo: https://fhumanes.com/my-svelte-demo/

Solución Técnica

Si descargas los fuentes, por favor, lee este artículo para preparar el entorno de trabajo e instalar el desarrollo.

El desarrollo se ha hecho en colaboración de la IA DeepSeek y sus principales ficheros son:

src/util/config.js Contiene la descripción de todos los ejemplos

// src/util/config.js
export default [
  { 
    name: "Contador - State", 
    id: "Counter", // Identificador único
    fileTxt: '01-basico/Counter.svelte',
    // component: "/src/ejercicios/01-basico/Counter.svelte",
    category: "Básico" 
  },
  { 
    name: "Nested Components", 
    id: "NestedComponents", // Identificador único
    fileTxt: '01-basico/nested-components/index.svelte',
    // component: "/src/ejercicios/01-basico/nested-components/index.svelte",
    category: "Básico" 
  },
  { 
    name: "HTML Tags",
    id: "HTMLTags", // Identificador único
    fileTxt: '01-basico/html-tags.svelte', 
    //component: "/src/ejercicios/01-basico/html-tags.svelte",
    category: "Básico" 
  },
  { 
    name: "Derived State", 
    id: "DerivedState",
    fileTxt: "01-basico/derived-state.svelte",
    // component: "/src/ejercicios/01-basico/derived-state.svelte",
    category: "Básico" 
  },
  { 
    name: "Inspecting State",
    id: "InspectingState" ,
    fileTxt: "01-basico/Inspecting-state.svelte",
    // component: "/src/ejercicios/01-basico/Inspecting-state.svelte",
    category: "Básico" 
  },
  { 
    name: "Effects",
    id: "Effects",
    fileTxt: "01-basico/Effects.svelte",
    // component: "/src/ejercicios/01-basico/Effects.svelte",
    category: "Básico" 
  },
  { 
    name: "The Style Directive", 
    id: "TheStyleDirective",
    fileTxt: "01-basico/the-style-directive/index.svelte",
    // component: "/src/ejercicios/01-basico/the-style-directive/index.svelte",
    category: "Básico" 
  },
  {
    name: "Declaring props",
    id: "DeclaringProps" ,
    fileTxt: "01-basico/Declaring-props/index.svelte",
    // component: "/src/ejercicios/01-basico/Declaring-props/index.svelte",
    category: "Básico" 
  },
  {
    name: "Each blocks",
    id: "EachBlocks" ,
    fileTxt: "01-basico/EachBlocks.svelte",
    // component: "/src/ejercicios/01-basico/EachBlocks.svelte",
    category: "Básico" 
  },
  {
    name: "Keyed each blocks",
    id: "KeyedEachBlocks" ,
    fileTxt: "01-basico/KeyedEachBlocks/index.svelte",
    // component: "/src/ejercicios/01-basico/KeyedEachBlocks/index.svelte",
    category: "Básico" 
  },
  {
    name: "Await blocks",
    id: "AwaitBlocks" ,
    fileTxt: "01-basico/AwaitBlocks/index.svelte",
    // component: "/src/ejercicios/01-basico/AwaitBlocks/index.svelte",
    category: "Básico" 
  },
  {
    name: "Inline Handlers",
    id: "InlineHandlers" ,
    fileTxt: "01-basico/InlineHandlers.svelte",
    // component: "/src/ejercicios/01-basico/InlineHandlers.svelte",
    category: "Básico" 
  },
  {
    name: "Events Capturing",
    id: "EventsCapturing" ,
    fileTxt: "01-basico/EventsCapturing.svelte",
    // component: "/src/ejercicios/01-basico/EventsCapturing.svelte",
    category: "Básico" 
  },
  {
    name: "Data Table Special",
    id: "DataTableSpecial" ,
    fileTxt: "03-especial/DataTableSpecial.svelte",
    // component: "/src/ejercicios/03-especial/DataTableSpecial.svelte",
    category: "Especial" 
  },
  {
    name: "Videos Bootstrap ChatGPT",
    id: "VideosBootstrapChatGPT" ,
    fileTxt: "03-especial/VideosBootstrapChatGPT/index.svelte",
    // component: "/src/ejercicios/03-especial/VideosBootstrapChatGPT/index.svelte",
    category: "Especial" 
  },
  {
    name: "Videos Bootstrap DeepSeek",
    id: "VideosBootstrapDeepSeek" ,
    fileTxt: "03-especial/VideosBootstrapDeepSeek/index.svelte",
    // component: "/src/ejercicios/03-especial/VideosBootstrapDeepSeek/index.svelte",
    category: "Especial" 
  }

];

src/lib/exerciseLoader.js Es el código que ejecuta cada ejercicio y muestra coloreado el principal fichero fuente del ejercicio

//  Importa todos los componentes estáticamente 
import Counter from '../ejercicios/01-basico/Counter.svelte';
import NestedComponents from '../ejercicios/01-basico/nested-components/index.svelte';
import HTMLTags from '../ejercicios/01-basico/html-tags.svelte';
import DerivedState from '../ejercicios/01-basico/derived-state.svelte';
import InspectingState from '../ejercicios/01-basico/Inspecting-state.svelte';
import Effects from '../ejercicios/01-basico/Effects.svelte';
import TheStyleDirective from '../ejercicios/01-basico/the-style-directive/index.svelte';
import DeclaringProps from '..//ejercicios/01-basico/Declaring-props/index.svelte';
import EachBlocks from '../ejercicios/01-basico/EachBlocks.svelte';
import KeyedEachBlocks from '../ejercicios/01-basico/KeyedEachBlocks/index.svelte';
import AwaitBlocks from '../ejercicios/01-basico/AwaitBlocks/index.svelte';
import InlineHandlers from '../ejercicios/01-basico/InlineHandlers.svelte';
import EventsCapturing from '../ejercicios/01-basico/EventsCapturing.svelte';
import DataTableSpecial from '../ejercicios/03-especial/DataTableSpecial.svelte';
import VideosBootstrapChatGPT from '../ejercicios/03-especial/VideosBootstrapChatGPT/index.svelte';
import VideosBootstrapDeepSeek from '../ejercicios/03-especial/VideosBootstrapDeepSeek/index.svelte';
//  Añade más imports aquí para cada componente 

// Mapeo de componentes por ID
const components = {
  'Counter': Counter,
  'NestedComponents': NestedComponents,
  'HTMLTags': HTMLTags,
  'DerivedState': DerivedState,
  'InspectingState': InspectingState,
  'Effects': Effects,
  'TheStyleDirective': TheStyleDirective,
  'DeclaringProps': DeclaringProps,
  'EachBlocks': EachBlocks,
  'KeyedEachBlocks': KeyedEachBlocks,
  'AwaitBlocks': AwaitBlocks,
  'InlineHandlers': InlineHandlers,
  'EventsCapturing':  EventsCapturing,
  // Agregar más componentes aquí

  'DataTableSpecial': DataTableSpecial,
  "VideosBootstrapChatGPT": VideosBootstrapChatGPT,
  'VideosBootstrapDeepSeek': VideosBootstrapDeepSeek
};

export async function loadExercise(exerciseId,exerciseFileTxt ) {
  const component = components[exerciseId];
  
  if (!component) {
    return {
      component: null,
      code: `// Error: Componente ${exerciseId} no encontrado`
    };
  }

  try {
    // Cargar código fuente (ruta relativa al base URL)
    const base = import.meta.env.BASE_URL || '/';
    const response = await fetch(`${base}src/ejercicios-copia/${exerciseFileTxt}`);
    const code = await response.text();
    
    return { component, code };
  } catch (error) {
    return {
      component,
      code: `// Error cargando código: ${error.message}`
    };
  }
}

Si se desea añadir o quitar algún ejercicio, hay que actualizar estos 2 ficheros. el primero es el inventario de los ejemplos y en el segundo hay que añadir el IMPORT correspondiente al 1º código del ejemplo y actualizar la tabla de «Mapeo de componentes por ID».

Para mostrar el código, hay que trasladar este a la parte de directorio «plublic/src/ejercicio-copia». En ese directorio no se compila los ficheros con extensión «.svelte» y así puede mostrarlos la App.

Os facilito los fuentes, para que los podáis probar en vuestros PC’s. Los ejemplos son simples, pero esta App completa, soy consciente de que no es la mejor forma de empezar.

Una práctica que podéis hacer es sacar algunos de los ejemplos a una App individual. El primer fichero de código del ejemplo sería el fichero «App.svelte» de esa práctica.