fix(ui5-tooling-modules): skip transpile of SystemJS modules

packages/ui5-tooling-modules/lib/middleware.js

@@ -85,6 +85,10 @@ module.exports = async function ({ log, resources, options, middlewareUtil }) {
 					debug && log.info(`Scanning took ${Date.now() - scanTime} millis`);
 					bundleTime = Date.now();
 					const modules = Array.from(uniqueModules);
+					// TODO: check whether we should really include the requested modules into the bundle
+					//       because this could also be a negative side-effect when running the build task
+					//       which wouldn't include the requested modules into the build - but in this case
+					//       we need it since new modules are added dynamically during development
 					Array.from(requestedModules)
 						.filter((mod) => !uniqueModules.has(mod))
 						.forEach((mod) => {

packages/ui5-tooling-modules/lib/task.js

@@ -271,16 +271,21 @@ module.exports = async function ({ log, workspace, taskUtil, options }) {
 	const copyTime = Date.now();
 	await Promise.all(
 		Array.from(uniqueResources).map(async (resourceName) => {
-			log.verbose(`Trying to process resource: ${resourceName}`);
-			if (existsResource(resourceName, { cwd, depPaths, onlyFiles: true })) {
-				const resource = getResource(resourceName, { cwd, depPaths });
-				config.debug && log.info(`Processing resource: ${resourceName}`);
-				const newResource = resourceFactory.createResource({
-					path: `/resources/${rewriteDep(resourceName, bundledResources)}`,
-					stream: resource.path ? createReadStream(resource.path) : undefined,
-					string: !resource.path && resource.code ? resource.code : undefined,
-				});
-				await workspace.write(newResource);
+			const resourcePath = `/resources/${rewriteDep(resourceName, bundledResources)}`;
+			if (!(await workspace.byPath(resourcePath))) {
+				log.verbose(`Trying to process resource: ${resourceName}`);
+				if (existsResource(resourceName, { cwd, depPaths, onlyFiles: true })) {
+					const resource = getResource(resourceName, { cwd, depPaths });
+					config.debug && log.info(`Processing resource: ${resourceName}`);
+					const newResource = resourceFactory.createResource({
+						path: resourcePath,
+						stream: resource.path ? createReadStream(resource.path) : undefined,
+						string: !resource.path && resource.code ? resource.code : undefined,
+					});
+					await workspace.write(newResource);
+				}
+			} else {
+				log.verbose(`Skipping copy of existing resource: ${resourceName}`);
 			}
 		})
 	);

packages/ui5-tooling-modules/lib/util.js

@@ -127,35 +127,47 @@ const defaultMainFields = ["browser", "module", "main"];
 
 module.exports = function (log) {
 	/**
-	 * Checks whether the file behind the given path is a UI5 module or not
+	 * Checks whether the file behind the given path is a module to skip for transformation or not
 	 *
 	 * @param {string} source the path of a JS module
-	 * @returns {boolean} true, if the JS module is a UI5 module
+	 * @returns {boolean} true, if the module should be skipped for transformation
 	 */
-	async function isUI5Module(source) {
+	async function shouldSkipModule(source) {
 		try {
 			let isUI5Module = false;
+			let isSystemJSModule = false;
 			const content = await readFile(source, { encoding: "utf8" });
 			if (content) {
 				const { parse } = await import("@typescript-eslint/typescript-estree");
 				const { walk } = await import("estree-walker");
 				const program = parse(content, { jsx: path.extname(source) !== ".ts", allowInvalidAST: true });
-				walk(program, {
-					enter(node, parent, prop, index) {
-						if (
-							node?.type === "CallExpression" &&
-							/require|define/.test(node?.callee?.property?.name) &&
-							node?.callee?.object?.property?.name == "ui" &&
-							node?.callee?.object?.object?.name == "sap"
-						) {
-							isUI5Module = true;
+				// SystemJS modules start with "System.register(...)"
+				program.body
+					.filter((node) => node.type === "ExpressionStatement")
+					.forEach((node) => {
+						if (node.expression.type === "CallExpression" && node.expression.callee?.property?.name == "register" && node.expression.callee?.object?.name == "System") {
+							isSystemJSModule = true;
 						}
-					},
-				});
+					});
+				if (!isSystemJSModule) {
+					// for UI5 modules we need to check for sap.ui.require/define
+					walk(program, {
+						enter(node, parent, prop, index) {
+							if (
+								node?.type === "CallExpression" &&
+								/require|define/.test(node?.callee?.property?.name) &&
+								node?.callee?.object?.property?.name == "ui" &&
+								node?.callee?.object?.object?.name == "sap"
+							) {
+								isUI5Module = true;
+							}
+						},
+					});
+				}
 			}
-			return isUI5Module;
+			return isUI5Module || isSystemJSModule;
 		} catch (err) {
-			log.verbose(`Failed to parse dependency "${source}"!`, err);
+			log.verbose(`Failed to parse module "${source}"!`, err);
 			return false;
 		}
 	}
@@ -764,7 +776,7 @@ module.exports = function (log) {
 					//   3) should not be skipped from transformation
 					//   4) is no UI5 module
 					if (modulePath) {
-						if (/\.(m|c)?js/.test(path.extname(modulePath).toLowerCase()) && !shouldSkipTransform(moduleName) && !(await isUI5Module(modulePath))) {
+						if (/\.(m|c)?js/.test(path.extname(modulePath).toLowerCase()) && !shouldSkipTransform(moduleName) && !(await shouldSkipModule(modulePath))) {
 							const module = bundleInfo.addModule({
 								name: moduleName,
 								path: modulePath,

showcases/ui5-tsapp/package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@luigi-project/container": "1.1.0",
     "@stomp/stompjs": "^7.0.0",
+    "chart.js": "^3.9.1",
     "jspdf": "^2.5.1",
     "luxon": "^3.4.4",
     "moment": "^2.30.1",

showcases/ui5-tsapp/webapp/controller/Main.controller.ts

@@ -4,6 +4,7 @@ import MessageBox from "sap/m/MessageBox";
 import { version, utils, write } from "xlsx";
 import { Info } from "luxon";
 import { Client } from "@stomp/stompjs";
+import { Chart } from "chart.js";
 import capitalize from "ui5/ecosystem/demo/tslib/util/capitalize";
 
 function limitString(string = "", limit = 40) {
@@ -14,6 +15,7 @@ console.log(`[STATIC IMPORT] XLSX loaded: ${version}`);
 // eslint-disable-next-line @typescript-eslint/no-base-to-string
 console.log(`[STATIC IMPORT] Luxon loaded: ${limitString(Info.toString())}`);
 console.log(`[STATIC IMPORT] STOMP loaded: ${limitString(Client.toString())}`);
+console.log(`[STATIC IMPORT] Chart.js loaded: ${Chart.version}`);
 
 // dynamic import of xlsx (just named exports)
 import("xlsx")