[ui5-tooling-modules] includeAssets not respected in middleware

[HymanZHAN]

Is your feature request related to a problem? Please describe.

When using 3rd party libraries, I'd like to include other assets like CSS while developing locally. However, it seems that includeAssets doesn't apply to ui5-tooling-modules-middleware.

Describe the solution you'd like

I want my CSS to be copied and served from /resources when developing locally using @ui5/cli.

Describe alternatives you've considered

Load the stylesheets from CDN.

Additional context

I wish the configurations like includeAssets and addToNamesapce are aligned between serve and build. Otherwise, how are we supposed to verify/develop things locally?

[petermuessig]

@HymanZHAN

Rgd. includeAssets: the assets can be accessed directly as the middleware can directly access the assets of the node modules. Therefore this is not needed. So /resources/mynpmpkg/css/my.css is always accessible via middleware but for the task you need to explicitly declare it if it is not used via sap.ui.require.toUrl.

Rgd. addToNamespace: I thought about this already but this is means a complete change of the implementation and it would require to rewrite the sources already during the serve. It makes it harder in several places ... But I can think again about this.

[petermuessig]

@HymanZHAN let's use the #1049 to track the feature request for the addToNamespace option being considered in the middleware. As said, this might be a bigger change and will also slow down the middleware due to the necessary rewrite of the resources.

If you are OK with my answer regarding includeAssets, we can close the ticket here. As the middleware can just access them via the resources path there is no feature needed for that. The only thing what I can imagine of for includeAssets is to restrict the access to any other asset not being mentioned here.

[HymanZHAN]

Got it. Wasn't aware that the middleware has full access to node_modules, which is pretty cool 😁 I will experiment a bit more with accessing css resources and if it worked out, I will come back and close the issue.

I'd also like to learn about how the middleware decides which version of .js file to use if there are multiple ones. For example, for sinon there are sinon.js, sinon0esm.js and sinon-no-sourcemaps.cjs in its pkg folder. How does the middleware determine which one gets transpiled?

[petermuessig]

@HymanZHAN - you can take a look into the resolveModule function

The logic is as follows: resolveModulePath
1.) one of the properties "browser", "import", "require", "default" in package.json > exports
2.) one of the properties "browser", "import", "require", "default" in package.json
3.) one of the properties: "browser", "module", "main" in package.json > exports
4.) one of the properties: "browser", "module", "main" in package.json

Once a value is found in the one of the properties above it loads either: resolveNodeModule
1.) .js
2.) .cjs
3.) .mjs

This is on a very coarse view explained how the module resolution works. I tried to imitate the node lookup does but I needed to enhance it.

The final truth is in the code... 😉

[petermuessig]

@HymanZHAN as mentioned above, we use #1049 to track the feature request for the addToNamespace option and close the issue here fore the other question.