@griddo/cx 10.4.28 → 10.4.30

package/build/types/global.d.ts

@@ -61,7 +61,7 @@ interface RenderInfo {
     createdPages: Array<number>;
     sitesToPublish: Array<Site>;
 }
-type LifeCyclesNames = "Prepare" | "Restore" | "Data" | "SSG" | "Relocation" | "Meta" | "Archive" | "Clean" | "__DEBUG__";
+type LifeCyclesNames = "Prepare" | "Restore" | "Data" | "SSG" | "Relocation" | "Meta" | "Archive" | "Clean" | "HealthCheck" | "__DEBUG__";
 type CXDir = "__exports" | "__caches" | "__cx" | "__ssg" | "__components" | "__root";
 interface CXConfig {
     proDomain: string;

package/build/types/pages.d.ts

@@ -126,3 +126,9 @@ export type GriddoPageObject = {
         page: GriddoSinglePage | GriddoListPage | GriddoMultiPage;
     };
 };
+export interface Dimensions {
+    values: Record<string, string> | null;
+    contentSelect?: "group" | "individual" | null;
+    groupSelect?: string;
+    dimensionsSelect?: Array<string>;
+}

package/build/utils/integrations.d.ts

@@ -0,0 +1,26 @@
+import type { Dimensions } from "../types/pages";
+import type { Core } from "@griddo/core";
+declare function filterBodyIntegrationFromPosition(integrations: Array<Core.PageIntegration>, position: "start" | "end"): {
+    content: string;
+    type: "addon" | "analytics" | "datalayer";
+}[];
+declare function filterHeadIntegrations(integrations: Array<Core.PageIntegration>): {
+    content: string;
+    type: "addon" | "analytics" | "datalayer";
+}[];
+export declare const filterPositionIntegrations: (integrations: Array<Core.PageIntegration>, position: "head" | "start" | "end") => {
+    content: string;
+    type: "addon" | "analytics" | "datalayer";
+}[];
+export declare function composeAnalytics(siteScriptRaw?: string, dimensions?: Dimensions, page?: {
+    pageContext: {
+        siteScript: string;
+        page: {
+            dimensions: Dimensions;
+        };
+    };
+}, generateAutomaticDimensions?: (page: Record<string, unknown>) => null): {
+    analyticsScript: string;
+    analyticsDimensions: string | null;
+};
+export { filterBodyIntegrationFromPosition, filterHeadIntegrations };

package/exporter/adapters/gatsby/index.ts

@@ -28,11 +28,16 @@ import {
 } from "../../utils/folders";
 import { generateBuildReport, generateSitemaps } from "../../utils/sites";
 
+const config = getConfig();
+const { __cx } = config.paths();
+const renderSentinelFile = path.join(__cx, ".render-sentinel");
+
 async function runGatsbyAdapter() {
 	printExporterLogo("gatsby");
 
+	fs.writeFileSync(renderSentinelFile, new Date().toISOString());
+
 	const domains = await getInstanceDomains();
-	const config = getConfig();
 
 	for (const domain of domains) {
 		const { __ssg, __exports, __caches, __cx, __components } = config.paths(
@@ -240,6 +245,25 @@ async function runGatsbyAdapter() {
 				() => pause("Clean LifeCycle"),
 			],
 		});
+
+		await doLifeCycle({
+			name: "HealthCheck",
+			attempts: 1,
+			steps: [
+				() => {
+					if (!fs.existsSync(renderSentinelFile)) {
+						logBox(
+							`Something has happened and the rendering uuid cannot be read safely.
+There was probably a instance deployment during the render and files were deleted.
+
+The files generated in this render will not be published.`,
+							"Render UUID error"
+						);
+						throw new Error("Render sentinel file does not exist.");
+					}
+				},
+			],
+		});
 	}
 }
 

package/exporter/index.ts

@@ -20,7 +20,7 @@
  */
 
 /* prettier-ignore */ import type { SocialsResponse } from "./types/api";
-/* prettier-ignore */ import type { AdditionalInfo, GriddoListPage, GriddoMultiPage, GriddoPageObject, GriddoSinglePage, } from "./types/pages";
+/* prettier-ignore */ import type { AdditionalInfo, Dimensions, GriddoListPage, GriddoMultiPage, GriddoPageObject, GriddoSinglePage } from "./types/pages";
 /* prettier-ignore */ import type { Site } from "./types/sites";
 
 /* prettier-ignore */ import { startRender } from "./start-render";
