67 lines
		
	
	
		
			2.3 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			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,
 | |
|   
 | |
|   // Página completa como un widget
 | |
|   '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();
 | |
| } |