@sap-ux/preview-middleware 0.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,61 @@
+#  `@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.
+
+## Configuration Options
+| Option       | Type  | Default Value | Description |
+| ------------ | ------| ------------- | ----------- |
+| `flp`        |           |                  |Optional configuration object for the local Fiori launchpad |
+| `flp.path`   | `string`  | `/test/flp.html` | The mount point of the local Fiori launchpad. |
+| `flp.apps`   | `array`   | `[]`          | Optional additional local apps that are available in local Fiori launchpad |
+| `debug`      | `boolean` | false         | Enables debug output |
+
+### `flp.apps`
+Array of additional application configurations:
+| Option       | Type  | Default Value | Description |
+| ------------ | ------| ------------- | ----------- |
+| `target`        | `string` |  | Target path of the additional application |
+| `local`         | `string` |  | Local path to the folder containing the application |
+| `intent`        |          |  | Optional intent to be used for the application |
+| `intent.object` | `string` | `(calculated)`| Optional intent object, if it is not provided then it will be calculated based on the application id |
+| `intent.action` | `string` | `preview` | Optional intent action |
+
+## Usage
+The middleware can be used without configuration. However, since the middleware intercepts a few requests that might otherwise be handled by a different middleware, it is strongly recommended to run other file serving middlewares after the `preview-middleware` e.g. `backend-proxy-middleware` and `ui5-proxy-middleware` (and the corresponding middlewares in the `@sap/ux-ui5-tooling`).
+Example: [./test/fixtures/simple-app/ui5.yaml](./test/fixtures/simple-app/ui5.yaml) 
+
+### Minimal Configuration
+With no configuration provided, the app will be local FLP will be available at `/test/flp.html` and the log level is `info`.
+```Yaml
+server:
+  customMiddleware:
+  - name: preview-middleware
+    afterMiddleware: compression
+```
+
+### Different Path and Debugging enabled
+With this configuration, the app will be local FLP will be available at `/preview.html` and the log level is `debug`.
+```Yaml
+server:
+  customMiddleware:
+  - name: preview-middleware
+    afterMiddleware: compression
+    configuration:
+      flp: 
+        path: /preview.html
+      debug: true
+```
+
+### Additional Applications
+If you want to test cross application navigation, then you can add additional applications into the local FLP.
+With this configuration, an application that is locally available in `../local-folder` will be available at `/apps/other-app` and will also be added as tile to the local FLP.
+```Yaml
+server:
+  customMiddleware:
+  - name: preview-middleware
+    afterMiddleware: compression
+    configuration:
+      apps:
+        - local: ../local-folder
+          target: /apps/other-app
+```

package/dist/base/flex.d.ts

@@ -0,0 +1,43 @@
+import type { Logger } from '@sap-ux/logger';
+import type { ReaderCollection } from '@ui5/fs';
+/**
+ * Read changes from the file system and return them.
+ *
+ * @param project reference to the UI5 project
+ * @param logger logger instance
+ * @returns object with the file name as key and the file content as value
+ */
+export declare function readChanges(project: ReaderCollection, logger: Logger): Promise<Record<string, unknown>>;
+/**
+ * Writes flex changes to the user's workspace.
+ *
+ * @param data JS object to be stored as change
+ * @param data.fileName file name that is required for a valid change
+ * @param data.fileType file type that is required
+ * @param webappPath path to the webapp folder
+ * @param logger logger instance
+ * @returns object with success flag and optional message
+ */
+export declare function writeChange(data: object & {
+    fileName?: string;
+    fileType?: string;
+}, webappPath: string, logger: Logger): {
+    success: boolean;
+    message?: string;
+};
+/**
+ * Deletes an existing flex change from the file system if it exists.
+ *
+ * @param data JS object of the change to be deleted
+ * @param data.fileName file name that is required for a valid change
+ * @param webappPath path to the webapp folder
+ * @param logger logger instance
+ * @returns object with success flag and optional message
+ */
+export declare function deleteChange(data: object & {
+    fileName?: string;
+}, webappPath: string, logger: Logger): {
+    success: boolean;
+    message?: string;
+};
+//# sourceMappingURL=flex.d.ts.map

