cds-plugin-ui5 0.6.2 → 0.6.4

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.4](https://github.com/ui5-community/ui5-ecosystem-showcase/compare/cds-plugin-ui5@0.6.3...cds-plugin-ui5@0.6.4) (2023-09-10)
+
+
+### Bug Fixes
+
+* **cds-plugin-ui5:** rewrite UI5 server listing also in approuter ([#839](https://github.com/ui5-community/ui5-ecosystem-showcase/issues/839)) ([f501558](https://github.com/ui5-community/ui5-ecosystem-showcase/commit/f501558b47051606606c4b5289bc60d43018031f))
+
+
+
+
+
+## [0.6.3](https://github.com/ui5-community/ui5-ecosystem-showcase/compare/cds-plugin-ui5@0.6.2...cds-plugin-ui5@0.6.3) (2023-09-08)
+
+
+### Bug Fixes
+
+* **cds-plugin-ui5:** fix type for config ([ebd95f0](https://github.com/ui5-community/ui5-ecosystem-showcase/commit/ebd95f0e5a269c769587e7c9c3bdf6885fc7ca3d))
+
+
+
+
+
 ## [0.6.2](https://github.com/ui5-community/ui5-ecosystem-showcase/compare/cds-plugin-ui5@0.6.1...cds-plugin-ui5@0.6.2) (2023-09-08)
 
 

package/cds-plugin.js

@@ -5,6 +5,7 @@ const log = require("./lib/log");
 const findUI5Modules = require("./lib/findUI5Modules");
 const createPatchedRouter = require("./lib/createPatchedRouter");
 const applyUI5Middleware = require("./lib/applyUI5Middleware");
+const rewriteHTML = require("./lib/rewriteHTML");
 
 // marker that the cds-plugin-ui5 plugin is running
 // to disable the ui5-middleware-cap if used in apps
@@ -67,18 +68,20 @@ cds.on("bootstrap", async function bootstrap(app) {
 	if (links.length > 0) {
 		// register the custom middleware (similar like in @sap/cds/server.js)
 		app.get("/", function appendLinksToIndex(req, res, next) {
-			const send = res.send;
-			res.send = function (content) {
-				// the first <ul> element contains the links to the
-				// application pages which is fully under control of
-				// our plugin now and we keep all links to static
-				// pages to ensure coop with classic apps
-				const HTMLParser = require("node-html-parser");
-				const doc = new HTMLParser.parse(content);
-				const head = doc.getElementsByTagName("head")?.[0];
-				if (head) {
-					head.appendChild(
-						HTMLParser.parse(`<style>
+			req._cds_plugin_ui5 = true; // marker for patched router to ignore
+			rewriteHTML(
+				req,
+				res,
+				() => true,
+				(doc) => {
+					// the first <ul> element contains the links to the
+					// application pages which is fully under control of
+					// our plugin now and we keep all links to static
+					// pages to ensure coop with classic apps
+					const head = doc.getElementsByTagName("head")?.[0];
+					head?.insertAdjacentHTML(
+						"beforeend",
+						`<style>
 					a.ui5:after {
 						content: "UI5";
 						font-weight: bold;
@@ -92,27 +95,25 @@ cds.on("bootstrap", async function bootstrap(app) {
 							color: #FF5A37;
 						}
 					}
-					</style>`)
+					</style>`
 					);
+					const ul = doc.getElementsByTagName("ul")?.[0];
+					if (ul) {
+						const newLis = [];
+						const lis = ul.getElementsByTagName("li");
+						lis?.forEach((li) => {
+							const appDir = li.firstChild?.text?.split("/")?.[1];
+							if (localApps.has(appDir)) {
+								newLis.push(li.toString());
+							}
+						});
+						newLis.push(...links.map((link) => `<li><a class="ui5" href="${link}">${link}</a></li>`));
+						ul.innerHTML = newLis.join("\n");
+					} else {
+						log.warn(`Failed to inject application links into CAP index page!`);
+					}
 				}
-				const ul = doc.getElementsByTagName("ul")?.[0];
-				if (ul) {
-					const newLis = [];
-					const lis = ul.getElementsByTagName("li");
-					lis?.forEach((li) => {
-						const appDir = li.firstChild?.text?.split("/")?.[1];
-						if (localApps.has(appDir)) {
-							newLis.push(li.toString());
-						}
-					});
-					newLis.push(...links.map((link) => `<li><a class="ui5" href="${link}">${link}</a></li>`));
-					ul.innerHTML = newLis.join("\n");
-					content = doc.toString();
-				} else {
-					log.warn(`Failed to inject application links into CAP index page!`);
-				}
-				send.apply(this, arguments);
-			};
+			);
 			next();
 		});
 

package/lib/applyUI5Middleware.js

@@ -41,7 +41,7 @@ module.exports = async function applyUI5Middleware(router, options) {
 	const configPath = options.configPath || options.basePath;
 	const configFile = options.configFile || "ui5.yaml";
 	const workspaceConfigPath = options.workspaceConfigPath || options.basePath;
-	const workpaceConfigFile = options.workpaceConfigFile || "ui5-workspace.yaml";
+	const workspaceConfigFile = options.workspaceConfigFile || "ui5-workspace.yaml";
 
 	const determineConfigPath = function (configPath, configFile) {
 		// ensure that the config path is absolute
@@ -69,7 +69,7 @@ module.exports = async function applyUI5Middleware(router, options) {
 		cwd: options.basePath,
 		rootConfigPath: determineConfigPath(configPath, configFile),
 		workspaceName: process.env["ui5-workspace"] || options.workspaceName || "default",
-		workspaceConfigPath: determineConfigPath(workspaceConfigPath, workpaceConfigFile),
+		workspaceConfigPath: determineConfigPath(workspaceConfigPath, workspaceConfigFile),
 		versionOverride: options.versionOverride,
 		cacheMode: options.cacheMode,
 	});

package/lib/createPatchedRouter.js

@@ -1,4 +1,5 @@
 const { Router } = require("express");
+const rewriteHTML = require("./rewriteHTML");
 
 /**
  * Creates a patched router removing the mount path
@@ -9,12 +10,6 @@ module.exports = async function createPatchedRouter() {
 	// create the router and get rid of the mount path
 	const router = new Router();
 	router.use(function (req, res, next) {
-		// disable the compression when livereload is used
-		// for loading html-related content (via accept header)
-		const accept = req.headers["accept"]?.indexOf("html") !== -1;
-		if (accept && res._livereload) {
-			req.headers["accept-encoding"] = "identity";
-		}
 		// store the original request information
 		const { url, originalUrl, baseUrl } = req;
 		req["cds-plugin-ui5"] = {
@@ -25,28 +20,46 @@ module.exports = async function createPatchedRouter() {
 		// rewite the path to simulate requests on the root level
 		req.originalUrl = req.url;
 		req.baseUrl = "/";
-		// try to override UI5 tooling directory listing
-		if (req.url?.endsWith("/")) {
-			const end = res.end;
-			res.end = function (content) {
-				const contentType = res.getHeader("content-type");
-				if (content && contentType?.indexOf("text/html") !== -1) {
-					const HTMLParser = require("node-html-parser");
-					const doc = new HTMLParser.parse(content);
+		// override UI5 server directory listing if:
+		//   1.) not handled by the CDS Plugin UI5 already
+		//   2.) only if it ends with a slash
+		//   3.) not forwarded to a welcome page
+		if (!req._cds_plugin_ui5 && req.url?.endsWith("/") && req.url === (req?.["ui5-middleware-index"]?.url || req.url)) {
+			// determine context path (approuter contains x-forwarded-path header)
+			let contextPath = baseUrl;
+			if (req.headers["x-forwarded-path"]) {
+				// determine the context path by removing the subpath from the forwarded path
+				contextPath = req.headers["x-forwarded-path"].slice(0, -1 * url.length);
+			} else if (req["cds-plugin-ui5"].originalUrl) {
+				// determine the context path by removing the subpath from the originalUrl
+				contextPath = req["cds-plugin-ui5"].originalUrl.slice(0, -1 * url.length);
+			}
+			rewriteHTML(
+				req,
+				res,
+				(res) => {
+					const contentType = res.getHeader("content-type");
+					return contentType?.indexOf("text/html") !== -1;
+				},
+				(doc) => {
 					const title = doc.getElementsByTagName("title")?.[0];
 					if (title) {
-						title.innerHTML = `Index of ${baseUrl}/`;
+						title.innerHTML = `Index of ${contextPath}/`;
 					}
-					const as = doc.getElementsByTagName("a");
-					as?.forEach((a) => {
-						a.setAttribute("href", `${baseUrl}${a.getAttribute("href")}`);
+					const files = doc.getElementById("files");
+					const filesas = files?.getElementsByTagName("a");
+					filesas?.forEach((a) => {
+						a.setAttribute("href", `${contextPath}${a.getAttribute("href")}`);
 					});
 					const h1 = doc.getElementsByTagName("h1")?.[0];
-					h1?.insertAdjacentHTML("afterbegin", `<a href="/">@sap/cds</a> &gt; `);
-					content = doc.toString();
+					const h1as = h1?.getElementsByTagName("a");
+					h1as?.forEach((a) => {
+						const path = a.getAttribute("href") === "/" ? "/" : a.getAttribute("href") + "/";
+						a.setAttribute("href", `${contextPath}${path}`);
+					});
+					h1?.insertAdjacentHTML("afterbegin", `<a href="/">🏡</a> / `);
 				}
-				end.apply(res, arguments);
-			};
+			);
 		}
 		// next one!
 		next();

package/lib/rewriteHTML.js

@@ -0,0 +1,75 @@
+const http = require("http");
+const HTMLParser = require("node-html-parser");
+
+/**
+ * Callback from the `rewriteHTML` function to determine whether the response should be rewritten
+ *
+ * @callback rewriteCondition
+ * @param {http.OutgoingMessage} req http request object
+ * @returns {boolean} true, if the response should be rewritten and the `rewriteContent` callback called
+ */
+
+/**
+ * Callback from the `rewriteHTML` function to modify the HTML document
+ *
+ * @callback rewriteContent
+ * @param {HTMLParser.HTMLElement} doc the HTML document
+ * @returns {void}
+ */
+
+/**
+ * Intercepts the response and calls back the given `rewriteContent` function
+ * which could then rewrite the HTML content via the DOM tree.
+ *
+ * @param {http.OutgoingMessage} req http request object
+ * @param {http.IncomingMessage} res http response object
+ * @param {rewriteCondition} rewriteCondition function which is called to determine whether the response should be rewritten
+ * @param {rewriteContent} rewriteContent function to be called to modify the HTML document
+ * @returns {void}
+ */
+module.exports = async function rewriteHTML(req, res, rewriteCondition, rewriteContent) {
+	// rewriteCondition and rewriteContent function must be available
+	if (typeof rewriteCondition !== "function" && typeof rewriteContent !== "function") {
+		return;
+	}
+
+	// disable the compression for loading html-related content (via accept header)
+	const accept = req.headers["accept"]?.indexOf("html") !== -1;
+	if (accept) {
+		req.headers["accept-encoding"] = "identity";
+	}
+
+	// store the references to the origin response methods
+	const { writeHead, end } = res;
+
+	// buffer to store the received content in
+	const contentBuffer = [];
+
+	// remove the content-length header
+	res.writeHead = function () {
+		if (!rewriteCondition(res)) return end.apply(this, arguments);
+		res.removeHeader("content-length");
+		return writeHead.apply(this, arguments);
+	};
+
+	// intercepts the response end to parse the HTML content
+	res.end = function (content, encoding) {
+		if (!rewriteCondition(res)) return end.apply(this, arguments);
+
+		// store the last chunk in the content buffer
+		contentBuffer.push(content instanceof Buffer ? content.toString(encoding) : content);
+
+		// create the html content and parse it
+		let htmlContent = contentBuffer.join("");
+		const doc = HTMLParser.parse(htmlContent);
+
+		// now run the callback
+		rewriteContent(doc);
+
+		// update the html content
+		htmlContent = doc.toString();
+
+		// the rest is on express
+		end.call(res, htmlContent, encoding);
+	};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cds-plugin-ui5",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "A CAP server cds-plugin to inject the middlewares of all related UI5 tooling based projects.",
   "author": "Peter Muessig",
   "license": "Apache-2.0",
@@ -24,5 +24,5 @@
     "@sap/cds": ">=6.8.2",
     "express": ">=4.18.2"
   },
-  "gitHead": "1f8272a1e1faa0559fd9e57b03da2ada256d23df"
+  "gitHead": "423a54e264aff78d664bc4f7a1aa2fcd30ce2142"
 }