@sap-ux/preview-middleware 0.16.136 → 0.16.137

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/package.json

@@ -9,7 +9,7 @@
   "bugs": {
     "url": "https://github.com/SAP/open-ux-tools/issues?q=is%3Aopen+is%3Aissue+label%3Abug+label%3Apreview-middleware"
   },
-  "version": "0.16.136",
+  "version": "0.16.137",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -46,7 +46,7 @@
     "supertest": "6.3.3",
     "@sap-ux-private/playwright": "0.1.0",
     "dotenv": "16.3.1",
-    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.11.39",
+    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.11.40",
     "@sap-ux/axios-extension": "1.17.4",
     "@sap-ux/store": "0.9.3",
     "@sap-ux/ui5-info": "0.8.3",

package/templates/flp/sandbox.html

@@ -44,9 +44,8 @@
         window["data-open-ux-preview-basePath"] = "<%- basePath %>";
     </script>
 
-    <script src="<%- basePath %>/preview/client/flp/bootstrap.js" id="preview-bootstrap"></script>
-    <script id="sap-ushell-bootstrap"></script>
-    <!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions="allow"'' is a NON-SECURE setting for test environments -->
+    <script src="<%- basePath %>/test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>
+    <!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions="allow"' is a NON-SECURE setting for test environments -->
     <script id="sap-ui-bootstrap"
         src="<%- basePath %>/resources/sap-ui-core.js"
         data-sap-ui-libs="<%- ui5.libs %>"

package/templates/flp/sandbox2.html

@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<!-- Copyright (c) 2015 SAP AG, All Rights Reserved -->
+
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Local FLP Sandbox</title>
+
+    <!-- Bootstrap the unified shell in sandbox mode for standalone usage.
+
+         The renderer is specified in the global Unified Shell configuration object "sap-ushell-config".
+
+         The fiori2 renderer will render the shell header allowing, for instance,
+         testing of additional application setting buttons.
+
+         The navigation target resolution service is configured in a way that the empty URL hash is
+         resolved to our own application.
+
+         This example uses relative path references for the SAPUI5 resources and test-resources;
+         it might be necessary to adapt them depending on the target runtime platform.
+         The sandbox platform is restricted to development or demo use cases and must NOT be used
+         for productive scenarios.
+    -->
+    <script type="text/javascript">
+        window["sap-ushell-config"] = {
+            defaultRenderer: "fiori2",
+            renderers: {
+                fiori2: {
+                    componentData: {
+                        config: {
+                            search: "hidden",
+                            enableSearch: false
+                        }
+                    }
+                }
+            },
+            applications:  <%- JSON.stringify(apps) %>
+        };
+    </script>
+
+    <script type="text/javascript">
+        window["data-open-ux-preview-basePath"] = "<%- basePath %>";
+    </script>
+
+    <script src="<%- basePath %>/resources/sap/ushell/bootstrap/sandbox2.js" id="sap-ushell-bootstrap"></script>
+    <!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions="allow"' is a NON-SECURE setting for test environments -->
+    <script id="sap-ui-bootstrap"
+        src="<%- basePath %>/resources/sap-ui-core.js"
+        data-sap-ui-libs="<%- ui5.libs %>"
+        data-sap-ui-async="true"
+        data-sap-ui-theme="<%- ui5.theme %>"
+        data-sap-ui-compat-version="edge"
+        data-sap-ui-language="en"
+        data-sap-ui-flexibility-services='<%- JSON.stringify(ui5.flex) %>'
+        data-sap-ui-resource-roots='<%- JSON.stringify(ui5.resources) %>'
+        data-sap-ui-frame-options="allow"
+        data-sap-ui-xx-component-preload="off"<%- ui5.bootstrapOptions %>
+        data-sap-ui-on-init="module:open/ux/preview/client/flp/init"<% if (locals.init) { %>
+        data-open-ux-preview-customInit='<%- init %>'<% } if (locals.flex) { %>
+        data-open-ux-preview-features='<%- JSON.stringify(features) %>'
+        data-open-ux-preview-flex-settings='<%- JSON.stringify(flex) %>'<% } if (locals.locateReuseLibsScript) { %>
+        data-open-ux-preview-libs-manifests='<%- JSON.stringify(Object.values(apps).map(app => app.url)) %>'<% } %>>
+    </script>
+
+<% if (locals.flex && flex?.developerMode) { %>
+        <!-- Hides Rta native toolbar  -->
+    <style>
+        #shell-header, .sapUiRtaToolbar {
+            visibility: hidden;
+            height: 1px;
+        }
+        .sapUshellShellCanvas {
+            top: 0 !important;
+        }
+        .sapUiRtaMode .sapUiShellBackgroundImage.sapUiGlobalBackgroundImageForce.sapUshellShellBG {
+            background-color: transparent !important;
+        }
+    </style><% } %>
+</head>
+
+<!-- UI Content -->
+<body class="sapUiBody" id="content">
+</body>
+
+</html>