package/dist/base/flex.js

@@ -0,0 +1,96 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteChange = exports.writeChange = exports.readChanges = void 0;
+const fs_1 = require("fs");
+const path_1 = require("path");
+/**
+ * Read changes from the file system and return them.
+ *
+ * @param project reference to the UI5 project
+ * @param logger logger instance
+ * @returns object with the file name as key and the file content as value
+ */
+function readChanges(project, logger) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const changes = {};
+        const files = yield project.byGlob('/**/changes/*.*');
+        for (const file of files) {
+            try {
+                changes[`sap.ui.fl.${(0, path_1.parse)(file.getName()).name}`] = JSON.parse(yield file.getString());
+                logger.debug(`Read change from ${file.getPath()}`);
+            }
+            catch (error) {
+                logger.warn(error.message);
+            }
+        }
+        return changes;
+    });
+}
+exports.readChanges = readChanges;
+/**
+ * Writes flex changes to the user's workspace.
+ *
+ * @param data JS object to be stored as change
+ * @param data.fileName file name that is required for a valid change
+ * @param data.fileType file type that is required
+ * @param webappPath path to the webapp folder
+ * @param logger logger instance
+ * @returns object with success flag and optional message
+ */
+function writeChange(data, webappPath, logger) {
+    const fileName = data.fileName;
+    const fileType = data.fileType;
+    if (fileName && fileType) {
+        logger.debug(`Write change ${fileName}.${fileType}`);
+        const path = (0, path_1.join)(webappPath, 'changes');
+        if (!(0, fs_1.existsSync)(path)) {
+            (0, fs_1.mkdirSync)(path);
+        }
+        const filePath = (0, path_1.join)(path, fileName + '.' + fileType);
+        (0, fs_1.writeFileSync)(filePath, JSON.stringify(data, null, 2));
+        const message = `FILE_CREATED ${fileName}.${fileType}`;
+        return { success: true, message };
+    }
+    else {
+        return { success: false };
+    }
+}
+exports.writeChange = writeChange;
+/**
+ * Deletes an existing flex change from the file system if it exists.
+ *
+ * @param data JS object of the change to be deleted
+ * @param data.fileName file name that is required for a valid change
+ * @param webappPath path to the webapp folder
+ * @param logger logger instance
+ * @returns object with success flag and optional message
+ */
+function deleteChange(data, webappPath, logger) {
+    var _a;
+    const fileName = (_a = data.fileName) === null || _a === void 0 ? void 0 : _a.replace('sap.ui.fl.', '');
+    if (fileName) {
+        const path = (0, path_1.join)(webappPath, 'changes');
+        if ((0, fs_1.existsSync)(path)) {
+            const files = (0, fs_1.readdirSync)(path);
+            const file = files.find((element) => element.includes(fileName));
+            if (file) {
+                logger.debug(`Write change ${file}`);
+                const filePath = (0, path_1.join)(path, file);
+                (0, fs_1.unlinkSync)(filePath);
+                return { success: true, message: `FILE_DELETED ${file}` };
+            }
+        }
+    }
+    return { success: false };
+}
+exports.deleteChange = deleteChange;
+//# sourceMappingURL=flex.js.map

package/dist/base/flp.d.ts

