@cocreate/server-side-render 1.12.4 → 1.12.5

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.12.5](https://github.com/CoCreate-app/CoCreate-server-side-render/compare/v1.12.4...v1.12.5) (2025-10-08)
+
+
+### Bug Fixes
+
+* add TODO comments for fetching src and activating language links in HTML rendering ([0429a37](https://github.com/CoCreate-app/CoCreate-server-side-render/commit/0429a37715c648c46989f351befb8c5f19f5e181))
+* enhance src handling and language link tag creation in HTML rendering ([1dc2bb6](https://github.com/CoCreate-app/CoCreate-server-side-render/commit/1dc2bb6d9c4839d605b3ddd1cd4374f9b10bf3ba))
+* ensure proper context binding and improve translation logic in CoCreateServerSideRender ([74e5ab2](https://github.com/CoCreate-app/CoCreate-server-side-render/commit/74e5ab22a68d1eec14dd6a2600f2a8363eefff16))
+* improve src handling and add getRelativePath utility in HTML rendering ([c8b17f8](https://github.com/CoCreate-app/CoCreate-server-side-render/commit/c8b17f8b603808325393503c897bed94ff93e36f))
+* refactor language link tag creation and improve DOM manipulation in HTML rendering ([b860e08](https://github.com/CoCreate-app/CoCreate-server-side-render/commit/b860e08be2c89ea60aac758d56e2599ed1aeec3a))
+* update HTML method to accept organization and language parameters for improved rendering ([515336e](https://github.com/CoCreate-app/CoCreate-server-side-render/commit/515336ea7e7cc975a5e65f07d0f5166d7bc2d9e1))
+
 ## [1.12.4](https://github.com/CoCreate-app/CoCreate-server-side-render/compare/v1.12.3...v1.12.4) (2025-09-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/server-side-render",
-  "version": "1.12.4",
+  "version": "1.12.5",
   "description": "A simple server-side-render component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "server-side-render",

package/src/index.js

@@ -1,12 +1,13 @@
 const { parse } = require("node-html-parser");
-const { checkValue } = require("@cocreate/utils");
+const { checkValue, getRelativePath, ObjectId } = require("@cocreate/utils");
+const path = require("path");
 
 class CoCreateServerSideRender {
 	constructor(crud) {
 		this.crud = crud;
 	}
 
-	async HTML(file) {
+	async HTML(file, organization, urlObject, langRegion, lang) {
 		const self = this;
 		let ignoreElement = {
 			INPUT: true,
@@ -19,6 +20,8 @@ class CoCreateServerSideRender {
 
 		let dep = [];
 		let dbCache = new Map();
+		let organization_id = file.organization_id;
+		const host = urlObject.hostname;
 
 		async function render(dom, lastKey) {
 			// Handle elements with [array][key][object]
@@ -58,6 +61,7 @@ class CoCreateServerSideRender {
 				} else {
 					data = await self.crud.send({
 						method: "object.read",
+						host,
 						array,
 						object: { _id },
 						organization_id
@@ -88,143 +92,150 @@ class CoCreateServerSideRender {
 				dep.pop();
 			}
 
+			// ToDo: Fetch and render src, update relativePath. must have similar functionality to @cocreate/elements/fetch-src
 			// Handle elements with [src]
-			// for (let el of dom.querySelectorAll(
-			// 	"[src]:not(script, img, iframe, audio, video, source, track, input, embed, frame)"
-			// )) {
-			// 	let src = el.getAttribute("src");
-			// 	if (!src) continue;
-
-			// 	// Construct actual pathname using src and the original URL
-			// 	let basePath = new URL(url).pathname;
-			// 	let resolvedPathname = new URL(
-			// 		src,
-			// 		`http://localhost${basePath}`
-			// 	).pathname;
-
-			// 	if (resolvedPathname.endsWith("/")) {
-			// 		resolvedPathname += "index.html";
-			// 	}
-			// 	let $filter = {
-			// 		query: {
-			// 			pathname: resolvedPathname
-			// 		}
-			// 	}; // Use filter to structure query
-
-			// 	let data = await self.crud.send({
-			// 		method: "object.read",
-			// 		array: "files",
-			// 		object: "",
-			// 		$filter,
-			// 		organization_id
-			// 	});
-
-			// 	if (
-			// 		data &&
-			// 		data.object &&
-			// 		data.object[0] &&
-			// 		data.object[0].src
-			// 	) {
-			// 		let chunk = data.object[0].src;
-			// 		let path = el.getAttribute("path");
-			// 		if (path) chunk = chunk.replaceAll("{{path}}", path);
-
-			// 		chunk = await render(chunk);
-
-			// 		el.setAttribute("rendered", "");
-			// 		el.innerHTML = "";
-			// 		el.appendChild(chunk);
-			// 	}
-			// }
+			for (let el of dom.querySelectorAll(
+				"[src]:not(script, img, iframe, audio, video, source, track, input, embed, frame)"
+			)) {
+				let src = el.getAttribute("src");
+				if (!src) continue;
+
+				let path =
+					el.getAttribute("path") || getRelativePath(file.path);
+
+				if (path) {
+					src = src.replaceAll(/\$relativePath\/?/g, path);
+				}
+
+				// Construct actual pathname using src and the original URL
+				let pathname = new URL(src, `http://localhost${file.path}`)
+					.pathname;
+
+				if (pathname.endsWith("/")) {
+					pathname += "index.html";
+				}
+				let $filter = {
+					query: {
+						pathname: pathname
+					}
+				}; // Use filter to structure query
+
+				let data = await self.crud.send({
+					method: "object.read",
+					host,
+					array: "files",
+					object: "",
+					$filter,
+					organization_id
+				});
+
+				if (
+					data &&
+					data.object &&
+					data.object[0] &&
+					data.object[0].src
+				) {
+					let chunk = data.object[0].src;
+
+					// Replace $relativePath in the fetched chunk
+					let path =
+						el.getAttribute("path") || getRelativePath(file.path);
+					if (path) {
+						chunk = chunk.replaceAll(/\$relativePath\/?/g, path);
+					}
+
+					// Replace ObjectId() with a new ObjectId
+					chunk = chunk.replaceAll("ObjectId()", () => {
+						// Generate a NEW ObjectId inside the function
+						return ObjectId().toString(); // Return its string representation
+					});
+
+					// Parse chunk into DOM before recursive rendering
+					let chunkDom = parse(chunk);
+					chunkDom = await render(chunkDom);
+
+					el.setAttribute("rendered", "");
+					el.innerHTML = "";
+					// Append all child nodes of chunkDom to el
+					for (const child of chunkDom.childNodes) {
+						el.appendChild(child);
+					}
+				}
+			}
 
 			return dom;
 		}
 
 		let dom = parse(file.src);
 		dom = await render(dom, "root");
-		if (file.langRegion || file.lang) {
-			dom = translate(dom, file);
-			let langLinkTags = createLanguageLinkTags(file);
+		if (langRegion || lang) {
+			dom = await this.translate(dom, file, langRegion, lang);
+		}
+
+		if (organization.languages && organization.languages.length > 0) {
+			let langLinkTags = this.createLanguageLinkTags(
+				file,
+				organization,
+				urlObject
+			);
 			const head = dom.querySelector("head");
 			if (head && langLinkTags) {
-				const linksFragment = parse(
-					`<fragment>${langLinkTags}</fragment>`
-				);
-				for (const link of linksFragment.childNodes) {
+				const linksFragment = parse(langLinkTags);
+				for (const link of linksFragment.querySelectorAll("link")) {
 					head.appendChild(link);
 				}
+				// Remove the fragment node from the DOM if it exists
+				if (linksFragment.parentNode) {
+					linksFragment.remove();
+				}
 			}
 		}
+
 		dep = [];
 		dbCache.clear();
 		return dom.toString();
 	}
 
-	createLanguageLinkTags(file) {
-		let xDefault = file.path;
-
-		if (file.name !== "index.html") {
-			if (xDefault.endsWith("/")) {
-				xDefault += file.name;
-			} else {
-				xDefault += "/" + file.name;
-			}
-		}
-		let generatedLinksString = `<link rel="alternate" hreflang="x-default" href="${xDefault}">\n`;
-
-		// Step 1: Create a lookup object that maps base language to its path.
-		// This is done once for efficiency.
-		const paths = {};
-		for (const p of file.pathname) {
-			const secondSlashIndex = p.indexOf("/", 1);
-			const langKey = p.substring(1, secondSlashIndex); // e.g., 'en', 'es', 'pt'
-			const restOfPath = p.substring(secondSlashIndex);
-			paths[langKey] = restOfPath;
-		}
-
-		// Step 2: Iterate through all supported languages and build the HTML string.
-		for (const language of file.languages) {
-			// Use the base language to find the correct path in our map
-			const path = paths[language] || paths[language.split("-")[0]];
-
-			// If a valid path exists, construct the full link
-			if (path) {
-				// Construct the full href URL using the full language code from the array
-				const hrefUrl = `https://${file.urlObject.hostname}/${language}${path}`;
+	createLanguageLinkTags(file, organization, urlObject) {
+		let generatedLinksString = `<link rel="alternate" hreflang="x-default" href="https://${urlObject.hostname}${file.pathname}">\n`;
 
-				// Append the HTML string. The hreflang and the URL path are now in sync.
-				generatedLinksString += `<link rel="alternate" hreflang="${language}" href="${hrefUrl}">\n`;
-			}
+		for (const language of organization.languages) {
+			let langPath = `/${language}${file.pathname}`;
+			const hrefUrl = `https://${urlObject.hostname}${langPath}`;
+			generatedLinksString += `<link rel="alternate" hreflang="${language}" href="${hrefUrl}">\n`;
 		}
 		return generatedLinksString;
 	}
 
-	async translate(dom, file) {
-		let langRegion = file.langRegion;
-		let lang = file.lang;
-		if (file.translations & (langRegion || lang)) {
+	async translate(dom, file, langRegion, lang) {
+		if (file.translations && (langRegion || lang)) {
 			for (let translation of file.translations) {
-				let el = dom.querySelectorAll(translation.selector);
-				if (translation.innerHTML) {
-					let content =
-						translation.innerHTML[langRegion] ||
-						translation.innerHTML[lang];
-					if (content) {
-						el.innerHTML = content;
+				let elements = dom.querySelectorAll(translation.selector) || [];
+				for (let el of elements) {
+					if (!el) continue;
+					if (translation.innerHTML) {
+						let content =
+							translation.innerHTML[langRegion] ||
+							translation.innerHTML[lang];
+						if (content) {
+							el.innerHTML = content;
+						}
 					}
-				}
-				if (translation.attributes) {
-					for (let [key, language] of Object.entries(
-						translation.attributes
-					)) {
-						let value = language[langRegion] || language[lang];
-						if (value) {
-							el.setAttribute(key, value);
+					if (translation.attributes) {
+						for (let [key, languageObj] of Object.entries(
+							translation.attributes
+						)) {
+							let value =
+								languageObj[langRegion] || languageObj[lang];
+							if (value) {
+								el.setAttribute(key, value);
+							}
 						}
 					}
 				}
 			}
 		}
+		return dom;
 	}
 }