@sap-ux/preview-middleware 0.16.136 → 0.16.139

package/dist/base/flp.d.ts

@@ -53,9 +53,18 @@ export declare class FlpSandbox {
      * @param adp optional reference to the ADP tooling
      */
     init(manifest: Manifest, componentId?: string, resources?: Record<string, string>, adp?: AdpPreview): Promise<void>;
+    /**
+     * Get the configuration for the developer mode.
+     *
+     * @param ui5MajorVersion - the major version of UI5
+     * @returns the configuration for the developer mode
+     * @private
+     */
+    private getDeveloperModeConfig;
     /**
      * Generates the FLP sandbox for an editor.
      *
+     * @param req the request
      * @param rta runtime authoring configuration
      * @param editor editor configuration
      * @returns FLP sandbox html
@@ -78,6 +87,29 @@ export declare class FlpSandbox {
      * Add routes for html and scripts required for a local FLP.
      */
     private addStandardRoutes;
+    /**
+     * Read the UI5 version.
+     * In case of an error, the default UI5 version '1.121.0' is returned.
+     *
+     * @param protocol - the protocol that should be used to request the UI5 version ('http' or 'https')
+     * @param host - the host that should be used to request the UI5 version
+     * @param baseUrl - the base path of the request that should be added to the host
+     * @returns the template for the sandbox HTML file
+     * @private
+     */
+    private getUi5Version;
+    /**
+     * Read the sandbox template file based on the given UI5 version.
+     *
+     * @param ui5MajorVersion - the major version of UI5
+     * @returns the template for the sandbox HTML file
+     */
+    private getSandboxTemplate;
+    /**
+     * For UI5 version 1.71 and below, the asyncHints.requests need to be removed from the template configuration
+     * to load the changes in an Adaptation project.
+     */
+    private removeAsyncHintsRequests;
     /**
      * Try finding a locate-reuse-libs script in the project.
      *

package/dist/base/flp.js

@@ -14,15 +14,6 @@ const feature_toggle_1 = require("@sap-ux/feature-toggle");
 const flex_1 = require("./flex");
 const test_1 = require("./test");
 const config_1 = require("./config");
-const DEVELOPER_MODE_CONFIG = new Map([
-    // Run application in design time mode
-    // Adds bindingString to BindingInfo objects. Required to create and read PropertyBinding changes
-    ['xx-designMode', 'true'],
-    // In design mode, the controller code will not be executed by default, which is not desired in our case, so we suppress the deactivation
-    ['xx-suppressDeactivationOfControllerCode', 'true'],
-    // Make sure that XML preprocessing results are correctly invalidated
-    ['xx-viewCache', 'false']
-]);
 const DEFAULT_LIVERELOAD_PORT = 35729;
 /**
  * Class handling preview of a sandbox FLP.
@@ -101,14 +92,46 @@ class FlpSandbox {
         this.logger.info(`Initialized for app ${id}`);
         this.logger.debug(`Configured apps: ${JSON.stringify(this.templateConfig.apps)}`);
     }
+    /**
+     * Get the configuration for the developer mode.
+     *
+     * @param ui5MajorVersion - the major version of UI5
+     * @returns the configuration for the developer mode
+     * @private
+     */
+    getDeveloperModeConfig(ui5MajorVersion) {
+        if (ui5MajorVersion < 2) {
+            return new Map([
+                // Run application in design time mode
+                // Adds bindingString to BindingInfo objects. Required to create and read PropertyBinding changes
+                ['xx-designMode', 'true'],
+                // In design mode, the controller code will not be executed by default, which is not desired in our case, so we suppress the deactivation
+                ['xx-suppressDeactivationOfControllerCode', 'true'],
+                // Make sure that XML preprocessing results are correctly invalidated
+                ['xx-viewCache', 'false']
+            ]);
+        }
+        else {
+            return new Map([
+                // Run application in design time mode
+                // Adds bindingString to BindingInfo objects. Required to create and read PropertyBinding changes
+                ['xx-design-mode', 'true'],
+                // In design mode, the controller code will not be executed by default, which is not desired in our case, so we suppress the deactivation
+                ['xx-suppress-deactivation-of-controller-code', 'true'],
+                // Make sure that XML preprocessing results are correctly invalidated
+                ['xx-view-cache', 'false']
+            ]);
+        }
+    }
     /**
      * Generates the FLP sandbox for an editor.
      *
+     * @param req the request
      * @param rta runtime authoring configuration
      * @param editor editor configuration
      * @returns FLP sandbox html
      */
-    async generateSandboxForEditor(rta, editor) {
+    async generateSandboxForEditor(req, rta, editor) {
         const defaultGenerator = editor.developerMode
             ? '@sap-ux/control-property-editor'
             : '@sap-ux/preview-middleware';
@@ -128,11 +151,14 @@ class FlpSandbox {
             pluginScript: editor.pluginScript
         };
         config.features = feature_toggle_1.FeatureToggleAccess.getAllFeatureToggles();
+        const ui5Version = await this.getUi5Version(req.protocol, req.headers.host, req['ui5-patched-router']?.baseUrl);
         if (editor.developerMode === true) {
-            config.ui5.bootstrapOptions = serializeUi5Configuration(DEVELOPER_MODE_CONFIG);
+            config.ui5.bootstrapOptions = serializeUi5Configuration(this.getDeveloperModeConfig(ui5Version.major));
+        }
+        if (ui5Version.major === 1 && ui5Version.minor <= 71) {
+            this.removeAsyncHintsRequests();
         }
-        const template = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/sandbox.html'), 'utf-8');
-        return (0, ejs_1.render)(template, config);
+        return (0, ejs_1.render)(this.getSandboxTemplate(ui5Version.major), config);
     }
     /**
      * Sets application dependencies in the template configuration.
@@ -198,7 +224,7 @@ class FlpSandbox {
                     res.redirect(302, `${previewUrl}?${new URLSearchParams(params)}`);
                     return;
                 }
-                const html = (await this.generateSandboxForEditor(rta, editor)).replace('</body>', `</body>\n<!-- livereload disabled for editor </body>-->`);
+                const html = (await this.generateSandboxForEditor(req, rta, editor)).replace('</body>', `</body>\n<!-- livereload disabled for editor </body>-->`);
                 this.sendResponse(res, 'text/html', 200, html);
             });
         }
@@ -209,8 +235,8 @@ class FlpSandbox {
     addStandardRoutes() {
         // register static client sources
         this.router.use(config_1.PREVIEW_URL.client.path, (0, express_1.static)(config_1.PREVIEW_URL.client.local));
-        // add route for the sandbox.html
-        this.router.get(this.config.path, (async (_req, res, next) => {
+        // add route for the sandbox html
+        this.router.get(this.config.path, (async (req, res, next) => {
             // inform the user if a html file exists on the filesystem
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             const file = await this.project.byPath(this.config.path);
@@ -219,12 +245,69 @@ class FlpSandbox {
                 next();
             }
             else {
-                const template = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/sandbox.html'), 'utf-8');
-                const html = (0, ejs_1.render)(template, this.templateConfig);
+                const ui5Version = await this.getUi5Version(req.protocol, req.headers.host, req['ui5-patched-router']?.baseUrl);
+                const html = (0, ejs_1.render)(this.getSandboxTemplate(ui5Version.major), this.templateConfig);
                 this.sendResponse(res, 'text/html', 200, html);
             }
         }));
     }
+    /**
+     * Read the UI5 version.
+     * In case of an error, the default UI5 version '1.121.0' is returned.
+     *
+     * @param protocol - the protocol that should be used to request the UI5 version ('http' or 'https')
+     * @param host - the host that should be used to request the UI5 version
+     * @param baseUrl - the base path of the request that should be added to the host
+     * @returns the template for the sandbox HTML file
+     * @private
+     */
+    async getUi5Version(protocol, host, baseUrl = '') {
+        let version;
+        if (!host) {
+            this.logger.error('Unable to fetch UI5 version: No host found in request header.');
+        }
+        else {
+            try {
+                const versionUrl = `${protocol}://${host}${baseUrl}/resources/sap-ui-version.json`;
+                const responseJson = (await fetch(versionUrl).then((res) => res.json()));
+                version = responseJson?.libraries?.find((lib) => lib.name === 'sap.ui.core')?.version;
+            }
+            catch (error) {
+                this.logger.error(error);
+            }
+        }
+        if (!version) {
+            this.logger.error('Could not get UI5 version of application. Using 1.121.0 as fallback.');
+            version = '1.121.0';
+        }
+        const [major, minor] = version.split('.').map((versionPart) => parseInt(versionPart, 10));
+        return {
+            major,
+            minor
+        };
+    }
+    /**
+     * Read the sandbox template file based on the given UI5 version.
+     *
+     * @param ui5MajorVersion - the major version of UI5
+     * @returns the template for the sandbox HTML file
+     */
+    getSandboxTemplate(ui5MajorVersion) {
+        this.logger.info(`Using sandbox template for UI5 major version ${ui5MajorVersion}.`);
+        return (0, fs_1.readFileSync)((0, path_1.join)(__dirname, `../../templates/flp/sandbox${ui5MajorVersion === 1 ? '' : ui5MajorVersion}.html`), 'utf-8');
+    }
+    /**
+     * For UI5 version 1.71 and below, the asyncHints.requests need to be removed from the template configuration
+     * to load the changes in an Adaptation project.
+     */
+    removeAsyncHintsRequests() {
+        for (const app in this.templateConfig.apps) {
+            const appDependencies = this.templateConfig.apps[app].applicationDependencies;
+            if (appDependencies?.asyncHints.requests) {
+                appDependencies.asyncHints.requests = [];
+            }
+        }
+    }
     /**
      * Try finding a locate-reuse-libs script in the project.
      *

package/dist/client/adp/api-handler.js

@@ -1,144 +1,144 @@
-"use strict";
-
-sap.ui.define(["../utils/error"], function (___utils_error) {
-  "use strict";
-
-  const getError = ___utils_error["getError"];
-  var ApiEndpoints = /*#__PURE__*/function (ApiEndpoints) {
-    ApiEndpoints["CHANGES"] = "/preview/api/changes";
-    ApiEndpoints["FRAGMENT"] = "/adp/api/fragment";
-    ApiEndpoints["CONTROLLER"] = "/adp/api/controller";
-    ApiEndpoints["CODE_EXT"] = "/adp/api/code_ext";
-    ApiEndpoints["MANIFEST_APP_DESCRIPTOR"] = "/manifest.appdescr_variant";
-    return ApiEndpoints;
-  }(ApiEndpoints || {});
-  var RequestMethod = /*#__PURE__*/function (RequestMethod) {
-    RequestMethod["GET"] = "GET";
-    RequestMethod["PUT"] = "PUT";
-    RequestMethod["POST"] = "POST";
-    RequestMethod["PATCH"] = "PATCH";
-    RequestMethod["DELETE"] = "DELETE";
-    return RequestMethod;
-  }(RequestMethod || {});
-  /**
-   * Requests a given endpoint
-   *
-   * @param endpoint API Endpoint
-   * @param method RequestMethod
-   * @param data Data to be sent to the server
-   * @returns Data from the server request
-   */
-  async function request(endpoint, method, data) {
-    const config = {
-      method,
-      body: JSON.stringify(data),
-      headers: {
-        'content-type': 'application/json'
-      }
-    };
-    try {
-      const response = await fetch(endpoint, config);
-      if (!response.ok) {
-        const errorData = await response.json();
-        const message = errorData?.message ?? '';
-        throw new Error(`Request failed, status: ${response.status}. ${message}`.trim());
-      }
-      switch (method) {
-        case RequestMethod.GET:
-          return response.json();
-        case RequestMethod.POST:
-          /**
-           * Since POST usually creates something
-           * and returns nothing (or a message) we just parse the text from res.send(msg)
-           */
-          return response.text();
-        default:
-          return response.json();
-      }
-    } catch (e) {
-      throw getError(e);
-    }
-  }
-
-  /**
-   * Retrieves all XML fragments from the project's workspace
-   *
-   * @returns Generic Promise<T>
-   */
-  async function getFragments() {
-    return request(ApiEndpoints.FRAGMENT, RequestMethod.GET);
-  }
-
-  /**
-   * Writes an XML fragment to the project's workspace
-   *
-   * @param data Data to be send to the server
-   * @returns Generic Promise<T>
-   */
-  async function writeFragment(data) {
-    return request(ApiEndpoints.FRAGMENT, RequestMethod.POST, data);
-  }
-
-  /**
-   * Retrieves manifest.appdescr_variant from the project's workspace
-   *
-   * @returns Generic Promise<T>
-   */
-  async function getManifestAppdescr() {
-    return request(ApiEndpoints.MANIFEST_APP_DESCRIPTOR, RequestMethod.GET);
-  }
-
-  /**
-   * Retrieves all controller extensions from the project's workspace
-   *
-   * @returns Generic Promise<T>
-   */
-  async function readControllers() {
-    return request(ApiEndpoints.CONTROLLER, RequestMethod.GET);
-  }
-
-  /**
-   * Writes a Controller to the project's workspace
-   *
-   * @param data Data to be send to the server
-   * @returns Generic Promise<T>
-   */
-  async function writeController(data) {
-    return request(ApiEndpoints.CONTROLLER, RequestMethod.POST, data);
-  }
-
-  /**
-   * Checks for existing controller in the project's workspace
-   *
-   * @param controllerName Name of the controller
-   * @returns {CodeExtResponse} Returns path to existing controller if found
-   */
-  async function getExistingController(controllerName) {
-    return request(`${ApiEndpoints.CODE_EXT}/${controllerName}`, RequestMethod.GET);
-  }
-
-  /**
-   * Writes a change object to the project's workspace
-   *
-   * @param data Data to be send to the server
-   * @returns Generic Promise<T>
-   */
-  async function writeChange(data) {
-    return request(ApiEndpoints.CHANGES, RequestMethod.POST, data);
-  }
-  var __exports = {
-    __esModule: true
-  };
-  __exports.ApiEndpoints = ApiEndpoints;
-  __exports.RequestMethod = RequestMethod;
-  __exports.request = request;
-  __exports.getFragments = getFragments;
-  __exports.writeFragment = writeFragment;
-  __exports.getManifestAppdescr = getManifestAppdescr;
-  __exports.readControllers = readControllers;
-  __exports.writeController = writeController;
-  __exports.getExistingController = getExistingController;
-  __exports.writeChange = writeChange;
-  return __exports;
+"use strict";
+
+sap.ui.define(["../utils/error"], function (___utils_error) {
+  "use strict";
+
+  const getError = ___utils_error["getError"];
+  var ApiEndpoints = /*#__PURE__*/function (ApiEndpoints) {
+    ApiEndpoints["CHANGES"] = "/preview/api/changes";
+    ApiEndpoints["FRAGMENT"] = "/adp/api/fragment";
+    ApiEndpoints["CONTROLLER"] = "/adp/api/controller";
+    ApiEndpoints["CODE_EXT"] = "/adp/api/code_ext";
+    ApiEndpoints["MANIFEST_APP_DESCRIPTOR"] = "/manifest.appdescr_variant";
+    return ApiEndpoints;
+  }(ApiEndpoints || {});
+  var RequestMethod = /*#__PURE__*/function (RequestMethod) {
+    RequestMethod["GET"] = "GET";
+    RequestMethod["PUT"] = "PUT";
+    RequestMethod["POST"] = "POST";
+    RequestMethod["PATCH"] = "PATCH";
+    RequestMethod["DELETE"] = "DELETE";
+    return RequestMethod;
+  }(RequestMethod || {});
+  /**
+   * Requests a given endpoint
+   *
+   * @param endpoint API Endpoint
+   * @param method RequestMethod
+   * @param data Data to be sent to the server
+   * @returns Data from the server request
+   */
+  async function request(endpoint, method, data) {
+    const config = {
+      method,
+      body: JSON.stringify(data),
+      headers: {
+        'content-type': 'application/json'
+      }
+    };
+    try {
+      const response = await fetch(endpoint, config);
+      if (!response.ok) {
+        const errorData = await response.json();
+        const message = errorData?.message ?? '';
+        throw new Error(`Request failed, status: ${response.status}. ${message}`.trim());
+      }
+      switch (method) {
+        case RequestMethod.GET:
+          return response.json();
+        case RequestMethod.POST:
+          /**
+           * Since POST usually creates something
+           * and returns nothing (or a message) we just parse the text from res.send(msg)
+           */
+          return response.text();
+        default:
+          return response.json();
+      }
+    } catch (e) {
+      throw getError(e);
+    }
+  }
+
+  /**
+   * Retrieves all XML fragments from the project's workspace
+   *
+   * @returns Generic Promise<T>
+   */
+  async function getFragments() {
+    return request(ApiEndpoints.FRAGMENT, RequestMethod.GET);
+  }
+
+  /**
+   * Writes an XML fragment to the project's workspace
+   *
+   * @param data Data to be send to the server
+   * @returns Generic Promise<T>
+   */
+  async function writeFragment(data) {
+    return request(ApiEndpoints.FRAGMENT, RequestMethod.POST, data);
+  }
+
+  /**
+   * Retrieves manifest.appdescr_variant from the project's workspace
+   *
+   * @returns Generic Promise<T>
+   */
+  async function getManifestAppdescr() {
+    return request(ApiEndpoints.MANIFEST_APP_DESCRIPTOR, RequestMethod.GET);
+  }
+
+  /**
+   * Retrieves all controller extensions from the project's workspace
+   *
+   * @returns Generic Promise<T>
+   */
+  async function readControllers() {
+    return request(ApiEndpoints.CONTROLLER, RequestMethod.GET);
+  }
+
+  /**
+   * Writes a Controller to the project's workspace
+   *
+   * @param data Data to be send to the server
+   * @returns Generic Promise<T>
+   */
+  async function writeController(data) {
+    return request(ApiEndpoints.CONTROLLER, RequestMethod.POST, data);
+  }
+
+  /**
+   * Checks for existing controller in the project's workspace
+   *
+   * @param controllerName Name of the controller
+   * @returns {CodeExtResponse} Returns path to existing controller if found
+   */
+  async function getExistingController(controllerName) {
+    return request(`${ApiEndpoints.CODE_EXT}/${controllerName}`, RequestMethod.GET);
+  }
+
+  /**
+   * Writes a change object to the project's workspace
+   *
+   * @param data Data to be send to the server
+   * @returns Generic Promise<T>
+   */
+  async function writeChange(data) {
+    return request(ApiEndpoints.CHANGES, RequestMethod.POST, data);
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.ApiEndpoints = ApiEndpoints;
+  __exports.RequestMethod = RequestMethod;
+  __exports.request = request;
+  __exports.getFragments = getFragments;
+  __exports.writeFragment = writeFragment;
+  __exports.getManifestAppdescr = getManifestAppdescr;
+  __exports.readControllers = readControllers;
+  __exports.writeController = writeController;
+  __exports.getExistingController = getExistingController;
+  __exports.writeChange = writeChange;
+  return __exports;
 });
 //# sourceMappingURL=api-handler.js.map

package/dist/client/adp/command-executor.js

@@ -1,77 +1,77 @@
-"use strict";
-
-sap.ui.define(["sap/m/MessageToast", "sap/ui/rta/command/CommandFactory", "../utils/error"], function (MessageToast, CommandFactory, ___utils_error) {
-  "use strict";
-
-  const getError = ___utils_error["getError"];
-  /**
-   * Class responsible for handling rta calls
-   */
-  class CommandExecutor {
-    /**
-     *
-     * @param rta Runtime Authoring
-     */
-    constructor(rta) {
-      this.rta = rta;
-    }
-
-    /**
-     * Generates command based on given values
-     *
-     * @param runtimeControl Managed object
-     * @param commandName Command name
-     * @param modifiedValue Modified value/s
-     * @param designMetadata Design time metadata
-     * @param flexSettings Additional flex settings
-     */
-    async getCommand(runtimeControl, commandName, modifiedValue, designMetadata, flexSettings) {
-      try {
-        return await CommandFactory.getCommandFor(runtimeControl, commandName, modifiedValue, designMetadata, flexSettings);
-      } catch (e) {
-        const error = getError(e);
-        const msgToastErrorMsg = `Could not get command for '${commandName}'. ${error.message}`;
-        error.message = msgToastErrorMsg;
-        MessageToast.show(msgToastErrorMsg);
-        throw error;
-      }
-    }
-
-    /**
-     * Creates composite command without nested commands
-     *
-     * @param runtimeControl Managed object
-     */
-    async createCompositeCommand(runtimeControl) {
-      try {
-        return await CommandFactory.getCommandFor(runtimeControl, 'composite');
-      } catch (e) {
-        const error = getError(e);
-        const msgToastErrorMsg = `Could not get composite command'. ${error.message}`;
-        error.message = msgToastErrorMsg;
-        MessageToast.show(msgToastErrorMsg);
-        throw error;
-      }
-    }
-
-    /**
-     * Pushed and executes the provided command
-     *
-     * @param command Command
-     */
-    async pushAndExecuteCommand(command) {
-      try {
-        /**
-         * The change will have pending state and will only be saved to the workspace when the user clicks save icon
-         */
-        await this.rta.getCommandStack().pushAndExecute(command);
-      } catch (e) {
-        const error = getError(e);
-        MessageToast.show(error.message);
-        throw error;
-      }
-    }
-  }
-  return CommandExecutor;
+"use strict";
+
+sap.ui.define(["sap/m/MessageToast", "sap/ui/rta/command/CommandFactory", "../utils/error"], function (MessageToast, CommandFactory, ___utils_error) {
+  "use strict";
+
+  const getError = ___utils_error["getError"];
+  /**
+   * Class responsible for handling rta calls
+   */
+  class CommandExecutor {
+    /**
+     *
+     * @param rta Runtime Authoring
+     */
+    constructor(rta) {
+      this.rta = rta;
+    }
+
+    /**
+     * Generates command based on given values
+     *
+     * @param runtimeControl Managed object
+     * @param commandName Command name
+     * @param modifiedValue Modified value/s
+     * @param designMetadata Design time metadata
+     * @param flexSettings Additional flex settings
+     */
+    async getCommand(runtimeControl, commandName, modifiedValue, designMetadata, flexSettings) {
+      try {
+        return await CommandFactory.getCommandFor(runtimeControl, commandName, modifiedValue, designMetadata, flexSettings);
+      } catch (e) {
+        const error = getError(e);
+        const msgToastErrorMsg = `Could not get command for '${commandName}'. ${error.message}`;
+        error.message = msgToastErrorMsg;
+        MessageToast.show(msgToastErrorMsg);
+        throw error;
+      }
+    }
+
+    /**
+     * Creates composite command without nested commands
+     *
+     * @param runtimeControl Managed object
+     */
+    async createCompositeCommand(runtimeControl) {
+      try {
+        return await CommandFactory.getCommandFor(runtimeControl, 'composite');
+      } catch (e) {
+        const error = getError(e);
+        const msgToastErrorMsg = `Could not get composite command'. ${error.message}`;
+        error.message = msgToastErrorMsg;
+        MessageToast.show(msgToastErrorMsg);
+        throw error;
+      }
+    }
+
+    /**
+     * Pushed and executes the provided command
+     *
+     * @param command Command
+     */
+    async pushAndExecuteCommand(command) {
+      try {
+        /**
+         * The change will have pending state and will only be saved to the workspace when the user clicks save icon
+         */
+        await this.rta.getCommandStack().pushAndExecute(command);
+      } catch (e) {
+        const error = getError(e);
+        MessageToast.show(error.message);
+        throw error;
+      }
+    }
+  }
+  return CommandExecutor;
 });
 //# sourceMappingURL=command-executor.js.map