@griddo/cx 11.9.17 → 11.10.1

package/exporter/core/logger.ts

@@ -0,0 +1,137 @@
+import type { RenderDB } from "../shared/types/render";
+
+import fsp from "node:fs/promises";
+import path from "node:path";
+
+import { GRIDDO_BUILD_LOGS, GRIDDO_BUILD_LOGS_BUFFER_SIZE } from "../shared/envs";
+import { readDB } from "./db";
+import { GriddoLog } from "./GriddoLog";
+
+const logBuffer: string[] = [];
+let logFilePath: string | null = null;
+let flushPromise: Promise<void> | null = null;
+const LOG_BUFFER_FLUSH_THRESHOLD = GRIDDO_BUILD_LOGS_BUFFER_SIZE;
+const LOG_FILENAME = "render-detail-log.txt";
+const LOG_TO_FILE_IS_DISABLED = !GRIDDO_BUILD_LOGS;
+
+let dbData: RenderDB | null = null;
+
+// Universal data cache for this module...
+async function getDBData() {
+	if (!dbData) {
+		dbData = await readDB();
+	}
+	return dbData;
+}
+
+async function initializeLogFile() {
+	if (LOG_TO_FILE_IS_DISABLED) {
+		return;
+	}
+
+	const data = await getDBData();
+	logFilePath = path.join(data.paths.root, LOG_FILENAME);
+
+	await fsp.rm(logFilePath, { force: true });
+}
+
+function addLogToBuffer(lineContent: string) {
+	if (LOG_TO_FILE_IS_DISABLED) {
+		return;
+	}
+
+	logBuffer.push(lineContent.toString());
+
+	if (logBuffer.length >= LOG_BUFFER_FLUSH_THRESHOLD) {
+		// Fire-and-forget flush to avoid blocking the main thread.
+		flushLogsToFile().catch((error) => {
+			GriddoLog.error("Background log flush failed:", error);
+		});
+	}
+}
+
+/**
+ * Vuelca el contenido del buffer de logs al archivo de logs en disco.
+ * Si el buffer está vacío, ya se está volcando, o no hay ruta de archivo, no hace nada.
+ * Si ocurre un error al escribir, los logs se reinsertan al buffer para reintentar en el siguiente flush.
+ */
+async function flushLogsToFile() {
+	// Si ya hay un volcado en curso, espera a que termine.
+	if (flushPromise) {
+		await flushPromise;
+	}
+
+	if (logBuffer.length === 0 || !logFilePath) {
+		return;
+	}
+
+	const performFlush = async () => {
+		const logsToFlush = [...logBuffer];
+		logBuffer.length = 0;
+
+		try {
+			await fsp.appendFile(logFilePath!, `${logsToFlush.join("\n")}\n`);
+		} catch (error) {
+			logBuffer.unshift(...logsToFlush);
+			GriddoLog.error("Error flushing logs:", error);
+			// No relanzamos el error para no detener el "fire-and-forget"
+		}
+	};
+
+	flushPromise = performFlush();
+
+	try {
+		await flushPromise;
+	} finally {
+		flushPromise = null;
+	}
+}
+
+/**
+ * Copia el archivo de log detallado de renderizado ("render-detail-log.txt")
+ * desde el directorio raíz del proyecto al directorio de logs del dominio en exports,
+ * usando una marca de tiempo en el nombre de destino.
+ * Si el archivo no existe, ignora el error salvo que sea distinto de ENOENT.
+ *
+ * @param domain - Nombre del dominio para el que se guarda el log.
+ */
+async function saveDetailRenderLog(domain: string) {
+	await flushLogsToFile();
+
+	const data = await getDBData();
+
+	const dateString = getFormattedDateTime();
+	const debugDir = path.join(data.paths.exportsDir, domain, "logs");
+
+	await fsp.mkdir(debugDir, { recursive: true });
+
+	const src = path.join(data.paths.root, LOG_FILENAME);
+	const dst = path.join(debugDir, `${dateString}-${LOG_FILENAME}`);
+
+	// Move log to exports
+	try {
+		await fsp.cp(src, dst);
+	} catch (error) {
+		// It's possible the file doesn't exist if GRIDDO_BUILD_LOGS is false
+		// or if no logs were ever added.
+		if (error instanceof Error && "code" in error && error.code !== "ENOENT") {
+			throw error;
+		}
+	}
+}
+
+function getFormattedDateTime() {
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = String(now.getMonth() + 1).padStart(2, "0");
+	const day = String(now.getDate()).padStart(2, "0");
+
+	const hours = String(now.getHours()).padStart(2, "0");
+	const minutes = String(now.getMinutes()).padStart(2, "0");
+	const seconds = String(now.getSeconds()).padStart(2, "0");
+
+	// Formato recomendado para ordenación de archivos: YYYY-MM-DD_HH-mm-ss
+	return `${year}-${month}-${day}_${hours}-${minutes}-${seconds}`;
+}
+
+export { addLogToBuffer, flushLogsToFile, initializeLogFile, saveDetailRenderLog };

