@sap-ux/preview-middleware 0.3.1 → 0.3.3

package/README.md

@@ -11,9 +11,10 @@ The `@sap-ux/preview-middleware` is a [Custom UI5 Server Middleware](https://sap
 | `flp.intent.object`    | `string`  | `app`            | Optional intent object                                                                                                              |
 | `flp.intent.action`    | `string`  | `preview`        | Optional intent action                                                                                                              |
 | `flp.apps`             | `array`   | `[]`             | Optional additional local apps that are available in local Fiori launchpad                                                          |
+| `flp.libs`             | `boolean` | `false`          | Optional flag to add a generic script fetching the paths of used libraries not available in UI5                                     |
 | `adp.target`           |           |                  | Required configuration for adaptation projects defining the connected backend                                                       |
 | `adp.ignoreCertErrors` | `boolean` | `false`          | Optional setting to ignore certification validation errors when working with e.g. development systems with self signed certificates |
-| `debug`                | `boolean` | false            | Enables debug output                                                                                                                |
+| `debug`                | `boolean` | `false`          | Enables debug output                                                                                                                |
 
 ### `flp.apps`
 Array of additional application configurations:

package/dist/base/flp.d.ts

@@ -7,6 +7,7 @@ import type { Manifest, UI5FlexLayer } from '@sap-ux/project-access';
  * Internal structure used to fill the sandbox.html template
  */
 export interface TemplateConfig {
+    basePath: string;
     apps: Record<string, {
         title: string;
         description: string;
@@ -58,11 +59,18 @@ export declare class FlpSandbox {
      */
     init(manifest: Manifest, componentId?: string, resources?: Record<string, string>): Promise<void>;
     /**
-     * Try finding the locate-reuse-libs script.
+     * Add routes for html and scripts required for a local FLP.
+     */
+    private addStandardRoutes;
+    /**
+     * Try finding a locate-reuse-libs script in the project.
      *
      * @returns the location of the locate-reuse-libs script or undefined.
      */
     private findLocateReuseLibsScript;
+    /**
+     * Add additional routes for apps also to be shown in the local FLP.
+     */
     private addRoutesForAdditionalApps;
     /**
      * Create required routes for flex.

package/dist/base/flp.js

@@ -23,6 +23,10 @@ const DEFAULT_THEME = 'sap_horizon';
  * Default path for mounting the local FLP.
  */
 const DEFAULT_PATH = '/test/flp.html';
+/**
+ * Default name of the locate reuse libs script.
+ */
+const DEFAULT_LOCATE_LIBS_FILENAME = 'locate-reuse-libs.js';
 /**
  * Default intent
  */
@@ -51,8 +55,12 @@ class FlpSandbox {
             path: (_a = config.path) !== null && _a !== void 0 ? _a : DEFAULT_PATH,
             intent: (_b = config.intent) !== null && _b !== void 0 ? _b : DEFAULT_INTENT,
             apps: (_c = config.apps) !== null && _c !== void 0 ? _c : [],
-            rta: config.rta
+            rta: config.rta,
+            libs: config.libs
         };
+        if (!this.config.path.startsWith('/')) {
+            this.config.path = `/${this.config.path}`;
+        }
         logger.debug(`Config: ${JSON.stringify(this.config)}`);
         this.router = (0, express_1.Router)();
     }
@@ -64,60 +72,79 @@ class FlpSandbox {
      * @param resources optional additional resource mappings
      */
     init(manifest, componentId, resources = {}) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         return __awaiter(this, void 0, void 0, function* () {
             const flex = this.createFlexHandler();
             const supportedThemes = (_b = (_a = manifest['sap.ui5']) === null || _a === void 0 ? void 0 : _a.supportedThemes) !== null && _b !== void 0 ? _b : [DEFAULT_THEME];
             this.templateConfig = {
+                basePath: (_c = (0, path_1.relative)((0, path_1.dirname)(this.config.path), '/')) !== null && _c !== void 0 ? _c : '.',
                 apps: {},
                 ui5: {
-                    libs: Object.keys((_e = (_d = (_c = manifest['sap.ui5']) === null || _c === void 0 ? void 0 : _c.dependencies) === null || _d === void 0 ? void 0 : _d.libs) !== null && _e !== void 0 ? _e : {}).join(','),
+                    libs: Object.keys((_f = (_e = (_d = manifest['sap.ui5']) === null || _d === void 0 ? void 0 : _d.dependencies) === null || _e === void 0 ? void 0 : _e.libs) !== null && _f !== void 0 ? _f : {}).join(','),
                     theme: supportedThemes.includes(DEFAULT_THEME) ? DEFAULT_THEME : supportedThemes[0],
                     flex,
                     resources: Object.assign({}, resources)
                 },
-                locateReuseLibsScript: yield this.findLocateReuseLibsScript()
+                locateReuseLibsScript: this.config.libs
+                    ? `./${DEFAULT_LOCATE_LIBS_FILENAME}`
+                    : yield this.findLocateReuseLibsScript()
             };
             this.addApp(manifest, {
                 componentId,
-                target: (_f = resources[componentId !== null && componentId !== void 0 ? componentId : manifest['sap.app'].id]) !== null && _f !== void 0 ? _f : '/',
+                target: (_g = resources[componentId !== null && componentId !== void 0 ? componentId : manifest['sap.app'].id]) !== null && _g !== void 0 ? _g : this.templateConfig.basePath,
                 local: '.',
                 intent: this.config.intent
             });
-            // add route for the sandbox.html
-            this.router.get(this.config.path, (req, res) => {
-                var _a, _b;
-                const config = Object.assign({}, this.templateConfig);
-                const fioriToolsRtaMode = req.query['fiori-tools-rta-mode'];
-                if (fioriToolsRtaMode) {
-                    if ((_a = this.config.rta) === null || _a === void 0 ? void 0 : _a.layer) {
-                        config.flex = {
-                            layer: (_b = this.config.rta) === null || _b === void 0 ? void 0 : _b.layer,
-                            developerMode: fioriToolsRtaMode === 'forAdaptation'
-                        };
-                    }
-                    else {
-                        this.logger.error('Fiori tools RTA mode could not be started because the RTA layer is missing.');
-                    }
-                }
-                const template = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/sandbox.html'), 'utf-8');
-                const html = (0, ejs_1.render)(template, config);
-                // if livereload is enabled, don't send it but let other middleware modify the content
-                if (res._livereload) {
-                    res.write(html);
-                    res.end();
-                }
-                else {
-                    res.status(200).contentType('html').send(html);
-                }
-            });
+            this.addStandardRoutes();
             this.addRoutesForAdditionalApps();
             this.logger.info(`Initialized for app ${manifest['sap.app'].id}`);
             this.logger.debug(`Configured apps: ${JSON.stringify(this.templateConfig.apps)}`);
         });
     }
     /**
-     * Try finding the locate-reuse-libs script.
+     * Add routes for html and scripts required for a local FLP.
+     */
+    addStandardRoutes() {
+        // add route for the sandbox.html
+        this.router.get(this.config.path, (req, res) => {
+            var _a, _b;
+            const config = Object.assign({}, this.templateConfig);
+            const fioriToolsRtaMode = req.query['fiori-tools-rta-mode'];
+            if (fioriToolsRtaMode) {
+                if ((_a = this.config.rta) === null || _a === void 0 ? void 0 : _a.layer) {
+                    config.flex = {
+                        layer: (_b = this.config.rta) === null || _b === void 0 ? void 0 : _b.layer,
+                        developerMode: fioriToolsRtaMode === 'forAdaptation'
+                    };
+                }
+                else {
+                    this.logger.error('Fiori tools RTA mode could not be started because the RTA layer is missing.');
+                }
+            }
+            const template = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/sandbox.html'), 'utf-8');
+            const html = (0, ejs_1.render)(template, config);
+            // if livereload is enabled, don't send it but let other middleware modify the content
+            if (res._livereload) {
+                res.write(html);
+                res.end();
+            }
+            else {
+                res.status(200).contentType('html').send(html);
+            }
+        });
+        // add route for locate-reuse-libs if requested
+        if (this.config.libs && this.templateConfig.locateReuseLibsScript) {
+            const pathParts = this.config.path.split('/');
+            pathParts.pop();
+            pathParts.push(DEFAULT_LOCATE_LIBS_FILENAME);
+            this.router.get(pathParts.join('/'), (_req, res) => {
+                const script = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/locate-reuse-libs.js'), 'utf-8');
+                res.status(200).contentType('text/javascript').send(script);
+            });
+        }
+    }
+    /**
+     * Try finding a locate-reuse-libs script in the project.
      *
      * @returns the location of the locate-reuse-libs script or undefined.
      */
@@ -132,6 +159,9 @@ class FlpSandbox {
             }
         });
     }
