@griddo/cx 11.7.11 → 11.7.12-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/cx",
 	"description": "Griddo SSG based on Gatsby",
-	"version": "11.7.11",
+	"version": "11.7.12-rc.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -15,120 +15,69 @@
 		"type": "git",
 		"url": "https://github.com/griddo/griddo"
 	},
-	"bin": {
-		"griddo-cx": "./start-render.js",
-		"griddo-start-render": "./start-render.js"
-	},
-	"exports": {
-		".": {
-			"import": "./build/index.js",
-			"require": "./build/index.js",
-			"types": "./build/index.d.ts"
-		},
-		"./react": {
-			"import": "./build/react/index.js",
-			"require": "./build/react/index.js",
-			"types": "./build/react/index.d.ts"
-		}
-	},
 	"scripts": {
 		"// NPM": "",
 		"prepare": "yarn run build",
 		"// BUILD": "",
-		"build": "sh ./exporter/build.sh",
-		"build:debug": "sh ./exporter/build.sh --debug",
+		"build": "rm -rf build && sh ./exporter/build.sh",
+		"build:debug": "rm -rf build && sh ./exporter/build.sh --debug",
 		"// TESTS": "",
-		"test": "NODE_OPTIONS='--import tsx' env-cmd node --test ./__tests__/*",
-		"test:create-render-fixtures": "env-cmd tsx ./__tests__/utils/create-fixtures.ts",
-		"test:remove-render-fixtures": "env-cmd tsx ./__tests__/utils/remove-fixtures.ts",
+		"test": "npm run test:compile && npm run test:create-render-fixtures && env-cmd node --test ./__tests__/* && npm run test:remove-render-fixtures",
+		"test:create-render-fixtures": "env-cmd node ./build/__tests__/utils/create-fixtures",
+		"test:remove-render-fixtures": "env-cmd node ./build/__tests__/utils/remove-fixtures",
+		"test:compile": "tsgo --project tsconfig.tests.json",
 		"// INFRA SCRIPTS": "",
-		"upload-search-content": "node ./build/upload-search-content.js",
-		"complete-render": "node ./build/end-render.js",
-		"end-render": "node ./build/end-render.js",
-		"start-render": "node ./build/start-render.js",
-		"reset-render": "node ./build/reset-render.js",
-		"prepare-domains-render": "node ./build/prepare-domains-render.js",
-		"// SSG": "",
-		"clean": "gatsby clean; rm -rf assets .cx-cache caches store apiCache build .render-sentinel",
-		"gatsby-build": "gatsby telemetry --disable && gatsby build --prefix-paths",
-		"// LINTER": "",
-		"run:ts-lint": "tsc --noEmit",
-		"watch:ts-lint": "tsc --noEmit --watch",
-		"run:eslint": "eslint .",
-		"run:lint": "yarn run:ts-lint && yarn run:eslint",
-		"// FORMATTER": "",
-		"run:format": "prettier --write ."
+		"prepare-domains-render": "node ./build/commands/prepare-domains-render",
+		"start-render": "node ./build/commands/start-render",
+		"end-render": "node ./build/commands/end-render",
+		"upload-search-content": "node ./build/commands/upload-search-content",
+		"reset-render": "node ./build/commands/reset-render",
+		"// ONLY LOCAL SCRIPTS": "",
+		"prepare-assets-directory": "node ./build/commands/prepare-assets-directory",
+		"// LINTER & FORMATTER": "",
+		"lint": "biome check --write",
+		"format": "biome format --write",
+		"flint": "npm run lint && npm run format",
+		"ts-lint": "tsgo --noEmit",
+		"watch:ts-lint": "tsc --noEmit --watch"
 	},
 	"dependencies": {
-		"@babel/core": "7.26.0",
-		"@babel/plugin-transform-class-properties": "7.25.9",
-		"@babel/preset-env": "7.26.0",
-		"@babel/preset-react": "7.26.3",
-		"@babel/preset-typescript": "7.26.0",
-		"@griddo/core": "11.7.11",
-		"@svgr/webpack": "5.5.0",
-		"axios": "1.7.9",
-		"babel-loader": "9.2.1",
-		"babel-plugin-transform-runtime": "6.23.0",
-		"babel-polyfill": "6.26.0",
-		"dotenv": "16.4.5",
-		"esbuild": "0.24.0",
-		"find-up": "5.0.0",
-		"fs-extra": "11.2.0",
-		"gatsby": "5.14.0",
-		"gatsby-plugin-svgr-loader": "0.1.0",
-		"html-react-parser": "5.2.0",
-		"js2xmlparser": "5.0.0",
-		"kleur": "4.1.5",
-		"p-limit": "3.1.0",
-		"path-browserify": "1.0.1",
-		"pkg-dir": "5.0.0",
-		"typescript": "5.7.2",
-		"webpack": "5.76.1"
+		"gatsby": "5.15.0",
+		"p-limit": "7.1.1"
 	},
 	"devDependencies": {
-		"@types/cheerio": "0.22.35",
-		"@types/eslint": "8.56.10",
-		"@types/fs-extra": "11.0.4",
-		"@types/node": "20.17.10",
-		"@types/webpack": "5.28.5",
-		"@typescript-eslint/eslint-plugin": "^8.0.0",
-		"@typescript-eslint/parser": "^8.0.0",
-		"cheerio": "1.0.0",
-		"eslint": "^9.0.0",
-		"eslint-plugin-import": "2.31.0",
-		"eslint-plugin-node": "11.1.0",
-		"eslint-plugin-react": "7.37.4",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-testing-library": "^6.2.0",
-		"globals": "^16.0.0",
-		"prettier": "3.4.2"
+		"@biomejs/biome": "2.2.4",
+		"@types/node": "20.19.2",
+		"@typescript/native-preview": "7.0.0-dev.20250916.1",
+		"cheerio": "1.1.2",
+		"typescript": "5.9.2"
 	},
 	"peerDependencies": {
-		"@types/react": ">=18 <19",
-		"@types/react-dom": ">=18 <19",
+		"@griddo/core": "*",
 		"react": ">=18 <19",
 		"react-dom": ">=18 <19"
 	},
 	"engines": {
-		"node": ">=20"
+		"node": ">=20.19"
 	},
 	"files": [
 		"build",
 		"exporter",
 		"src",
-		"cx.config.d.ts",
-		"cx.config.js",
+		"react",
 		"gatsby-browser.tsx",
 		"gatsby-config.ts",
 		"gatsby-node.ts",
 		"gatsby-ssr.tsx",
 		"global.d.ts",
 		"start-render.js",
-		"tsconfig.json"
+		"tsconfig.commands.json",
+		"tsconfig.exporter.json",
+		"tsconfig.json",
+		"plugins"
 	],
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1ee0074395f691b8101fb8cf2ad7238d57a43f31"
+	"gitHead": "c7e40c899abb683a6c53cbe36f1bd19135c9670e"
 }

