[FEATURE REQUEST] Support typescript path mapping

[slin-sap]

In tsconfig.json, it is possible to add a path mapping configuration like this.

{
    "compilerOptions": {
        "paths": {
	    "@/*": ["*"]
        }, 
        .......
    }
}

It help to avoid writing deep relative import path. E.g. import { getMyUtility } from "@/utils"; instead of import { getMyUtility } from "../../../../utils";

But this feature is not supported by babel-plugin-transform-modules-ui5 at runtime when running ui5 serve on dev mode. The transpiled UI5 code resource treats such imports as an url path that contains '@/utils' and thus failed to load the resource.

It would be great to support path mapping for both dev mode and production bundling.

[texttechne]

Shouldn't that read "@/*": ["./*"] ? At least you would need to map a relative path...

[slin-sap]

Shouldn't that read "@/*": ["./*"] ? At least you would need to map a relative path...

Hi @texttechne,

Actual it needs to work together with baseUrl parameter. In a UI5 app, the configuration may look like this:

{
    "compilerOptions": {
        "baseUrl": "./webapp",   // Set base directory for relative imports
        "paths": {
            "@/*": ["*"]      // Alias @/ to resolve from the baseUrl (./webapp)
        },
        ...
    }
}

[texttechne]

Hi @slin-sap,

actually your issue is not related to this babel plugin in any case. If you would have an issue with this plugin you would need to show that the transpilation fails or that the transpiled result is wrong...

So you're actually fighting with UI5 here. When I generate a new ts-app with easy-ui5 I already get what you want. I named the app "myapp" and the generated tsconfig.jon looks like this:

{
  "compilerOptions": {
      ...
      "paths": {
          "myapp/*": ["./webapp/*"],
	  "unit/*": ["./webapp/test/unit/*"],
	  "integration/*": ["./webapp/test/integration/*"]
      }
  }
  ...
}

However, this only works in combination with index.html for local development:

<script
	id="sap-ui-bootstrap"
	src="resources/sap-ui-core.js"
	data-sap-ui-resource-roots='{
		"myapp": "./"
	}'
	...
></script>

In other word, you have to maintain that mapping in two places. But then it works.

Regarding baseUrl

From the handbook:

Since TypeScript 4.1, baseUrl is no longer required to use paths and should not be used just to set the directory paths values are resolved from.

[slin-sap]

Hi @texttechne

This still doesn't work as I expected.

1. The exact same UI5 project name has to be used for data-sap-ui-resourceroots.
2. data-sap-ui-resourceroots fails on this common scenario:

E.g. In a folder foo, I have index.ts and foo1.ts and foo2.ts. Functions in foo1.ts and foo2.ts are exported via index.ts.

When I need to import function from module foo like this: import { bar } from "myapp/foo"; UI5 will try to load js file from /foo.js and thus fails. It is not able to load from /foo/foo1.js.

[texttechne]

1. The exact same UI5 project name has to be used for data-sap-ui-resourceroots.

Yes, UI5 requires you to put this one mapping from app name to webapp in there. But you can always add more aliases: as many as you like...

2. In a folder foo, I have index.ts... import { bar } from "myapp/foo"; UI5 will try to load js file from /foo.js and thus fails

Can you import from index files in UI5 in plain JS? How would that look like?

As second step, check the result of the transpilation process for yourself: Execute a build and look into the transpiled JS files of your webapp.

By the way, you can use a path mapping as workaround in this case 😁