+    /**
+     * Add additional routes for apps also to be shown in the local FLP.
+     */
     addRoutesForAdditionalApps() {
         for (const app of this.config.apps) {
             if (app.local) {

package/dist/types/index.d.ts

@@ -28,6 +28,10 @@ export interface FlpConfig {
     rta?: {
         layer?: UI5FlexLayer;
     };
+    /**
+     * Optional: if set to true then a locate-reuse-libs script will be attached to the html
+     */
+    libs?: boolean;
     apps: App[];
 }
 /**

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.3.1",
+  "version": "0.3.3",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -24,7 +24,7 @@
   "dependencies": {
     "ejs": "3.1.7",
     "@sap-ux/logger": "0.3.7",
-    "@sap-ux/adp-tooling": "0.1.1"
+    "@sap-ux/adp-tooling": "0.1.2"
   },
   "devDependencies": {
     "@types/ejs": "3.1.0",

package/templates/flp/locate-reuse-libs.js

@@ -0,0 +1,195 @@
+(function (sap) {
+    var fioriToolsGetManifestLibs = function (manifestPath) {
+        var url = manifestPath;
+        var result = "";
+        // SAPUI5 delivered namespaces from https://ui5.sap.com/#/api/sap
+        var ui5Libs = [
+            "sap.apf",
+            "sap.base",
+            "sap.chart",
+            "sap.collaboration",
+            "sap.f",
+            "sap.fe",
+            "sap.fileviewer",
+            "sap.gantt",
+            "sap.landvisz",
+            "sap.m",
+            "sap.ndc",
+            "sap.ovp",
+            "sap.rules",
+            "sap.suite",
+            "sap.tnt",
+            "sap.ui",
+            "sap.uiext",
+            "sap.ushell",
+            "sap.uxap",
+            "sap.viz",
+            "sap.webanalytics",
+            "sap.zen"
+        ];
+        function getKeys(libOrComp, libOrCompKeysString) {
+            var libOrCompKeysStringTmp = libOrCompKeysString;
+            Object.keys(libOrComp).forEach(function (libOrCompKey) {
+                // ignore libs or Components that start with SAPUI5 delivered namespaces
+                if (!ui5Libs.some(function (substring) { return libOrCompKey === substring || libOrCompKey.startsWith(substring + "."); })) {
+                    if (libOrCompKeysStringTmp.length > 0) {
+                        libOrCompKeysStringTmp = libOrCompKeysStringTmp + "," + libOrCompKey;
+                    } else {
+                        libOrCompKeysStringTmp = libOrCompKey;
+                    }
+                }
+            });
+            return libOrCompKeysStringTmp;
+        }
+        return new Promise(function (resolve, reject) {
+            $.ajax(url)
+                .done(function (manifest) {
+                    if (manifest) {
+                        if (
+                            manifest["sap.ui5"] &&
+                            manifest["sap.ui5"].dependencies
+                        ) {
+                            if (manifest["sap.ui5"].dependencies.libs) {
+                                result = getKeys(manifest["sap.ui5"].dependencies.libs, result);
+                            }
+                            if (manifest["sap.ui5"].dependencies.components) {
+                                result = getKeys(manifest["sap.ui5"].dependencies.components, result);
+                            }
+                        }
+                        if (
+                            manifest["sap.ui5"] &&
+                            manifest["sap.ui5"].componentUsages
+                        ) {
+                            result = getKeys(manifest["sap.ui5"].componentUsages, result);
+                        }
+                    }
+                    resolve(result);
+                })
+                .fail(function () {
+                    reject(new Error("Could not fetch manifest at '" + manifestPath));
+                });
+        });
+    };
+    function registerModules(dataFromAppIndex) {
+        Object.keys(dataFromAppIndex).forEach(function (moduleDefinitionKey) {
+            var moduleDefinition = dataFromAppIndex[moduleDefinitionKey];
+            if (moduleDefinition && moduleDefinition.dependencies) {
+                moduleDefinition.dependencies.forEach(function (dependency) {
+                    if (dependency.url && dependency.url.length > 0 && dependency.type === "UI5LIB") {
+                        sap.ui.require(["sap/base/Log"], function (Log) {
+                            Log.info("Registering Library " +
+                                dependency.componentId +
+                                " from server " +
+                                dependency.url);
+                        });
+                        var compId = dependency.componentId.replace(/\./g, "/");
+                        var config = {
+                            paths: {
+                            }
+                        };
+                        config.paths[compId] = dependency.url;
+                        sap.ui.loader.config(config);
+                    }
+                });
+            }
+        });
+    }
+    /**
+     * Registers the module paths for dependencies of the given component.
+     * @param {string} manifestPath The the path to the app manifest path
+     * for which the dependencies should be registered.
+     * @returns {Promise} A promise which is resolved when the ajax request for
+     * the app-index was successful and the module paths were registered.
+     */
+    sap.registerComponentDependencyPaths = function (manifestPath) {
+
+        return fioriToolsGetManifestLibs(manifestPath).then(function (libs) {
+            if (libs && libs.length > 0) {
+                var url = "/sap/bc/ui2/app_index/ui5_app_info?id=" + libs;
+                var sapClient = "";
+
+                return new Promise(
+                    function (resolve) {
+                        sap.ui.require(["sap/base/util/UriParameters"], function (UriParameters) {
+                            sapClient = UriParameters.fromQuery(window.location.search).get("sap-client");
+                            if (sapClient && sapClient.length === 3) {
+                                url = url + "&sap-client=" + sapClient;
+                            }
+                            resolve(url);
+                        });
+                    }).then(function (url2) {
+                        return $.ajax(url2).done(function (data) {
+                            if (data) {
+                                registerModules(data);
+                            }
+                        });
+                    });
+            } else {
+                return undefined;
+            }
+        });
+    };
+})(sap);
+
+/*eslint-disable fiori-custom/sap-browser-api-warning, fiori-custom/sap-no-dom-access*/
+var currentScript = document.getElementById("locate-reuse-libs");
+if (!currentScript) {
+    currentScript = document.currentScript;
+}
+var manifestUri = currentScript.getAttribute("data-sap-ui-manifest-uri");
+var componentName = currentScript.getAttribute("data-sap-ui-componentName");
+var useMockserver = currentScript.getAttribute("data-sap-ui-use-mockserver");
+
+sap.registerComponentDependencyPaths(manifestUri)
+    .catch(function (error) {
+        sap.ui.require(["sap/base/Log"], function (Log) {
+            Log.error(error);
+        });
+    })
+    .finally(function () {
+
+        // setting the app title with internationalization 
+        sap.ui.getCore().attachInit(function () {
+            var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
+            sap.ui.require(["sap/base/i18n/ResourceBundle"], function (ResourceBundle) {
+                var oResourceBundle = ResourceBundle.create({
+                    url: "i18n/i18n.properties",
+                    locale: sLocale
+                });
+                document.title = oResourceBundle.getText("appTitle");
+            });
+        });
+
+        if (componentName && componentName.length > 0) {
+            if (useMockserver && useMockserver === "true") {
+                sap.ui.getCore().attachInit(function () {
+                    sap.ui.require([componentName.replace(/\./g, "/") + "/localService/mockserver"], function (server) {
+                        // set up test service for local testing
+                        server.init();
+                        // initialize the ushell sandbox component
+                        sap.ushell.Container.createRenderer().placeAt("content");
+                    });
+                });
+            } else {
+                // Requiring the ComponentSupport module automatically executes the component initialisation for all declaratively defined components
+                sap.ui.require(["sap/ui/core/ComponentSupport"]);
+
+                // setting the app title with the i18n text 
+                sap.ui.getCore().attachInit(function () {
+                    var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
+                    sap.ui.require(["sap/base/i18n/ResourceBundle"], function (ResourceBundle) {
+                        var oResourceBundle = ResourceBundle.create({
+                            url: "i18n/i18n.properties",
+                            locale: sLocale
+                        });
+                        document.title = oResourceBundle.getText("appTitle");
+                    });
+                });
+            }
+        } else {
+            sap.ui.getCore().attachInit(function () {
+                // initialize the ushell sandbox component
+                sap.ushell.Container.createRenderer().placeAt("content");
+            });
+        }
+    });

package/templates/flp/sandbox.html

@@ -40,10 +40,10 @@
         };
     </script>
 
-    <script src="/test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>
+    <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="/resources/sap-ui-core.js"
+        src="<%- basePath %>/resources/sap-ui-core.js"
         data-sap-ui-libs="<%- ui5.libs %>"
         data-sap-ui-async="true"
         data-sap-ui-preload="async"