package/plugins/gatsby-plugin-svgr-loader/gatsby-node.js

@@ -0,0 +1,55 @@
+exports.onCreateWebpackConfig = (
+	{ stage, actions, getConfig, rules },
+	{ rule: ruleProps = {} },
+) => {
+	const { include, exclude, options, ...otherProps } = ruleProps;
+
+	if (["develop", "develop-html", "build-html", "build-javascript"].includes(stage)) {
+		// Add the react-svg-loader rule
+		actions.setWebpackConfig({
+			module: {
+				rules: [
+					{
+						test: /\.svg$/,
+						include,
+						exclude,
+						...otherProps,
+						use: [
+							{
+								loader: "@svgr/webpack",
+								options,
+							},
+						],
+					},
+				],
+			},
+		});
+		const cfg = getConfig();
+		const imgsRule = rules.images();
+
+		const newUrlLoaderRule =
+			include || exclude
+				? {
+						...imgsRule,
+						include: exclude,
+						exclude: include,
+					}
+				: {
+						...imgsRule,
+						test: new RegExp(imgsRule.test.toString().replace("svg|", "").slice(1, -1)),
+					};
+
+		cfg.module.rules = [
+			// Remove the base url-loader images rule entirely
+			...cfg.module.rules.filter((rule) => {
+				if (rule.test) {
+					return rule.test.toString() !== imgsRule.test.toString();
+				}
+				return true;
+			}),
+			// Put it back without SVG loading
+			newUrlLoaderRule,
+		];
+		actions.replaceWebpackConfig(cfg);
+	}
+};

package/plugins/gatsby-plugin-svgr-loader/package.json

