@griddo/cx 11.9.17 → 11.10.1

package/exporter/ssg-adapters/gatsby/shared/sync-render.ts

@@ -0,0 +1,298 @@
+import fsp from "node:fs/promises";
+import path from "node:path";
+
+import pLimit from "p-limit";
+
+import { findFilesBySuffix } from "../../../core/fs";
+import { GriddoLog } from "../../../core/GriddoLog";
+import { GRIDDO_SSG_BUNDLE_ANALYZER } from "../../../shared/envs";
+import { getAssetsDiffBetweenRenders, patchHtmlFile } from "./diff-assets";
+
+interface SyncRenderConfig {
+	src: string;
+	dst: string;
+	pagesToCreate: number[];
+	pagesToDelete: number[];
+	artifactsToCopyToExports: string[];
+}
+interface CopyFilePath {
+	from: string;
+	to: string;
+}
+interface SyncState {
+	htmlToAdd: CopyFilePath[];
+	jsonToAdd: CopyFilePath[];
+	htmlToDelete: string[];
+	jsonToDelete: string[];
+}
+interface PageInfo {
+	id: number;
+	composePath: string; // p.ej. '/about-us' o '/'
+	htmlPath: string; // p.ej. '/path/to/public/about-us/index.html'
+	jsonPath: string; // p.ej. '/path/to/public/page-data/about-us/page-data.json'
+}
+interface GatsbyPageData {
+	result: {
+		pageContext: {
+			id: number;
+			fullPath: {
+				site: string;
+				domain: string;
+				domainUrl: string;
+				language: string;
+				page: string;
+				compose: string;
+			};
+		};
+	};
+}
+
+class SyncRender {
+	private bundleDir: string;
+	private currentRenderDir: string;
+	private pagesToCreate: number[];
+	private pagesToDelete: number[];
+	private assetArtifacts: string[];
+
+	private state: SyncState = {
+		htmlToAdd: [],
+		jsonToAdd: [],
+		htmlToDelete: [],
+		jsonToDelete: [],
+	};
+
+	constructor(config: SyncRenderConfig) {
+		this.bundleDir = config.dst;
+		this.currentRenderDir = config.src;
+		this.pagesToCreate = config.pagesToCreate;
+		this.pagesToDelete = config.pagesToDelete;
+		this.assetArtifacts = config.artifactsToCopyToExports;
+	}
+
+	public async execute() {
+		await this.setPagesToDelete();
+		await this.setPagesToAdd();
+		await this.sync();
+		if (GRIDDO_SSG_BUNDLE_ANALYZER) {
+			await this.assertAssetsAreValid();
+		}
+	}
+
+	private async assertAssetsAreValid() {
+		const isDifferent = await getAssetsDiffBetweenRenders(this.currentRenderDir, this.bundleDir);
+		if (isDifferent) {
+			GriddoLog.info(
+				"Warning: JavaScript and CSS bundles must have the same files and content. You can ignore this warning if the rendering process only has pages to unpublish.",
+			);
+		} else {
+			GriddoLog.info("Previous and current JavaScript and CSS packages successfully matched");
+		}
+	}
+
+	private async setPagesToDelete() {
+		// INCLUIMOS LAS PÁGINAS A CREAR EN LAS CANDIDATAS A BORRAR
+		// =======================================================
+		// El set de ids incluye tanto las páginas a borrar como las que se van
+		// a crear para manejar correctamente los cambios de slug.
+		//
+		// Ejemplo: Si la página `id=3` tiene slug `about` y después viene con
+		// `slug=about-us`, necesitamos borrar la página `id=3` del render previo
+		// y volver a crearla con la nueva ruta.
+		//
+		// ¿Por qué? Porque el slug determina dónde se guarda la página:
+		// - /about/index.html -> /about-us/index.html
+		//
+		// Si no la borrásemos previamente, tendríamos ambas páginas:
+		// `/about/index.html` y `/about-us/index.html`
+		const candidateIdsToDelete = new Set<number>([...this.pagesToDelete, ...this.pagesToCreate]);
+		const existingPreviousPages = await this.scanPages(this.bundleDir);
+
+		for (const page of existingPreviousPages) {
+			if (candidateIdsToDelete.has(page.id)) {
+				this.state.htmlToDelete.push(page.htmlPath);
+				this.state.jsonToDelete.push(page.jsonPath);
+			}
+		}
+
+		GriddoLog.verbose(`${this.state.htmlToDelete.length} pages HTML to delete`);
+		GriddoLog.verbose(`${this.state.jsonToDelete.length} pages JSON to delete`);
+	}
+
+	private async setPagesToAdd() {
+		const candidateIdsToCreate = new Set<number>(this.pagesToCreate);
+		const newPages = await this.scanPages(this.currentRenderDir);
+
+		for (const page of newPages) {
+			if (candidateIdsToCreate.has(page.id)) {
+				const htmlTo = path.join(this.bundleDir, page.composePath, "index.html");
+				const normalizedCompose = page.composePath === "/" ? "index" : page.composePath;
+				const jsonTo = path.join(this.bundleDir, "page-data", normalizedCompose, "page-data.json");
+
+				this.state.htmlToAdd.push({ from: page.htmlPath, to: htmlTo });
+				this.state.jsonToAdd.push({ from: page.jsonPath, to: jsonTo });
+			}
+		}
+
+		GriddoLog.verbose(`${this.state.htmlToAdd.length} pages HTML to create`);
+		GriddoLog.verbose(`${this.state.jsonToAdd.length} pages JSON to create`);
+	}
+
+	private async sync() {
+		// Delete...
+		const allFilesToDelete = [...this.state.htmlToDelete, ...this.state.jsonToDelete];
+		for (const file of allFilesToDelete) {
+			try {
+				// Usar `force: true` para no fallar si el archivo ya no existe.
+				await fsp.rm(file, { force: true });
+				GriddoLog.verbose(`Sync (remove) : ${file}`);
+			} catch (e) {
+				// El error solo se registraría si es un problema de permisos, etc.
+				GriddoLog.error(`Failed to remove ${file}:`, e);
+			}
+		}
+
+		await this.restoreWebpackCompilationHash();
+
+		// Copy...
+		const allFilesToAdd = [...this.state.htmlToAdd, ...this.state.jsonToAdd];
+		for (const file of allFilesToAdd) {
+			try {
+				await fsp.mkdir(path.dirname(file.to), { recursive: true });
+				await fsp.copyFile(file.from, file.to);
+				GriddoLog.verbose(`Sync (copy) : ${file.from} -> ${file.to}`);
+			} catch (e) {
+				GriddoLog.error(`Failed to copy ${file.from} to ${file.to}:`, e);
+			}
+		}
+
+		// AVOID TO RESTORE webpackCompilationHash
+		// await this.copyAppDataJsonFile();
+		await this.copyAssetArtifacts();
+		await this.copySitemaps();
+	}
+
+	// TODO: Optimizar esto a lo bestia...
+	private async restoreWebpackCompilationHash() {
+		const appDataJsonFile = path.join(this.bundleDir, "page-data", "app-data.json");
+		const webpackCompilationHash = JSON.parse(
+			await fsp.readFile(appDataJsonFile, "utf8"),
+		).webpackCompilationHash;
+		GriddoLog.build(
+			`Reading webpackCompilationHash from ${appDataJsonFile} = ${webpackCompilationHash}`,
+		);
+
+		const changedHtmlFilePaths = this.state.htmlToAdd.map(({ from }) => from);
+
+		for (const htmlFilePath of changedHtmlFilePaths) {
+			GriddoLog.build(`Patching HTML file ${htmlFilePath} with the new webpackCompilationHash`);
+			await patchHtmlFile(htmlFilePath, webpackCompilationHash);
+		}
+	}
+
+	// private async copyAppDataJsonFile() {
+	// 	try {
+	// 		const src = path.join(this.currentRenderDir, "page-data", "app-data.json");
+	// 		const dst = path.join(this.bundleDir, "page-data", "app-data.json");
+	// 		await fsp.copyFile(src, dst);
+	// 		GriddoLog.verbose("Copied app-data.json");
+	// 	} catch (e) {
+	// 		GriddoLog.error("Failed to copy app-data.json:", e);
+	// 	}
+	// }
+
+	private async copyAssetArtifacts() {
+		for (const assetArtifact of this.assetArtifacts) {
+			const src = path.join(this.currentRenderDir, assetArtifact);
+			const dst = path.join(this.bundleDir, assetArtifact);
+			try {
+				await fsp.mkdir(path.dirname(dst), { recursive: true });
+				await fsp.copyFile(src, dst);
+				GriddoLog.verbose(`Copied artifact: ${assetArtifact}`);
+			} catch (e) {
+				GriddoLog.error(`Failed to copy artifact ${src} to ${dst}:`, e);
+			}
+		}
+	}
+
+	private async copySitemaps() {
+		const renderSrc = path.resolve(this.currentRenderDir);
+		const renderDst = path.resolve(this.bundleDir);
+
+		// Primero, elimina los sitemaps existentes en el destino
+		const xmlFilesInDst = findFilesBySuffix(renderDst, ".xml");
+		for await (const xmlFile of xmlFilesInDst) {
+			const basename = path.basename(xmlFile);
+			if (basename.startsWith("sitemap-") || basename === "sitemap.xml") {
+				await fsp.rm(xmlFile, { force: true });
+			}
+		}
+
+		// Segundo, copia los nuevos sitemaps desde el origen
+		const xmlFilesInSrc = findFilesBySuffix(renderSrc, ".xml");
+		for await (const src of xmlFilesInSrc) {
+			// Reconstruye la ruta de destino de forma más robusta
+			const relativePath = path.relative(renderSrc, src);
+			const dst = path.join(renderDst, relativePath);
+
+			try {
+				await fsp.mkdir(path.dirname(dst), { recursive: true });
+				await fsp.copyFile(src, dst);
+			} catch (e) {
+				GriddoLog.error(`Failed to copy sitemap ${src} to ${dst}:`, e);
+			}
+		}
+
+		GriddoLog.verbose(`Copied sitemap files.`);
+	}
+
+	/**
+	 * Escanea un directorio de build de Gatsby y extrae la información esencial
+	 * (PageInfo[]) de cada página.
+	 * @param dir Directorio a escanear (src o dst).
+	 * @returns Un array con la información de cada página encontrada.
+	 */
+	private async scanPages(dir: string): Promise<PageInfo[]> {
+		// 1. Crea una instancia de p-limit con 128 lecturas a la vez...
+		// Como ejemplo: macOS tiene un límite que suele empezar en 256.
+		// De todas maneras libuv tiene un límite de 4 hilos en node
+		const limit = pLimit(32);
+
+		// 2. Recolecta todos los paths de los archivos.
+		const gatsbyPageDataGenerator = findFilesBySuffix(
+			path.join(dir, "page-data"),
+			"page-data.json",
+		);
+		const processingPromises: Promise<PageInfo | null>[] = [];
+		for await (const file of gatsbyPageDataGenerator) {
+			processingPromises.push(
+				limit(async (): Promise<PageInfo | null> => {
+					try {
+						const fileContent = await fsp.readFile(file, "utf-8");
+						const content = JSON.parse(fileContent) as GatsbyPageData;
+
+						const id = content.result.pageContext.id;
+						const composePath = content.result.pageContext.fullPath.compose;
+
+						return {
+							id,
+							composePath,
+							htmlPath: path.join(dir, composePath, "index.html"),
+							jsonPath: file,
+						};
+					} catch (e) {
+						GriddoLog.error(`Error reading or parsing page data from ${file}:`, e);
+						return null;
+					}
+				}),
+			);
+		}
+
+		// 4. Go :)
+		const pagesFoundOrNull = await Promise.all(processingPromises);
+
+		// 5. Filtra los nulos y devuelve solo las páginas válidas.
+		return pagesFoundOrNull.filter((page): page is PageInfo => page !== null);
+	}
+}
+
+export { SyncRender };

