Feature Request: Include core-js and regenerator-runtime polyfills in sap.ui.core

OpenUI5 version: 1.86.3

Browser/version (+device/version): Any

Description:

As more and more developers want to use latest ECMAScript features when building their apps using UI5, there are more and more custom tasks and custom middlewares for the UI5 Tooling which focus on transpiling code, e.g. using babel such as:

• ui5-middleware-livetranspile
• ui5-task-transpile
• ui5-middleware-babel
• ui5-task-babel

As of babel 7.4.0 it is necessary to directly include core-js (to polyfill ECMAScript features) and regenerator-runtime (needed to use transpiled generator functions) (For details please see https://babeljs.io/docs/en/babel-polyfill).

The issue arises once one need to include these polyfills within the application.
Because of the way an UI5 app is loaded and instantiated compared to other frameworks and bundlers, this requires some additional boilerplate:

Prerequisite

Include project shims for the polyfills in ui5.yaml:

---
# 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/: ""

After the project shims have been created there are now two options for actually loading these polyfills as early as possible.

Option 1

Define them 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"
        }
      ]
    }
  }
}

Option 2

Load them synchronously before defining the Component in Component.js:

(() => {
  sap.ui.requireSync('my/app/namespace/thirdparty/core-js-bundle/minified')
  sap.ui.requireSync('my/app/namespace/thirdparty/regenerator-runtime/runtime')
  sap.ui.define(['sap/ui/core/UIComponent'], UIComponent => UIComponent.extend("my.app.namespace.Component", {
    metadata: {
      manifest: "json"
    }
  }))
})()

However both approaches have the limitation that async await syntax will not be allowed in Component.js itself, as this file triggers the initial load of the polyfills.

To avoid this boilerplate and also to eliminate any further build issues both polyfills could simply be bundled and provided within the sap.ui.core as there are already other thirdparty polyfills included:

https://github.com/SAP/openui5/tree/master/src/sap.ui.core/src/sap/ui/thirdparty

One could simply omit any other es6 shims in favour of core-js and also include regenerator-runtime as well.

These would allow to use modern ECMAScript features when developing UI5 apps and also ensure backward compatibility with older browsers.

A full example project can be found here:

https://github.com/pwasem/bookshop-ui