@@ -0,0 +1,8 @@
+{
+	"name": "gatsby-plugin-svgr-loader",
+	"version": "0.1.0",
+	"main": "gatsby-node.js",
+	"dependencies": {
+		"@svgr/webpack": "^4.3.2"
+	}
+}

package/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 → react}/Favicon/index.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import { formatImage } from "./utils";
 
 function Favicon({ url }: { url: string | undefined }) {
@@ -26,11 +24,7 @@ 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" })} />
 		</>
 	);
 }

package/{exporter/react → react}/GriddoIntegrations/index.tsx

@@ -1,12 +1,13 @@
-import type { Dimensions } from "../../types/pages";
 import type { Core } from "@griddo/core";
+import type { Dimensions } from "../../exporter/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";
@@ -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 → react}/GriddoIntegrations/utils.ts

@@ -1,5 +1,5 @@
-import type { Dimensions } from "../../types/pages";
 import type { Core } from "@griddo/core";
+import type { Dimensions } from "../../exporter/types/pages";
 
 /**
  * Return true if the argument is an object (not null)
@@ -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/{build/react/index.d.ts → react/index.tsx}

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

package/src/components/Head.tsx

@@ -1,7 +1,7 @@
 import type { CustomHeadProps } from "../types";
 
-import { Favicon, GriddoIntegrations } from "@griddo/cx/react";
-import * as React from "react";
+import { Favicon } from "../../react/Favicon";
+import { GriddoIntegrations } from "../../react/GriddoIntegrations";
 
 /**
  * Gatsby Head API
@@ -12,13 +12,7 @@ const Head = (props: CustomHeadProps) => {
 		pageContext: {
 			locale,
 			openGraph,
-			page: {
-				disableHrefLangs,
-				fullUrl,
-				defaultLang,
-				integrations = [],
-				dimensions,
-			},
+			page: { disableHrefLangs, fullUrl, defaultLang, integrations = [], dimensions },
 			pageMetadata,
 			siteMetadata,
 			siteOptions,
@@ -31,19 +25,13 @@ const Head = (props: CustomHeadProps) => {
 	);
 
 	const showMetaRobots =
-		!!metaRobots &&
-		(siteOptions?.showBasicMetaRobots || metaRobots !== "index,follow");
+		!!metaRobots && (siteOptions?.showBasicMetaRobots || metaRobots !== "index,follow");
 
-	// Validate options
-	const cleanPageLanguages =
-		pageMetadata?.pageLanguages?.filter((item) => item.isLive) || [];
+	const cleanPageLanguages = pageMetadata?.pageLanguages?.filter((item) => item.isLive) || [];
 
 	const useCanonical =
 		!!pageMetadata?.canonical &&
-		!(
-			siteOptions?.avoidSelfReferenceCanonicals &&
-			pageMetadata?.canonical === fullUrl
-		);
+		!(siteOptions?.avoidSelfReferenceCanonicals && pageMetadata?.canonical === fullUrl);
 
 	const useHrefLangs =
 		!(
@@ -60,8 +48,7 @@ const Head = (props: CustomHeadProps) => {
 		(useHrefLangs &&
 			!siteOptions?.avoidHrefLangXDefault &&
 			defaultLangId &&
-			cleanPageLanguages.find((item) => item.languageId === defaultLangId)
-				?.url) ||
+			cleanPageLanguages.find((item) => item.languageId === defaultLangId)?.url) ||
 		null;
 
 	return (
@@ -72,12 +59,9 @@ const Head = (props: CustomHeadProps) => {
 			{!!pageMetadata?.description && (
 				<meta name="description" content={pageMetadata?.description} />
 			)}
-			{siteOptions?.useMetaTitle && (
-				<meta name="title" content={pageMetadata?.title} />
-			)}
+			{siteOptions?.useMetaTitle && <meta name="title" content={pageMetadata?.title} />}
 			{useCanonical && <link rel="canonical" href={pageMetadata?.canonical} />}
 
-			{/* Favicon images */}
 			<Favicon url={siteMetadata?.favicon} />
 
 			{/* Alternate, solo si se indexa la página y tiene traducciones */}
