fix(ui5-tooling-transpile): rewrite relative imports of control interfaces to absolute

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

@@ -227,6 +227,15 @@ module.exports = async function ({ log, workspace /*, dependencies*/, taskUtil,
 					// declare the modules as an ambient module (with full module namespace)
 					let source = sourcesMap[resourcePath];
 					let moduleName = /^\/resources\/(.*)\.ts$/.exec(resourcePath)?.[1];
+					// rewrite all imports with their fully qualified name
+					const relativeModulePaths = [...source.matchAll(/import.+("\.{1,2}[^"]+"|'\.{1,2}[^']+')/g)];
+					relativeModulePaths.forEach((reModPath) => {
+						const relativePath = reModPath[1].slice(1, -1);
+						source = source.replaceAll(
+							reModPath[0],
+							reModPath[0].replaceAll(relativePath, path.posix.join(moduleName, "..", relativePath))
+						);
+					});
 					// we differentiate between ".gen.d.ts" files and regular ".ts" files
 					if (moduleName?.endsWith(".gen.d")) {
 						// we assume that each "*.gen.d.ts" is generated by the @ui5/ts-interface-generator
@@ -242,15 +251,6 @@ module.exports = async function ({ log, workspace /*, dependencies*/, taskUtil,
 						resource.setString(sourcesMap[resourcePath]);
 						await workspace.write(resource);
 					} else if (moduleName) {
-						// rewrite all imports with their fully qualified name
-						const relativeModulePaths = [...source.matchAll(/import.+("\.{1,2}[^"]+"|'\.{1,2}[^']+')/g)];
-						relativeModulePaths.forEach((reModPath) => {
-							const relativePath = reModPath[1].slice(1, -1);
-							source = source.replaceAll(
-								reModPath[0],
-								reModPath[0].replaceAll(relativePath, path.posix.join(moduleName, "..", relativePath))
-							);
-						});
 						sourcesMap[resourcePath] = `declare module "${moduleName}" {\n${source}\n}`;
 					}
 				}

showcases/ui5-tsapp-simple/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es2023",
+    "module": "es2022",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "allowJs": true,
+    "strict": true,
+    "strictPropertyInitialization": false,
+    "rootDir": "./webapp",
+    "paths": {
+      "ui5/ecosystem/demo/tsapp/*": ["./webapp/*"]
+    }
+  },
+  "include": ["./webapp/**/*"]
+}

showcases/ui5-tsapp-simple/ui5.yaml

@@ -16,8 +16,9 @@ builder:
       afterTask: replaceVersion
       configuration:
         debug: true
-        altTsConfig: ./tsconfig-alt.json
+        altTsConfig: ./tsconfig-build.json
         omitSourceMaps: true
+        generateDts: true
         generateTsInterfaces: true
         generateTsInterfacesJsDoc: none
 server:
@@ -26,7 +27,6 @@ server:
       afterMiddleware: compression
       configuration:
         debug: true
-        altTsConfig: ./tsconfig-alt.json
     - name: ui5-middleware-livereload
       afterMiddleware: compression
       configuration:

showcases/ui5-tsapp-simple/webapp/control/OtherControl.gen.d.ts

@@ -0,0 +1,19 @@
+import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
+import { $ControlSettings } from "sap/ui/core/Control";
+
+declare module "./OtherControl" {
+
+    /**
+     * Interface defining the settings object used in constructor calls
+     */
+    interface $OtherControlSettings extends $ControlSettings {
+        text?: string | PropertyBindingInfo;
+    }
+
+    export default interface OtherControl {
+
+        // property: text
+        getText(): string;
+        setText(text: string): this;
+    }
+}

showcases/ui5-tsapp-simple/webapp/control/OtherControl.ts

@@ -0,0 +1,39 @@
+import Control from "sap/ui/core/Control";
+import RenderManager from "sap/ui/core/RenderManager";
+import type { MetadataOptions } from "sap/ui/core/Element";
+
+/**
+ * @namespace ui5.ecosystem.demo.simpletsapp.control
+ */
+export default class OtherControl extends Control {
+	static readonly metadata: MetadataOptions = {
+		properties: {
+			text: "string",
+		},
+	};
+
+	// The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures
+	constructor(idOrSettings?: string | $OtherControlSettings);
+	constructor(id?: string, settings?: $OtherControlSettings);
+	constructor(id?: string, settings?: $OtherControlSettings) {
+		super(id, settings);
+	}
+
+	static renderer = {
+		apiVersion: 2,
+		render: (rm: RenderManager, control: OtherControl) => {
+			rm.openStart("div", control);
+			rm.style("font-size", "2rem");
+			rm.style("height", "2rem");
+			rm.style("display", "inline-block");
+			rm.style("color", "blue");
+			rm.style("padding", ".5rem");
+			rm.style("border", "1px dashed lightblue");
+			rm.style("margin-bottom", "5px");
+			rm.attr("title", "${project.version}");
+			rm.openEnd();
+			rm.text(control.getText());
+			rm.close("div");
+		},
+	};
+}

showcases/ui5-tsapp-simple/webapp/control/SimpleControl.gen.d.ts

@@ -1,19 +1,19 @@
 import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
-import { $ControlSettings } from "sap/ui/core/Control";
+import { $OtherControlSettings } from "./OtherControl";
 
 declare module "./SimpleControl" {
 
     /**
      * Interface defining the settings object used in constructor calls
      */
-    interface $SimpleControlSettings extends $ControlSettings {
-        text?: string | PropertyBindingInfo;
+    interface $SimpleControlSettings extends $OtherControlSettings {
+        additionalText?: string | PropertyBindingInfo;
     }
 
     export default interface SimpleControl {
 
-        // property: text
-        getText(): string;
-        setText(text: string): this;
+        // property: additionalText
+        getAdditionalText(): string;
+        setAdditionalText(additionalText: string): this;
     }
 }

showcases/ui5-tsapp-simple/webapp/control/SimpleControl.ts

@@ -1,14 +1,13 @@
-import Control from "sap/ui/core/Control";
-import RenderManager from "sap/ui/core/RenderManager";
 import type { MetadataOptions } from "sap/ui/core/Element";
+import OtherControl from "./OtherControl";
 
 /**
  * @namespace ui5.ecosystem.demo.simpletsapp.control
  */
-export default class SimpleControl extends Control {
+export default class SimpleControl extends OtherControl {
 	static readonly metadata: MetadataOptions = {
 		properties: {
-			text: "string",
+			additionalText: "string",
 		},
 	};
 
@@ -19,21 +18,6 @@ export default class SimpleControl extends Control {
 		super(id, settings);
 	}
 
-	static renderer = {
-		apiVersion: 2,
-		render: (rm: RenderManager, control: SimpleControl) => {
-			rm.openStart("div", control);
-			rm.style("font-size", "2rem");
-			rm.style("height", "2rem");
-			rm.style("display", "inline-block");
-			rm.style("color", "blue");
-			rm.style("padding", ".5rem");
-			rm.style("border", "1px dashed lightblue");
-			rm.style("margin-bottom", "5px");
-			rm.attr("title", "${project.version}");
-			rm.openEnd();
-			rm.text(control.getText());
-			rm.close("div");
-		},
-	};
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+	static renderer = (OtherControl.getMetadata() as any).getRenderer();
 }