@sap-ux/preview-middleware 0.4.5 → 0.5.0

package/README.md

@@ -11,10 +11,15 @@ It hosts a local Fiori launchpad based on your configuration as well as offers a
 | `flp.intent`           |           |                  | Optional intent to be used for the application                                                                                      |
 | `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` | `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.                                    |
+| `flp.apps`             | `array`   | `undefined`      | Optional additional local apps that are available in local Fiori launchpad                                                          |
+| `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 |
+| `rta`                  |           |                  | Optional configuration allowing to add mount points for runtime adaptation                                                          |
+| `rta.layer`            | `string`  | `(calculated)`   | Optional property for defining the runtime adaptation layer for changes (default is `CUSTOMER_BASE` or read from the project for adaptation projects) |
+| `rta.editors`          | `array`   | `undefined`      | Optional list of mount points for editing                                                                                           |
+
+
 | `debug`                | `boolean` | `false`          | Enables debug output                                                                                                                |
 
 ### `flp.apps`
@@ -35,6 +40,13 @@ Array of additional application configurations:
 | `client`      | `string` optional              | sap-client parameter                                                                                                                            |
 | `scp`         | `boolean` optional             | If set to true the proxy will execute the required OAuth routine for the ABAP environment on SAP BTP                                            |
 
+### `rta.editors`
+| Option          | Type               | Description                                                                                    |
+| --------------- | -------------------| -----------------------------------------------------------------------------------------------|
+| `path`          | `string` mandatory | The mount point to be used for the editor.                                                     |
+| `developerMode` | `boolean` optional | Enables/disables the runtime adaptation developer mode (only supported for adaptation projects |
+
+
 ## 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) 
@@ -75,8 +87,23 @@ server:
           target: /apps/other-app
 ```
 
+### Runtime Adaptation Support
+If you want to create variants as part of your application, then you can create an additional mount point allowing to created and edit variants.
+```Yaml
+server:
+  customMiddleware:
+  - name: preview-middleware
+    afterMiddleware: compression
+    configuration:
+      rta:
+        layer: CUSTOMER_BASE
+        editors:
+          - path: /local/variant-editor.html
+```
+
+
 ### Adaptation Project
-If you want to use the middleware in an adaption project, the additional `adp` object needs to be configured. This example would preview a local adaptation project merged with its reference application from the target system at `http://sap.example` and it will ignore certification validation errors.
+If you want to use the middleware in an adaption project, the additional `adp` object needs to be configured. This example would preview a local adaptation project merged with its reference application from the target system at `http://sap.example` and it will ignore certification validation errors. For adaptation projects, it is also recommended to add the `rta` configuration allowing to edit the project.
 ```Yaml
 server:
   customMiddleware:
@@ -87,11 +114,16 @@ server:
         target: 
           url: http://sap.example
         ignoreCertErrors: true
+      rta:
+        editors:
+          - path: /adp/editor.html
+            developerMode: true
 ```
+
 ### Programmatic Usage
 Alternatively you can use the underlying middleware fuction programmatically, e.g. for the case when you want to incorporate the `preview-middleware` functionality in your own middleware.
 
-```
+```typescript
 import { FlpSandbox } from '@sap-ux/preview-middleware';
 const flp = new FlpSandbox(flpConfig, rootProject, middlewareUtil, logger);
 const files = await resources.rootProject.byGlob('/manifest.json');
@@ -99,7 +131,7 @@ flp.init(JSON.parse(await files[0].getString()));
 
 return flp.router
 ```
-- `flpConfig` - the FLP configuration
+- `flpConfig` - the middleware configuration
 - `rootProject` - [Reader](https://sap.github.io/ui5-tooling/stable/api/@ui5_fs_AbstractReader.html) to access resources of the root project
 - `middlewareUtil` - [MiddlewareUtil](https://sap.github.io/ui5-tooling/v3/api/@ui5_server_middleware_MiddlewareUtil.html) of the UI5 server
-- `logger` - Logger instance for use in the middleware.
+- `logger` - Logger instance for use in the middleware.

package/dist/base/flp.d.ts

@@ -1,6 +1,6 @@
 import type { ReaderCollection } from '@ui5/fs';
 import type { Router } from 'express';
-import type { App, FlpConfig } from '../types';
+import type { App, FlpConfig, MiddlewareConfig, RtaConfig } from '../types';
 import type { Logger } from '@sap-ux/logger';
 import type { MiddlewareUtils } from '@ui5/server';
 import type { Manifest, UI5FlexLayer } from '@sap-ux/project-access';
@@ -33,8 +33,10 @@ export interface TemplateConfig {
         resources: Record<string, string>;
     };
     flex?: {
+        [key: string]: unknown;
         layer: UI5FlexLayer;
         developerMode: boolean;
+        pluginScript?: string;
     };
     locateReuseLibsScript?: boolean;
 }
@@ -47,6 +49,7 @@ export declare class FlpSandbox {
     private readonly logger;
     protected templateConfig: TemplateConfig;
     readonly config: FlpConfig;
+    readonly rta?: RtaConfig;
     readonly router: EnhancedRouter;
     /**
      * Constructor setting defaults and keeping reference to workspace resources.
@@ -56,7 +59,7 @@ export declare class FlpSandbox {
      * @param utils middleware utilities provided by the UI5 CLI
      * @param logger logger instance
      */
-    constructor(config: Partial<FlpConfig>, project: ReaderCollection, utils: MiddlewareUtils, logger: Logger);
+    constructor(config: Partial<MiddlewareConfig>, project: ReaderCollection, utils: MiddlewareUtils, logger: Logger);
     /**
      * Initialize the FLP sandbox router.
      *
@@ -65,6 +68,12 @@ export declare class FlpSandbox {
      * @param resources optional additional resource mappings
      */
     init(manifest: Manifest, componentId?: string, resources?: Record<string, string>): Promise<void>;
+    /**
+     * Add additional routes for configured editors.
+     *
+     * @param rta runtime authoring configuration
+     */
+    private addEditorRoutes;
     /**
      * Add routes for html and scripts required for a local FLP.
      */

package/dist/base/flp.js

@@ -54,21 +54,21 @@ class FlpSandbox {
      * @param logger logger instance
      */
     constructor(config, project, utils, logger) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.project = project;
         this.utils = utils;
         this.logger = logger;
         this.config = {
-            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,
-            libs: config.libs
+            path: (_b = (_a = config.flp) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : DEFAULT_PATH,
+            intent: (_d = (_c = config.flp) === null || _c === void 0 ? void 0 : _c.intent) !== null && _d !== void 0 ? _d : DEFAULT_INTENT,
+            apps: (_f = (_e = config.flp) === null || _e === void 0 ? void 0 : _e.apps) !== null && _f !== void 0 ? _f : [],
+            libs: (_g = config.flp) === null || _g === void 0 ? void 0 : _g.libs
         };
         if (!this.config.path.startsWith('/')) {
             this.config.path = `/${this.config.path}`;
         }
-        logger.debug(`Config: ${JSON.stringify(this.config)}`);
+        this.rta = config.rta;
+        logger.debug(`Config: ${JSON.stringify({ flp: this.config, rta: this.rta })}`);
         this.router = (0, express_1.Router)();
     }
     /**
@@ -79,7 +79,8 @@ class FlpSandbox {
      * @param resources optional additional resource mappings
      */
     init(manifest, componentId, resources = {}) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _k;
         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];
@@ -101,11 +102,45 @@ class FlpSandbox {
                 intent: this.config.intent
             });
             this.addStandardRoutes();
+            if (this.rta) {
+                (_j = (_k = this.rta).options) !== null && _j !== void 0 ? _j : (_k.options = {});
+                this.rta.options.baseId = componentId !== null && componentId !== void 0 ? componentId : manifest['sap.app'].id;
+                this.addEditorRoutes(this.rta);
+            }
             this.addRoutesForAdditionalApps();
             this.logger.info(`Initialized for app ${manifest['sap.app'].id}`);
             this.logger.debug(`Configured apps: ${JSON.stringify(this.templateConfig.apps)}`);
         });
     }
+    /**
+     * Add additional routes for configured editors.
+     *
+     * @param rta runtime authoring configuration
+     */
+    addEditorRoutes(rta) {
+        var _a;
+        for (const editor of rta.editors) {
+            let previewUrl = editor.path;
+            if (editor.developerMode) {
+                previewUrl = `${previewUrl}.inner.html`;
+                (_a = editor.pluginScript) !== null && _a !== void 0 ? _a : (editor.pluginScript = 'open/ux/preview/client/cpe/init');
+                this.router.get(editor.path, ((_req, res) => __awaiter(this, void 0, void 0, function* () {
+                    const template = (0, fs_1.readFileSync)((0, path_1.join)(__dirname, '../../templates/flp/editor.html'), 'utf-8');
+                    const html = (0, ejs_1.render)(template, {
+                        previewUrl: `${previewUrl}?sap-ui-xx-viewCache=false&fiori-tools-rta-mode=forAdaptation&sap-ui-rta-skip-flex-validation=true&sap-ui-xx-condense-changes=true#${this.config.intent.object}-${this.config.intent.action}`
+                    });
+                    res.status(200).contentType('html').send(html);
+                })));
+            }
+            this.router.get(previewUrl, ((_req, res) => __awaiter(this, void 0, void 0, function* () {
+                const config = Object.assign({}, this.templateConfig);
+                config.flex = Object.assign(Object.assign({ layer: rta.layer }, rta.options), { developerMode: editor.developerMode === true, pluginScript: editor.pluginScript });
+                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);
+                res.status(200).contentType('html').send(html);
+            })));
+        }
+    }
     /**
      * Add routes for html and scripts required for a local FLP.
      */
