Estoy trabajando con Astro y Svelte para componer una página con un producto que tiene múltiples variaciones. El usuario puede seleccionar qué variación quiere y se agregará a una tienda Svelte.

Esto funciona bien en un mundo Svelte, donde hace clic en el botón y agrega un solo producto dependiendo del botón en el que haga clic en REPL para este ejemplo .

Sin embargo, cuando renderizo la página con Astro y uso el mismo componente Svelte, agrega ambos productos al carrito:

 <script> export let products = [ { id: 1, description: "this is a product", prices: [ { id: 1, nickname: '10g', unit_amount: 1.00, }, { id: 2, nickname: '20g', unit_amount: 2.00 } ] }, { id: 2, description: "this is another product", prices: [ { id: 3, nickname: '80g', unit_amount: 18.00 } ] } ]; </script> <main> {product.description && (<p>{product.description}</p>)} {product.prices.data.map(price => ( <div class="card lg:card-side card-bordered"> <div class="card-body"> <h2 class="card-title">{price.nickname}</h2> <p>{toCurrency(price.unit_amount)}</p> <div class="card-actions"> <AddToCart propsData={price} product={product} client:load /> </div> </div> </div> ))} </main>

(Consulte Svelte REPL para <AddToCart /> )

¿Alguna idea de cómo obtengo el comportamiento esperado? Puntos de bonificación por ayudarme a entender por qué sucede esto en Astro...