UI5 / UI5/cli

Relative paths for project shims

Open
#500 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
511
Forks
83
Avg merge
1d 5h
Merged PRs (30d)
55

Description

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

Currently there is a mismatch for project shims regarding their paths when running ui5 serve and after running ui5 build.

Let's have a look at the following configuration (according to this example)

---
# Shims for thirdparty modules
specVersion: "2.3"
kind: extension
type: project-shim
metadata:
  name: thirdparty-shims
shims:
  configurations:
    # polyfill for ECMAScript features
    core-js-bundle:
      specVersion: "2.3"
      type: module
      metadata:
        name: core-js-bundle
      resources:
        configuration:
          paths:
            /resources/my/app/namespace/thirdparty/core-js-bundle/: ""
    # transpile generator functions (~ async await)
    regenerator-runtime:
      specVersion: "2.3"
      type: module
      metadata:
        name: regenerator-runtime
      resources:
        configuration:
          paths:
             /resources/my/app/namespace/thirdparty/regenerator-runtime/: ""

In particular above project shims have been defined to provide some polyfills when using e.g.

To ensure that these polyfills are being loaded as early as possible they have to be defined as js resources in the app's manifest.json:

{
  "sap.ui5": {
    "resources": {
      "css": [],
      "js": [
        {
          "uri": "/resources/my/app/namespace/thirdparty/core-js-bundle/minified.js"
        },
        {
          "uri": "/resources/my/app/namespace/thirdparty/regenerator-runtime/runtime.js"
        }
      ]
    }
  }
}

This works perfectly fine when running the app locally using ui5 serve.

The issue occurs when building the app (additionally using ui5-task-copy-shim-resource to ensure the project shims / polyfills are being copied over to the dist folder):

builder:
  resources:
    excludes:
      - "**/test/**"
      - "**/localService/**"
  customTasks:
    # babel
    - name: ui5-task-babel
      afterTask: replaceVersion
    # copy-shim-resources
    - name: ui5-task-copy-shim-resources
      afterTask: ui5-task-babel
      configuration:
        paths:
          - "/resources/my/app/namespace/thirdparty/core-js-bundle/minified.js"
          - "/resources/my/app/namespace/thirdparty/regenerator-runtime/runtime.js"

After running ui5 build the dist folder will contain a thirdparty folder, hence the paths for the js resources defined in manifest.json will not match anymore, they would have to be adjusted now omitting the /resources/my/app/namespace prefix to match the dist folder structure.

{
  "sap.ui5": {
    "resources": {
      "css": [],
      "js": [
        {
          "uri": "/thirdparty/core-js-bundle/minified.js"
        },
        {
          "uri": "/thirdparty/regenerator-runtime/runtime.js"
        }
      ]
    }
  }
}

Describe the solution you'd like

For normal project shims which are only being loaded via sap.ui.define this will not be an issue.
But for js resources such as polyfills which have to be included in manifest.json it should be possible to define their paths omitting the ´/resources/my/app/namespace` prefix so that the paths for shims are always relative to the projects webapp folder and namespace.

E.g.

---
# Shims for thirdparty modules
specVersion: "2.3"
kind: extension
type: project-shim
metadata:
  name: thirdparty-shims
shims:
  configurations:
    # polyfill for ECMAScript features
    core-js-bundle:
      specVersion: "2.3"
      type: module
      metadata:
        name: core-js-bundle
      resources:
        configuration:
          paths: # relative to webapp folder / namespace
            /thirdparty/core-js-bundle/: ""
    # transpile generator functions (~ async await)
    regenerator-runtime:
      specVersion: "2.3"
      type: module
      metadata:
        name: regenerator-runtime
      resources:
        configuration:
          paths: # relative to webapp folder / namespace
             /thirdparty/regenerator-runtime/: ""

Describe alternatives you've considered

It would be possible to do some conditional sap.ui.loader.config and sap.ui.requireSync at the start of Component.js instead of manifest.json:sap.ui5/resources/js but that is something I would rather avoid.

Additional context

The full ui5.yaml would look like this:

specVersion: "2.3"
metadata:
  name: my-app
type: application
framework:
  name: SAPUI5
  version: "1.84.4"
  libraries:
    - name: sap.m
    - name: sap.ui.core
    - name: sap.suite.ui.generic.template
    - name: themelib_sap_fiori_3
      optional: true
    - name: sap.ushell
      development: true
    - name: sap.ui.fl
      development: true
server:
  customMiddleware:
  # livereload
  - name: fiori-tools-appreload
    afterMiddleware: compression
    configuration:
      ext: html,js,json,xml,properties,change
  # service proxy
  - name: ui5-middleware-http-proxy
    mountPath: /sap
    afterMiddleware: compression
    configuration:
      baseUrl: https://my.abap.system:44311
      path: /sap
      secure: false
      auth:
        user: env:ABAP_SYSTEM_USERNAME
        pass: env:ABAP_SYSTEM_PASSWORD
  # layered respository / flexibility
  - name: ui5-middleware-lrep-flex
    afterMiddleware: compression
    configuration:
      # handle e.g. GET /sap/bc/lrep/flex/data/bookshop.ui.Component?appVersion=1.0.0&sap-language=en
      component:
        # data to be merged to each .change file
        changeData:
          support:
            user: "SAP"
          validAppVersions:
            creation: "0.1.0"
            from: "0.1.0"
            to: "0.1.0"
        # data to be merged and sent for each response
        data:
          settings:
            isKeyUser: true
            isAtoAvailable: false
            isProductiveSystem: false
   # babel
  - name: ui5-middleware-babel
    afterMiddleware: compression
    configuration:
      enabled: true
      wrap: true
      excludes:
        - "/test/**"
        - "/localService/**"
        - "/resources/my/app/namespace/thirdparty/core-js-bundle/**"
        - "/resources/my/app/namespace/thirdparty/regenerator-runtime/**"
builder:
  componentPreload:
  excludes:
    - "**/thirdparty/core-js-bundle/**"
    - "**/thirdparty/regenerator-runtime/**"
  resources:
    excludes:
      - "**/test/**"
      - "**/localService/**"
  customTasks:
    # babel
    - name: ui5-task-babel
      afterTask: replaceVersion
    # copy-shim-resources
    - name: ui5-task-copy-shim-resources
      afterTask: ui5-task-babel
      configuration:
        paths:
          - "/resources/my/app/namespace/thirdparty/core-js-bundle/minified.js"
          - "/resources/my/app/namespace/thirdparty/regenerator-runtime/runtime.js"
---
# Shims for thirdparty modules
specVersion: "2.3"
kind: extension
type: project-shim
metadata:
  name: thirdparty-shims
shims:
  configurations:
    # polyfill for ECMAScript features
    core-js-bundle:
      specVersion: "2.3"
      type: module
      metadata:
        name: core-js-bundle
      resources:
        configuration:
          paths:
            /resources/my/app/namespace/thirdparty/core-js-bundle/: ""
    # transpile generator functions (~ async await)
    regenerator-runtime:
      specVersion: "2.3"
      type: module
      metadata:
        name: regenerator-runtime
      resources:
        configuration:
          paths:
            /resources/my/app/namespace/thirdparty/regenerator-runtime/: ""

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing project-shim path handling in ui5 serve and ui5 build, using the ui5.yaml shim configuration and manifest.json resource entries described here. Trace how the paths become entries in dist; done means the same shim paths work during serving and after building without conditional manifest changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
build-system, cli, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.