@@ -30,6 +30,7 @@
 
 export {
 	AdditionalInfo,
+	Dimensions,
 	GriddoListPage,
 	GriddoMultiPage,
 	GriddoPageObject,

package/exporter/react/GriddoIntegrations/index.tsx

@@ -0,0 +1,131 @@
+import type { Dimensions } from "../../types/pages";
+import type { Core } from "@griddo/core";
+
+import { generateAutomaticDimensions } from "@griddo-instance";
+import parse from "html-react-parser";
+import * as React from "react";
+
+import {
+	composeAnalytics,
+	filterBodyIntegrationFromPosition,
+	filterHeadIntegrations,
+} from "../../utils/integrations";
+
+export interface GriddoIntegrationsProps {
+	integrations?: Array<Core.PageIntegration>;
+	location: "head" | "start-body" | "end-body";
+	id?: string;
+	analyticScript?: string;
+	dimensions?: Dimensions;
+}
+
+function GriddoIntegrations(props: GriddoIntegrationsProps) {
+	const {
+		integrations: maybeIntegrations,
+		location,
+		id,
+		analyticScript: siteScript,
+		dimensions,
+	} = props;
+
+	const integrations = maybeIntegrations || [];
+
+	// GTM y DATALAYER van siempre en "head"
+	const integrationsGroupedBy = {
+		head: filterHeadIntegrations(integrations),
+		"start-body": filterBodyIntegrationFromPosition(integrations, "start"),
+		"end-body": filterBodyIntegrationFromPosition(integrations, "end"),
+	};
+
+	const ints = integrationsGroupedBy[location];
+
+	// Analytics GTM + Dimensions
+	const emptyCodeScript = { props: { dangerouslySetInnerHTML: {} } };
+
+	const { analyticsScript, analyticsDimensions } = composeAnalytics(
+		siteScript,
+		dimensions,
+		generateAutomaticDimensions,
+	);
+
+	const analyticsScriptSrc =
+		(analyticsScript &&
+			analyticsScript.startsWith("UA-") &&
+			`https://www.googletagmanager.com/gtag/js?id=${analyticsScript}`) ||
+		null;
+
+	// <script.../> parseado (jsx) || emptyCodeScript
+	const analyticsCodeSnippet =
+		analyticsScript &&
+		!analyticsScriptSrc &&
+		analyticsScript.includes("<script")
+			? parse(analyticsScript, { trim: true })
+			: emptyCodeScript;
+
+	// Este "fix" parece que evita errores si `analyticsCodeSnippet` es un
+	// array. ¿Puede que sea si el usuario mete más de un script en la caja de
+	// AX?
+	const fixedAnalyticsCode = Array.isArray(analyticsCodeSnippet)
+		? analyticsCodeSnippet.find((item) => item.type === "script") ||
+			emptyCodeScript
+		: analyticsCodeSnippet;
+
+	const {
+		props: {
+			dangerouslySetInnerHTML: { __html: analyticsScriptCode },
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			children: analyticsScriptChildren,
+			...analyticsScriptProps
+		},
+	} = fixedAnalyticsCode as {
+		props: {
+			dangerouslySetInnerHTML: { __html: React.ReactNode };
+			children: unknown;
+			src: string;
+		};
+	};
+
+	return (
+		<>
+			{ints?.map((integration, key) => {
+				/* Data Layer */
+				if (integration.type === "datalayer") {
+					return (
+						<React.Fragment key={key}>
+							<script>{"window.dataLayer = window.dataLayer || [];"}</script>
+							{analyticsDimensions && (
+								<script>{`try{const {__HIDDEN, ...newDataLayer} = ${analyticsDimensions};newDataLayer && Object.keys(newDataLayer).length > 0 && window.dataLayer && window.dataLayer.push(newDataLayer);}catch{}`}</script>
+							)}
+						</React.Fragment>
+					);
+				}
+
+				if (integration.type === "analytics") {
+					return (
+						<React.Fragment key={key}>
+							{/* Analytics with UA- */}
+							{analyticsScriptSrc && (
+								<script key={key} src={analyticsScriptSrc}></script>
+							)}
+							{/* Analytics with js snippet */}
+							{(analyticsScriptProps?.src || analyticsScriptCode) && (
+								<script {...analyticsScriptProps} data-griddo-id={id}>
+									{analyticsScriptCode}
+								</script>
+							)}
+						</React.Fragment>
+					);
+				}
+
+				/* Integration integration.type === "addon" */
+				if (integration.type === "addon") {
+					return parse(integration.content, { trim: true });
+				}
+
+				return null;
+			})}
+		</>
+	);
+}
+
+export { GriddoIntegrations };

package/exporter/react/index.tsx

@@ -1,3 +1,3 @@
-import Foo from "./Foo";
+import { GriddoIntegrations } from "./GriddoIntegrations";
 
-export { Foo };
+export { GriddoIntegrations };

package/exporter/start-render.ts

@@ -5,14 +5,15 @@ import { runGatsbyAdapter } from "./adapters";
 import { logBox, measureExecutionTime } from "./utils/core-utils";
 
 async function startRender() {
-	const exeTime = await measureExecutionTime(runGatsbyAdapter).catch(() => {
+	try {
+		const exeTime = await measureExecutionTime(runGatsbyAdapter);
+		logBox(`All domains rendered in ${exeTime}s.`, "", 1, 0);
+		process.exit(0);
+	} catch (error) {
+		console.log(error);
 		console.log("<[ Render will be reset ]>");
 		process.exit(1);
-	});
-
-	logBox(`All domains rendered in ${exeTime}s.`, "", 1, 0);
-
-	process.exit(0);
+	}
 }
 
 export { startRender };

package/exporter/types/global.ts

@@ -85,6 +85,7 @@ type LifeCyclesNames =
 	| "Meta"
 	| "Archive"
 	| "Clean"
+	| "HealthCheck"
 	| "__DEBUG__";
 
 type CXDir =

package/exporter/types/pages.ts

@@ -157,3 +157,10 @@ export type GriddoPageObject = {
 		page: GriddoSinglePage | GriddoListPage | GriddoMultiPage;
 	};
 };
