Actualizar src/index.js

src/index.js

@@ -1,4 +1,4 @@
-// src/index.js - TODO INCLUIDO (sin import dinámico)
+import { Tag, Watch, onUnmount } from "../sigpro.js";
 import {
   ModuleRegistry,
   ValidationModule,
@@ -12,7 +12,6 @@ import {
   iconSetQuartzLight,
   createGrid
 } from "ag-grid-community";
-
 import {
   MultiFilterModule,
   CellSelectionModule,
@@ -46,7 +45,7 @@ ModuleRegistry.registerModules([
   ClipboardModule,
 ]);
 
-export const Grid = (props, lang) => {
+export const Grid = (props) => {
   const { data, options, api, on, class: className, style = "height: 100%; width: 100%;" } = props;
   let gridApi = null;
 
@@ -59,11 +58,9 @@ export const Grid = (props, lang) => {
     return dark ? 'ag-theme-alpine-dark' : 'ag-theme-alpine';
   };
 
-  return $html("div", {
-    style,
-    class: className,
-    ref: (container) => {
-      try {
+  const initGrid = (container) => {
+    if (!container) return;
+
     const initialData = typeof data === "function" ? data() : data;
     const initialOptions = typeof options === "function" ? options() : options;
 
@@ -109,7 +106,7 @@ export const Grid = (props, lang) => {
 
     gridApi = createGrid(container, gridOptions);
 
-        const stopData = $watch([data], () => {
+    const stopData = Watch(data, () => {
       if (!gridApi || gridApi.isDestroyed()) return;
       const newData = typeof data === "function" ? data() : data;
       if (Array.isArray(newData)) {
@@ -118,9 +115,9 @@ export const Grid = (props, lang) => {
           gridApi.setGridOption("rowData", newData);
         }
       }
-        });
+    }, true);
 
-        const stopTheme = $watch([isDark], () => {
+    const stopTheme = Watch(isDark, () => {
       if (gridApi && !gridApi.isDestroyed()) {
         const dark = isDark();
         const newTheme = getTheme(dark);
@@ -129,42 +126,42 @@ export const Grid = (props, lang) => {
           gridApi.setGridOption("theme", newTheme);
         }
       }
-        });
+    }, true);
 
-        const safeOptions = ['pagination', 'paginationPageSize', 'suppressRowClickSelection',
+    const safeOptions = [
+      'pagination', 'paginationPageSize', 'suppressRowClickSelection',
       'rowSelection', 'enableCellTextSelection', 'ensureDomOrder',
-          'stopEditingWhenCellsLoseFocus', 'enterMovesDown', 'enterMovesDownAfterEdit'];
+      'stopEditingWhenCellsLoseFocus', 'enterMovesDown', 'enterMovesDownAfterEdit'
+    ];
 
-        const stopOptions = $watch([options], () => {
+    const stopOptions = Watch(options, () => {
       if (!gridApi || gridApi.isDestroyed() || !options) return;
       const newOptions = typeof options === "function" ? options() : options;
       safeOptions.forEach(key => {
         if (newOptions[key] !== undefined) {
           try {
             gridApi.setGridOption(key, newOptions[key]);
-              } catch (e) {
-                console.warn(`Could not set grid option ${key}:`, e);
-              }
+          } catch (e) {}
         }
       });
-        });
+    }, true);
 
-        container._cleanups.add(stopData);
-        container._cleanups.add(stopTheme);
-        container._cleanups.add(stopOptions);
-        container._cleanups.add(() => {
+    onUnmount(() => {
+      stopData();
+      stopTheme();
+      stopOptions();
       if (gridApi && !gridApi.isDestroyed()) {
         gridApi.destroy();
         if (api) api.current = null;
         gridApi = null;
       }
     });
+  };
 
-      } catch (error) {
-        console.error("Failed to initialize AG Grid:", error);
-        container.innerHTML = `<div class="text-error p-4">Error loading grid: ${error.message}</div>`;
-      }
-    }
+  return Tag("div", {
+    class: className,
+    style: style,
+    ref: initGrid
   });
 };