package/exporter/core/objects.ts

@@ -0,0 +1,37 @@
+/**
+ * Busca de forma recursiva si ALGUNA de las claves de un array existe como propiedad propia
+ * en un objeto anidado. La búsqueda se detiene en cuanto se encuentra la primera coincidencia.
+ *
+ * @param obj El objeto a inspeccionar.
+ * @param keysToFind Un array de claves que se buscan.
+ * @param visited Un WeakSet para evitar ciclos de referencia.
+ * @returns Retorna `true` si al menos una de las claves se encuentra, de lo contrario `false`.
+ */
+function hasAnyKeyDeep<T extends object>(
+	obj: T,
+	keysToFind: string[],
+	visited = new WeakSet<object>(),
+): boolean {
+	// 1. Casos base: no procesar no-objetos, si ya lo visitamos, o si el array de claves está vacío.
+	if (typeof obj !== "object" || obj === null || visited.has(obj)) {
+		return false;
+	}
+	if (keysToFind.length === 0) {
+		return false;
+	}
+	visited.add(obj);
+
+	// 2. Comprobar si ALGUNA de las claves buscadas es una propiedad propia del objeto actual.
+	// Usamos .some() porque se detiene en la primera coincidencia (eficiencia).
+	const foundKey = keysToFind.some((key) => Object.hasOwn(obj, key));
+	if (foundKey) {
+		return true;
+	}
+
+	// 3. Si no se encontró ninguna clave en este nivel, recorrer los valores y buscar recursivamente.
+	return Object.values(obj).some(
+		(value) => typeof value === "object" && hasAnyKeyDeep(value, keysToFind, visited),
+	);
+}
+
+export { hasAnyKeyDeep };

package/exporter/core/print-logos.ts

@@ -0,0 +1,21 @@
+import fsp from "node:fs/promises";
+import path from "node:path";
+
+import { brush } from "../shared/npm-modules/brush";
+import { GriddoLog } from "./GriddoLog";
+
+/**
+ * Console log the Griddo exporter version.
+ */
+async function showExporterVersion() {
+	// console.clear();
+	const { version } = JSON.parse(
+		await fsp.readFile(path.resolve(__dirname, "../..", "package.json"), "utf-8"),
+	) as { version: string };
+	const logo = `\n${brush.yellow(`Griddo Exporter ${version}`)}
+${brush.dim(`Node ${process.version.slice(1)}`)}\n`;
+
+	GriddoLog.log(logo);
+}
+
+export { showExporterVersion };

package/exporter/index.ts

@@ -1,22 +1,4 @@
-/**
- *
- * Griddo CX library main export file.
- *
- * This file exports functions to use in both: adapters and SSG's frameworks.
- * Turning CX basically in a javascript library.
- *
- * # React
- * There is another export in the `/react` directory to use exclusivelly in
- * the browser context where nodejs (path, fs, etc..) is not available.
- *
- * # Separate scripts.
- * There are some separate .ts files as end-render.ts or reset-render.ts
- * that are intended to be used by infra via npm script like `npm run
- * end-render`
- *
- */
-
-import type { SocialsResponse } from "./types/api";
+import type { SocialsResponse } from "./shared/types/api";
 import type {
 	AdditionalInfo,
 	Dimensions,
@@ -24,53 +6,29 @@ import type {
 	GriddoMultiPage,
 	GriddoPageObject,
 	GriddoSinglePage,
-} from "./types/pages";
-import type { Site } from "./types/sites";
+} from "./shared/types/pages";
+import type { Site } from "./shared/types/sites";
 
