@griddo/cx 11.7.5 → 11.7.6-rc.0

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>
 	);
 };

package/src/gatsby-node-utils.ts

@@ -1,6 +1,15 @@
 import type { GatsbyNode } from "gatsby";
+import type { GriddoPageObject } from "../exporter/types/pages";
 
-import { componentLibraryPathAlias, isComponentLibrary } from "@griddo/cx";
+import fsp from "node:fs/promises";
+import path from "node:path";
+
+import { ReadFromStoreError } from "../exporter/constants/errors";
+import { brush } from "../exporter/utils/brush";
+import { walkStore } from "../exporter/utils/core-utils";
+import { throwError } from "../exporter/utils/errors";
+import { componentLibraryPathAlias, isComponentLibrary } from "../exporter/utils/instance";
+import { getRenderPathsFromDB } from "../exporter/utils/render";
 
 const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = ({
 	actions,
@@ -40,7 +49,87 @@ const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = ({
 	// No sourcemaps on builds
 	if (stage === "build-javascript") {
 		actions.setWebpackConfig({ devtool: false });
+
+		// TODO: Hablar con infra para no invalidar cache de los assets
+		// const newWebpackConfig = {
+		// 	...getConfig(),
+		// 	output: {
+		// 		filename: `[name].js`, // no contenthash
+		// 		chunkFilename: `[name].js`, // no contenthash
+		// 		path: getConfig().output.path,
+		// 		publicPath: getConfig().output.publicPath,
+		// 	},
+		// };
+
+		// actions.replaceWebpackConfig(newWebpackConfig);
 	}
 };
 
-export { onCreateWebpackConfig };
+/**
+ * Return a scale size colors with a number and a measure string (KB by default).
+ *
+ * @param size The page size in KB.
+ * @param measure The measure string to be added in the log.
+ */
+function pageSizeLog(size: number, measure = "KB") {
+	const sizeScale = {
+		low: 50,
+		mid: 80,
+		large: 130,
+		extraLarge: 210,
+	};
+
+	// Ternary pawa!
+	const color =
+		size > sizeScale.large
+			? "red"
+			: size > sizeScale.mid
+				? "magenta"
+				: size > sizeScale.low
+					? "blue"
+					: "green";
+
+	return brush[color](`${size}${measure}`);
+}
+
+/**
+ * Read all pages stored in the `store` Griddo directory and returns one by one
+ * with a generator.
+ *
+ * @param basePath - Base directory to get pages from.
+ * @param options.withSizeProp - Add size prop to the page object.
+ * @todo throw error if the basePath is not an store folder
+ */
+async function* getBuildPagesFromStore<PageType extends GriddoPageObject>(args?: {
+	basePath?: string;
+	withSizeProp?: boolean;
+	dbFilePath?: string;
+}): AsyncGenerator<PageType> {
+	const { basePath, withSizeProp, dbFilePath } = args || {};
+	const { __cx } = await getRenderPathsFromDB({
+		dbFilePath,
+	});
+	const pagesDirPath = basePath || path.join(__cx, "store");
+
+	// Procesamos archivos JSON uno por uno sin cargar todos los paths en memoria
+	for await (const filePath of walkStore(pagesDirPath)) {
+		try {
+			const fileContent = await fsp.readFile(filePath, "utf-8");
+			const page = JSON.parse(fileContent) as PageType;
+
+			if (withSizeProp) {
+				const fileStats = await fsp.stat(filePath);
+				page.size = fileStats.size / 1024;
+			}
+
+			// SECURITY: Only returns valid page objects
+			if (page.path) {
+				yield page;
+			}
+		} catch (error) {
+			throwError(ReadFromStoreError, error);
+		}
+	}
+}
+
+export { getBuildPagesFromStore, onCreateWebpackConfig, pageSizeLog };

package/src/html.tsx

@@ -1,26 +1,17 @@
 import type { HtmlProps } from "./types";
 
-import * as React from "react";
-
 function HTML(props: HtmlProps) {
 	return (
 		<html {...props.htmlAttributes}>
 			<head>
 				<meta charSet="utf-8" />
 				<meta httpEquiv="x-ua-compatible" content="ie=edge" />
-				<meta
-					name="viewport"
-					content="width=device-width, initial-scale=1, shrink-to-fit=no"
-				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 				{props.headComponents}
 			</head>
 			<body {...props.bodyAttributes}>
 				{props.preBodyComponents}
-				<div
-					key={"body"}
-					id="___gatsby"
-					dangerouslySetInnerHTML={{ __html: props.body }}
-				/>
+				<div key={"body"} id="___gatsby" dangerouslySetInnerHTML={{ __html: props.body }} />
 				<div id="modal" />
 				{props.postBodyComponents}
 			</body>

package/src/types.ts

@@ -1,4 +1,6 @@
 import type { Core } from "@griddo/core";
+import type { HeadProps } from "gatsby";
+import type { SocialsResponse } from "../exporter/types/api";
 import type {
 	AdditionalInfo,
 	Dimensions,
@@ -6,10 +8,8 @@ import type {
 	GriddoMultiPage,
 	GriddoPageObject,
 	GriddoSinglePage,
-	Site,
-	SocialsResponse,
-} from "@griddo/cx";
-import type { HeadProps } from "gatsby";
+} from "../exporter/types/pages";
+import type { Site } from "../exporter/types/sites";
 
 interface CustomHeadProps extends HeadProps {
 	pageContext: GriddoPageObject["context"] & {
@@ -89,4 +89,4 @@ type GatsbyPageObject = {
 	};
 };
 
-export { CustomHeadProps, GatsbyPageObject, HtmlProps, TemplateProps };
+export type { CustomHeadProps, GatsbyPageObject, HtmlProps, TemplateProps };

package/start-render.js

@@ -1,7 +1,5 @@
 #!/usr/bin/env node
-/* eslint-disable node/shebang */
-/* eslint-disable node/no-missing-require */
 
 // This is the "bin" for the griddo-cx package used by "infra" to trigger a
 // render running `npm run griddo-cx`.
-require("./build/start-render.js");
+require("./build/commands/start-render.js");

package/tsconfig.json

@@ -2,14 +2,15 @@
 	"compilerOptions": {
 		"target": "esnext",
 		"lib": ["dom", "esnext"],
-		"jsx": "react",
+		"jsx": "react-jsx",
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"strict": true,
 		"skipLibCheck": true,
-		"resolveJsonModule": true
+		"resolveJsonModule": true,
+		"typeRoots": []
 	},
 	"include": [
 		"./exporter/**/*.ts",

package/build/adapters/gatsby/index.d.ts

@@ -1,4 +0,0 @@
-/**
- * Render every instance domain with the Gatsby adapter.
- */
-export declare function renderDomainsWithGatsbyAdapter(domain: string): Promise<void>;

package/build/adapters/gatsby/utils.d.ts

@@ -1,22 +0,0 @@
-/**
- * Return the assetPrefix with the domain concatenated `assetPrefix/domain` only
- * if the domain is "pro-" **and** there is a env `GRIDDO_ASSET_PREFIX` with any
- * value different from `null`, `undefined` or `empty string`
- *
- * else...
- * - If assetPrefix or domain is falsy, returns ""
- * - If the domain is not "pro-", returns ""
- */
-declare function getGatsbyAssetPrefixWithDomain(domain: string): string;
-/**
- * Spawn a new node process `yarn gatsby-build`
- * @note This proccess (`yarn gatsby-build`) can not access to the custom Griddo
- * `process.env` so it needs variables passed to it via the `env` prop.
- */
-declare function runGatsbyBuildCommand(assetPrefixWithDomain: string): void;
-/**
- * Update the Griddo's `/dist` dir with the contents from `public` dir only
- * with files of type: js, json and css.
- */
-declare function createDistFromGatsbyPublic(domain: string, needsAssetPrefix: boolean): Promise<void>;
-export { createDistFromGatsbyPublic, getGatsbyAssetPrefixWithDomain, runGatsbyBuildCommand, };

package/build/artifacts/index.d.ts

@@ -1,6 +0,0 @@
-import type { Artifacts } from "../types/global";
-/**
- * Returns the artifacts of CX.
- */
-declare function getCxArtifacts(domain: string): Artifacts;
-export default getCxArtifacts;

package/build/commands/move-assets.d.ts

@@ -1 +0,0 @@
-export {};

package/build/commands/prepare-domains-render.d.ts

@@ -1 +0,0 @@
-export {};

package/build/constants/index.d.ts

@@ -1,57 +0,0 @@
-import type { LifeCyclesNames } from "../types/global";
-declare const endpoints: {
-    ALERT: string;
-    AI_EMBEDDINGS: string;
-    BUILD_END: string[];
-    BUILD_START: string[];
-    DOMAINS: string;
-    GET_ALL: string;
-    GET_PAGE: string;
-    GET_PAGES: string[];
-    GET_REFERENCE_FIELD_DATA: string[];
-    GET_SITEMAP: string[];
-    INFO: string[];
-    LANGUAGES: string[];
-    LOGIN: string;
-    RESET_RENDER: string;
-    ROBOTS: string;
-    SEARCH: string;
-    SETTINGS: string;
-    SOCIALS: string[];
-};
-declare const envs: {
-    GRIDDO_AI_EMBEDDINGS: boolean;
-    GRIDDO_ALERT_FEATURE: boolean;
-    GRIDDO_API_CONCURRENCY_COUNT: number;
-    GRIDDO_API_MAX_RESPONSE_SIZE: number;
-    GRIDDO_API_URL: string | undefined;
-    GRIDDO_ARCHIVE_LIFECYCLE_MAX_ATTEMPTS: number;
-    GRIDDO_ASSET_PREFIX: string | undefined;
-    GRIDDO_BOT_PASSWORD: string | undefined;
-    GRIDDO_BOT_USER: string | undefined;
-    GRIDDO_BUILD_LOGS: boolean;
-    GRIDDO_CLEAN_LIFECYCLE_MAX_ATTEMPTS: number;
-    GRIDDO_CLOSE_LIFECYCLE_MAX_ATTEMPTS: number;
-    GRIDDO_DATA_LIFECYCLE_MAX_ATTEMPTS: number;
-    GRIDDO_DEBUG_LOGS: boolean;
-    GRIDDO_FIXTURES_DOMAIN_NAMES: string | undefined;
-    GRIDDO_FIXTURES_SITE_NAMES: string | undefined;
-    GRIDDO_META_LIFECYCLE_MAX_ATTEMPTS: number;
-    GRIDDO_PREPARE_LIFECYCLE_MAX_ATTEMPTS: number;
-    GRIDDO_PUBLIC_API_URL: string | undefined;
-    GRIDDO_REACT_APP_INSTANCE: string | undefined;
-    GRIDDO_RELOCATION_LIFECYCLE_MAX_ATTEMPTS: number;
-    GRIDDO_RENDER_ALL_SITES: boolean;
-    GRIDDO_RENDER_BREAKPOINTS_FEATURE: boolean;
-    GRIDDO_RENDER_PAGES: number[];
-    GRIDDO_RENDER_SITE: number;
-    GRIDDO_RESTORE_LIFECYCLE_MAX_ATTEMPTS: number;
-    GRIDDO_SEARCH_FEATURE: boolean;
-    GRIDDO_SKIP_BUILD_CHECKS: boolean;
-    GRIDDO_SSG_LIFECYCLE_MAX_ATTEMPTS: number;
-    GRIDDO_SSG_MAX_PAGE_SIZE: number;
-    GRIDDO_SSG_VERBOSE_LOGS: boolean;
-    GRIDDO_VERBOSE_LOGS: boolean;
-};
-declare const lifeCycleNames: Record<LifeCyclesNames, LifeCyclesNames>;
-export { endpoints, envs, lifeCycleNames };