[ui5-tooling-transpile]: module paths in .gen.d.ts files are not rewritten to absolute paths

[stabpd]

Describe the bug
Relative module import paths in .gen.d.ts files are not rewritten to absolute paths. (in contrast to other .d.ts files)

This seems to be an older regression that could easily be fixed, although I do not know if other things might break. (see additional info)

The current behaviour breaks types of 2nd level custom controls in our lib package because the 1st level custom control's relative import path cannot be resolved from 2nd level custom control's transpiled .gen.d.ts file.

That results in 1st level custom control's settings properties not being known.

// My2ndLvlControl.gen.d.ts (transpiled)

import { $My1stLvlControlSettings } from "./My1stLvlControl"; // <- relative paths break lib types
                                                              // would expect "my/lib/My1stLvlControl" instead

To Reproduce

• lib package mylib

  • two custom controls, inheriting from each other

    // mylib/src/mylib/MyListCard.ts
    import Card from "sap/ui/integration/widgets/Card";
    import type { MetadataOptions } from "sap/ui/core/Element";
    
    export default class MyListCard extends Card {
        static readonly metadata: MetadataOptions = {
            properties: { dataPath: "string" }
        };
    }

    // mylib/src/mylib/MyNamedListCard.ts
    import MyListCard from "./MyListCard";
    import type { MetadataOptions } from "sap/ui/core/Element";
    
    export default class MyNamedListCard extends MyListCard {
        static override readonly metadata: MetadataOptions = {
            properties: { name: "string" }
        };
    }

  • generate interfaces via @ui5/ts-interface-generator

    // mylib/src/mylib/MyNamedListCard.gen.d.ts
    import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
    import { $MyListCardSettings } from "./MyListCard"; // <- relative import, as expected
    
    declare module "./MyNamedListCard" { // <- relative declaration, as expected

  • build via @ui5/cli and ui5-tooling-transpile-task

    // mylib/dist/resources/mylib/MyNamedListCard.gen.d.ts
    declare module "mylib/MyNamedListCard" { // <- absolute declaration, as expected
    import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
    import { $MyListCardSettings } from "./MyListCard"; // <- relative import => breaks types in library !!!

  • release types package with d.ts, gen.d.ts files, e.g. as mylibtypes

• app package myapp depending on mylibtypes package for making types known (real world lib also releases js files of course)

  • ⚠ When instantiating the 2nd level custom control, neither 1st level custom control's settings, nor ui5 base control's settings are known.

    import MyNamedListCard from "mylib/MyNamedListCard";
    
    // Only settings properties of MyNamedListCard are known here according to generated types.
    // That is because mylibtypes/dist/resources/mylib/MyNamedListCard.gen.d.ts uses relative import "./MyListCard" which cannot be resolved.
    // If I change that import to "mylib/MyListCard", then everything works fine.
    new MyNamedListCard({
        manifest: "{}", // <- This property should be known from sap/ui/integration/widgets/Card.
        dataPath: "...", // <- This property should be known from mylib/MyListCard.
        name: "",
    });

    No overload matches this call.
      Overload 1 of 2, '(idOrSettings?: string | $MyNamedListCardSettings): MyNamedListCard', gave the following error.
        Object literal may only specify known properties, and 'manifest' does not exist in type '$MyNamedListCardSettings'.
      Overload 2 of 2, '(id?: string, settings?: $MyNamedListCardSettings): MyNamedListCard', gave the following error.
        Argument of type '{ manifest: string; dataPath: string; name: string; }' is not assignable to parameter of type 'string'.ts(2769)
    

Expected behavior
I'd expect the import to be transpiled to the absolute path.

// mylib/dist/resources/mylib/MyNamedListCard.gen.d.ts
declare module "mylib/MyNamedListCard" {
import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
import { $MyListCardSettings } from "mylib/MyListCard"; // <- absolute import here would fix this issue

Additional context
The import rewrite in packages/ui5-tooling-transpile/lib/task.js was initially applied to all .d.ts files. (see 6ec501c / #743)

Only later, in some dependencies update fix commit, were .gen.d.ts files excluded.
But I cannot see why. Neither the PR, nor the code document why that change was done.
(see PR diff / #754)

Reverting that change to packages/ui5-tooling-transpile/lib/task.js to apply import rewrite to all .d.ts files again, fixes the issue for me.

It might also fix another issue. (see SAP/ui5-typescript#431)

But I do not know if the change was intentional and if other stuff might break.

Please let me know if you need additional info or an mvp repo.

[petermuessig]

@stabpd there was a good reason to use the relative paths - something with the module augmentation didn't work except of using the relative path. I need to verify this again.

@akudev something to discuss for us

[petermuessig]

@akudev

Interesting fun fact - which I have forgotten so far - I also correct the gen.d.ts files in the build:
https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/packages/ui5-tooling-transpile/lib/task.js#L231-L243

I convert the relative module path into an absolute path and I move the declare statement to the top:

import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
import { $ControlSettings } from "sap/ui/core/Control";

declare module "./SimpleControl" {

    /**
     * Interface defining the settings object used in constructor calls
     */
    interface $SimpleControlSettings extends $ControlSettings {

becomes

declare module "ui5/ecosystem/demo/simpletsapp/control/SimpleControl" {
import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
import { $ControlSettings } from "sap/ui/core/Control";

    /**
     * Interface defining the settings object used in constructor calls
     */
    interface $SimpleControlSettings extends $ControlSettings {

If we would fix this in the @ui5/ts-interface-generator it would work for @stabpd and I can remove this workaround in the task to polish the ts interface for the controls.

WDYT? Should we talk about that?

[petermuessig]

@stabpd - I found a very trivial solution for this issue which is independent from the interface generation. I already rewrite the imports but not for the control interface files. I fully misunderstood that point and I now do the rewrite of the imports in general.

@akudev - with that change a modification of the @ui5/ts-interface-generator is not necessary right now and we can follow-up separately whether this should be really covered in there or kept in the tooling extension.

[BenReim]

with that change a modification of the @ui5/ts-interface-generator is not necessary right now and we can follow-up separately whether this should be really covered in there or kept in the tooling extension.

Having the absolute paths generated in the interface-generator may have the benefit that the native tsc can be used for generating the declarations (e.g. useful in a ts watch mode, SAP/ui5-typescript#431)

[stabpd]

@petermuessig Confirmed solution via [email protected].

Thank you very much!