Fix Bootstrap y Cache

frontend/frontend.nginx.conf

@@ -4,29 +4,27 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
-    # --- NUEVO BLOQUE ESPECÍFICO PARA BOOTSTRAP.JS ---
+    # --- BLOQUE PARA BOOTSTRAP.JS (MEJORADO) ---
+    # Se aplica EXCLUSIVAMENTE a la petición de /bootstrap.js
     location = /bootstrap.js {
-        # Esta cabecera le dice a los proxies que deben revalidar el archivo
+        # Aseguramos que Nginx genere la huella digital ETag
-        # con el servidor de origen antes de servirlo desde la caché.
+        etag on;
-        add_header Cache-Control "no-cache, must-revalidate";
 
-        # 'expires off' es otra capa de seguridad para evitar que se cachee
+        # Instrucciones explícitas de no cachear
-        expires off;
+        expires -1;
+        add_header Cache-Control "no-cache, must-revalidate, private";
         
-        # Intenta servir el archivo. Si no existe, devuelve 404.
         try_files $uri =404;
     }
 
-    # Bloque para otros activos estáticos (con hash) que SÍ pueden ser cacheados agresivamente
+    # Bloque para otros activos con hash (con caché agresiva)
     location ~* \.(?:js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
-        # Estos archivos cambian de nombre en cada build, así que pueden
-        # ser cacheados por mucho tiempo sin riesgo.
         expires 1y;
         add_header Cache-Control "public";
         try_files $uri =404;
     }
 
-    # Bloque para la SPA
+    # Bloque para el enrutamiento de la aplicación React
     location / {
         try_files $uri $uri/ /index.html;
     }

frontend/public/bootstrap.js

@@ -1,5 +1,4 @@
 // frontend/public/bootstrap.js
-
 (function() {
   // El dominio donde se alojan los widgets
   const WIDGETS_HOST = 'https://widgets.eldia.com';
@@ -27,17 +26,17 @@
   // Función principal
   async function initWidgets() {
     try {
-      // 1. Obtener el manifest.json para saber los nombres de archivo actuales
+      // 1. Obtener el manifest.json
       const response = await fetch(`${WIDGETS_HOST}/manifest.json`);
       if (!response.ok) {
-        throw new Error('No se pudo cargar el manifest de los widgets.');
+        throw new Error('No se pudo cargar el manifest de los widgets de mercados.');
       }
       const manifest = await response.json();
 
-      // 2. Encontrar el punto de entrada principal (nuestro main.tsx)
+      // 2. Encontrar el punto de entrada principal
       const entryKey = Object.keys(manifest).find(key => manifest[key].isEntry);
       if (!entryKey) {
-        throw new Error('No se encontró el punto de entrada en el manifest.');
+        throw new Error('No se encontró el punto de entrada en el manifest de mercados.');
       }
       
       const entry = manifest[entryKey];
@@ -51,12 +50,26 @@
         });
       }
 
-      // 4. Cargar el JS principal y esperar a que esté listo
+      // 4. Cargar el JS principal
       await loadScript(jsUrl);
 
-      // 5. Una vez cargado, llamar a la función de renderizado
+      // 5. Una vez cargado, llamar a la función de renderizado para CADA WIDGET
       if (window.MercadosWidgets && typeof window.MercadosWidgets.render === 'function') {
-        window.MercadosWidgets.render();
+        console.log('Bootstrap Mercados: La función render existe. Renderizando widgets...');
+        
+        // Buscamos los contenedores específicos para los widgets de mercados
+        const widgetContainers = document.querySelectorAll('[data-mercado-widget]');
+
+        if (widgetContainers.length === 0) {
+            console.warn('Bootstrap Mercados: No se encontraron contenedores de widget en la página.');
+        }
+        
+        widgetContainers.forEach(container => {
+          // Pasamos el contenedor y su dataset (props) a la función de renderizado
+          window.MercadosWidgets.render(container, container.dataset);
+        });
+      } else {
+        console.error('Bootstrap Mercados: La función window.MercadosWidgets.render no fue encontrada.');
       }
 
     } catch (error) {
@@ -64,7 +77,11 @@
     }
   }
 
-  // Iniciar todo el proceso
+  // Esperamos a que el DOM esté listo para ejecutar
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initWidgets);
+  } else {
     initWidgets();
+  }
 
 })();