Reenvía Props de Manera Flexible

A veces construyes componentes contenedores que necesitan pasar props a un elemento interno. En lugar de listar cada atributo posible, la sintaxis spread los reenvía todos a la vez.

Lo Que Aprenderás

Hacer spread de props en elementos
Combinar props explícitas con el resto de props
Construir componentes contenedores
Manejar atributos HTML en componentes

El Problema

Creas un componente Button personalizado:

<!-- filename: src/lib/components/Button.svelte -->
<script>
  let { label, variant = 'primary' } = $props();
</script>

<button class="btn btn-{variant}">
  {label}
</button>

Pero los usuarios quieren agregar atributos HTML estándar:

<!-- User wants to add these -->
<Button 
  label="Submit" 
  type="submit"          <!-- Not forwarded! -->
  disabled={isLoading}   <!-- Not forwarded! -->
  onclick={handleClick}  <!-- Not forwarded! -->
/>

Tendrías que agregar props para cada atributo HTML. Eso es tedioso.

La Solución: Rest Props

Captura las props restantes y haz spread de ellas:

<!-- filename: src/lib/components/Button.svelte -->
<script>
  let { label, variant = 'primary', ...rest } = $props();
</script>

<button class="btn btn-{variant}" {...rest}>
  {label}
</button>

El ...rest captura todas las props que no fueron desestructuradas explícitamente. Luego {...rest} las dispersa en el elemento.

Ahora esto funciona:

<Button 
  label="Submit" 
  type="submit"          
  disabled={isLoading}   
  onclick={handleClick}  
/>

Los tres atributos pasan al elemento <button>.

Cómo Funciona

<script>
  let { known, another, ...rest } = $props();
</script>

Si el componente recibe:

<Component known="a" another="b" extra="c" more="d" />

Entonces:

known = "a"
another = "b"
rest = { extra: "c", more: "d" }

Hacer spread de {...rest} se expande a extra="c" more="d" en el elemento.

Construye un Componente TextField

Un patrón común — envuelve un input con una etiqueta:

<!-- filename: src/lib/components/TextField.svelte -->
<script>
  let { 
    label, 
    id,
    error = '',
    ...rest 
  } = $props();
</script>

<div class="text-field" class:has-error={error}>
  <label for={id}>{label}</label>
  <input {id} {...rest} />
  {#if error}
    <p class="error">{error}</p>
  {/if}
</div>

<style>
  .text-field {
    margin-bottom: 1rem;
  }
  
  label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
  }
  
  input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .has-error input {
    border-color: #dc3545;
  }
  
  .error {
    color: #dc3545;
    font-size: 0.875rem;
    margin: 0.25rem 0 0 0;
  }
</style>

Uso:

<script>
  import TextField from '$lib/components/TextField.svelte';
  
  let email = $state('');
  let emailError = $state('');
</script>

<TextField 
  label="Email Address"
  id="email"
  type="email"
  bind:value={email}
  placeholder="you@example.com"
  required
  error={emailError}
/>

Los atributos type, bind:value, placeholder y required pasan todos al input.

Combina con Class

¿Qué pasa si tanto el componente como quien lo usa quieren agregar clases?

<script>
  let { class: className = '', variant = 'primary', ...rest } = $props();
</script>

<button class="btn btn-{variant} {className}" {...rest}>
  <slot />
</button>

Uso:

<!-- Both classes apply -->
<Button class="full-width" variant="secondary">
  Click Me
</Button>
<!-- Result: class="btn btn-secondary full-width" -->

Nota: class es una palabra reservada en JavaScript, por lo que la renombramos: class: className.

Componentes Contenedores

Las props spread son ideales para componentes contenedores:

<!-- filename: src/lib/components/Card.svelte -->
<script>
  let { padding = '1rem', ...rest } = $props();
</script>

<div class="card" style:padding {...rest}>
  <!-- Content via snippet or children -->
</div>

<style>
  .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
  }
</style>

El Card acepta cualquier atributo de <div>:

<Card 
  id="main-card"
  data-testid="service-card"
  onclick={handleCardClick}
>
  <!-- content -->
</Card>

ServiceCard con Spread Props

Haz que ServiceCard sea más flexible:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
  import PriceBadge from './PriceBadge.svelte';
  
  let { 
    service, 
    selected = false,
    ...rest 
  } = $props();
</script>

<article class="service-card" class:selected {...rest}>
  <h3>
    <a href="/services/{service.slug}">{service.name}</a>
  </h3>
  <p>{service.description}</p>
  <div class="meta">
    <PriceBadge price={service.price} />
    <span class="duration">{service.duration} min</span>
  </div>
</article>

Ahora quienes lo usan pueden agregar cualquier atributo:

<ServiceCard 
  {service} 
  selected={true}
  data-category={service.category}
  onclick={() => selectService(service)}
/>

Cuándo No Usar Spread

El spread no siempre es apropiado:

Elementos sensibles a la seguridad:

<!-- ❌ Don't blindly spread to links -->
<a {...rest}>  <!-- Could inject href="javascript:..." -->

<!-- ✅ Validate or whitelist attributes -->
<a href={safeHref} {...rest}>

Elementos con requisitos específicos:

<!-- ❌ Spreading might override critical attributes -->
<form {...rest}>  <!-- Could override method or action -->

<!-- ✅ Be explicit about critical attributes -->
<form method="POST" action="/submit" {...rest}>

Cuándo importan los tipos:

<!-- ❌ Props might not match element's expected types -->
<img {...rest} />  <!-- src and alt should be validated -->

<!-- ✅ Handle critical props explicitly -->
<script>
  let { src, alt, ...rest } = $props();
</script>
<img {src} {alt} {...rest} />

Errores Comunes

Expandir Antes que las Props Explícitas

<!-- ❌ Explicit prop gets overwritten by spread -->
<button {...rest} class="btn">

<!-- ✅ Spread first, then explicit props -->
<button class="btn" {...rest}>

<!-- Or merge classes -->
<button {...rest} class="btn {rest.class || ''}">

Olvidar Desestructurar las Props Conocidas

<script>
  // ❌ 'variant' ends up in rest and on the element
  let { ...rest } = $props();
</script>
<button {...rest}>  <!-- data-variant="primary" on the element? -->

<script>
  // ✅ Extract known props
  let { variant, ...rest } = $props();
</script>
<button {...rest}>  <!-- Clean -->

¡Módulo Completo! 🎉

Has terminado el Módulo 7: Comunicación de Componentes. BookIt ahora tiene:

Componente ServiceCard
Componente PriceBadge
Componente BookingForm
Props con valores por defecto
Spread props para mayor flexibilidad

Lo que aprendiste:

Por qué los componentes mejoran la mantenibilidad
Cómo crear e importar componentes
Pasar datos con $props()
Valores por defecto para props opcionales
Spread props para reenvío flexible

Resumen

Las spread props (...rest) capturan y reenvían props desconocidas a los elementos. Esto hace que los componentes envolventes sean flexibles sin tener que listar cada atributo posible. Úsalo para botones, inputs, tarjetas y otros envoltorios genéricos.

Puntos clave:

let { known, ...rest } = $props() separa las props conocidas de las desconocidas
{...rest} expande las props restantes sobre un elemento
Ideal para componentes envolventes
Ten cuidado con elementos sensibles a la seguridad

Próximos Pasos

Los componentes se ven funcionales pero simples. Continúa con el Módulo 8: Estilos para darle a BookIt una apariencia profesional.