@@ -114,27 +149,13 @@ class FlpSandbox {
         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;
-            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.');
-                }
-            }
             // warn the user if a file with the same name exists in the filesystem
             const file = yield this.project.byPath(this.config.path);
             if (file) {
                 this.logger.warn(`HTML file returned at ${this.config.path} is NOT loaded from the file system.`);
             }
             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);
+            const html = (0, ejs_1.render)(template, this.templateConfig);
             // if livereload is enabled, don't send it but let other middleware modify the content
             if (res._livereload) {
                 res.write(html);

package/dist/client/adp/init.js

@@ -0,0 +1,18 @@
+"use strict";
+
+sap.ui.define(["../cpe/init", "sap/base/Log"], function (__init, log) {
+  "use strict";
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule && typeof obj.default !== "undefined" ? obj.default : obj;
+  }
+  const init = _interopRequireDefault(__init);
+  var __exports = function (rta) {
+    // custom adaptation project plugin code goes here
+    log.debug('ADP init executed.');
+    // also initialize the editor
+    init(rta);
+  };
+  return __exports;
+});
+//# sourceMappingURL=init.js.map

package/dist/client/adp/init.ts

@@ -0,0 +1,10 @@
+import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+import init from '../cpe/init';
+import log from 'sap/base/Log';
+
+export default function(rta: RuntimeAuthoring) {
+    // custom adaptation project plugin code goes here
+    log.debug('ADP init executed.');
+    // also initialize the editor
+    init(rta);
+}