@@ -98,15 +82,11 @@ const Head = (props: CustomHeadProps) => {
 			{showMetaRobots && <meta name="robots" content={metaRobots} />}
 
 			{/* Open Graph */}
-			{!!siteMetadata?.title && (
-				<meta property="og:site_name" content={siteMetadata?.title} />
-			)}
+			{/* @todo: Create a <GriddoOpenGraph /> component */}
+			{!!siteMetadata?.title && <meta property="og:site_name" content={siteMetadata?.title} />}
 			{!!locale && <meta property="og:locale" content={locale} />}
 			{(!!openGraph?.title || !!pageMetadata?.title) && (
-				<meta
-					property="og:title"
-					content={openGraph?.title || pageMetadata?.title}
-				/>
+				<meta property="og:title" content={openGraph?.title || pageMetadata?.title} />
 			)}
 			<meta property="og:type" content={openGraph?.type || "website"} />
 			{(!!openGraph?.description || !!pageMetadata?.description) && (
@@ -115,13 +95,8 @@ const Head = (props: CustomHeadProps) => {
 					content={openGraph?.description || pageMetadata?.description}
 				/>
 			)}
-			{!!openGraph?.image && (
-				<meta property="og:image" content={openGraph?.image} />
-			)}
-			<meta
-				property="og:url"
-				content={pageMetadata?.canonical || fullUrl || ""}
-			/>
+			{!!openGraph?.image && <meta property="og:image" content={openGraph?.image} />}
+			<meta property="og:url" content={pageMetadata?.canonical || fullUrl || ""} />
 
 			{/* Twitter */}
 			<meta property="twitter:card" content="summary_large_image" />
@@ -129,14 +104,6 @@ const Head = (props: CustomHeadProps) => {
 				<meta property="twitter:image" content={openGraph?.twitterImage} />
 			)}
 
-			{/* Debug */}
-			{/* {!siteOptions?.avoidDebugMetas && (
-				<meta
-					property="debug"
-					content={`Griddo v${griddoVersion} @ ${renderDate}}`}
-				/>
-			)} */}
-
 			{/* Keywords */}
 			{siteOptions?.useMetaKeywords && !!pageMetadata?.metaKeywords && (
 				<meta name="keywords" content={pageMetadata.metaKeywords} />

package/src/components/template.tsx

@@ -1,30 +1,17 @@
-import type { TemplateProps } from "../types";
 import type { Core } from "@griddo/core";
+import type { TemplateProps } from "../types";
 
 import { Page as RenderGriddoPage } from "@griddo/core";
-import { GriddoIntegrations } from "@griddo/cx/react";
-import {
-	components,
-	SiteProvider,
-	templates,
-	formsTemplates,
-} from "@griddo-instance";
+import { components, formsTemplates, SiteProvider, templates } from "@griddo-instance";
 import { Link, navigate } from "gatsby";
-import * as React from "react";
 
-// Gatsby Head
+import { GriddoIntegrations } from "../../react/GriddoIntegrations";
+
 export { Head } from "./Head";
 
 const Template = (data: TemplateProps) => {
 	const {
-		pageContext: {
-			cloudinaryName,
-			page,
-			siteLangs,
-			siteMetadata,
-			socials,
-			theme,
-		},
+		pageContext: { cloudinaryName, page, siteLangs, siteMetadata, socials, theme },
 	} = data;
 
 	const library = {
@@ -33,8 +20,6 @@ const Template = (data: TemplateProps) => {
 		formsTemplates,
 	};
 
-	const mappedTheme = theme || "default-theme";
-
 	const header = data.pageContext.header as Core.HeaderModule;
 	const footer = data.pageContext.footer as Core.FooterModule;
 
@@ -52,14 +37,10 @@ const Template = (data: TemplateProps) => {
 			siteLangs={siteLangs}
 			siteMetadata={siteMetadata}
 			socials={socials}
-			theme={mappedTheme}
+			theme={theme}
 		>
-			<GriddoIntegrations
-				location="start-body"
-				integrations={page.integrations}
-			/>
+			<GriddoIntegrations location="start-body" integrations={page.integrations} />
 
-			{/* Render every page */}
 			<RenderGriddoPage
 				apiUrl={page.apiUrl}
 				content={page}
@@ -70,10 +51,7 @@ const Template = (data: TemplateProps) => {
 				pageLanguages={page.pageLanguages}
 			/>
 
-			<GriddoIntegrations
-				location="end-body"
-				integrations={page.integrations}
-			/>
+			<GriddoIntegrations location="end-body" integrations={page.integrations} />
 		</SiteProvider>
 	);
 };