cds-plugin-ui5 0.12.1 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.13.0](https://github.com/ui5-community/ui5-ecosystem-showcase/compare/cds-plugin-ui5@0.12.1...cds-plugin-ui5@0.13.0) (2025-05-20)
+
+
+### Features
+
+* **cds-plugin-ui5:** add lazy module loading ([#1216](https://github.com/ui5-community/ui5-ecosystem-showcase/issues/1216)) ([58c88cf](https://github.com/ui5-community/ui5-ecosystem-showcase/commit/58c88cfede10db2ac4aa59f8447edb02e12aa883))
+
+
+
+
+
 ## [0.12.1](https://github.com/ui5-community/ui5-ecosystem-showcase/compare/cds-plugin-ui5@0.12.0...cds-plugin-ui5@0.12.1) (2025-05-18)
 
 

package/README.md

@@ -75,6 +75,15 @@ The configuration can also be injected with the environment variable `CDS_PLUGIN
 CDS_PLUGIN_UI5_MODULES="{ \"ui5-bookshop\": { \"mountPath\": \"/the-bookshop\" } }" cds-serve
 ```
 
+#### Lazy Loading
+
+The plugin supports lazy loading of UI5 applications which means that the UI5 middlewares will not be applied by default. The first time a UI5 application will be accessed in the CDS server triggers the load and apply of the UI5 middlewares. This feature is not active by default and needs to be activated with the environment variable `CDS_PLUGIN_UI5_LAZY_LOADING`.
+
+```sh
+# enable lazy loading for UI5 applications
+CDS_PLUGIN_UI5_LAZY_LOADING=true cds watch
+```
+
 #### Logger
 
 The `cds-plugin-ui5` uses the logger from CDS. By default, it adds coloring to the logs from CDS. This can be disabled in general by using the environment variable `NO_COLOR` for the logger overall or specifically for the `cds-plugin-ui5` by setting the environment variable `CDS_PLUGIN_UI5_NO_CUSTOM_LOGGER`.
@@ -155,6 +164,8 @@ module.exports = async ({ log, resources, options }) => {
 
 The returned app pages will be added to the welcome page within the respective mount path.
 
+> :warning: The app pages cannot be retrieved and injected when using the lazy loading option.
+
 ## Hints
 
 This section includes hints for the usage of the `cds-plugin-ui5` with other tools.

package/cds-plugin.js

@@ -171,6 +171,9 @@ if (!skip) {
 
 				const links = [];
 
+				// is lazy loading enabled?
+				const isLazyLoadingEnabled = process.env["CDS_PLUGIN_UI5_LAZY_LOADING"] === "true";
+
 				// log the version of the cds-plugin-ui5
 				logVersion();
 
@@ -182,32 +185,33 @@ if (!skip) {
 					LOG.info(`Mounting ${mountPath} to UI5 app ${modulePath} (id=${moduleId})${config[moduleId] ? ` using config=${JSON.stringify(config[moduleId])}` : ""}`);
 
 					// create a patched router
-					const router = await createPatchedRouter();
+					const router = createPatchedRouter();
 
-					// apply the UI5 middlewares to the router and
-					// retrieve the available HTML pages
-					const appInfo = await applyUI5Middleware(router, {
+					// determine the application info and apply the UI5 middlewares (maybe lazy)
+					applyUI5Middleware(router, {
 						cwd,
 						basePath: modulePath,
 						...(config[moduleId] || {}),
 						LOG,
+						lazy: isLazyLoadingEnabled,
+						//logPerformance: true,
+					}).then(({ pages }) => {
+						// append the HTML pages to the links
+						pages.forEach((page) => {
+							const prefix = mountPath !== "/" ? mountPath : "";
+							links.push(`${prefix}${page}`);
+						});
 					});
 
 					// register the router to the specified mount path
 					app.use(mountPath, router);
-
-					// append the HTML pages to the links
-					appInfo.pages.forEach((page) => {
-						const prefix = mountPath !== "/" ? mountPath : "";
-						links.push(`${prefix}${page}`);
-					});
 				}
 
 				// identify whether the welcome page should be rewritten
 				let rewrite = links.length > 0;
 
 				// rewrite the welcome page
-				if (rewrite) {
+				if (rewrite || isLazyLoadingEnabled) {
 					// register the custom middleware (similar like in @sap/cds/server.js)
 					app.get("/", function appendLinksToIndex(req, res, next) {
 						req._cds_plugin_ui5 = true; // marker for patched router to ignore

package/lib/applyUI5Middleware.js

@@ -28,14 +28,14 @@ const fs = require("fs");
  * root directory to the given router.
  * @param {import("express").Router} router Express Router instance
  * @param {applyUI5MiddlewareOptions} options configuration options
- * @returns {UI5AppInfo} UI5 application information object
+ * @returns {Promise<UI5AppInfo>} UI5 application information object
  */
 module.exports = async function applyUI5Middleware(router, options) {
-	const { graphFromPackageDependencies } = await import("@ui5/project/graph");
-	const { createReaderCollection } = await import("@ui5/fs/resourceFactory");
+	const millis = Date.now();
 
 	options.cwd = options.cwd || process.cwd();
 	options.basePath = options.basePath || process.cwd();
+	options.lazy = options.lazy || false;
 
 	const log = options.log || console;
 
@@ -44,6 +44,12 @@ module.exports = async function applyUI5Middleware(router, options) {
 	const workspaceConfigPath = options.workspaceConfigPath || options.basePath;
 	const workspaceConfigFile = options.workspaceConfigFile || "ui5-workspace.yaml";
 
+	const logPerformance = options.logPerformance || false;
+
+	const millisImport = logPerformance && Date.now();
+	const { graphFromPackageDependencies } = await import("@ui5/project/graph");
+	logPerformance && log.info(`[PERF] Import took ${Date.now() - millisImport}ms`);
+
 	const determineConfigPath = function (configPath, configFile) {
 		// ensure that the config path is absolute
 		if (!path.isAbsolute(configPath)) {
@@ -66,6 +72,8 @@ module.exports = async function applyUI5Middleware(router, options) {
 		return undefined;
 	};
 
+	// determine the project graph from the given options
+	const millisGraph = logPerformance && Date.now();
 	const graph = await graphFromPackageDependencies({
 		cwd: options.basePath,
 		rootConfigPath: determineConfigPath(configPath, configFile),
@@ -74,72 +82,110 @@ module.exports = async function applyUI5Middleware(router, options) {
 		versionOverride: options.versionOverride,
 		cacheMode: options.cacheMode,
 	});
+	logPerformance && log.info(`[PERF] Graph took ${Date.now() - millisGraph}ms`);
 
+	const millisRoot = logPerformance && Date.now();
+	// detect the root project
 	const rootProject = graph.getRoot();
 
-	const readers = [];
-	await graph.traverseBreadthFirst(async function ({ project: dep }) {
-		if (dep.getName() === rootProject.getName()) {
-			// Ignore root project
-			return;
-		}
-		readers.push(dep.getReader({ style: "runtime" }));
-	});
-
-	const dependencies = createReaderCollection({
-		name: `Dependency reader collection for project ${rootProject.getName()}`,
-		readers,
-	});
-
+	// create a reader for the root project
 	const rootReader = rootProject.getReader({ style: "runtime" });
-
-	// TODO change to ReaderCollection once duplicates are sorted out
-	const combo = createReaderCollection({
-		name: "server - prioritize workspace over dependencies",
-		readers: [rootReader, dependencies],
-	});
-	const resources = {
-		rootProject: rootReader,
-		dependencies: dependencies,
-		all: combo,
-	};
-
-	// TODO: rework ui5-server API and make public
-	const { default: MiddlewareManager } = await import("@ui5/server/internal/MiddlewareManager");
-	const middlewareManager = new MiddlewareManager({
-		graph,
-		rootProject,
-		resources,
-		options: {
-			//sendSAPTargetCSP,
-			//serveCSPReports,
-			//simpleIndex: true
-		},
-	});
-	await middlewareManager.applyMiddleware(router);
+	logPerformance && log.info(`[PERF] Root project took ${Date.now() - millisRoot}ms`);
 
 	// for Fiori elements based applications we need to invalidate the view cache
+	// so we need to append the query parameter to the HTML files (sap-ui-xx-viewCache=false)
 	const isFioriElementsBased = rootProject.getFrameworkDependencies().find((lib) => lib.name.startsWith("sap.fe"));
 
 	// collect app pages from workspace (glob testing: https://globster.xyz/ and https://codepen.io/mrmlnc/pen/OXQjMe)
 	//   -> but exclude the HTML fragments from the list of app pages!
+	const millisPages = logPerformance && Date.now();
 	const pages = (await rootReader.byGlob("**/!(*.fragment).{html,htm}")).map((resource) => `${resource.getPath()}${isFioriElementsBased ? "?sap-ui-xx-viewCache=false" : ""}`);
-
-	// collect app pages from middlewares implementing the getAppPages
-	middlewareManager.middlewareExecutionOrder?.map((name) => {
-		const { middleware } = middlewareManager.middleware?.[name] || {};
-		if (typeof middleware?.getAppPages === "function") {
-			const customAppPages = middleware.getAppPages();
-			if (Array.isArray(customAppPages)) {
-				pages.push(...customAppPages);
-			} else {
-				if (customAppPages) {
-					log.warn(`The middleware ${name} returns an unexpected value for "getAppPages". The value must be either undefined or string[]! Ignoring app pages from middleware!`);
+	logPerformance && log.info(`[PERF] Pages took ${Date.now() - millisPages}ms`);
+
+	// method to create the middleware manager and to apply the middlewares
+	// to the express router provided as a parameter to this function
+	const apply = async () => {
+		// find the relevant readers for the dependencies
+		const readers = [];
+		await graph.traverseBreadthFirst(async function ({ project: dep }) {
+			if (dep.getName() === rootProject.getName()) {
+				// Ignore root project
+				return;
+			}
+			readers.push(dep.getReader({ style: "runtime" }));
+		});
+
+		const { createReaderCollection } = await import("@ui5/fs/resourceFactory");
+
+		// create a reader collection for the dependencies
+		const dependencies = createReaderCollection({
+			name: `Dependency reader collection for project ${rootProject.getName()}`,
+			readers,
+		});
+
+		// TODO change to ReaderCollection once duplicates are sorted out
+		const combo = createReaderCollection({
+			name: "server - prioritize workspace over dependencies",
+			readers: [rootReader, dependencies],
+		});
+		const resources = {
+			rootProject: rootReader,
+			dependencies: dependencies,
+			all: combo,
+		};
+
+		// TODO: rework ui5-server API and make public
+		const { default: MiddlewareManager } = await import("@ui5/server/internal/MiddlewareManager");
+		const middlewareManager = new MiddlewareManager({
+			graph,
+			rootProject,
+			resources,
+			options: {
+				//sendSAPTargetCSP,
+				//serveCSPReports,
+				//simpleIndex: true
+			},
+		});
+		await middlewareManager.applyMiddleware(router);
+
+		// collect app pages from middlewares implementing the getAppPages
+		// which will only work if the middleware is executed synchronously
+		middlewareManager.middlewareExecutionOrder?.map((name) => {
+			const { middleware } = middlewareManager.middleware?.[name] || {};
+			if (typeof middleware?.getAppPages === "function") {
+				if (!options.lazy) {
+					const customAppPages = middleware.getAppPages();
+					if (Array.isArray(customAppPages)) {
+						pages.push(...customAppPages);
+					} else {
+						if (customAppPages) {
+							log.warn(`The middleware ${name} returns an unexpected value for "getAppPages". The value must be either undefined or string[]! Ignoring app pages from middleware!`);
+						}
+					}
+				} else {
+					log.warn(`The middleware ${name} returns a function for "getAppPages" but the lazy option is enabled. The function will not be executed!`);
 				}
 			}
-		}
-	});
+		});
+	};
+
+	// install a callback in the router to apply the middlewares
+	if (options.lazy) {
+		let isApplied = false;
+		router.use(async (req, res, next) => {
+			if (!isApplied) {
+				await apply();
+				isApplied = true;
+			}
+			next();
+		});
+	} else {
+		await apply();
+	}
+
+	logPerformance && log.info(`[PERF] applyUI5Middleware took ${Date.now() - millis}ms`);
 
+	// return the UI5 application information
 	return {
 		pages,
 	};

package/lib/createPatchedRouter.js

@@ -6,10 +6,10 @@ const rewriteHTML = require("./rewriteHTML");
  * from urls and disabling the encoding
  * @returns {Router} patched router
  */
-module.exports = async function createPatchedRouter() {
+module.exports = function createPatchedRouter() {
 	// create the router and get rid of the mount path
 	const router = new Router();
-	router.use(function (req, res, next) {
+	router.use(async function (req, res, next) {
 		// store the original request information
 		const { url, originalUrl, baseUrl } = req;
 		req["ui5-patched-router"] = req["ui5-patched-router"] || {
@@ -64,7 +64,7 @@ module.exports = async function createPatchedRouter() {
 						});
 						h1?.insertAdjacentHTML("afterbegin", `<a href="/">🏡</a> / `);
 					}
-				}
+				},
 			);
 		}
 		// next one!

package/lib/findUI5Modules.js

@@ -32,7 +32,7 @@ module.exports = async function findUI5Modules({ cwd, cds, skipLocalApps, skipDe
 	try {
 		modulesConfig = JSON.parse(process.env.CDS_PLUGIN_UI5_MODULES);
 		log.info(`Using modules configuration from env`);
-	} catch (err) {
+	} catch {
 		modulesConfig = pkgJson.cds?.["cds-plugin-ui5"]?.modules;
 	}
 	if (modulesConfig) {
@@ -101,10 +101,10 @@ module.exports = async function findUI5Modules({ cwd, cds, skipLocalApps, skipDe
 						paths: [cwd],
 					});
 					return true;
-				} catch (e) {
+				} catch {
 					return false;
 				}
-			})
+			}),
 		);
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cds-plugin-ui5",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "A CDS server plugin to inject the middlewares of all related UI5 tooling based projects.",
   "author": "Peter Muessig",
   "license": "Apache-2.0",
@@ -26,5 +26,5 @@
     "@sap/cds": ">=6.8.2",
     "express": ">=4.18.2"
   },
-  "gitHead": "35b0530739ca74a6f61cffab4e0927dd7d129c10"
+  "gitHead": "0eb73f5043c510e48377e943d27f817d46178e00"
 }