@@ -0,0 +1,79 @@
+import type { ReaderCollection } from '@ui5/fs';
+import type { App, FlpConfig } from '../types';
+import type { Logger } from '@sap-ux/logger';
+import type { MiddlewareUtils } from '@ui5/server';
+import type { Manifest, UI5FlexLayer } from '@sap-ux/project-access';
+/**
+ * Internal structure used to fill the sandbox.html template
+ */
+export interface TemplateConfig {
+    apps: Record<string, {
+        title: string;
+        description: string;
+        additionalInformation: string;
+        applicationType: 'URL';
+        url: string;
+    }>;
+    ui5: {
+        libs: string;
+        theme: string;
+        flex: {
+            applyConnector: string;
+            writeConnector: string;
+            custom: boolean;
+        }[];
+        resources: Record<string, string>;
+    };
+    flex?: {
+        layer: UI5FlexLayer;
+        developerMode: boolean;
+    };
+    locateReuseLibsScript?: string;
+}
+/**
+ * Class handling preview of a sandbox FLP.
+ */
+export declare class FlpSandbox {
+    private readonly project;
+    private readonly utils;
+    private readonly logger;
+    protected templateConfig: TemplateConfig;
+    protected readonly config: FlpConfig;
+    readonly router: any;
+    /**
+     * Constructor setting defaults and keeping reference to workspace resources.
+     *
+     * @param config configuration from the ui5.yaml
+     * @param project reference to the project provided by the UI5 CLI
+     * @param utils middleware utilities provided by the UI5 CLI
+     * @param logger logger instance
+     */
+    constructor(config: Partial<FlpConfig>, project: ReaderCollection, utils: MiddlewareUtils, logger: Logger);
+    /**
+     * Initialize the FLP sandbox router.
+     *
+     * @param manifest application manifest
+     */
+    init(manifest: Manifest): Promise<void>;
+    /**
+     * Try finding the locate-reuse-libs script.
+     *
+     * @returns the location of the locate-reuse-libs script or undefined.
+     */
+    private findLocateReuseLibsScript;
+    private addRoutesForAdditionalApps;
+    /**
+     * Create required routes for flex.
+     *
+     * @returns template configuration for flex.
+     */
+    private createFlexHandler;
+    /**
+     * Add an application to the local FLP preview.
+     *
+     * @param manifest manifest of the additional target app
+     * @param app configuration for the preview
+     */
+    addApp(manifest: Manifest, app: App): void;
+}
+//# sourceMappingURL=flp.d.ts.map

package/dist/base/flp.js

