@cocreate/server-side-render 1.12.3 → 1.12.5

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [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)
+
+
+### Bug Fixes
+
+* optimize language link tag insertion in HTML rendering ([ac0580c](https://github.com/CoCreate-app/CoCreate-server-side-render/commit/ac0580cd90da8a555fb1fb47412c1484ccc20a93))
+* refactor HTML method to accept file object and enhance language link generation ([b0d7a97](https://github.com/CoCreate-app/CoCreate-server-side-render/commit/b0d7a97de5f3e3c46dc3bd42c62e79e3843ebb22))
+* streamline render attribute checks in CoCreateServerSideRender ([4407afb](https://github.com/CoCreate-app/CoCreate-server-side-render/commit/4407afbcc218e7fa9af488e5a2bc5b2abf74d7bc))
+
 ## [1.12.3](https://github.com/CoCreate-app/CoCreate-server-side-render/compare/v1.12.2...v1.12.3) (2025-05-01)
 
 

package/package.json

@@ -1,18 +1,10 @@
 {
   "name": "@cocreate/server-side-render",
-  "version": "1.12.3",
+  "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",
-    "cocreate",
-    "low-code-framework",
-    "no-code-framework",
-    "cocreatejs",
-    "cocreatejs-component",
-    "cocreate-framework",
-    "no-code",
     "low-code",
-    "collaborative-framework",
     "realtime",
     "realtime-framework",
     "collaboration",

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(html, organization_id, url) {
+	async HTML(file, organization, urlObject, langRegion, lang) {
 		const self = this;
 		let ignoreElement = {
 			INPUT: true,
@@ -19,10 +20,10 @@ class CoCreateServerSideRender {
 
 		let dep = [];
 		let dbCache = new Map();
+		let organization_id = file.organization_id;
+		const host = urlObject.hostname;
 
-		async function render(html, lastKey) {
-			const dom = parse(html);
-
+		async function render(dom, lastKey) {
 			// Handle elements with [array][key][object]
 			for (let el of dom.querySelectorAll("[array][key][object]")) {
 				let meta = el.attributes;
@@ -32,14 +33,7 @@ class CoCreateServerSideRender {
 				if (el.closest(".template, [template], template, [render]"))
 					continue;
 
-				if (
-					el.hasAttribute("render-selector") ||
-					el.hasAttribute("render-closest") ||
-					el.hasAttribute("render-parent") ||
-					el.hasAttribute("render-next") ||
-					el.hasAttribute("render-previous")
-				)
-					continue;
+				if (el.hasAttribute("render-query")) continue;
 
 				if (el.hasAttribute("component") || el.hasAttribute("plugin"))
 					continue;
@@ -67,6 +61,7 @@ class CoCreateServerSideRender {
 				} else {
 					data = await self.crud.send({
 						method: "object.read",
+						host,
 						array,
 						object: { _id },
 						organization_id
@@ -97,62 +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 result = await render(html, "root");
+		let dom = parse(file.src);
+		dom = await render(dom, "root");
+		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(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 result.toString();
+		return dom.toString();
+	}
+
+	createLanguageLinkTags(file, organization, urlObject) {
+		let generatedLinksString = `<link rel="alternate" hreflang="x-default" href="https://${urlObject.hostname}${file.pathname}">\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, langRegion, lang) {
+		if (file.translations && (langRegion || lang)) {
+			for (let translation of file.translations) {
+				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, languageObj] of Object.entries(
+							translation.attributes
+						)) {
+							let value =
+								languageObj[langRegion] || languageObj[lang];
+							if (value) {
+								el.setAttribute(key, value);
+							}
+						}
+					}
+				}
+			}
+		}
+		return dom;
 	}
 }