Invalid computed root folder for `ui5-tooling-transpile`

[ArnaudBuchholz]

Describe the bug I created some sample apps to test ui5-test-runner in different configurations. In particular, I want to validate that it works with TS transpiling.

I have no problem running a normal JS app inside the project, but the TS one is quite challenging. I found a workaround but I believe the problem is inside the transpiler in the way the configuration is built.

To Reproduce

1. Clone ui5-test-runner repository
2. npm i
3. npm run serve:sample:js works fine even if executed from the root but pointing to a ui5.yaml inside a subfolder
4. Modify ./test/sample.ts/ui5.yaml to add :

   resources:
   configuration:
   paths:
     webapp: ./test/sample.ts/webapp

5. npx ui5 serve --config ./test/sample.ts/ui5.yaml
6. open http://localhost:8080/index.html
7. The application does not start because Component.js is missing (not transpiled)

Expected behavior I would expect the TS sample to work as fine as the JS one

Screenshots

Desktop (please complete the following information):

• OS: Windows (reproduced on Ubuntu)
• Browser : all (server 404 issue)
• Version :

  "@openui5/types": "^1.119.0",
  "@ui5/cli": "^3.6.1",
  "@ui5/middleware-code-coverage": "^1.1.0",
  "typescript": "^5.2.2",
  "ui5-tooling-transpile": "^3.2.6"

Additional context Enabling debug & --verbose shows :

verb server:custom-middleware:ui5-tooling-transpile-middleware Normalized configuration:
{
  "debug": true,
  "includes": [],
  "excludes": [
    ".png",
    ".jpeg",
    ".jpg"
  ],
  "filePattern": ".js",
  "transformTypeScript": false,
  "transformModulesToUI5": false
}
info server:custom-middleware:ui5-tooling-transpile-middleware Create Babel configuration based on ui5.yaml configuration options...
info server:custom-middleware:ui5-tooling-transpile-middleware Using browserslist configuration from ui5.yaml...
verb server:custom-middleware:ui5-tooling-transpile-middleware {
  "assumptions": {},
  "configFile": false,
  "babelrc": false,
  "filename": "<WHATEVER>\\ui5-test-runner\\src\\dummy.js",
  "sourceMaps": "inline",
  "targets": {},
  "cloneInputAst": true,
  "browserslistConfigFile": false,
  "passPerPreset": false,
  "envName": "development",
  "cwd": "<WHATEVER>\\ui5-test-runner",
  "root": "<WHATEVER>\\ui5-test-runner",
  "rootMode": "root",
  "plugins": [],
  "presets": [
    {
      "options": {
        "targets": {
          "browsers": "defaults"
        }
      },
      "dirname": "<WHATEVER>\\ui5-test-runner",
      "file": {
        "request": "@babel/preset-env",
        "resolved": "<WHATEVER>\\ui5-test-runner\\node_modules\\@babel\\preset-env\\lib\\index.js"
      }
    }
  ]
}

After long debugging sessions, I finally understood that the problem comes from a combination of process.cwd() and the location
of package.json. The transpiler configures itself as it in the project root instead of the folder where ui5.yaml stands.

I found a way to 'hack' this but I would expect the whole thing to run fine without hack...

[petermuessig]

Yes, the following line is not pointing to the project root path:

const cwd = middlewareUtil.getProject().getRootPath() || process.cwd();

also the root path is considered as being in the path where ui5 serve is executed. Hmm, need to think about this...

BUT - I'm still not sure what the right behavior is - from where should we derive the project root and the config? Right now, all indicators tend to the root path I geht from the project. The alternative would be to be able to define a root path.

[petermuessig]

Cc: @RandomByte @matz3

[RandomByte]

UI5 Tooling determines the project root path to be the directory containing the closest package.json to the CWD of the process (searching in the current and all parent directories). The location of the ui5.yaml is irrelevant. See the implementation for reference.

By executing npx ui5 serve --config ./test/sample.ts/ui5.yaml in the root of https://github.com/ArnaudBuchholz/ui5-test-runner, UI5 Tooling will use the root package.json rather than the project package.json. This is certainly not what you want. So you should rather execute the UI5 CLI in the project directory (i.e. the directory containing the package.json): (cd ./test/sample.ts && npx ui5 serve)

[petermuessig]

Hmm, well - the initial issue is that the configuration is not derived properly from the project as the ui5-tooling-transpile derives the project type from the files in the project root - fun fact: yesterday I was thinking about a different way to derive the project configuration but I'm not yet sure - let's iterate a bit on this...

[petermuessig]

Yes, it is mainly related to the detection of the project type (whether to transform TypeScript or not) - by configuring it manually it works:

server:
  customMiddleware:
    - name: ui5-tooling-transpile-middleware
      afterMiddleware: compression
      configuration:
        transformTypeScript: true

The automatic detection is causing the trouble here as by starting from the project root pointing to another ui5.yaml does not mean the project root is relative to the ui5.yaml. The project root is always there where the ui5 serve or ui5 build command are executed in. What I could think of is to allow to define an altRootPath or something like that to tell the ui5-tooling-transpile plugin to lookup the configuration at another place - but it also requires configuration.

[ArnaudBuchholz]

Food for thoughts :

• In the ui5.yaml it is possible to set where to find the webapp folder, why not doing the same for the project root (optional)
• Having a clear way to set what is the "project root" could enable mono repos (and have more than one UI5 app in a repository)