@sap-ux/preview-middleware 0.4.2 → 0.4.4

package/README.md

@@ -1,6 +1,7 @@
 #  `@sap-ux/preview-middleware`
 
 The `@sap-ux/preview-middleware` is a [Custom UI5 Server Middleware](https://sap.github.io/ui5-tooling/pages/extensibility/CustomServerMiddleware) for previewing an application in a local Fiori launchpad . It can be used either with the `ui5 serve` or the `fiori run` commands.
+It hosts a local Fiori launchpad based on your configuration as well as offers an API to modify flex changes in your project. The API is available at `/preview/api` and additional client code required for the preview is available at `/preview/client`.
 
 ## Configuration Options
 | Option                 | Type      | Default Value    | Description                                                                                                                         |
@@ -11,7 +12,7 @@ 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                                     |
+| `flp.libs`             | `boolean` | `undefined`      | Optional flag to add a generic script fetching the paths of used libraries not available in UI5. To disable set it to `false`, if not set, then the project is checked for a `load-reuse-libs` script and if available the libraries are fetched as well.                                    |
 | `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                                                                                                                |

package/dist/base/flp.d.ts

@@ -36,7 +36,7 @@ export interface TemplateConfig {
         layer: UI5FlexLayer;
         developerMode: boolean;
     };
-    locateReuseLibsScript?: string;
+    locateReuseLibsScript?: boolean;
 }
 /**
  * Class handling preview of a sandbox FLP.
@@ -74,7 +74,7 @@ export declare class FlpSandbox {
      *
      * @returns the location of the locate-reuse-libs script or undefined.
      */
-    private findLocateReuseLibsScript;
+    private hasLocateReuseLibsScript;
     /**
      * Add additional routes for apps also to be shown in the local FLP.
      */

package/dist/base/flp.js

@@ -23,10 +23,6 @@ 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
  */
@@ -34,6 +30,17 @@ const DEFAULT_INTENT = {
     object: 'app',
     action: 'preview'
 };
+/**
+ * Static settings
+ */
+const PREVIEW_URL = {
+    client: {
+        url: '/preview/client',
+        local: (0, path_1.join)(__dirname, '../../dist/client'),
+        ns: 'open.ux.preview.client'
+    },
+    api: '/preview/api'
+};
 /**
  * Class handling preview of a sandbox FLP.
  */
@@ -72,7 +79,7 @@ class FlpSandbox {
      * @param resources optional additional resource mappings
      */
     init(manifest, componentId, resources = {}) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         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];
@@ -83,15 +90,13 @@ class FlpSandbox {
                     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)
+                    resources: Object.assign(Object.assign({}, resources), { [PREVIEW_URL.client.ns]: PREVIEW_URL.client.url })
                 },
-                locateReuseLibsScript: this.config.libs
-                    ? `./${DEFAULT_LOCATE_LIBS_FILENAME}`
-                    : yield this.findLocateReuseLibsScript()
+                locateReuseLibsScript: (_g = this.config.libs) !== null && _g !== void 0 ? _g : (yield this.hasLocateReuseLibsScript())
             };
             this.addApp(manifest, {
                 componentId,
-                target: (_g = resources[componentId !== null && componentId !== void 0 ? componentId : manifest['sap.app'].id]) !== null && _g !== void 0 ? _g : this.templateConfig.basePath,
+                target: (_h = resources[componentId !== null && componentId !== void 0 ? componentId : manifest['sap.app'].id]) !== null && _h !== void 0 ? _h : this.templateConfig.basePath,
                 local: '.',
                 intent: this.config.intent
             });
@@ -105,6 +110,8 @@ class FlpSandbox {
      * Add routes for html and scripts required for a local FLP.
      */
     addStandardRoutes() {
+        // register static client sources
+        this.router.use(PREVIEW_URL.client.url, (0, express_1.static)(PREVIEW_URL.client.local));
         // add route for the sandbox.html
         this.router.get(this.config.path, ((req, res) => __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
@@ -137,31 +144,16 @@ class FlpSandbox {
                 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.
      */
-    findLocateReuseLibsScript() {
+    hasLocateReuseLibsScript() {
         return __awaiter(this, void 0, void 0, function* () {
             const files = yield this.project.byGlob('**/locate-reuse-libs.js');
-            if (files.length > 0) {
-                return files[0].getPath();
-            }
-            else {
-                return undefined;
-            }
+            return files.length > 0;
         });
     }
     /**
@@ -189,7 +181,7 @@ class FlpSandbox {
                 .contentType('text/javascript')
                 .send((0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/workspaceConnector.js'), 'utf-8'));
         });
-        const api = '/preview/api/changes';
+        const api = `${PREVIEW_URL.api}/changes`;
         this.router.use(api, (0, express_1.json)());
         this.router.get(api, ((_req, res) => __awaiter(this, void 0, void 0, function* () {
             res.status(200)

package/dist/client/flp/init.js

@@ -0,0 +1,216 @@
+"use strict";
+
+sap.ui.define(["sap/base/Log", "sap/ui/core/IconPool", "sap/base/i18n/ResourceBundle", "sap/base/util/UriParameters"], function (Log, IconPool, ResourceBundle, UriParameters) {
+  "use strict";
+
+  /**
+   * Fetch the manifest from the given application urls, then parse them for custom libs, and finally request their urls.
+   *
+   * @param appUrls application urls
+   * @returns returns a promise when the registration is completed.
+   */
+  const registerComponentDependencyPaths = function (appUrls) {
+    try {
+      return Promise.resolve(getManifestLibs(appUrls)).then(function (libs) {
+        const _temp = function () {
+          if (libs && libs.length > 0) {
+            let url = '/sap/bc/ui2/app_index/ui5_app_info?id=' + libs;
+            const sapClient = UriParameters.fromQuery(window.location.search).get('sap-client');
+            if (sapClient && sapClient.length === 3) {
+              url = url + '&sap-client=' + sapClient;
+            }
+            return Promise.resolve(fetch(url)).then(function (response) {
+              return Promise.resolve(response.json()).then(function (_response$json) {
+                registerModules(_response$json);
+              });
+            });
+          }
+        }();
+        if (_temp && _temp.then) return _temp.then(function () {});
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  /**
+   * Register SAP fonts that are also registered in a productive Fiori launchpad.
+   */
+  /**
+   * SAPUI5 delivered namespaces from https://ui5.sap.com/#/api/sap
+   */
+  const UI5_LIBS = ['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'];
+
+  /**
+   * Check whether a specific dependency is a custom library, and if yes, add it to the map.
+   *
+   * @param dependency dependency from the manifest
+   * @param customLibs map containing the required custom libraries
+   */
+  function addKeys(dependency, customLibs) {
+    Object.keys(dependency).forEach(function (key) {
+      // ignore libs or Components that start with SAPUI5 delivered namespaces
+      if (!UI5_LIBS.some(function (substring) {
+        return key === substring || key.startsWith(substring + '.');
+      })) {
+        customLibs[key] = true;
+      }
+    });
+  }
+
+  /**
+   * Fetch the manifest for all the given application urls and generate a string containing all required custom library ids.
+   *
+   * @param appUrls urls pointing to included applications
+   * @returns Promise of a comma separated list of all required libraries.
+   */
+  function getManifestLibs(appUrls) {
+    const result = {};
+    const promises = [];
+    for (const url of appUrls) {
+      promises.push(fetch(`${url}/manifest.json`).then(function (resp) {
+        try {
+          return Promise.resolve(resp.json()).then(function (manifest) {
+            if (manifest) {
+              if (manifest['sap.ui5'] && manifest['sap.ui5'].dependencies) {
+                if (manifest['sap.ui5'].dependencies.libs) {
+                  addKeys(manifest['sap.ui5'].dependencies.libs, result);
+                }
+                if (manifest['sap.ui5'].dependencies.components) {
+                  addKeys(manifest['sap.ui5'].dependencies.components, result);
+                }
+              }
+              if (manifest['sap.ui5'] && manifest['sap.ui5'].componentUsages) {
+                addKeys(manifest['sap.ui5'].componentUsages, result);
+              }
+            }
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }));
+    }
+    return Promise.all(promises).then(() => Object.keys(result).join(','));
+  }
+
+  /**
+   * Register the custom libraries and their url with the UI5 loader.
+   *
+   * @param dataFromAppIndex data returned from the app index service
+   */
+  function registerModules(dataFromAppIndex) {
+    Object.keys(dataFromAppIndex).forEach(function (moduleDefinitionKey) {
+      const moduleDefinition = dataFromAppIndex[moduleDefinitionKey];
+      if (moduleDefinition && moduleDefinition.dependencies) {
+        moduleDefinition.dependencies.forEach(function (dependency) {
+          if (dependency.url && dependency.url.length > 0 && dependency.type === 'UI5LIB') {
+            Log.info('Registering Library ' + dependency.componentId + ' from server ' + dependency.url);
+            const compId = dependency.componentId.replace(/\./g, '/');
+            const config = {
+              paths: {}
+            };
+            config.paths[compId] = dependency.url;
+            sap.ui.loader.config(config);
+          }
+        });
+      }
+    });
+  }
+  function registerSAPFonts() {
+    //Fiori Theme font family and URI
+    const fioriTheme = {
+      fontFamily: 'SAP-icons-TNT',
+      fontURI: sap.ui.require.toUrl('sap/tnt/themes/base/fonts/')
+    };
+    //Registering to the icon pool
+    IconPool.registerFont(fioriTheme);
+    //SAP Business Suite Theme font family and URI
+    const bSuiteTheme = {
+      fontFamily: 'BusinessSuiteInAppSymbols',
+      fontURI: sap.ui.require.toUrl('sap/ushell/themes/base/fonts/')
+    };
+    //Registering to the icon pool
+    IconPool.registerFont(bSuiteTheme);
+  }
+
+  /**
+   * Read the application title from the resource bundle and set it as document title.
+   */
+  function setI18nTitle() {
+    const locale = sap.ui.getCore().getConfiguration().getLanguage();
+    const resourceBundle = ResourceBundle.create({
+      url: 'i18n/i18n.properties',
+      locale
+    });
+    document.title = resourceBundle.getText('appTitle') ?? document.title;
+  }
+
+  /**
+   * Apply additional configuration.
+   *
+   * @param params init parameters read from the script tag
+   * @param params.appUrls JSON containing a string array of application urls
+   * @param params.flex JSON containing the flex configuration
+   * @returns promise
+   */
+  function configure(_ref) {
+    let {
+      appUrls,
+      flex
+    } = _ref;
+    // Register RTA if configured
+    if (flex) {
+      sap.ushell.Container.attachRendererCreatedEvent(function () {
+        try {
+          return Promise.resolve(sap.ushell.Container.getServiceAsync('AppLifeCycle')).then(function (serviceInstance) {
+            serviceInstance.attachAppLoaded(event => {
+              const oView = event.getParameter('componentInstance');
+              sap.ui.require(['sap/ui/rta/api/startAdaptation'], function (startAdaptation) {
+                const options = {
+                  rootControl: oView,
+                  validateAppVersion: false,
+                  flexSettings: JSON.parse(flex)
+                };
+                startAdaptation(options);
+              });
+            });
+          });
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      });
+    }
+
+    // Load custom library paths if configured
+    if (appUrls) {
+      return registerComponentDependencyPaths(JSON.parse(appUrls));
+    } else {
+      return Promise.resolve();
+    }
+  }
+
+  /**
+   * Initialize the FLP sandbox.
+   */
+  function init() {
+    setI18nTitle();
+    registerSAPFonts();
+    sap.ushell.Container.createRenderer().placeAt('content');
+  }
+  const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
+  if (bootstrapConfig) {
+    configure({
+      appUrls: bootstrapConfig.getAttribute('data-open-ux-preview-libs-manifests'),
+      flex: bootstrapConfig.getAttribute('data-open-ux-preview-flex-settings')
+    }).then(init).catch(() => Log.error('Sandbox initialization failed.'));
+  }
+  var __exports = {
+    __esModule: true
+  };
+  __exports.registerComponentDependencyPaths = registerComponentDependencyPaths;
+  __exports.registerSAPFonts = registerSAPFonts;
+  __exports.setI18nTitle = setI18nTitle;
+  __exports.configure = configure;
+  __exports.init = init;
+  return __exports;
+});
+//# sourceMappingURL=init.js.map

package/dist/client/flp/init.ts

@@ -0,0 +1,224 @@
+import Log from 'sap/base/Log';
+import type AppLifeCycle from 'sap/ushell/services/AppLifeCycle';
+import IconPool from 'sap/ui/core/IconPool';
+import ResourceBundle from 'sap/base/i18n/ResourceBundle';
+import UriParameters from 'sap/base/util/UriParameters';
+
+/**
+ * SAPUI5 delivered namespaces from https://ui5.sap.com/#/api/sap
+ */
+const UI5_LIBS = [
+    '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'
+];
+
+/**
+ * Check whether a specific dependency is a custom library, and if yes, add it to the map.
+ *
+ * @param dependency dependency from the manifest
+ * @param customLibs map containing the required custom libraries
+ */
+function addKeys(dependency: Record<string, unknown>, customLibs: Record<string, true>): void {
+    Object.keys(dependency).forEach(function (key) {
+        // ignore libs or Components that start with SAPUI5 delivered namespaces
+        if (
+            !UI5_LIBS.some(function (substring) {
+                return key === substring || key.startsWith(substring + '.');
+            })
+        ) {
+            customLibs[key] = true;
+        }
+    });
+}
+
+/**
+ * Fetch the manifest for all the given application urls and generate a string containing all required custom library ids.
+ *
+ * @param appUrls urls pointing to included applications
+ * @returns Promise of a comma separated list of all required libraries.
+ */
+function getManifestLibs(appUrls: string[]): Promise<string> {
+    const result = {} as Record<string, true>;
+    const promises = [];
+    for (const url of appUrls) {
+        promises.push(
+            fetch(`${url}/manifest.json`).then(async (resp) => {
+                const manifest = await resp.json();
+                if (manifest) {
+                    if (manifest['sap.ui5'] && manifest['sap.ui5'].dependencies) {
+                        if (manifest['sap.ui5'].dependencies.libs) {
+                            addKeys(manifest['sap.ui5'].dependencies.libs, result);
+                        }
+                        if (manifest['sap.ui5'].dependencies.components) {
+                            addKeys(manifest['sap.ui5'].dependencies.components, result);
+                        }
+                    }
+                    if (manifest['sap.ui5'] && manifest['sap.ui5'].componentUsages) {
+                        addKeys(manifest['sap.ui5'].componentUsages, result);
+                    }
+                }
+            })
+        );
+    }
+    return Promise.all(promises).then(() => Object.keys(result).join(','));
+}
+
+/**
+ * Register the custom libraries and their url with the UI5 loader.
+ *
+ * @param dataFromAppIndex data returned from the app index service
+ */
+function registerModules(
+    dataFromAppIndex: Record<
+        string,
+        {
+            dependencies?: {
+                url?: string;
+                type?: string;
+                componentId: string;
+            }[];
+        }
+    >
+) {
+    Object.keys(dataFromAppIndex).forEach(function (moduleDefinitionKey) {
+        const moduleDefinition = dataFromAppIndex[moduleDefinitionKey];
+        if (moduleDefinition && moduleDefinition.dependencies) {
+            moduleDefinition.dependencies.forEach(function (dependency) {
+                if (dependency.url && dependency.url.length > 0 && dependency.type === 'UI5LIB') {
+                    Log.info('Registering Library ' + dependency.componentId + ' from server ' + dependency.url);
+                    const compId = dependency.componentId.replace(/\./g, '/');
+                    const config = {
+                        paths: {} as Record<string, string>
+                    };
+                    config.paths[compId] = dependency.url;
+                    sap.ui.loader.config(config);
+                }
+            });
+        }
+    });
+}
+
+/**
+ * Fetch the manifest from the given application urls, then parse them for custom libs, and finally request their urls.
+ *
+ * @param appUrls application urls
+ * @returns returns a promise when the registration is completed.
+ */
+export async function registerComponentDependencyPaths(appUrls: string[]): Promise<void> {
+    const libs = await getManifestLibs(appUrls);
+    if (libs && libs.length > 0) {
+        let url = '/sap/bc/ui2/app_index/ui5_app_info?id=' + libs;
+        const sapClient = UriParameters.fromQuery(window.location.search).get('sap-client');
+        if (sapClient && sapClient.length === 3) {
+            url = url + '&sap-client=' + sapClient;
+        }
+        const response = await fetch(url);
+        registerModules(await response.json());
+    }
+}
+
+/**
+ * Register SAP fonts that are also registered in a productive Fiori launchpad.
+ */
+export function registerSAPFonts() {
+    //Fiori Theme font family and URI
+    const fioriTheme = {
+        fontFamily: 'SAP-icons-TNT',
+        fontURI: sap.ui.require.toUrl('sap/tnt/themes/base/fonts/')
+    };
+    //Registering to the icon pool
+    IconPool.registerFont(fioriTheme);
+    //SAP Business Suite Theme font family and URI
+    const bSuiteTheme = {
+        fontFamily: 'BusinessSuiteInAppSymbols',
+        fontURI: sap.ui.require.toUrl('sap/ushell/themes/base/fonts/')
+    };
+    //Registering to the icon pool
+    IconPool.registerFont(bSuiteTheme);
+}
+
+/**
+ * Read the application title from the resource bundle and set it as document title.
+ */
+export function setI18nTitle() {
+    const locale = sap.ui.getCore().getConfiguration().getLanguage();
+    const resourceBundle = ResourceBundle.create({
+        url: 'i18n/i18n.properties',
+        locale
+    }) as ResourceBundle;
+    document.title = resourceBundle.getText('appTitle') ?? document.title;
+}
+
+/**
+ * Apply additional configuration.
+ *
+ * @param params init parameters read from the script tag
+ * @param params.appUrls JSON containing a string array of application urls
+ * @param params.flex JSON containing the flex configuration
+ * @returns promise
+ */
+export function configure({ appUrls, flex }: { appUrls?: string | null; flex?: string | null }): Promise<void> {
+    // Register RTA if configured
+    if (flex) {
+        sap.ushell.Container.attachRendererCreatedEvent(async function () {
+            const serviceInstance = await sap.ushell.Container.getServiceAsync<AppLifeCycle>('AppLifeCycle');
+            serviceInstance.attachAppLoaded(event => {
+                const oView = event.getParameter('componentInstance');
+                sap.ui.require(['sap/ui/rta/api/startAdaptation'], function (startAdaptation: (opts: object) => void) {
+                    const options = {
+                        rootControl: oView,
+                        validateAppVersion: false,
+                        flexSettings: JSON.parse(flex)
+                    };
+                    startAdaptation(options);
+                });
+            });
+        });
+    }
+
+    // Load custom library paths if configured
+    if (appUrls) {
+        return registerComponentDependencyPaths(JSON.parse(appUrls));
+    } else {
+        return Promise.resolve();
+    }
+}
+
+/**
+ * Initialize the FLP sandbox.
+ */
+export function init() {
+    setI18nTitle();
+    registerSAPFonts();
+    sap.ushell.Container.createRenderer().placeAt('content');
+}
+
+const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
+if (bootstrapConfig) {
+    configure({
+        appUrls: bootstrapConfig.getAttribute('data-open-ux-preview-libs-manifests'),
+        flex: bootstrapConfig.getAttribute('data-open-ux-preview-flex-settings')
+    })
+        .then(init)
+        .catch(() => Log.error('Sandbox initialization failed.'));
+}

package/dist/client/manifest.json

@@ -0,0 +1,5 @@
+{
+    "sap.app": {
+        "id": "open.ux.preview.client"
+    }
+}

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.4.2",
+  "version": "0.4.4",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -31,11 +31,14 @@
     "@types/express": "4.17.17",
     "@types/prompts": "2.0.14",
     "@types/supertest": "2.0.12",
+    "copyfiles": "2.4.1",
+    "npm-run-all": "4.1.5",
     "express": "4.18.2",
     "nock": "13.2.1",
     "supertest": "6.3.3",
-    "@sap-ux/store": "0.3.12",
-    "@sap-ux/project-access": "1.13.2"
+    "@private/preview-middleware-client": "npm:@sap-ux-private/preview-middleware-client@0.1.0",
+    "@sap-ux/project-access": "1.13.2",
+    "@sap-ux/store": "0.3.12"
   },
   "peerDependencies": {
     "express": "4"
@@ -46,7 +49,9 @@
   },
   "scripts": {
     "start:fixture": "ui5 serve --config test/fixtures/simple-app/ui5.yaml",
-    "build": "tsc --build",
+    "build": "npm-run-all -l -p build:middleware build:client",
+    "build:middleware": "tsc --build",
+    "build:client": "copyfiles --exclude **/*-dbg.js --up 4 \"./node_modules/@private/preview-middleware-client/dist/**/*\" \"./dist/client\"",
     "watch": "tsc --watch",
     "clean": "rimraf dist test/test-output coverage *.tsbuildinfo",
     "format": "prettier --write '**/*.{js,json,ts,yaml,yml}' --ignore-path ../../.prettierignore",

package/templates/flp/sandbox.html

@@ -53,33 +53,10 @@
         data-sap-ui-flexibilityServices='<%- JSON.stringify(ui5.flex) %>'
         data-sap-ui-resourceroots='<%- JSON.stringify(ui5.resources) %>'
         data-sap-ui-frameOptions="allow"
-        data-sap-ui-xx-componentPreload="off">
-    </script><% if (locals.locateReuseLibsScript) { %>
-	<script id="locate-reuse-libs" src="<%- locateReuseLibsScript %>" data-sap-ui-manifest-uri="/manifest.json">
-	</script><% } %>
-    <script>
-        sap.ui.getCore().attachInit(function () {<% if (locals.flex) { %>
-            sap.ushell.Container.attachRendererCreatedEvent(function () {
-                sap.ushell.Container.getServiceAsync('AppLifeCycle').then((serviceInstance) => {
-                    serviceInstance.attachAppLoaded((event) => {
-                        var oView = event.getParameter('componentInstance');
-                        sap.ui.require(["sap/ui/rta/api/startAdaptation"], async function (startAdaptation) {
-                            var options = {
-                                rootControl: oView,
-                                validateAppVersion: false,
-                                flexSettings: {
-                                    layer: '<%- flex.layer %>',
-                                    developerMode: <%- flex.developerMode %>
-								}
-                            };
-                            await startAdaptation(options);
-                        });
-                    })
-                });
-            });<% } %>
-            <% if (!locals.locateReuseLibsScript) { %>
-			sap.ushell.Container.createRenderer().placeAt("content");<% } %>
-        });
+        data-sap-ui-xx-componentPreload="off"
+        data-sap-ui-oninit="module:open/ux/preview/client/flp/init"<% if (locals.flex) { %>
+        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>
 </head>
 

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

@@ -1,217 +0,0 @@
-(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);
-
-function registerSAPFonts() {  
-    sap.ui.require(["sap/ui/core/IconPool"], function (IconPool) {  
-    //Fiori Theme font family and URI
-    var fioriTheme = {
-        fontFamily: "SAP-icons-TNT",
-        fontURI: sap.ui.require.toUrl("sap/tnt/themes/base/fonts/")
-    };
-    //Registering to the icon pool
-    IconPool.registerFont(fioriTheme);
-    //SAP Business Suite Theme font family and URI
-    var bSuiteTheme = {
-        fontFamily: "BusinessSuiteInAppSymbols",
-        fontURI: sap.ui.require.toUrl("sap/ushell/themes/base/fonts/")
-    };
-    //Registering to the icon pool
-    IconPool.registerFont(bSuiteTheme);
-    });
-}
-
-/*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 () {
-                    registerSAPFonts();
-                    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 () {
-                    registerSAPFonts();
-                    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 () {
-                registerSAPFonts();
-                // initialize the ushell sandbox component
-                sap.ushell.Container.createRenderer().placeAt("content");
-            });
-        }
-    });