@@ -0,0 +1,215 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlpSandbox = void 0;
+const ejs_1 = require("ejs");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const express_1 = require("express");
+const flex_1 = require("./flex");
+/**
+ * Default theme
+ */
+const DEFAULT_THEME = 'sap_horizon';
+/**
+ * Default path for mounting the local FLP.
+ */
+const DEFAULT_PATH = '/test/flp.html';
+/**
+ * Class handling preview of a sandbox FLP.
+ */
+class FlpSandbox {
+    /**
+     * Constructor setting defaults and keeping reference to workspace resources.
+     *
+     * @param config configuration from the ui5.yaml
+     * @param project reference to the project provided by the UI5 CLI
+     * @param utils middleware utilities provided by the UI5 CLI
+     * @param logger logger instance
+     */
+    constructor(config, project, utils, logger) {
+        var _a, _b;
+        this.project = project;
+        this.utils = utils;
+        this.logger = logger;
+        this.config = {
+            path: (_a = config.path) !== null && _a !== void 0 ? _a : DEFAULT_PATH,
+            apps: (_b = config.apps) !== null && _b !== void 0 ? _b : [],
+            rta: config.rta
+        };
+        logger.debug(`Config: ${JSON.stringify(this.config)}`);
+        this.router = (0, express_1.Router)();
+    }
+    /**
+     * Initialize the FLP sandbox router.
+     *
+     * @param manifest application manifest
+     */
+    init(manifest) {
+        var _a, _b, _c, _d, _e;
+        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 = {
+                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(','),
+                    theme: supportedThemes.includes(DEFAULT_THEME) ? DEFAULT_THEME : supportedThemes[0],
+                    flex,
+                    resources: {}
+                },
+                locateReuseLibsScript: yield this.findLocateReuseLibsScript()
+            };
+            this.addApp(manifest, {
+                target: '/',
+                local: '.',
+                intent: {
+                    object: 'app',
+                    action: 'preview'
+                }
+            });
+            // add route for the sandbox.html
+            this.router.get(this.config.path, (req, res) => {
+                var _a, _b;
+                const config = Object.assign({}, this.templateConfig);
+                if (req.query['fiori-tools-rta-mode']) {
+                    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: false
+                        };
+                    }
+                    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.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.
+     *
+     * @returns the location of the locate-reuse-libs script or undefined.
+     */
+    findLocateReuseLibsScript() {
+        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;
+            }
+        });
+    }
+    addRoutesForAdditionalApps() {
+        for (const app of this.config.apps) {
+            if (app.local) {
+                const manifest = JSON.parse((0, fs_1.readFileSync)((0, path_1.join)(app.local, 'webapp/manifest.json'), 'utf-8'));
+                this.addApp(manifest, app);
+                this.router.use(app.target, (0, express_1.static)((0, path_1.join)(app.local, 'webapp')));
+                this.logger.info(`Serving additional application at ${app.target} from ${app.local}`);
+            }
+        }
+    }
+    /**
+     * Create required routes for flex.
+     *
+     * @returns template configuration for flex.
+     */
+    createFlexHandler() {
+        const workspaceConnectorPath = '/preview/WorkspaceConnector';
+        this.router.get(`/resources${workspaceConnectorPath}.js`, (_req, res) => {
+            res.status(200)
+                .contentType('text/javascript')
+                .send((0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/workspaceConnector.js'), 'utf-8'));
+        });
+        const api = '/preview/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)
+                .contentType('application/json')
+                .send(yield (0, flex_1.readChanges)(this.project, this.logger));
+        }));
+        this.router.post(api, (req, res) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const { success, message } = (0, flex_1.writeChange)(req.body, this.utils.getProject().getSourcePath(), this.logger);
+                if (success) {
+                    res.status(200).send(message);
+                }
+                else {
+                    res.status(400).send('INVALID_DATA');
+                }
+            }
+            catch (error) {
+                res.status(500).send(error.message);
+            }
+        }));
+        this.router.delete(api, (req, res) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const { success, message } = (0, flex_1.deleteChange)(req.body, this.utils.getProject().getSourcePath(), this.logger);
+                if (success) {
+                    res.status(200).send(message);
+                }
+                else {
+                    res.status(400).send('INVALID_DATA');
+                }
+            }
+            catch (error) {
+                res.status(500).send(error.message);
+            }
+        }));
+        return [
+            {
+                applyConnector: workspaceConnectorPath,
+                writeConnector: workspaceConnectorPath,
+                custom: true
+            }
+        ];
+    }
+    /**
+     * Add an application to the local FLP preview.
+     *
+     * @param manifest manifest of the additional target app
+     * @param app configuration for the preview
+     */
+    addApp(manifest, app) {
+        var _a, _b, _c, _d, _e;
+        const id = manifest['sap.app'].id;
+        (_a = app.intent) !== null && _a !== void 0 ? _a : (app.intent = {
+            object: id.replace(/\./g, ''),
+            action: 'preview'
+        });
+        this.templateConfig.ui5.resources[id] = app.target;
+        this.templateConfig.apps[`${(_b = app.intent) === null || _b === void 0 ? void 0 : _b.object}-${(_c = app.intent) === null || _c === void 0 ? void 0 : _c.action}`] = {
+            title: (_d = manifest['sap.app'].title) !== null && _d !== void 0 ? _d : id,
+            description: (_e = manifest['sap.app'].description) !== null && _e !== void 0 ? _e : '',
+            additionalInformation: `SAPUI5.Component=${id}`,
+            applicationType: 'URL',
+            url: app.target
+        };
+    }
+}
+exports.FlpSandbox = FlpSandbox;
+//# sourceMappingURL=flp.js.map

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ui5/middleware';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ui5/middleware"), exports);
+//# sourceMappingURL=index.js.map

package/dist/types/index.d.ts