package/dist/client/flp/bootstrap.js

@@ -1,77 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment,
-                  @typescript-eslint/no-unsafe-member-access,
-                  @typescript-eslint/no-unsafe-argument,
-                  no-console */
-
-/**
- * Calculates the script content for accessing the right sap/ushell/bootstrap sandbox.
- * @param fnCallback {Function} The callback function to be executed after the bootstrap is loaded.
- */
-async function ushellBootstrap(fnCallback) {
-    const basePath = window['data-open-ux-preview-basePath'] ?? '';
-
-    let src = `${basePath}/test-resources/sap/ushell/bootstrap/sandbox.js`;
-    try {
-        const response = await fetch(`${basePath}/resources/sap-ui-version.json`);
-        const json = await response.json();
-        const version = json?.libraries?.find((lib) => lib.name === 'sap.ui.core')?.version ?? '1.121.0';
-        const [major, minor] = version.split('.');
-        const majorUi5Version = parseInt(major, 10);
-        const minorUi5Version = parseInt(minor, 10);
-        if (majorUi5Version >= 2) {
-            src = `${basePath}/resources/sap/ushell/bootstrap/sandbox2.js`;
-        }
-
-        if (majorUi5Version === 1 && minorUi5Version < 72) {
-            removeAsyncHintsRequests();
-        }
-    } catch (error) {
-        console.warn('Failed to fetch sap-ui-version.json. Assuming it is a 1.x version.');
-    }
-
-    // eslint-disable-next-line fiori-custom/sap-no-dom-access,fiori-custom/sap-browser-api-warning
-    const shellBootstrap = document.getElementById('sap-ushell-bootstrap');
-    if (shellBootstrap) {
-        shellBootstrap.onload = () => {
-            window['sap-ui-config']['xx-bootTask'](fnCallback);
-        };
-        shellBootstrap.setAttribute('src', src);
-    }
-}
-
-/**
- * For UI5 version 1.71 and below, we need to remove the asyncHints.requests
- * to load the changes in an Adaptation project.
- * This logic needs to be executed here to have a reliable check for
- * UI5 version and remove the asyncHints.requests before the sandbox is loaded.
- * The sandbox shell modifies the `window['sap-ushell-config']`.
- */
-function removeAsyncHintsRequests() {
-    const obj = window['sap-ushell-config']['applications'];
-
-    if (!obj || typeof obj !== 'object') return;
-
-    const stack = [obj];
-
-    while (stack.length > 0) {
-        const current = stack.pop();
-
-        if (current.asyncHints) {
-            if (current.asyncHints.requests) {
-                current.asyncHints.requests = [];
-            }
-            return;
-        }
-
-        for (const key in current) {
-            if (typeof current[key] === 'object' && current[key] !== null) {
-                stack.push(current[key]);
-            }
-        }
-    }
-}
-
-// eslint-disable-next-line fiori-custom/sap-no-global-define
-window['sap-ui-config'] = {
-    'xx-bootTask': ushellBootstrap
-};