From 96ba0e432857e84501493a378df9a6be25654ce4 Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 13 Nov 2025 21:27:27 -0500 Subject: [PATCH] Add detailed logging to injectAssets and ThemeStudioScriptInjector for improved debugging This commit enhances the injectAssets function and the ThemeStudioScriptInjector class by adding comprehensive logging statements. The logs provide insights into the asset injection process, including the HTML length, domain presence, and script injection details. This improvement facilitates better monitoring and debugging of the asset injection workflow, ensuring a more robust implementation. --- packages/liquid-forge/lib/inject-assets.ts | 21 ++++++ .../rendering/theme-studio-script-injector.ts | 64 +++++++++++++++++-- 2 files changed, 79 insertions(+), 6 deletions(-) diff --git a/packages/liquid-forge/lib/inject-assets.ts b/packages/liquid-forge/lib/inject-assets.ts index aaf33352..2058853a 100644 --- a/packages/liquid-forge/lib/inject-assets.ts +++ b/packages/liquid-forge/lib/inject-assets.ts @@ -15,6 +15,7 @@ */ import { ThemeStudioScriptInjector } from '../services/rendering/theme-studio-script-injector'; +import { logger } from './logger'; /** * Utilidad para inyectar CSS y JS en el HTML renderizado @@ -24,6 +25,13 @@ import { ThemeStudioScriptInjector } from '../services/rendering/theme-studio-sc * @returns El HTML con los assets inyectados */ export function injectAssets(html: string, assetCollector: any, domain?: string): string { + logger.info('[injectAssets] Iniciando inyección de assets', { + htmlLength: html.length, + domain, + hasDomain: !!domain, + hasThemeStudioScript: html.includes('data-fasttify-theme-studio="true"'), + }); + let finalHtml = html; const css = assetCollector.getCombinedCss(); const js = assetCollector.getCombinedJs(); @@ -44,7 +52,20 @@ export function injectAssets(html: string, assetCollector: any, domain?: string) // Inyectar script del ThemeStudio en todas las tiendas if (domain) { + const beforeLength = finalHtml.length; finalHtml = ThemeStudioScriptInjector.injectScript(finalHtml, domain); + const afterLength = finalHtml.length; + logger.info('[injectAssets] Script del ThemeStudio procesado', { + domain, + beforeLength, + afterLength, + difference: afterLength - beforeLength, + finalScriptCount: (finalHtml.match(/data-fasttify-theme-studio="true"/g) || []).length, + }); + } else { + logger.info('[injectAssets] No se inyecta script del ThemeStudio - sin dominio', { + domain, + }); } return finalHtml; diff --git a/packages/liquid-forge/services/rendering/theme-studio-script-injector.ts b/packages/liquid-forge/services/rendering/theme-studio-script-injector.ts index 4a74758a..7792762f 100644 --- a/packages/liquid-forge/services/rendering/theme-studio-script-injector.ts +++ b/packages/liquid-forge/services/rendering/theme-studio-script-injector.ts @@ -15,6 +15,7 @@ */ import { iframeSelectionScript } from '@fasttify/theme-studio'; +import { logger } from '../../lib/logger'; /** * Servicio para inyectar el script del ThemeStudio en el HTML renderizado @@ -26,7 +27,16 @@ export class ThemeStudioScriptInjector { * @returns El script completo como string */ static generateScript(domain: string | undefined): string { - return iframeSelectionScript(domain || null); + logger.info('[ThemeStudioScriptInjector] Generando script', { + domain, + hasDomain: !!domain, + }); + const script = iframeSelectionScript(domain || null); + logger.info('[ThemeStudioScriptInjector] Script generado', { + scriptLength: script.length, + scriptPreview: script.substring(0, 200), + }); + return script; } /** @@ -36,21 +46,63 @@ export class ThemeStudioScriptInjector { * @returns El HTML con el script inyectado */ static injectScript(html: string, domain: string | undefined): string { - if (html.includes('data-fasttify-theme-studio="true"')) { + const hasExistingScript = html.includes('data-fasttify-theme-studio="true"'); + const scriptCount = (html.match(/data-fasttify-theme-studio="true"/g) || []).length; + + logger.info('[ThemeStudioScriptInjector] Intentando inyectar script', { + domain, + htmlLength: html.length, + hasExistingScript, + scriptCount, + hasHead: html.includes(''), + hasBody: html.includes(''), + }); + + if (hasExistingScript) { + logger.warn('[ThemeStudioScriptInjector] Script ya existe, evitando duplicado', { + scriptCount, + domain, + }); return html; } const script = this.generateScript(domain); const scriptTag = ``; + let result: string; if (html.includes('')) { - return html.replace('', `${scriptTag}`); + result = html.replace('', `${scriptTag}`); + logger.info('[ThemeStudioScriptInjector] Script inyectado en ', { + domain, + resultLength: result.length, + scriptTagLength: scriptTag.length, + }); + } else if (html.includes('')) { + result = html.replace('', `${scriptTag}`); + logger.info('[ThemeStudioScriptInjector] Script inyectado en ', { + domain, + resultLength: result.length, + scriptTagLength: scriptTag.length, + }); + } else { + result = html + scriptTag; + logger.info('[ThemeStudioScriptInjector] Script inyectado al final', { + domain, + resultLength: result.length, + scriptTagLength: scriptTag.length, + }); } - if (html.includes('')) { - return html.replace('', `${scriptTag}`); + // Verificar que se inyectó correctamente + const finalScriptCount = (result.match(/data-fasttify-theme-studio="true"/g) || []).length; + if (finalScriptCount !== 1) { + logger.error('[ThemeStudioScriptInjector] Error: Script inyectado múltiples veces', { + domain, + finalScriptCount, + expectedCount: 1, + }); } - return html + scriptTag; + return result; } }