@@ -0,0 +1,30 @@
+import type { UI5FlexLayer } from '@sap-ux/project-access';
+/**
+ * Configuration for additional applications
+ */
+export interface App {
+    target: string;
+    local: string;
+    intent?: {
+        object: string;
+        action: string;
+    };
+}
+/**
+ * FLP preview configuration.
+ */
+export interface FlpConfig {
+    path: string;
+    rta?: {
+        layer?: UI5FlexLayer;
+    };
+    apps: App[];
+}
+/**
+ * Middleware configuration.
+ */
+export interface Config {
+    flp?: Partial<FlpConfig>;
+    debug?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=index.js.map

package/dist/ui5/middleware.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=middleware.d.ts.map

package/dist/ui5/middleware.js

@@ -0,0 +1,63 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const logger_1 = require("@sap-ux/logger");
+const flp_1 = require("../base/flp");
+/**
+ * Create the router that is to be exposed as UI5 middleware.
+ *
+ * @param param0 parameters provider by UI5
+ * @param param0.resources reference to resources
+ * @param param0.options options and configurations from the ui5.yaml
+ * @param param0.middlewareUtil additional UI5 CLI utilities
+ * @param logger logger instance
+ * @returns a router
+ */
+function createRouter({ resources, options, middlewareUtil }, logger) {
+    var _a, _b;
+    return __awaiter(this, void 0, void 0, function* () {
+        // setting defaults
+        const config = (_a = options.configuration) !== null && _a !== void 0 ? _a : {};
+        (_b = config.flp) !== null && _b !== void 0 ? _b : (config.flp = {});
+        // configure the FLP sandbox based on information from the manifest
+        const flp = new flp_1.FlpSandbox(config.flp, resources.rootProject, middlewareUtil, logger);
+        const files = yield resources.rootProject.byGlob('/manifest.json');
+        if (files.length === 1) {
+            yield flp.init(JSON.parse(yield files[0].getString()));
+        }
+        else {
+            throw new Error('No manifest.json found.');
+        }
+        return flp.router;
+    });
+}
+/**
+ * Exporting the middleware for usage in the UI5 tooling.
+ *
+ * @param params middleware configuration
+ * @returns a promise for the request handler
+ */
+module.exports = (params) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const logger = new logger_1.ToolsLogger({
+        transports: [new logger_1.UI5ToolingTransport({ moduleName: 'preview-middleware' })],
+        logLevel: ((_a = params.options.configuration) === null || _a === void 0 ? void 0 : _a.debug) ? logger_1.LogLevel.Debug : logger_1.LogLevel.Info
+    });
+    try {
+        return yield createRouter(params, logger);
+    }
+    catch (error) {
+        logger.error('Could not start preview-middleware.');
+        logger.error(error.message);
+        throw error;
+    }
+});
+//# sourceMappingURL=middleware.js.map

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@sap-ux/preview-middleware",
+  "description": "Preview middleware",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SAP/open-ux-tools.git",
+    "directory": "packages/preview-middleware"
+  },
+  "bugs": {
+    "url": "https://github.com/SAP/open-ux-tools/issues?q=is%3Aopen+is%3Aissue+label%3Abug+label%3Apreview-middleware"
+  },
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "author": "@SAP/ux-tools-team",
+  "main": "dist/index.js",
+  "files": [
+    "LICENSE",
+    "dist",
+    "templates",
+    "ui5.yaml",
+    "!dist/*.map",
+    "!dist/**/*.map"
+  ],
+  "dependencies": {
+    "ejs": "3.1.7",
+    "@sap-ux/logger": "0.3.7"
+  },
+  "devDependencies": {
+    "@types/ejs": "3.1.0",
+    "@types/express": "4.17.13",
+    "@types/supertest": "2.0.12",
+    "express": "4.18.2",
+    "supertest": "6.3.2",
+    "@sap-ux/project-access": "1.10.0"
+  },
+  "peerDependencies": {
+    "express": "4"
+  },
+  "engines": {
+    "pnpm": ">=6.26.1 < 7.0.0 || >=7.1.0",
+    "node": ">= 14.16.0 < 15.0.0 || >=16.1.0 < 17.0.0 || >=18.0.0 < 19.0.0"
+  },
+  "scripts": {
+    "start:fixture": "ui5 serve --config test/fixtures/simple-app/ui5.yaml",
+    "build": "tsc --build",
+    "watch": "tsc --watch",
+    "clean": "rimraf dist test/test-output coverage *.tsbuildinfo",
+    "format": "prettier --write '**/*.{js,json,ts,yaml,yml}' --ignore-path ../../.prettierignore",
+    "lint": "eslint . --ext .ts",
+    "lint:fix": "eslint . --ext .ts --fix",
+    "test": "jest --ci --forceExit --detectOpenHandles --colors",
+    "test-u": "jest --ci --forceExit --detectOpenHandles --colors -u",
+    "link": "pnpm link --global",
+    "unlink": "pnpm unlink --global"
+  }
+}