package/dist/client/cpe/init.js

@@ -0,0 +1,12 @@
+"use strict";
+
+sap.ui.define(["sap/base/Log"], function (log) {
+  "use strict";
+
+  var __exports = function (rta) {
+    // custom rta plugin code goes here
+    log.debug(`Editor start with following settings: ${rta.getFlexSettings()}}`);
+  };
+  return __exports;
+});
+//# sourceMappingURL=init.js.map

package/dist/client/cpe/init.ts

@@ -0,0 +1,7 @@
+import log from 'sap/base/Log';
+import type RuntimeAuthoring from 'sap/ui/rta/RuntimeAuthoring';
+
+export default function(rta: RuntimeAuthoring) {
+    // custom rta plugin code goes here
+    log.debug(`Editor start with following settings: ${rta.getFlexSettings()}}`);
+}

package/dist/client/flp/init.js

@@ -164,13 +164,19 @@ sap.ui.define(["sap/base/Log", "sap/ui/core/IconPool", "sap/base/i18n/ResourceBu
           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 requiredLibs = ['sap/ui/rta/api/startAdaptation'];
+              const flexSettings = JSON.parse(flex);
+              if (flexSettings.pluginScript) {
+                requiredLibs.push(flexSettings.pluginScript);
+                delete flexSettings.pluginScript;
+              }
+              sap.ui.require(requiredLibs, function (startAdaptation, pluginScript) {
                 const options = {
                   rootControl: oView,
                   validateAppVersion: false,
-                  flexSettings: JSON.parse(flex)
+                  flexSettings
                 };
-                startAdaptation(options);
+                startAdaptation(options, pluginScript);
               });
             });
           });

package/dist/client/flp/init.ts

@@ -1,5 +1,6 @@
 import Log from 'sap/base/Log';
 import type AppLifeCycle from 'sap/ushell/services/AppLifeCycle';
+import type { RTAPlugin, StartAdaptation } from 'sap/ui/rta/api/startAdaptation';
 import IconPool from 'sap/ui/core/IconPool';
 import ResourceBundle from 'sap/base/i18n/ResourceBundle';
 import UriParameters from 'sap/base/util/UriParameters';
