@griddo/cx 10.3.13 → 10.3.15

package/src/components/Head.tsx

@@ -1,12 +1,12 @@
-import type { CustomHeadProps } from "./types";
+import type { CustomHeadProps } from "../types";
 
 // @ts-expect-error components is unknown
 import { generateAutomaticDimensions } from "components";
 import parse from "html-react-parser";
 import * as React from "react";
 
-import { cleanCommaSeparated, composeAnalytics, formatImage } from "./utils";
-import { filterHeadIntegrations } from "../utils/integrations";
+import { filterHeadIntegrations } from "../../exporter/utils/integrations";
+import { cleanCommaSeparated, composeAnalytics, formatImage } from "../utils";
 
 /**
  * Gatsby Head API

package/src/components/template.tsx

@@ -1,7 +1,6 @@
-import type { TemplateProps } from "./types";
-import type { Core } from "@griddo/core";
+import type { TemplateProps } from "../types";
 
-import { Page as RenderGriddoPage } from "@griddo/core";
+import { Core, Page as RenderGriddoPage } from "@griddo/core";
 // @ts-expect-error components is unknown
 import { components, SiteProvider, templates } from "components";
 import { Link, navigate } from "gatsby";
@@ -9,7 +8,7 @@ import parse from "html-react-parser";
 import * as React from "react";
 import { Helmet } from "react-helmet";
 
-import { filterPositionIntegrations } from "../utils/integrations";
+import { filterPositionIntegrations } from "../../exporter/utils/integrations";
 
 // Gatsby Head
 export { Head } from "./Head";

package/src/gatsby-node-utils.ts

@@ -0,0 +1,154 @@
+import type { GatsbyNode } from "gatsby";
+
+import path from "node:path";
+
+import fs from "fs-extra";
+
+import {
+	IS_COMPONENT_LIBRARY,
+	PROJECT_ALIASES,
+	resolveComponentsPath,
+} from "../exporter/utils/instance";
+
+/**
+ * Copy the instance's `/static` folder into the Gatsby's to include it in the render assets.
+ */
+function prepareStaticFolder() {
+	const src = resolveComponentsPath("static");
+	const dest = "./static";
+
+	const files = fs.readdirSync(src);
+
+	try {
+		files.map(async (file) => {
+			const fileSrc = `${src}/${file}`;
+			const fileDest = `${dest}/${file}`;
+			fs.copySync(fileSrc, fileDest);
+		});
+
+		console.info("Components static folder copied");
+	} catch (err) {
+		console.error(err);
+	}
+}
+
+/**
+ * Update the Griddo's `/dist` folder with the contents from `/public` only with files of type:
+ * - js
+ * - json
+ * - css
+ */
+async function updateDist() {
+	const src = "./public";
+	const dest = "./dist";
+
+	const domainDestPath = `${dest}/${process.env.DOMAIN}`;
+
+	const files = fs
+		.readdirSync(src)
+		.filter(
+			(file) =>
+				path.extname(file) === ".js" ||
+				path.extname(file) === ".json" ||
+				path.extname(file) === ".css"
+		);
+
+	const assetsDest = "./assets";
+
+	const pageDataSrc = `${src}/page-data`;
+	const pageDataDest = `${assetsDest}/page-data`;
+
+	const projectStaticSrc = "./static";
+	const projectStaticDest = assetsDest;
+
+	const gatsbyStaticSrc = `${dest}/static`;
+	const gatsbyStaticDest = `${assetsDest}/static`;
+
+	try {
+		fs.mkdirSync(assetsDest, { recursive: true });
+		fs.copySync(src, dest);
+
+		if (process.env.NEEDS_ASSET_DOMAIN_PREFIX) {
+			fs.copySync(pageDataSrc, pageDataDest);
+			fs.copySync(projectStaticSrc, projectStaticDest, { overwrite: false });
+			fs.copySync(gatsbyStaticSrc, gatsbyStaticDest, { overwrite: false });
+			fs.copySync(projectStaticSrc, domainDestPath, { overwrite: false });
+
+			files.map(async (file) => {
+				const fileSrc = `${src}/${file}`;
+				const fileDest = `${assetsDest}/${file}`;
+				fs.copySync(fileSrc, fileDest);
+			});
+		}
+	} catch (err) {
+		console.error(err);
+	}
+}
+
+const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = ({
+	actions,
+	plugins,
+	loaders,
+	getConfig,
+	stage,
+}) => {
+	if (IS_COMPONENT_LIBRARY) {
+		const config = getConfig();
+		config.module.rules = [
+			// Omit the default rule where test === '\.jsx?$'
+			...config.module.rules.filter(
+				(rule: { test: string }) => String(rule.test) !== String(/\.jsx?$/)
+			),
+			// Recreate it with custom exclude filter
+			{
+				...loaders.js(),
+				test: /\.jsx?$/,
+				// Exclude all node_modules from transpilation, except for '@griddo/cx'
+				exclude: (modulePath: string) =>
+					/node_modules/.test(modulePath) && !/@griddo\/cx/.test(modulePath),
+			},
+		];
+		actions.replaceWebpackConfig(config);
+	}
+
+	// Add component-system aliases to Webpack's Resolve:
+	actions.setWebpackConfig({
+		resolve: {
+			fallback: { path: false },
+			alias: PROJECT_ALIASES,
+		},
+		plugins: [plugins.provide({ process: "process/browser", React: "react" })],
+	});
+
+	// No sourcemaps on builds
+	if (stage === "build-javascript") {
+		actions.setWebpackConfig({ devtool: false });
+	}
+};
+
+function getGatsbyAssetPrefixSlug(domain: string) {
+	const assetPrefix =
+		process.env.GRIDDO_ASSET_PREFIX || process.env.ASSET_PREFIX;
+
+	if (!assetPrefix || !domain) return "";
+	if (!domain.startsWith("pro-")) return "";
+
+	return `${assetPrefix}/${domain}`;
+}
+
+function getMatchPath(domain: string, compose: string) {
+	const domainWithNoSlashes = domain.replace("/", "");
+	const assetPrefix = getGatsbyAssetPrefixSlug(domainWithNoSlashes);
+	const needsAssetDomainPrefix = assetPrefix && assetPrefix !== "";
+	const matchPath = needsAssetDomainPrefix ? compose : "";
+
+	return matchPath;
+}
+
+export {
+	getMatchPath,
+	onCreateWebpackConfig,
+	prepareStaticFolder,
+	updateDist,
+	getGatsbyAssetPrefixSlug,
+};