package/exporter/ssg-adapters/gatsby/shared/types.ts

@@ -0,0 +1,35 @@
+interface SSG {
+	assetPrefix: string;
+	ssgArtifacts: {
+		disposables: string[];
+		cacheables: string[];
+	};
+}
+
+// Minimal representation of the page structure
+interface GatsbyPageData {
+	path: string;
+	result: {
+		pageContext: {
+			id: number;
+			title: string;
+			path: string;
+			openGraph: any;
+			pageMetadata: any;
+			page: {
+				site: number;
+				id: number;
+				fullPath: { compose: string };
+				language: number;
+				title: string;
+				fullUrl: string;
+				templateId: string;
+				template: {
+					templateType: string;
+				};
+			};
+		};
+	};
+}
+
+export type { GatsbyPageData, SSG };

package/gatsby-browser.tsx

@@ -2,7 +2,6 @@ import type { GatsbyBrowser } from "gatsby";
 
 import { SessionProvider } from "@griddo/core";
 import { browser } from "@griddo-instance";
-import * as React from "react";
 
 export const disableCorePrefetching = () => {
 	if (browser.disableCorePrefetching) {
@@ -22,9 +21,7 @@ export const onInitialClientRender = () => {
 	}
 };
 
-export const onPostPrefetchPathname: GatsbyBrowser["onPostPrefetchPathname"] = (
-	props,
-) => {
+export const onPostPrefetchPathname: GatsbyBrowser["onPostPrefetchPathname"] = (props) => {
 	if (browser.onPostPrefetchPathname) {
 		browser.onPostPrefetchPathname(props);
 	}
@@ -36,75 +33,61 @@ export const onPreRouteUpdate: GatsbyBrowser["onPreRouteUpdate"] = (props) => {
 	}
 };
 
-export const onPrefetchPathname: GatsbyBrowser["onPrefetchPathname"] = (
-	props,
-) => {
+export const onPrefetchPathname: GatsbyBrowser["onPrefetchPathname"] = (props) => {
 	if (browser.onPrefetchPathname) {
 		browser.onPrefetchPathname(props);
 	}
 };
 
-export const onRouteUpdateDelayed: GatsbyBrowser["onRouteUpdateDelayed"] = (
-	props,
-) => {
+export const onRouteUpdateDelayed: GatsbyBrowser["onRouteUpdateDelayed"] = (props) => {
 	if (browser.onServiceWorkerActive) {
 		browser.onRouteUpdateDelayed(props);
 	}
 };
 
-export const onServiceWorkerActive: GatsbyBrowser["onServiceWorkerActive"] = (
-	props,
-) => {
+export const onServiceWorkerActive: GatsbyBrowser["onServiceWorkerActive"] = (props) => {
 	if (browser.onServiceWorkerActive) {
 		browser.onServiceWorkerActive(props);
 	}
 };
 
-export const onServiceWorkerInstalled: GatsbyBrowser["onServiceWorkerInstalled"] =
-	(props) => {
-		if (browser.onServiceWorkerInstalled) {
-			browser.onServiceWorkerInstalled(props);
-		}
-	};
-
-export const onServiceWorkerRedundant: GatsbyBrowser["onServiceWorkerRedundant"] =
-	(props) => {
-		if (browser.onServiceWorkerRedundant) {
-			browser.onServiceWorkerRedundant(props);
-		}
-	};
-
-export const onServiceWorkerUpdateFound: GatsbyBrowser["onServiceWorkerUpdateFound"] =
-	(props) => {
-		if (browser.onServiceWorkerUpdateFound) {
-			browser.onServiceWorkerUpdateFound(props);
-		}
-	};
-
-export const onServiceWorkerUpdateReady: GatsbyBrowser["onServiceWorkerUpdateReady"] =
-	(props) => {
-		if (browser.onServiceWorkerUpdateReady) {
-			browser.onServiceWorkerUpdateReady(props);
-		}
-	};
-
-export const registerServiceWorker: GatsbyBrowser["registerServiceWorker"] =
-	() => {
-		if (browser.registerServiceWorker) {
-			return browser.registerServiceWorker();
-		}
-	};
-
-export const replaceHydrateFunction: GatsbyBrowser["replaceHydrateFunction"] =
-	() => {
-		if (browser.replaceHydrateFunction) {
-			return browser.replaceHydrateFunction();
-		}
-	};
-
-export const shouldUpdateScroll: GatsbyBrowser["shouldUpdateScroll"] = (
-	props,
-) => {
+export const onServiceWorkerInstalled: GatsbyBrowser["onServiceWorkerInstalled"] = (props) => {
+	if (browser.onServiceWorkerInstalled) {
+		browser.onServiceWorkerInstalled(props);
+	}
+};
+
+export const onServiceWorkerRedundant: GatsbyBrowser["onServiceWorkerRedundant"] = (props) => {
+	if (browser.onServiceWorkerRedundant) {
+		browser.onServiceWorkerRedundant(props);
+	}
+};
+
+export const onServiceWorkerUpdateFound: GatsbyBrowser["onServiceWorkerUpdateFound"] = (props) => {
+	if (browser.onServiceWorkerUpdateFound) {
+		browser.onServiceWorkerUpdateFound(props);
+	}
+};
+
+export const onServiceWorkerUpdateReady: GatsbyBrowser["onServiceWorkerUpdateReady"] = (props) => {
+	if (browser.onServiceWorkerUpdateReady) {
+		browser.onServiceWorkerUpdateReady(props);
+	}
+};
+
+export const registerServiceWorker: GatsbyBrowser["registerServiceWorker"] = () => {
+	if (browser.registerServiceWorker) {
+		return browser.registerServiceWorker();
+	}
+};
+
+export const replaceHydrateFunction: GatsbyBrowser["replaceHydrateFunction"] = () => {
+	if (browser.replaceHydrateFunction) {
+		return browser.replaceHydrateFunction();
+	}
+};
+
+export const shouldUpdateScroll: GatsbyBrowser["shouldUpdateScroll"] = (props) => {
 	if (browser.shouldUpdateScroll) {
 		return browser.shouldUpdateScroll(props);
 	}

package/gatsby-config.ts

@@ -1,33 +1,26 @@
 import type { GatsbyConfig } from "gatsby";
 
-import { resolveComponentsPath, verboseLog } from "@griddo/cx";
-import dotenv from "dotenv";
-
-dotenv.config();
+import { resolveComponentsPath } from "@griddo/cx";
 
 /**
  * Este process.env.SPAWN_ASSET_PREFIX_WITH_DOMAIN se lee porque
- * se ha introducido en el spawnSync del la función runGatsbyBuildCommand.
+ * se ha introducido en el spawnSync del la función gatsbyBuild.
  *
  *	...
- *	env: Object.assign(process.env, {
- *		GRIDDO_EXPORTER: "true",
+ *	env: {
+ *		...process.env,
  *		SPAWN_ASSET_PREFIX_WITH_DOMAIN: assetPrefixWithDomain, <--------------
  *		NODE_OPTIONS: undefined,
- *	}),
- *
- * @see runGatsbyBuildCommand()
- * @todo quiar el `... || undefined`
+ *	},
  */
-const griddoAssetPrefixWithDomain =
-	process.env.SPAWN_ASSET_PREFIX_WITH_DOMAIN || undefined;
+const griddoAssetPrefixWithDomain = process.env.SPAWN_ASSET_PREFIX_WITH_DOMAIN || undefined;
 
-verboseLog(`set config.assetPrefix=${griddoAssetPrefixWithDomain}`);
+if (process.env.GRIDDO_SSG_VERBOSE_LOGS) {
+	console.log(`set config.assetPrefix=${griddoAssetPrefixWithDomain}`);
+}
 
 // Gatsby configuration file from client
-const { plugins, ...gatsbyConfig } = require(
-	resolveComponentsPath("builder.config.js"),
-);
+const { plugins, ...gatsbyConfig } = require(resolveComponentsPath("builder.config.js"));
 
 const config: GatsbyConfig = {
 	// Client config

package/gatsby-node.ts

@@ -1,49 +1,34 @@
-import type { GatsbyPageObject } from "./src/types";
 import type { GatsbyNode } from "gatsby";
+import type { GatsbyPageObject } from "./src/types";
 
 import path from "node:path";
 
-import {
-	buildLog,
-	debugLog,
-	envs,
-	getBuildPagesFromStore,
-	getConfig,
-	pageSizeLog,
-	verboseLog,
-} from "@griddo/cx";
+import { addLogToBuffer, isComponentLibrary } from "@griddo/cx";
 
-import { gatsbyRegister } from "./exporter/registers";
-import { insertAlert } from "./exporter/utils/alerts";
-
-const showGriddoBuildLogs = envs.GRIDDO_BUILD_LOGS;
+import { getBuildPagesFromStore, pageSizeLog } from "./src/gatsby-node-utils";
 
 // process.env available through gatsbyBuildCommand.
+const showGriddoBuildLogs = JSON.parse(process.env.GRIDDO_BUILD_LOGS || "false");
+const showSSGVerboseLogs = JSON.parse(process.env.GRIDDO_VERBOSE_SSG || "false");
 const assetPrefixWithDomain = process.env.SPAWN_ASSET_PREFIX_WITH_DOMAIN;
-const sendAlertActive = JSON.parse(process.env.GRIDDO_ALERT_FEATURE || "false");
-const avoidMatchPath = JSON.parse(
-	process.env.GRIDDO_EXPERIMENTAL_DO_NOT_USE_MATCH_PATH || "false",
-);
-const useMatchPaths = !avoidMatchPath;
-const needsAssetDomainPrefix =
-	!!assetPrefixWithDomain && assetPrefixWithDomain !== "";
+const needsAssetDomainPrefix = !!assetPrefixWithDomain && assetPrefixWithDomain !== "";
+const nodeOptions = process.env.NODE_OPTIONS;
 
-const { __ssg } = getConfig().paths();
-const template = path.join(__ssg, "src/components/template.tsx");
+const template = path.resolve("./src/components/template.tsx");
+const dbFilePath = isComponentLibrary
+	? path.resolve(__dirname, "../../..", ".griddo/cache/db.json")
+	: path.resolve(__dirname, "../..", ".griddo/cache/db.json");
 
 const pages = getBuildPagesFromStore<GatsbyPageObject>({
 	withSizeProp: showGriddoBuildLogs,
+	dbFilePath,
 });
 
 const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
-	verboseLog(`read assetPrefixWithDomain=${assetPrefixWithDomain}`);
-	verboseLog(`set needsAssetDomainPrefix=${needsAssetDomainPrefix}`);
-	console.log(
-		`using this NODE_OPTIONS in gatsby-node.ts: ${process.env.NODE_OPTIONS}`,
-	);
-
-	if (avoidMatchPath) {
-		console.log(`[!] GRIDDO EXPERIMENTAL: Avoiding use of matchPath`);
+	if (showSSGVerboseLogs) {
+		console.log(`read assetPrefixWithDomain=${assetPrefixWithDomain}`);
+		console.log(`set needsAssetDomainPrefix=${needsAssetDomainPrefix}`);
+		console.log(`using NODE_OPTIONS in gatsby-node.ts: ${nodeOptions}`);
 	}
 
 	for await (const page of pages) {
@@ -51,60 +36,16 @@ const createPages: GatsbyNode["createPages"] = async ({ actions }) => {
 			return;
 		}
 
-		const matchPath =
-			needsAssetDomainPrefix && useMatchPaths
-				? page.context.fullPath.compose
-				: "";
-
 		page.component = template;
-		page.matchPath = matchPath;
 
 		actions.createPage(page);
 
-		const path = page.path;
-		const id = page.context.id;
-		const size = pageSizeLog(Math.round(page.size || 0));
-
-		if (sendAlertActive && page.size) {
-			const pageMaxSizeReached =
-				page.size >
-				Number.parseInt(process.env.GRIDDO_SSG_MAX_PAGE_SIZE || "524288") /
-					1024;
-
-			if (pageMaxSizeReached) {
-				gatsbyRegister.insert("GATSBY_PAGE_SIZE_TOO_BIG", {
-					path: page.path,
-					size: `${Math.round(page.size)}KB`,
-				});
-			}
-		}
-
 		if (showGriddoBuildLogs) {
-			buildLog(`Creating page ${path} - ${id} - ${size}`);
-		}
-	}
-
-	if (sendAlertActive) {
-		const registerContent = gatsbyRegister.get("GATSBY_PAGE_SIZE_TOO_BIG");
-
-		if (registerContent.entries.length < 1) {
-			return;
+			const id = page.context.id;
+			const path = page.path;
+			const size = pageSizeLog(Math.round(page.size || 0));
+			addLogToBuffer(`Creating page ${path} - ${id} - ${size}`);
 		}
-
-		debugLog("\nRender register report\n");
-		debugLog(registerContent);
-		debugLog();
-
-		await insertAlert({
-			description: "Render register report",
-			area: "Griddo",
-			level: "W",
-			fullData: {
-				output: registerContent,
-				date: new Date().toISOString(),
-			},
-			instantNotification: false,
-		});
 	}
 };
 

package/gatsby-ssr.tsx

@@ -1,8 +1,9 @@
 import type { GatsbySSR } from "gatsby";
 
+import * as React from "react";
+
 import { SessionProvider } from "@griddo/core";
 import { ssr } from "@griddo-instance";
-import * as React from "react";
 
 export const wrapPageElement: GatsbySSR["wrapPageElement"] = (props) => {
 	if (ssr.wrapPageElement) {