@@ -184,13 +185,19 @@ export function configure({ appUrls, flex }: { appUrls?: string | null; flex?: s
             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 requiredLibs = ['sap/ui/rta/api/startAdaptation'];
+                const flexSettings = JSON.parse(flex);
+                if (flexSettings.pluginScript) {
+                    requiredLibs.push(flexSettings.pluginScript);
+                    delete flexSettings.pluginScript;
+                }
+                sap.ui.require(requiredLibs, function (startAdaptation: StartAdaptation, pluginScript?: RTAPlugin) {
                     const options = {
                         rootControl: oView,
                         validateAppVersion: false,
-                        flexSettings: JSON.parse(flex)
+                        flexSettings
                     };
-                    startAdaptation(options);
+                    startAdaptation(options, pluginScript);
                 });
             });
         });

package/dist/types/index.d.ts

@@ -19,15 +19,23 @@ export interface App {
     componentId?: string;
     intent?: Intent;
 }
+export interface RtaConfig {
+    layer: UI5FlexLayer;
+    options?: {
+        [key: string]: unknown;
+    };
+    editors: {
+        path: string;
+        developerMode?: boolean;
+        pluginScript?: string;
+    }[];
+}
 /**
  * FLP preview configuration.
  */
 export interface FlpConfig {
     path: string;
     intent: Intent;
-    rta?: {
-        layer?: UI5FlexLayer;
-    };
     /**
      * Optional: if set to true then a locate-reuse-libs script will be attached to the html
      */
@@ -37,8 +45,9 @@ export interface FlpConfig {
 /**
  * Middleware configuration.
  */
-export interface Config {
+export interface MiddlewareConfig {
     flp?: Partial<FlpConfig>;
+    rta?: RtaConfig;
     adp?: AdpPreviewConfig;
     debug?: boolean;
 }

package/dist/ui5/middleware.js

@@ -21,12 +21,23 @@ const adp_tooling_1 = require("@sap-ux/adp-tooling");
  * @param logger logger instance
  */
 function initAdp(rootProject, config, flp, logger) {
+    var _a;
     return __awaiter(this, void 0, void 0, function* () {
         const appVariant = yield rootProject.byPath('/manifest.appdescr_variant');
         if (appVariant) {
             const adp = new adp_tooling_1.AdpPreview(config, rootProject, logger);
-            const layer = yield adp.init(JSON.parse(yield appVariant.getString()));
-            flp.config.rta = { layer };
+            const variant = JSON.parse(yield appVariant.getString());
+            const layer = yield adp.init(variant);
+            logger.warn(variant);
+            if (flp.rta) {
+                flp.rta.layer = layer;
+                flp.rta.options = {
+                    projectId: variant.id
+                };
+                for (const editor of flp.rta.editors) {
+                    (_a = editor.pluginScript) !== null && _a !== void 0 ? _a : (editor.pluginScript = 'open/ux/preview/client/adp/init');
+                }
+            }
             yield flp.init(adp.descriptor.manifest, adp.descriptor.name, adp.resources);
             flp.router.use(adp.descriptor.url, adp.proxy.bind(adp));
         }
@@ -52,7 +63,7 @@ function createRouter({ resources, options, middlewareUtil }, logger) {
         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 flp = new flp_1.FlpSandbox(config, resources.rootProject, middlewareUtil, logger);
         if (config.adp) {
             yield initAdp(resources.rootProject, config.adp, flp, logger);
         }

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.5",
+  "version": "0.5.0",
   "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.8"
+    "@sap-ux/adp-tooling": "0.2.0"
   },
   "devDependencies": {
     "@types/ejs": "3.1.0",
@@ -51,7 +51,7 @@
     "start:fixture": "ui5 serve --config test/fixtures/simple-app/ui5.yaml",
     "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\"",
+    "build:client": "pnpm -C ../preview-middleware-client run build && 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/editor.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Web page for rendering Open UX Tools Control Property Editor" />
+        <link rel="shortcut icon" type="image/x-icon" href="./editor/favicon.ico" />
+        <link rel="stylesheet" type="text/css" href="./editor/app.css" />
+        <title>Control Property Editor</title>
+        <style>
+            body, html {
+                margin: 0;
+                padding: 0;
+                height: 100%;
+                overflow: hidden;
+            }
+            iframe {
+                width: 100%;
+                height: 100%;
+                border: none;
+            }
+        </style>
+    </head>
+    <body>
+        <iframe src="<%- previewUrl %>"></iframe>
+    </body>
+</html>