package/src/html.tsx

@@ -1,4 +1,4 @@
-import type { HtmlProps } from "./components/types";
+import type { HtmlProps } from "./types";
 
 import * as React from "react";
 

package/src/types.ts

@@ -0,0 +1,98 @@
+import type { SocialsResponse } from "../exporter/types/api";
+import type {
+	AdditionalInfo,
+	GriddoListPage,
+	GriddoMultiPage,
+	GriddoPageObject,
+	GriddoSinglePage,
+} from "../exporter/types/pages";
+import type { Site } from "../exporter/types/sites";
+import type { Core } from "@griddo/core";
+import type { HeadProps } from "gatsby";
+
+export interface CustomHeadProps extends HeadProps {
+	pageContext: GriddoPageObject["context"] & {
+		page: Core.Page & {
+			defaultLang: { id: number };
+			dimensions: Dimensions;
+			disableHrefLangs: Array<number>;
+		};
+	};
+}
+
+export interface TemplateProps extends Omit<GriddoPageObject, "context"> {
+	pageContext: GriddoPageObject["context"] & {
+		page: Core.Page;
+	};
+	location: {
+		pathname: string;
+		search: string;
+		hash: string;
+	};
+}
+
+export interface HtmlProps {
+	body: string;
+	bodyAttributes: React.HtmlHTMLAttributes<HTMLBodyElement>;
+	headComponents: React.ReactNode;
+	htmlAttributes: React.HtmlHTMLAttributes<HTMLHtmlElement>;
+	postBodyComponents: React.ReactNode;
+	preBodyComponents: React.ReactNode;
+}
+
+export interface Dimensions {
+	values: Record<string, string> | null;
+	contentSelect?: "group" | "individual" | null;
+	groupSelect?: string;
+	dimensionsSelect?: Array<string>;
+}
+
+// TODO: JSDoc
+export type GatsbyPageObject = {
+	matchPath?: string;
+	path: string;
+	component: string;
+	/** Page size in bytes */
+	size?: number;
+	context: {
+		// Page
+		BUILD_MODE?: string;
+		cloudinaryName?: string;
+		footer: Record<string, unknown> | null;
+		fullPath: Core.Page["fullPath"];
+		griddoVersion: string;
+		renderDate: string;
+		header: Record<string, unknown> | null;
+		id?: number;
+		languageId: number;
+		locale?: string;
+		openGraph: {
+			description?: string;
+			image?: string | null;
+			title?: string;
+			twitterImage?: string | null;
+			type: "website";
+		};
+		pageMetadata: {
+			canonical?: string | undefined;
+			description?: string;
+			follow?: "follow" | "nofollow";
+			index: "index" | "noindex";
+			locale?: string;
+			metaKeywords?: string;
+			metasAdvanced?: string;
+			pageLanguages?: Core.Page["pageLanguages"];
+			title?: string;
+			translate?: "notranslate" | "";
+			url?: string;
+		};
+		siteMetadata: Site["siteMetadata"];
+		theme: string;
+		title: string;
+		siteLangs: Array<Core.SiteLanguage>;
+		siteOptions: AdditionalInfo["siteOptions"];
+		siteScript: string;
+		socials: SocialsResponse;
+		page: GriddoSinglePage | GriddoListPage | GriddoMultiPage;
+	};
+};

package/src/{components/utils.ts → utils.ts}

@@ -1,16 +1,16 @@
-// Only browser environment code
+// Only browser environment code, not node.
 //
-// Don't write node code (fs, path, etc..) in this folder because is imported by
-// `template.tsx` in a browser environment and node doesn't exists.
-// If yo do that the render process will be break in the SSR build process
+// Don't write node code (fs, path, etc..) in this file because is imported by
+// `template.tsx` in a browser environment and node doesn't exist there.
+// If you need to write utils, for example for `gatsby-node.ts` that uses node
+// packages write them in `gatsby-node-utils.ts`.
 //
-// Browserify doesn't work with the mixture of typescript + webpack 5 + SSR
+// NOTE: Browserify doesn't work with the mixture of typescript + webpack 5 + SSR
 
 import type { Dimensions } from "./types";
 import type { Fields } from "@griddo/core";
 
 /**
- *
  * Sanitize a string separated by commas.
  */
 export function cleanCommaSeparated(str: string) {
@@ -136,8 +136,6 @@ export function composeAnalytics(
 
 /**
  * Return true if the argument is an object (not null)
- *
- * @param any value
  */
 export function isObject(value: unknown) {
 	return typeof value === "object" && value !== null && !Array.isArray(value);

package/static/robots.txt

@@ -1,2 +1,3 @@
+# This file comes from the /static folder
 User-agent: *
 Disallow: /