[ui5-tooling-transpile-task] General question about sources

[AdrianDengusiak]

Hi,

I started to use ui5-tooling-transpile to transpile my code from ES6+ to ES5, and it works very well when I preview my app locally, so both original files + transpiled files are available while debugging. As documentation says, because of the sourcemap, setting breakpoints in the original source will cause the debugger to stop when the corresponding transpiled source code is reached. And it's working fine, so I can debug my original code.

The problem is while deploying application to BTP Work Zone standard edition. It might be I misunderstood something too. This is my ui5-deploy.yaml, that is used while building MTA of the project.

# yaml-language-server: $schema=https://sap.github.io/ui5-tooling/schema/ui5.yaml.json
specVersion: '2.4'
metadata:
  name: com.test.app
type: application
resources:
  configuration:
    propertiesFileSourceEncoding: UTF-8
builder:
  resources:
    excludes:
      - "/test/**"
      - "/localService/**"
  customTasks:
  - name: ui5-tooling-transpile-task
    afterTask: replaceVersion
    configuration:
      debug: true
      transformAsyncToPromise: true
      removeConsoleStatements: true
  - name: webide-extension-task-updateManifestJson
    afterTask: ui5-tooling-transpile-task
    configuration:
      appFolder: webapp
      destDir: dist
  - name: ui5-task-zipper
    afterTask: generateCachebusterInfo
    configuration:
      archiveName: comtestapp
      additionalFiles:
      - xs-app.json

I use ui5-tooling-transpile-task to trigger transpiling process during build.

The result in dist folder is that I can't see my original sources, e.g. containing async functions. Main.controller-dbg.js contains transpiled code (async converted to Promise, etc.) Main.controller..js contains transpiled code + is minified too. There's Main.js.map too, responsible for sourcemap.

When I run my deployed app in FLP, I would like to debug my original sources - the same way as previewing it locally (ui5-tooling-transpile-middleware works as expected). Unfortunately, they're not part of deployed bundle. I tried to find some settings, but haven't found anything.

Currently, I can see my dbg sources in DevTools, but they're transpiled.

My question:

• Is it possible to keep original sources in dist and use while debugging the app after deployment? Can it work like middleware while previewing app locally?

[petermuessig]

Hi @AdrianDengusiak ,

ideally the source maps should take care to provide you the debugging experience your describe. There is an issue with the UI5 tooling 2.x AFAIR that the source maps are not included properly and therefore, when loading the preload bundles no debugging on the source files is possible.

It works for the middleware as the source maps are inlined into the resources and the resources are loaded individually. With this the debugging works properly. Maybe for the UI5 tooling 2.x it may work when inlining the source maps and bundle those resources. I never tried this.

With the UI5 tooling 3.x it should basically work, as the source maps are also processed for the files being included in the preload bundles. Also this is again to be verified, maybe @RandomByte or @matz3 can answer this out of their minds.

[AdrianDengusiak]

Thanks for quick response @petermuessig.

Here are my versions: "@sap/ux-ui5-tooling": "^1.9.5", "@ui5/cli": "^3.1.2",

As I mentioned before, middleware works perfectly, but I'm not sure if builder task is producing expected results.

[AdrianDengusiak]

@RandomByte or @matz3 - could you help? I would be grateful.

[RandomByte]

Hi @AdrianDengusiak could you please execute a UI5 Tooling build with the --verbose flag and share the log output with us? This might help us understand what's happening to your source maps.

Could you also possible share the source map content for one of the files you are trying to debug in your dev tools?

[AdrianDengusiak]

Hi @RandomByte, thanks for response.

Build log: Log.txt

Example source map: Example source map.txt

[RandomByte]

Thank you. This scenario is unfortunately currently not supported by UI5 Tooling. The minify task currently ignores any existing source maps when processing project resources.

You can try and exclude this task by using the parameter --exclude-task minify. Then UI5 Tooling should pick up the source maps generated by your transpiling task. However, you then need to make sure all files are also minified by that task.

CC @ecker: Another requirement for processing of input source maps (CPOUI5FOUNDATION-467)

[AdrianDengusiak]

Thanks @RandomByte. Do you mean excluding minify task from UI5 Tooling Builder & performing minification using Babel or there's some option in ui5-tooling-transpile-task? What would be your recommedation?

[petermuessig]

HI @AdrianDengusiak , yes, the suggestion would be to use a custom babel plugin to minify your code, there is nothing built-in into the ui5-tooling-transpile-task.

[AdrianDengusiak]

Thanks for your help, I managed to make it work.