-import { endpoints, envs } from "./constants";
-import { apiRegister } from "./registers/index";
-import { FileRegister, MemoryRegister, Register } from "./services/register";
-import { insertAlert } from "./utils/alerts";
-import { getConfig, walk } from "./utils/core-utils";
+import { throwError } from "./core/errors";
+import { walkStore } from "./core/fs";
 import {
 	componentLibraryPathAlias,
 	isComponentLibrary,
 	resolveComponentsPath,
-} from "./utils/instance";
-import {
-	buildLog,
-	debugLog,
-	infoLog,
-	pageSizeLog,
-	verboseLog,
-} from "./utils/loggin";
-import {
-	getBuildPagesFromCachedStore,
-	getBuildPagesFromStore,
-	getBuildPagesPath,
-} from "./utils/store";
+} from "./core/instance";
+import { addLogToBuffer } from "./core/logger";
+import { getRenderPathsHydratedWithDomainFromDB } from "./services/render";
+import { ReadFromStoreError } from "./shared/errors";
 
 export {
-	apiRegister,
-	buildLog,
+	addLogToBuffer,
 	componentLibraryPathAlias,
-	debugLog,
-	endpoints,
-	envs,
-	FileRegister,
-	getBuildPagesFromCachedStore,
-	getBuildPagesFromStore,
-	getBuildPagesPath,
-	getConfig,
-	infoLog,
-	insertAlert,
+	getRenderPathsHydratedWithDomainFromDB,
 	isComponentLibrary,
-	MemoryRegister,
-	pageSizeLog,
-	Register,
+	ReadFromStoreError,
 	resolveComponentsPath,
-	verboseLog,
-	walk,
+	throwError,
+	walkStore,
 	type AdditionalInfo,
 	type Dimensions,
 	type GriddoListPage,

package/exporter/react/DynamicScript/index.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+
+const DynamicScript = (props: { scriptContent: string }) => {
+	const { scriptContent } = props;
+
+	useEffect(() => {
+		if (!scriptContent) {
+			return;
+		}
+
+		const scriptText = scriptContent.replace(/<script>|<\/script>/g, "");
+		if (!scriptText.trim()) {
+			return;
+		}
+
+		const script = document.createElement("script");
+		script.innerHTML = scriptText;
+		script.async = true;
+
+		document.body.appendChild(script);
+
+		return () => {
+			// Hacemos un chequeo por si el script ya fue removido por otro proceso.
+			if (document.body.contains(script)) {
+				document.body.removeChild(script);
+			}
+		};
+	}, [scriptContent]);
+
+	return null;
+};
+
+export { DynamicScript };

package/exporter/react/{Favicon → GriddoFavicon}/index.tsx

@@ -1,8 +1,6 @@
-import * as React from "react";
-
 import { formatImage } from "./utils";
 
-function Favicon({ url }: { url: string | undefined }) {
+function GriddoFavicon({ url }: { url: string | undefined }) {
 	if (!url) {
 		return null;
 	}
@@ -26,13 +24,9 @@ function Favicon({ url }: { url: string | undefined }) {
 				sizes="180x180"
 				href={formatImage(url, { width: 180, height: 180, format: "png" })}
 			/>
-			<link
-				rel="icon"
-				type="image/svg+xml"
-				href={formatImage(url, { format: "svg" })}
-			/>
+			<link rel="icon" type="image/svg+xml" href={formatImage(url, { format: "svg" })} />
 		</>
 	);
 }
 
-export { Favicon };
+export { GriddoFavicon };

package/exporter/react/GriddoIntegrations/index.tsx

@@ -1,18 +1,19 @@
-import type { Dimensions } from "../../types/pages";
 import type { Core } from "@griddo/core";
+import type { Dimensions } from "../../shared/types/pages";
 
-import { generateAutomaticDimensions } from "@griddo-instance";
-import parse from "html-react-parser";
 import * as React from "react";
 
+import { generateAutomaticDimensions } from "@griddo-instance";
+
 import {
 	composeAnalytics,
+	extractScriptContent,
 	filterBodyIntegrationFromPosition,
 	filterHeadIntegrations,
 } from "./utils";
 
 export interface GriddoIntegrationsProps {
-	integrations?: Array<Core.PageIntegration>;
+	integrations?: Core.PageIntegration[];
 	location: "head" | "start-body" | "end-body";
 	id?: string;
 	analyticScript?: string;
@@ -56,12 +57,7 @@ function GriddoIntegrations(props: GriddoIntegrationsProps) {
 	// @shame!
 	// El fix sería llamar a `composeAnalytics()` solo si `pageInfo` existe.
 	const { analyticsScript, analyticsDimensions } = pageInfo
-		? composeAnalytics(
-				siteScript,
-				dimensions,
-				pageInfo,
-				generateAutomaticDimensions,
-			)
+		? composeAnalytics(siteScript, dimensions, pageInfo, generateAutomaticDimensions)
 		: { analyticsDimensions: null, analyticsScript: null };
 
 	// GTAG WITH UA
@@ -70,9 +66,13 @@ function GriddoIntegrations(props: GriddoIntegrationsProps) {
 			`https://www.googletagmanager.com/gtag/js?id=${analyticsScript}`) ||
 		null;
 
+	const siteScriptContent = extractScriptContent(siteScript);
+
 	return (
 		<>
 			{integrationsOrdered?.map((integration, key) => {
+				const integrationScriptContent = extractScriptContent(integration.content);
+
 				/* Data Layer */
 				if (integration.type === "datalayer") {
 					return (
@@ -88,25 +88,19 @@ function GriddoIntegrations(props: GriddoIntegrationsProps) {
 				if (integration.type === "analytics") {
 					// If UA- is provided
 					if (analyticsWithUA) {
-						return (
-							<script key={key} src={analyticsWithUA} data-griddo-id={id} />
-						);
+						return <script key={key} src={analyticsWithUA} data-griddo-id={id} />;
 					}
 
-					return (
-						<React.Fragment key={key}>
-							{siteScript && parse(siteScript, { trim: true })}
-						</React.Fragment>
-					);
+					return siteScriptContent ? (
+						<script key={key} dangerouslySetInnerHTML={{ __html: siteScriptContent }} />
+					) : null;
 				}
 
 				/* Integration integration.type === "addon" */
 				if (integration.type === "addon") {
-					return (
-						<React.Fragment key={key}>
-							{parse(integration.content, { trim: true })}
-						</React.Fragment>
-					);
+					return integrationScriptContent ? (
+						<script key={key} dangerouslySetInnerHTML={{ __html: integrationScriptContent }} />
+					) : null;
 				}
 
 				return null;

package/exporter/react/GriddoIntegrations/utils.ts

@@ -1,5 +1,5 @@
-import type { Dimensions } from "../../types/pages";
 import type { Core } from "@griddo/core";
+import type { Dimensions } from "../../shared/types/pages";
 
 /**
  * Return true if the argument is an object (not null)
@@ -9,7 +9,7 @@ function isObject(value: unknown) {
 }
 
 function filterBodyIntegrationFromPosition(
-	integrations: Array<Core.PageIntegration>,
+	integrations: Core.PageIntegration[],
 	position: "start" | "end",
 ) {
 	return (
@@ -26,7 +26,7 @@ function filterBodyIntegrationFromPosition(
 	);
 }
 
-function filterHeadIntegrations(integrations: Array<Core.PageIntegration>) {
+function filterHeadIntegrations(integrations: Core.PageIntegration[]) {
 	// A la hora de filtrar las integraciones, los addons si que tienen
 	// contenido en head pero en el caso de analytics y datalayer el contenido
 	// llega a null, pero deben ir en el <head>
@@ -48,7 +48,7 @@ function filterHeadIntegrations(integrations: Array<Core.PageIntegration>) {
 }
 
 const filterPositionIntegrations = (
-	integrations: Array<Core.PageIntegration>,
+	integrations: Core.PageIntegration[],
 	position: "head" | "start" | "end",
 ) => {
 	switch (position) {
@@ -70,16 +70,13 @@ function composeAnalytics(
 			};
 		};
 	},
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	generateAutomaticDimensions = (page: Record<string, unknown>) => null,
+	generateAutomaticDimensions = (_page: Record<string, unknown>) => null,
 ) {
 	const analyticsScript = siteScriptRaw ? siteScriptRaw.trim() : "";
 
 	// Las dimensiones o DataLayer
 	const dynamicValuePrefix = "__SCRIPT:";
-	const dimensionValues = isObject(dimensions?.values)
-		? dimensions?.values
-		: {};
+	const dimensionValues = isObject(dimensions?.values) ? dimensions?.values : {};
 	const automaticDimensionValues = generateAutomaticDimensions
 		? generateAutomaticDimensions(page || {})
 		: {};
@@ -104,9 +101,7 @@ function composeAnalytics(
 		);
 	}
 
-	const analyticsDimensions = allDimensions.length
-		? `{${allDimensions.join(",")}}`
-		: null;
+	const analyticsDimensions = allDimensions.length ? `{${allDimensions.join(",")}}` : null;
 
 	return {
 		analyticsScript,
@@ -114,8 +109,25 @@ function composeAnalytics(
 	};
 }
 
+function extractScriptContent(rawInput?: unknown) {
+	if (typeof rawInput !== "string" || !rawInput) {
+		return null;
+	}
+
+	const trimmedInput = rawInput.trim();
+
+	if (!trimmedInput.startsWith("<script>") || !trimmedInput.endsWith("</script>")) {
+		return null;
+	}
+
+	const content = trimmedInput.replace(/<script>|<\/script>/g, "").trim();
+
+	return content || null;
+}
+
 export {
 	composeAnalytics,
+	extractScriptContent,
 	filterBodyIntegrationFromPosition,
 	filterHeadIntegrations,
 	filterPositionIntegrations,

package/exporter/react/GriddoOpenGraph/index.tsx

@@ -0,0 +1,39 @@
+import type { CustomHeadProps } from "../../shared/types";
+
+interface GriddoOpenGraphProps {
+	openGraph?: CustomHeadProps["pageContext"]["openGraph"];
+	pageMetadata?: CustomHeadProps["pageContext"]["pageMetadata"];
+	siteMetadata?: CustomHeadProps["pageContext"]["siteMetadata"];
+	locale?: string;
+	fullUrl?: string;
+}
+
+const GriddoOpenGraph = (props: GriddoOpenGraphProps) => {
+	const { openGraph, pageMetadata, siteMetadata, locale, fullUrl } = props;
+
+	// La lógica de fallback se encapsula aquí
+	const ogTitle = openGraph?.title || pageMetadata?.title;
+	const ogDescription = openGraph?.description || pageMetadata?.description;
+	const ogUrl = pageMetadata?.canonical || fullUrl || "";
+
+	return (
+		<>
+			{/* Open Graph */}
+			{!!siteMetadata?.title && <meta property="og:site_name" content={siteMetadata.title} />}
+			{!!locale && <meta property="og:locale" content={locale} />}
+			{!!ogTitle && <meta property="og:title" content={ogTitle} />}
+			<meta property="og:type" content={openGraph?.type || "website"} />
+			{!!ogDescription && <meta property="og:description" content={ogDescription} />}
+			{!!openGraph?.image && <meta property="og:image" content={openGraph.image} />}
+			<meta property="og:url" content={ogUrl} />
+
+			{/* Twitter */}
+			<meta property="twitter:card" content="summary_large_image" />
+			{!!openGraph?.twitterImage && (
+				<meta property="twitter:image" content={openGraph.twitterImage} />
+			)}
+		</>
+	);
+};
+
+export { GriddoOpenGraph };

package/exporter/react/index.tsx

@@ -1,11 +1,5 @@
-//
-// Griddo CX library react export file.
-// This file exports functions to use in the SSG's frameworks.
-//
-// import { ... } from "@griddo/cx/react";
-//
-
-import { Favicon } from "./Favicon";
+import { GriddoFavicon } from "./GriddoFavicon";
 import { GriddoIntegrations } from "./GriddoIntegrations";
+import { GriddoOpenGraph } from "./GriddoOpenGraph";
 
-export { Favicon, GriddoIntegrations };
+export { GriddoFavicon, GriddoIntegrations, GriddoOpenGraph };