package/templates/flp/sandbox.html

@@ -0,0 +1,90 @@
+<!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 src="/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"
+        data-sap-ui-libs="<%- ui5.libs %>"
+        data-sap-ui-async="true"
+        data-sap-ui-preload="async"
+        data-sap-ui-theme="<%- ui5.theme %>"
+        data-sap-ui-compatVersion="edge"
+        data-sap-ui-language="en"
+        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");<% } %>
+        });
+    </script>
+</head>
+
+<!-- UI Content -->
+<body class="sapUiBody" id="content">
+</body>
+
+</html>

package/templates/flp/workspaceConnector.js

@@ -0,0 +1,76 @@
+sap.ui.define(
+    [
+        'sap/base/util/merge',
+        'sap/ui/fl/write/api/connectors/ObjectStorageConnector',
+        'sap/ui/fl/Layer',
+        'sap/base/util/UriParameters'
+    ],
+    function (merge, ObjectStorageConnector, Layer, UriParameters) {
+        'use strict';
+        var url = new URL(window.location.toString());
+        var uriParameters = UriParameters.fromURL(url.href);
+        var rtaMode = uriParameters.get('fiori-tools-rta-mode');
+        var generator =
+            rtaMode === 'forAdaptation'
+                ? 'changeUtils: SAPFioriTools-propertyEditor'
+                : 'changeUtils: SAPFioriTools-variants';
+        var path = '/preview/api/changes'; 
+        var WorkspaceConnector = merge({}, ObjectStorageConnector, {
+            layers: [Layer.VENDOR, Layer.CUSTOMER_BASE],
+            storage: {
+                _itemsStoredAsObjects: true,
+                setItem: function (_sKey, vValue) {
+                    // update generator
+                    if (vValue && vValue.support) {
+                        vValue.support.generator = generator;
+                    }
+                    $.ajax({
+                        type: 'POST',
+                        url: path,
+                        data: JSON.stringify(vValue, null, 2),
+                        contentType: 'application/json'
+                    });
+                },
+                removeItem: function (sKey) {
+                    $.ajax({
+                        type: 'DELETE',
+                        url: path,
+                        data: JSON.stringify({ fileName: sKey }),
+                        contentType: 'application/json'
+                    });
+                },
+                clear: function () {
+                    // not implemented
+                },
+                getItem: function (_sKey) {
+                    // not implemented
+                },
+                getItems: async function () {
+                    const changes = await $.ajax({
+                        url: path,
+                        type: 'GET',
+                        cache: false,
+                        dataType: 'json'
+                    });
+                    return changes;
+                }
+            },
+            loadFeatures: function () {
+                return ObjectStorageConnector.loadFeatures().then(function (settings) {
+                    const [majorVersion, minorVersion] = sap.ui.version.split('.').map((v) => parseInt(v, 10));
+                    if (majorVersion >= 1 && minorVersion >= 90) {
+                        settings.isVariantAdaptationEnabled = true;
+                    }
+
+                    if (rtaMode === 'forAdaptation') {
+                        settings.isVariantAdaptationEnabled = false;
+                    }
+                    return settings;
+                });
+            }
+        });
+
+        return WorkspaceConnector;
+    },
+    true
+);

package/ui5.yaml

@@ -0,0 +1,7 @@
+specVersion: '3.0'
+metadata:
+    name: preview-middleware
+kind: extension
+type: server-middleware
+middleware:
+    path: dist/ui5/middleware.js