@widergy/energy-ui 3.97.0 → 3.98.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.98.0](https://github.com/widergy/energy-ui/compare/v3.97.0...v3.98.0) (2025-08-12)
+
+
+### Features
+
+* [PDI-149] duplicated styles fix ([#662](https://github.com/widergy/energy-ui/issues/662)) ([427e41d](https://github.com/widergy/energy-ui/commit/427e41d5b4bf5e2be12b904386bc86a5814cceb5))
+
 # [3.97.0](https://github.com/widergy/energy-ui/compare/v3.96.7...v3.97.0) (2025-08-11)
 
 

package/dist/index.js

@@ -477,6 +477,12 @@ Object.defineProperty(exports, "keyboardUtils", {
     return _keyboardUtils.default;
   }
 });
+Object.defineProperty(exports, "stylesDeduplicationUtils", {
+  enumerable: true,
+  get: function () {
+    return _styleDeduplication.default;
+  }
+});
 var _AlertHandler = _interopRequireDefault(require("./components/UTAlert/AlertHandler"));
 var _componentUtils = _interopRequireDefault(require("./utils/componentUtils"));
 var _EnergyThemeProvider = _interopRequireDefault(require("./components/EnergyThemeProvider"));
@@ -556,4 +562,5 @@ var _UTVirtualKeyboard = _interopRequireDefault(require("./components/UTVirtualK
 var _UTWorkflowContainer = _interopRequireDefault(require("./components/UTWorkflowContainer"));
 var _WithLoading = _interopRequireDefault(require("./components/WithLoading"));
 var _WithTouch = _interopRequireDefault(require("./components/WithTouch"));
+var _styleDeduplication = _interopRequireDefault(require("./utils/styleDeduplication"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/utils/styleDeduplication.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyleDeduplication = exports.setupStyleDeduplication = exports.isStyleDeduplicationConfigured = exports.getDeduplicationStats = exports.default = void 0;
+var _react = require("react");
+/**
+ * Sistema de deduplicación de estilos para Energy UI
+ * Evita que los estilos se carguen múltiples veces cuando la librería se importa desde diferentes proyectos
+ */
+
+// Cache global para estilos ya cargados
+const loadedStyles = new Set();
+const styleElements = new Map();
+
+/**
+ * Genera un hash único para un conjunto de estilos
+ */
+const generateStyleHash = content => {
+  let hash = 0;
+  for (let i = 0; i < content.length; i++) {
+    const char = content.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convertir a entero de 32 bits
+  }
+  return hash.toString(36);
+};
+
+/**
+ * Verifica si un estilo ya está cargado
+ */
+const isStyleAlreadyLoaded = content => {
+  const hash = generateStyleHash(content);
+  return loadedStyles.has(hash);
+};
+
+/**
+ * Marca un estilo como cargado
+ */
+const markStyleAsLoaded = (content, element) => {
+  const hash = generateStyleHash(content);
+  loadedStyles.add(hash);
+  styleElements.set(hash, element);
+};
+
+/**
+ * Intercepta la creación de elementos <style> para evitar duplicados
+ */
+const interceptStyleCreation = () => {
+  if (window.__energyUI_styleDeduplicationConfigured) {
+    return;
+  }
+
+  // Crear el punto de inserción si no existe
+  let insertionPoint = document.getElementById('energyui-insertion-point');
+  if (!insertionPoint) {
+    insertionPoint = document.createElement('div');
+    insertionPoint.id = 'energyui-insertion-point';
+    insertionPoint.setAttribute('data-energy-ui', 'deduplication-insertion-point');
+    document.head.appendChild(insertionPoint);
+  }
+
+  // Usar un enfoque más simple: solo observar el DOM
+  const observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      mutation.addedNodes.forEach(node => {
+        if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'STYLE') {
+          const content = node.textContent || '';
+          if (content && (content.includes('UT') || content.includes('energy-ui') || content.includes('energyui') || content.includes('__'))) {
+            if (isStyleAlreadyLoaded(content)) {
+              console.log('Energy UI: Estilo duplicado detectado en DOM, removiendo...');
+              node.remove();
+            } else {
+              markStyleAsLoaded(content, node);
+            }
+          }
+        }
+      });
+    });
+  });
+  observer.observe(document.head, {
+    childList: true,
+    subtree: true
+  });
+
+  // Interceptar la inserción de reglas CSS para JSS
+  const originalInsertRule = CSSStyleSheet.prototype.insertRule;
+  CSSStyleSheet.prototype.insertRule = function (rule, index) {
+    // Verificar si la regla ya existe en otra hoja de estilos
+    if (rule && typeof rule === 'string') {
+      const existingSheets = Array.from(document.styleSheets);
+      for (const sheet of existingSheets) {
+        try {
+          const rules = Array.from(sheet.cssRules || []);
+          for (const existingRule of rules) {
+            if (existingRule.cssText === rule) {
+              console.log('Energy UI: Regla CSS duplicada detectada y evitada');
+              return 0; // Retornar índice 0 para evitar errores
+            }
+          }
+        } catch (e) {
+          // Ignorar errores de CORS
+        }
+      }
+    }
+    return originalInsertRule.call(this, rule, index);
+  };
+
+  // Marcar como configurado
+  window.__energyUI_styleDeduplicationConfigured = true;
+  console.log('Energy UI: Sistema de deduplicación de estilos configurado');
+};
+
+/**
+ * Función para limpiar estilos duplicados existentes
+ */
+const cleanupDuplicateStyles = () => {
+  const styleElements = document.querySelectorAll('style');
+  const seenContents = new Set();
+  styleElements.forEach(style => {
+    const content = style.textContent || '';
+    if (content && (content.includes('UT') || content.includes('energy-ui') || content.includes('energyui') || content.includes('__'))) {
+      const hash = generateStyleHash(content);
+      if (seenContents.has(hash)) {
+        console.log('Energy UI: Removiendo estilo duplicado existente');
+        style.remove();
+      } else {
+        seenContents.add(hash);
+        markStyleAsLoaded(content, style);
+      }
+    }
+  });
+};
+
+/**
+ * Hook para React
+ */
+const useStyleDeduplication = function () {
+  let enableStyleDeduplication = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  (0, _react.useEffect)(() => {
+    if (enableStyleDeduplication) {
+      interceptStyleCreation();
+      cleanupDuplicateStyles();
+    }
+  }, [enableStyleDeduplication]);
+};
+
+/**
+ * Función para configuración manual
+ */
+exports.useStyleDeduplication = useStyleDeduplication;
+const setupStyleDeduplication = () => {
+  interceptStyleCreation();
+  cleanupDuplicateStyles();
+};
+
+/**
+ * Función para verificar si está configurado
+ */
+exports.setupStyleDeduplication = setupStyleDeduplication;
+const isStyleDeduplicationConfigured = () => {
+  return window.__energyUI_styleDeduplicationConfigured === true;
+};
+
+/**
+ * Función para obtener estadísticas de deduplicación
+ */
+exports.isStyleDeduplicationConfigured = isStyleDeduplicationConfigured;
+const getDeduplicationStats = () => {
+  return {
+    loadedStylesCount: loadedStyles.size,
+    styleElementsCount: styleElements.size,
+    isConfigured: isStyleDeduplicationConfigured()
+  };
+};
+exports.getDeduplicationStats = getDeduplicationStats;
+var _default = exports.default = {
+  getDeduplicationStats,
+  isStyleDeduplicationConfigured,
+  setupStyleDeduplication,
+  useStyleDeduplication
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.97.0",
+  "version": "3.98.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",