+
+export interface Dimensions {
+	values: Record<string, string> | null;
+	contentSelect?: "group" | "individual" | null;
+	groupSelect?: string;
+	dimensionsSelect?: Array<string>;
+}

package/exporter/utils/integrations.ts

@@ -0,0 +1,110 @@
+import type { Dimensions } from "../types/pages";
+import type { Core } from "@griddo/core";
+
+/**
+ * Return true if the argument is an object (not null)
+ */
+function isObject(value: unknown) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function filterBodyIntegrationFromPosition(
+	integrations: Array<Core.PageIntegration>,
+	position: "start" | "end"
+) {
+	return (
+		integrations
+			?.filter(
+				(integration) =>
+					integration.contentBody !== null &&
+					integration.contentBody !== "" &&
+					integration.contentBodyPosition === position
+			)
+			.map((integration) => {
+				return { content: integration.contentBody!, type: integration.type };
+			}) || []
+	);
+}
+
+function filterHeadIntegrations(integrations: Array<Core.PageIntegration>) {
+	return integrations
+		?.filter(
+			(integration) =>
+				integration.contentHead !== null && integration.contentHead !== ""
+		)
+		.map((integration) => {
+			return {
+				content: integration.contentHead!,
+				type: integration.type,
+			};
+		});
+}
+
+export const filterPositionIntegrations = (
+	integrations: Array<Core.PageIntegration>,
+	position: "head" | "start" | "end"
+) => {
+	switch (position) {
+		case "head":
+			return filterHeadIntegrations(integrations);
+		default:
+			return filterBodyIntegrationFromPosition(integrations, position);
+	}
+};
+
+export function composeAnalytics(
+	siteScriptRaw?: string,
+	dimensions?: Dimensions,
+	page?: {
+		pageContext: {
+			siteScript: string;
+			page: {
+				dimensions: Dimensions;
+			};
+		};
+	},
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	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 automaticDimensionValues = generateAutomaticDimensions
+		? generateAutomaticDimensions(page || {})
+		: {};
+	const allDimensionsValues = {
+		...dimensionValues,
+		...automaticDimensionValues,
+	} as Record<string, string>;
+
+	const allDimensions = [];
+
+	for (const dimension of Object.keys(allDimensionsValues)) {
+		const dimensionValue = allDimensionsValues[dimension];
+		allDimensions.push(
+			`"${dimension}":${
+				dimensionValue?.startsWith(dynamicValuePrefix)
+					? `${dimensionValue.slice(
+							dynamicValuePrefix.length,
+							dimensionValue.endsWith(";") ? -1 : dimensionValue.length
+					  )}`
+					: `"${dimensionValue}"`
+			}`
+		);
+	}
+
+	const analyticsDimensions = allDimensions.length
+		? `{${allDimensions.join(",")}}`
+		: null;
+
+	return {
+		analyticsScript,
+		analyticsDimensions,
+	};
+}
+
+export { filterBodyIntegrationFromPosition, filterHeadIntegrations };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/cx",
 	"description": "Griddo SSG based on Gatsby",
