Files
Mercados-Web/frontend/src/main.tsx
2025-07-14 11:59:51 -03:00

67 lines
2.3 KiB
TypeScript

import React from 'react';
import ReactDOM from 'react-dom/client';
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
// Importamos TODOS los widgets que queremos que estén disponibles
import { MercadoAgroWidget } from './components/MercadoAgroWidget';
import { MercadoAgroCardWidget } from './components/MercadoAgroCardWidget';
import { GranosWidget } from './components/GranosWidget';
import { GranosCardWidget } from './components/GranosCardWidget';
import { BolsaUsaWidget } from './components/BolsaUsaWidget';
import { UsaIndexHeroCard } from './components/UsaIndexHeroCard';
import { BolsaLocalWidget } from './components/BolsaLocalWidget';
import { MervalHeroCard } from './components/MervalHeroCard';
import { RawDataView } from './pages/RawDataView';
// El registro de todos nuestros widgets disponibles
const widgetRegistry = {
// Widgets del Mercado Local
'merval-heroe': MervalHeroCard,
'bolsa-local-tabla': BolsaLocalWidget,
// Widgets del Mercado de EEUU
'sp500-heroe': UsaIndexHeroCard,
'bolsa-eeuu-tabla': BolsaUsaWidget,
// Widgets de Granos
'granos-tarjetas': GranosCardWidget,
'granos-tabla': GranosWidget,
// Widgets del Mercado Agroganadero
'mercado-agro-tarjetas': MercadoAgroCardWidget,
'mercado-agro-tabla': MercadoAgroWidget,
// Widget Página datos crudos
'pagina-datos-crudos': RawDataView,
};
// Tema base de Material-UI
const theme = createTheme();
// Exponemos la función de renderizado en el objeto window
// @ts-ignore
window.MercadosWidgets = {
render: () => {
const widgetContainers = document.querySelectorAll<HTMLElement>('[data-mercado-widget]');
widgetContainers.forEach(container => {
const widgetName = container.dataset.mercadoWidget as keyof typeof widgetRegistry;
if (widgetName && widgetRegistry[widgetName]) {
const WidgetComponent = widgetRegistry[widgetName];
ReactDOM.createRoot(container).render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<CssBaseline />
<WidgetComponent />
</ThemeProvider>
</React.StrictMode>
);
}
});
}
};
// Si estamos en modo de desarrollo, llamamos a render automáticamente
if (import.meta.env.DEV) {
// @ts-ignore
window.MercadosWidgets.render();
}