@griddo/cx 11.9.9-rc.0 → 11.9.9-rc.2

package/exporter/{shared/errors.ts → errors/errors-data.ts}

@@ -7,13 +7,11 @@
  * obligatorily.
  */
 
+import type { ErrorData } from ".";
 import type { SpawnSyncReturns } from "node:child_process";
-import type { ErrorData } from "../core/errors";
 
 type ErrorsType =
 	| "ArtifactError"
-	| "BundlesInconsistencyError"
-	| "CheckHealthError"
 	| "ErrorInSSGBuildProcess"
 	| "LifecycleExecutionError"
 	| "LoginError"
@@ -22,7 +20,6 @@ type ErrorsType =
 	| "ReadFromStoreError"
 	| "ReferenceFieldSourcesNotFoundError"
 	| "RenderUUIDError"
-	| "UploadSearchError"
 	| "WriteToStoreError";
 
 const ArtifactError: ErrorData = {
@@ -33,13 +30,19 @@ const ArtifactError: ErrorData = {
 	hint: "Have there been any recent deployments? These can delete directories from the current render.",
 };
 
-const ErrorInSSGBuildProcess = (command: SpawnSyncReturns<string>): ErrorData => ({
+const ErrorInSSGBuildProcess = (
+	command: SpawnSyncReturns<string>,
+): ErrorData => ({
 	error: "ErrorInSSGBuildProcess",
 	message: `Error in SSG build process: ${JSON.stringify(command)}`,
-	expected: "This can happen if there was a problem with the SSG build process.",
+	expected:
+		"This can happen if there was a problem with the SSG build process.",
 });
 
-const LifecycleExecutionError = (attempts: number, name: string): ErrorData => ({
+const LifecycleExecutionError = (
+	attempts: number,
+	name: string,
+): ErrorData => ({
 	error: "LifecycleExecutionError",
 	message: `Exceeded maximum retry attempts (${attempts}) for ${name} LifeCycle`,
 });
@@ -47,12 +50,14 @@ const LifecycleExecutionError = (attempts: number, name: string): ErrorData => (
 const LoginError: ErrorData = {
 	error: "LoginError",
 	message: "There was a problem logging in to the API",
-	expected: "This happens if the API is currently not working or the credentials are incorrect.",
+	expected:
+		"This happens if the API is currently not working or the credentials are incorrect.",
 };
 
 const NoDomainsFoundError: ErrorData = {
 	error: "NoDomainsFoundError",
-	message: "No domains were found in this instance. The process cannot continue.",
+	message:
+		"No domains were found in this instance. The process cannot continue.",
 	expected:
 		"This may happen if the API is not functioning, or the site is not properly configured, or the domains are not registered.",
 	hint: "You can contact the instance administrator.",
@@ -93,22 +98,8 @@ const WriteToStoreError: ErrorData = {
 	hint: "There may be an issue such as lack of space or permissions preventing the file from being written.",
 };
 
-const UploadSearchError: ErrorData = {
-	error: "UploadSearchError",
-	message: "There was an error uploading content to API for search",
-	hint: "This happens if the API is currently not working or the credentials are incorrect.",
-};
-
-const CheckHealthError: ErrorData = {
-	error: "CheckHealthError",
-	message: "There was a problem with environment vars configuration.",
-	expected: "Some of the required environment variables are not set correctly or are missing",
-	hint: "Are the environment variables correctly set?",
-};
-
 export {
 	ArtifactError,
-	CheckHealthError,
 	ErrorInSSGBuildProcess,
 	LifecycleExecutionError,
 	LoginError,
@@ -117,7 +108,6 @@ export {
 	ReadFromStoreError,
 	ReferenceFieldSourcesNotFoundError,
 	RenderUUIDError,
-	UploadSearchError,
 	WriteToStoreError,
 	type ErrorsType,
 };

package/exporter/errors/index.ts

@@ -0,0 +1,40 @@
+import type { ErrorsType } from "./errors-data";
+
+import kleur from "kleur";
+
+export type ErrorData = {
+	error: ErrorsType;
+	message: string;
+	expected?: string;
+	hint?: string;
+};
+
+export class RenderError extends Error {
+	constructor() {
+		super();
+		this.name = "InternalCXError";
+		this.stack = "";
+	}
+}
+
+/**
+ * Throws an error with the provided error message, expected value, and hint.
+ */
+function throwError(options: ErrorData, stack?: unknown) {
+	const { error, message, expected, hint } = options;
+
+	const errorColor = kleur.red("[ " + error + " ]");
+	const extraText = [expected, hint].filter(Boolean).join("\n");
+
+	console.log(`
+${errorColor}
+${message}
+${extraText}
+
+${kleur.red("stack")}
+${JSON.stringify(stack, null, 2)}`);
+
+	throw new RenderError();
+}
+
+export { throwError };

package/exporter/index.ts

@@ -1,4 +1,22 @@
-import type { SocialsResponse } from "./shared/types/api";
+/**
+ *
+ * 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 {
 	AdditionalInfo,
 	Dimensions,
@@ -6,29 +24,53 @@ import type {
 	GriddoMultiPage,
 	GriddoPageObject,
 	GriddoSinglePage,
-} from "./shared/types/pages";
-import type { Site } from "./shared/types/sites";
+} from "./types/pages";
+import type { Site } from "./types/sites";
 
-import { throwError } from "./core/errors";
-import { walkStore } from "./core/fs";
+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 {
 	componentLibraryPathAlias,
 	isComponentLibrary,
 	resolveComponentsPath,
-} from "./core/instance";
-import { addLogToBuffer } from "./core/logger";
-import { getRenderPathsHydratedWithDomainFromDB } from "./services/render";
-import { ReadFromStoreError } from "./shared/errors";
+} from "./utils/instance";
+import {
+	buildLog,
+	debugLog,
+	infoLog,
+	pageSizeLog,
+	verboseLog,
+} from "./utils/loggin";
+import {
+	getBuildPagesFromCachedStore,
+	getBuildPagesFromStore,
+	getBuildPagesPath,
+} from "./utils/store";
 
 export {
-	addLogToBuffer,
+	apiRegister,
+	buildLog,
 	componentLibraryPathAlias,
-	getRenderPathsHydratedWithDomainFromDB,
+	debugLog,
+	endpoints,
+	envs,
+	FileRegister,
+	getBuildPagesFromCachedStore,
+	getBuildPagesFromStore,
+	getBuildPagesPath,
+	getConfig,
+	infoLog,
+	insertAlert,
 	isComponentLibrary,
-	ReadFromStoreError,
+	MemoryRegister,
+	pageSizeLog,
+	Register,
 	resolveComponentsPath,
-	throwError,
-	walkStore,
+	verboseLog,
+	walk,
 	type AdditionalInfo,
 	type Dimensions,
 	type GriddoListPage,

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

@@ -1,6 +1,8 @@
+import * as React from "react";
+
 import { formatImage } from "./utils";
 
-function GriddoFavicon({ url }: { url: string | undefined }) {
+function Favicon({ url }: { url: string | undefined }) {
 	if (!url) {
 		return null;
 	}
@@ -24,9 +26,13 @@ function GriddoFavicon({ 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 { GriddoFavicon };
+export { Favicon };

package/exporter/react/GriddoIntegrations/index.tsx

@@ -1,19 +1,18 @@
+import type { Dimensions } from "../../types/pages";
 import type { Core } from "@griddo/core";
-import type { Dimensions } from "../../shared/types/pages";
-
-import * as React from "react";
 
 import { generateAutomaticDimensions } from "@griddo-instance";
+import parse from "html-react-parser";
+import * as React from "react";
 
 import {
 	composeAnalytics,
-	extractScriptContent,
 	filterBodyIntegrationFromPosition,
 	filterHeadIntegrations,
 } from "./utils";
 
 export interface GriddoIntegrationsProps {
-	integrations?: Core.PageIntegration[];
+	integrations?: Array<Core.PageIntegration>;
 	location: "head" | "start-body" | "end-body";
 	id?: string;
 	analyticScript?: string;
@@ -57,7 +56,12 @@ 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
@@ -66,13 +70,9 @@ 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,19 +88,25 @@ 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 siteScriptContent ? (
-						<script key={key} dangerouslySetInnerHTML={{ __html: siteScriptContent }} />
-					) : null;
+					return (
+						<React.Fragment key={key}>
+							{siteScript && parse(siteScript, { trim: true })}
+						</React.Fragment>
+					);
 				}
 
 				/* Integration integration.type === "addon" */
 				if (integration.type === "addon") {
-					return integrationScriptContent ? (
-						<script key={key} dangerouslySetInnerHTML={{ __html: integrationScriptContent }} />
-					) : null;
+					return (
+						<React.Fragment key={key}>
+							{parse(integration.content, { trim: true })}
+						</React.Fragment>
+					);
 				}
 
 				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: Core.PageIntegration[],
+	integrations: Array<Core.PageIntegration>,
 	position: "start" | "end",
 ) {
 	return (
@@ -26,7 +26,7 @@ function filterBodyIntegrationFromPosition(
 	);
 }
 
-function filterHeadIntegrations(integrations: Core.PageIntegration[]) {
+function filterHeadIntegrations(integrations: Array<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: Core.PageIntegration[]) {
 }
 
 const filterPositionIntegrations = (
-	integrations: Core.PageIntegration[],
+	integrations: Array<Core.PageIntegration>,
 	position: "head" | "start" | "end",
 ) => {
 	switch (position) {
@@ -70,13 +70,16 @@ function composeAnalytics(
 			};
 		};
 	},
-	generateAutomaticDimensions = (_page: Record<string, unknown>) => null,
+	// 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 dimensionValues = isObject(dimensions?.values)
+		? dimensions?.values
+		: {};
 	const automaticDimensionValues = generateAutomaticDimensions
 		? generateAutomaticDimensions(page || {})
 		: {};
@@ -101,7 +104,9 @@ function composeAnalytics(
 		);
 	}
 
-	const analyticsDimensions = allDimensions.length ? `{${allDimensions.join(",")}}` : null;
+	const analyticsDimensions = allDimensions.length
+		? `{${allDimensions.join(",")}}`
+		: null;
 
 	return {
 		analyticsScript,
@@ -109,25 +114,8 @@ 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/index.tsx

@@ -1,5 +1,11 @@
-import { GriddoFavicon } from "./GriddoFavicon";
+//
+// 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 { GriddoIntegrations } from "./GriddoIntegrations";
-import { GriddoOpenGraph } from "./GriddoOpenGraph";
 
-export { GriddoFavicon, GriddoIntegrations, GriddoOpenGraph };
+export { Favicon, GriddoIntegrations };

package/exporter/registers/api.ts

@@ -0,0 +1,14 @@
+import { MemoryRegister, Register } from "../services/register";
+
+const entries = {
+	API_RESPONSE_TOO_BIG: {
+		title: "API response size is too large",
+		description:
+			"API response size is too large and may affect rendering performance",
+		entries: [],
+	},
+};
+
+const register = new Register(new MemoryRegister(entries));
+
+export default register;

package/exporter/registers/gatsby.ts

@@ -0,0 +1,14 @@
+import { MemoryRegister, Register } from "../services/register";
+
+const entries = {
+	GATSBY_PAGE_SIZE_TOO_BIG: {
+		title: "Gatsby JSON page size is too large",
+		description:
+			"The JSON of some Gatsby pages (page-data folder) are too large and may affect rendering performance",
+		entries: [],
+	},
+};
+
+const register = new Register(new MemoryRegister(entries));
+
+export default register;

package/exporter/registers/index.ts

@@ -0,0 +1,4 @@
+import apiRegister from "./api";
+import gatsbyRegister from "./gatsby";
+
+export { apiRegister, gatsbyRegister };

package/exporter/services/auth.ts

@@ -1,21 +1,23 @@
-import type { AuthHeaders } from "../shared/types/api";
+import type { AuthHeaders } from "../types/api";
 
-import { throwError } from "../core/errors";
-import { LOGIN } from "../shared/endpoints";
-import { GRIDDO_BOT_PASSWORD, GRIDDO_BOT_USER } from "../shared/envs";
-import { LoginError } from "../shared/errors";
+import { endpoints, envs } from "../constants";
+import { throwError } from "../errors";
+import { LoginError } from "../errors/errors-data";
 
+/**
+ * Service for authentication in the Griddo Private API
+ */
 class AuthService {
 	headers: AuthHeaders | undefined;
 
 	async login() {
 		try {
-			const response = await fetch(LOGIN, {
+			const response = await fetch(endpoints.LOGIN, {
 				method: "POST",
 				headers: { "Content-Type": "application/json", Connection: "close" },
 				body: JSON.stringify({
-					username: GRIDDO_BOT_USER,
-					password: GRIDDO_BOT_PASSWORD,
+					username: envs.GRIDDO_BOT_USER,
+					password: envs.GRIDDO_BOT_PASSWORD,
 				}),
 			});
 

package/exporter/services/domains.ts

@@ -1,31 +1,16 @@
-import type { Domains } from "../shared/types/global";
+import type { Domains } from "../types/global";
 
-import { throwError } from "../core/errors";
-import { GriddoLog } from "../core/GriddoLog";
-import { DOMAINS } from "../shared/endpoints";
-import { NoDomainsFoundError } from "../shared/errors";
-import { get } from "./api";
+import { endpoints } from "../constants";
+import { get } from "../utils/api";
 
 /**
- * Return an array of domains name (string) of the current instance.
+ * Get an array of available domain.
  */
-async function getInstanceDomains() {
-	const domains = await get<Domains>({
-		endpoint: DOMAINS,
+async function getAllDomains() {
+	return get<Domains>({
+		endpoint: endpoints.DOMAINS,
 		useApiCacheDir: false,
 	});
-
-	if (!domains.length) {
-		throwError(NoDomainsFoundError);
-	}
-
-	GriddoLog.verbose(`getting domains names (${domains.length})`);
-
-	const filteredDomains = domains
-		.filter(({ slug }) => !!slug)
-		.map(({ slug }) => slug.replace("/", ""));
-
-	return [...new Set(filteredDomains)];
 }
 
-export { getInstanceDomains };
+export { getAllDomains };

package/exporter/services/navigation.ts

@@ -1,12 +1,12 @@
-import type { Footer, Header } from "../shared/types/navigation";
-import type { APIPageObject } from "../shared/types/pages";
+import type { Footer, Header } from "../types/navigation";
+import type { APIPageObject } from "../types/pages";
 
 class NavigationService {
 	private _defaultHeaders: Record<string, Header>;
 	private _defaultFooters: Record<string, Footer>;
 	private _navigations: {
-		headers: Header[];
-		footers: Footer[];
+		headers: Array<Header>;
+		footers: Array<Footer>;
 	};
 
 	constructor() {
@@ -53,11 +53,11 @@ class NavigationService {
 	}
 
 	getRightLanguage(
-		list: {
+		list: Array<{
 			language: number;
-			navigationLanguages: { navigationId: number }[];
+			navigationLanguages: Array<{ navigationId: number }>;
 			id: number;
-		}[],
+		}>,
 		id: number,
 		language: number,
 	) {
@@ -68,7 +68,9 @@ class NavigationService {
 		const rightLanguageItem = list.find(
 			(item) =>
 				item.language === language &&
-				item.navigationLanguages?.find((version) => version.navigationId === id),
+				item.navigationLanguages?.find(
+					(version) => version.navigationId === id,
+				),
 		);
 
 		const result = rightLanguageItem || list.find((item) => item.id === id);
@@ -85,15 +87,19 @@ class NavigationService {
 	}
 
 	getPageNavigations(page: APIPageObject) {
-		const { header: pageHeader, footer: pageFooter, language, template, templateConfig } = page;
-		const { templateType } = template;
-		const { defaultHeader, defaultFooter, templates } = templateConfig;
+		const {
+			header: pageHeader,
+			footer: pageFooter,
+			language,
+			template: { templateType },
+			templateConfig: { defaultHeader, defaultFooter, templates },
+		} = page;
 
 		// The navigations would be:
 		// - The one with the page or ...
 		// - The one defined for that template or ...
 		// - The one you have defined for that data package
-		const getValidNavigation = (values: (number | unknown)[]) => {
+		const getValidNavigation = (values: Array<number | unknown>) => {
 			const fineNavigation = values.find((item) => typeof item === "number");
 
 			return typeof fineNavigation === "number" ? fineNavigation : null;