-	"version": "10.4.28",
+	"version": "10.4.30",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -48,7 +48,7 @@
 		"@babel/preset-env": "^7.14.5",
 		"@babel/preset-react": "^7.14.5",
 		"@babel/preset-typescript": "^7.16.5",
-		"@griddo/core": "10.4.28",
+		"@griddo/core": "10.4.30",
 		"@svgr/webpack": "^5.5.0",
 		"babel-loader": "^8.0.6",
 		"babel-plugin-transform-runtime": "^6.23.0",
@@ -119,5 +119,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e83f19c223a1a726726755b750cb4770267a95ca"
+	"gitHead": "b9de29bad583d1e4f40f614cab7f3944d3f057f6"
 }

package/src/components/Head.tsx

@@ -1,11 +1,10 @@
 import type { CustomHeadProps } from "../types";
 
-import { generateAutomaticDimensions } from "@griddo-instance";
-import parse from "html-react-parser";
 import * as React from "react";
 
-import { filterHeadIntegrations } from "../../build/browser";
-import { cleanCommaSeparated, composeAnalytics, formatImage } from "../utils";
+import { GriddoIntegrations } from "../../build/react";
+import { cleanCommaSeparated, formatImage } from "../utils";
+
 
 /**
  * Gatsby Head API
@@ -18,10 +17,17 @@ const Head = (props: CustomHeadProps) => {
 			renderDate,
 			locale,
 			openGraph,
-			page: { disableHrefLangs, fullUrl, defaultLang, integrations = [] },
+			page: {
+				disableHrefLangs,
+				fullUrl,
+				defaultLang,
+				integrations = [],
+				dimensions,
+			},
 			pageMetadata,
 			siteMetadata,
 			siteOptions,
+			siteScript,
 		},
 	} = props;
 
@@ -33,45 +39,6 @@ const Head = (props: CustomHeadProps) => {
 		!!metaRobots &&
 		(siteOptions?.showBasicMetaRobots || metaRobots !== "index,follow");
 
-	const { analyticsScript, analyticsDimensions } = composeAnalytics(
-		props,
-		generateAutomaticDimensions
-	);
-
-	const emptyCodeScript = { props: { dangerouslySetInnerHTML: {} } };
-
-	const analyticsSrc =
-		(analyticsScript &&
-			analyticsScript.startsWith("UA-") &&
-			`https://www.googletagmanager.com/gtag/js?id=${analyticsScript}`) ||
-		null;
-
-	const analyticsCode =
-		analyticsScript && !analyticsSrc && analyticsScript.includes("<script")
-			? parse(analyticsScript)
-			: emptyCodeScript;
-
-	const fixedAnalyticsCode = Array.isArray(analyticsCode)
-		? analyticsCode.find((item) => item.type === "script") || emptyCodeScript
-		: analyticsCode;
-
-	const {
-		// TODO: Type this correctly
-		props: {
-			dangerouslySetInnerHTML: { __html: analyticsScriptCode },
-			// eslint-disable-next-line @typescript-eslint/no-unused-vars
-			children: analyticsScriptChildren,
-			...analyticsScriptProps
-		},
-	} = fixedAnalyticsCode as {
-		// TODO: Fix this custom inline weird type
-		props: {
-			dangerouslySetInnerHTML: { __html: React.ReactNode };
-			children: unknown;
-			src: string;
-		};
-	};
-
 	// Resize favicon
 	const faviconResized = formatImage(siteMetadata?.favicon, 32, 32, "png");
 
@@ -105,8 +72,6 @@ const Head = (props: CustomHeadProps) => {
 				?.url) ||
 		null;
 
-	const headIntegrations = filterHeadIntegrations(integrations);
-
 	return (
 		<>
 			{/* Uncomment with Gatsby 5.5.0 */}
@@ -184,24 +149,13 @@ const Head = (props: CustomHeadProps) => {
 				<meta name="keywords" content={pageMetadata.metaKeywords} />
 			)}
 
-			{/* Data Layer */}
-			<script>{"window.dataLayer = window.dataLayer || [];"}</script>
-			{analyticsDimensions && (
-				<script>{`try{const {__HIDDEN, ...newDataLayer} = ${analyticsDimensions};newDataLayer && Object.keys(newDataLayer).length > 0 && window.dataLayer && window.dataLayer.push(newDataLayer);}catch{}`}</script>
-			)}
-
-			{/* Analytics with UA- */}
-			{analyticsSrc && <script src={analyticsSrc}></script>}
-
-			{/* {analyticsCode} */}
-			{(analyticsScriptProps?.src || analyticsScriptCode) && (
-				<script {...analyticsScriptProps} data-griddo-id={fullUrl}>
-					{analyticsScriptCode}
-				</script>
-			)}
-
-			{headIntegrations &&
-				headIntegrations.map((integrationBody) => parse(integrationBody))}
+			<GriddoIntegrations
+				id={fullUrl}
+				location="head"
+				integrations={integrations}
+				dimensions={dimensions}
+				analyticScript={siteScript}
+			/>
 		</>
 	);
 };

package/src/components/template.tsx

@@ -4,11 +4,10 @@ import type { Core } from "@griddo/core";
 import { Page as RenderGriddoPage } from "@griddo/core";
 import { components, SiteProvider, templates } from "@griddo-instance";
 import { Link, navigate } from "gatsby";
-import parse from "html-react-parser";
 import * as React from "react";
 import { Helmet } from "react-helmet";
 
-import { filterPositionIntegrations } from "../../build/browser";
+import { GriddoIntegrations } from "../../build/react";
 
 // Gatsby Head
 export { Head } from "./Head";
@@ -36,15 +35,6 @@ const Template = (data: TemplateProps) => {
 	const header = data.pageContext.header as Core.HeaderModule;
 	const footer = data.pageContext.footer as Core.FooterModule;
 
-	const integrationsPreBody = filterPositionIntegrations(
-		page.integrations || [],
-		"start"
-	);
-	const integrationsPostBody = filterPositionIntegrations(
-		page.integrations || [],
-		"end"
-	);
-
 	return (
 		<SiteProvider
 			apiUrl={page.apiUrl}
@@ -70,11 +60,12 @@ const Template = (data: TemplateProps) => {
 				<html lang={locale} />
 			</Helmet>
 
+			<GriddoIntegrations
+				location="start-body"
+				integrations={page.integrations}
+			/>
+
 			{/* Render every page */}
-			{integrationsPreBody &&
-				integrationsPreBody.map((integrationBody) =>
-					parse(integrationBody, { trim: true })
-				)}
 			<RenderGriddoPage
 				apiUrl={page.apiUrl}
 				content={page}
@@ -84,10 +75,11 @@ const Template = (data: TemplateProps) => {
 				library={library}
 				pageLanguages={page.pageLanguages}
 			/>
-			{integrationsPostBody &&
-				integrationsPostBody.map((integrationBody) =>
-					parse(integrationBody, { trim: true })
-				)}
+
+			<GriddoIntegrations
+				location="end-body"
+				integrations={page.integrations}
+			/>
 		</SiteProvider>
 	);
 };

package/src/types.ts

@@ -1,5 +1,6 @@
 import type {
 	AdditionalInfo,
+	Dimensions,
 	GriddoListPage,
 	GriddoMultiPage,
 	GriddoPageObject,
@@ -40,13 +41,6 @@ interface HtmlProps {
 	preBodyComponents: React.ReactNode;
 }
 
-interface Dimensions {
-	values: Record<string, string> | null;
-	contentSelect?: "group" | "individual" | null;
-	groupSelect?: string;
-	dimensionsSelect?: Array<string>;
-}
-
 // TODO: JSDoc
 type GatsbyPageObject = {
 	matchPath?: string;
@@ -96,10 +90,4 @@ type GatsbyPageObject = {
 	};
 };
 
-export {
-	CustomHeadProps,
-	Dimensions,
-	GatsbyPageObject,
-	HtmlProps,
-	TemplateProps,
-};
+export { CustomHeadProps, GatsbyPageObject, HtmlProps, TemplateProps };