@sap-ux/preview-middleware 0.23.9 → 0.23.11

package/README.md

@@ -177,8 +177,17 @@ When the middleware is used in an adaptation project together with a middleware
   afterMiddleware: preview-middleware
 ```
 
+### [Mobile Device Preview](#mobile-device-preview)
+The preview middleware supports previewing applications on physical mobile devices, enabling developers to test their applications on real mobile devices directly from Visual Studio Code or SAP Business Application Studio.
+
+Using the `--accept-remote-connections` argument, a remote URL that can be accessed from mobile devices on the same network will be logged in the console, and a QR code will be displayed for easy access.
+
+```Json
+"start-mobile": "ui5 serve --open test/flp.html#app-preview --accept-remote-connections"
+```
+ 
 ### [Programmatic Usage](#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.
+Alternatively you can use the underlying middleware function programmatically. This is useful when you want to incorporate the `preview-middleware` functionality in your own middleware.
 
 ```typescript
 import { FlpSandbox } from '@sap-ux/preview-middleware';

package/dist/base/index.d.ts

@@ -1,3 +1,4 @@
 export { FlpSandbox, initAdp } from './flp';
 export { generatePreviewFiles, getPreviewPaths, sanitizeRtaConfig } from './config';
+export { logRemoteUrl, isRemoteConnectionsEnabled } from './remote-url';
 //# sourceMappingURL=index.d.ts.map

package/dist/base/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sanitizeRtaConfig = exports.getPreviewPaths = exports.generatePreviewFiles = exports.initAdp = exports.FlpSandbox = void 0;
+exports.isRemoteConnectionsEnabled = exports.logRemoteUrl = exports.sanitizeRtaConfig = exports.getPreviewPaths = exports.generatePreviewFiles = exports.initAdp = exports.FlpSandbox = void 0;
 var flp_1 = require("./flp");
 Object.defineProperty(exports, "FlpSandbox", { enumerable: true, get: function () { return flp_1.FlpSandbox; } });
 Object.defineProperty(exports, "initAdp", { enumerable: true, get: function () { return flp_1.initAdp; } });
@@ -8,4 +8,7 @@ var config_1 = require("./config");
 Object.defineProperty(exports, "generatePreviewFiles", { enumerable: true, get: function () { return config_1.generatePreviewFiles; } });
 Object.defineProperty(exports, "getPreviewPaths", { enumerable: true, get: function () { return config_1.getPreviewPaths; } });
 Object.defineProperty(exports, "sanitizeRtaConfig", { enumerable: true, get: function () { return config_1.sanitizeRtaConfig; } });
+var remote_url_1 = require("./remote-url");
+Object.defineProperty(exports, "logRemoteUrl", { enumerable: true, get: function () { return remote_url_1.logRemoteUrl; } });
+Object.defineProperty(exports, "isRemoteConnectionsEnabled", { enumerable: true, get: function () { return remote_url_1.isRemoteConnectionsEnabled; } });
 //# sourceMappingURL=index.js.map

package/dist/base/remote-url.d.ts

@@ -0,0 +1,33 @@
+import type { ToolsLogger } from '@sap-ux/logger';
+/**
+ * Log remote URL for mobile device access.
+ *
+ * @param logger ToolsLogger instance
+ */
+export declare function logRemoteUrl(logger: ToolsLogger): Promise<void>;
+/**
+ * Get the remote URL for mobile device access.
+ *
+ * @param logger ToolsLogger instance
+ * @returns The remote URL or undefined if not available
+ */
+export declare function getRemoteUrl(logger: ToolsLogger): Promise<string | undefined>;
+/**
+ * Check if remote connections should be enabled based on command line arguments.
+ *
+ * @returns Whether --accept-remote-connections is present in process arguments
+ */
+export declare function isRemoteConnectionsEnabled(): boolean;
+/**
+ * Extract port from command line arguments or environment.
+ *
+ * @returns The port number if found
+ */
+export declare function getPortFromArgs(): number | undefined;
+/**
+ * Extract open path from command line arguments.
+ *
+ * @returns The path from --open or -o parameter if found
+ */
+export declare function getOpenPathFromArgs(): string | undefined;
+//# sourceMappingURL=remote-url.d.ts.map

package/dist/base/remote-url.js

@@ -0,0 +1,208 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logRemoteUrl = logRemoteUrl;
+exports.getRemoteUrl = getRemoteUrl;
+exports.isRemoteConnectionsEnabled = isRemoteConnectionsEnabled;
+exports.getPortFromArgs = getPortFromArgs;
+exports.getOpenPathFromArgs = getOpenPathFromArgs;
+const btp_utils_1 = require("@sap-ux/btp-utils");
+const os_1 = require("os");
+const bas_sdk_1 = require("@sap/bas-sdk");
+const qrcode_1 = __importDefault(require("qrcode"));
+/**
+ * Log remote URL for mobile device access.
+ *
+ * @param logger ToolsLogger instance
+ */
+async function logRemoteUrl(logger) {
+    try {
+        const remoteUrl = await getRemoteUrl(logger);
+        const generateQRCode = async (text) => {
+            try {
+                const qrString = await qrcode_1.default.toString(text, { type: 'terminal', small: true });
+                logger.info(qrString);
+            }
+            catch (err) {
+                logger.error(err);
+            }
+        };
+        if (remoteUrl) {
+            logger.info(`Remote URL: ${remoteUrl}`);
+            logger.info('Scan the QR code below with your mobile device to access the preview:');
+            await generateQRCode(remoteUrl);
+        }
+    }
+    catch (error) {
+        logger.debug(`Could not generate remote URL: ${error.message}`);
+    }
+}
+/**
+ * Get the remote URL for mobile device access.
+ *
+ * @param logger ToolsLogger instance
+ * @returns The remote URL or undefined if not available
+ */
+async function getRemoteUrl(logger) {
+    try {
+        if ((0, btp_utils_1.isAppStudio)()) {
+            return await getBASRemoteUrl(logger);
+        }
+        else {
+            return getIdeRemoteUrl(logger);
+        }
+    }
+    catch (error) {
+        logger.error(`Failed to generate remote URL: ${error.message}`);
+        return undefined;
+    }
+}
+/**
+ * Get remote URL for BAS environment using BAS SDK.
+ *
+ * @param logger  ToolsLogger instance instance
+ * @returns The remote URL from BAS SDK
+ */
+async function getBASRemoteUrl(logger) {
+    try {
+        const devspaceInfo = await bas_sdk_1.devspace.getDevspaceInfo();
+        if (devspaceInfo?.url) {
+            const port = getPortFromArgs() ?? 8080;
+            const baseUrl = bas_sdk_1.devspace.getAppExternalUri(`http://localhost:${port}`);
+            const devspaceUrl = baseUrl.replace(/(\/|%2F)$/, '');
+            const remoteUrl = appendOpenPath(devspaceUrl, getOpenPathFromArgs());
+            logger.debug(`BAS remote URL generated: ${remoteUrl}`);
+            return remoteUrl;
+        }
+        logger.warn('Could not retrieve BAS remote URL from devspace info');
+        return undefined;
+    }
+    catch (error) {
+        logger.error(`Failed to get BAS remote URL: ${error.message}`);
+        return undefined;
+    }
+}
+/**
+ * Get remote URL for the local IDE environment by detecting network IP.
+ * Only works if --accept-remote-connections is enabled.
+ *
+ * @param logger  ToolsLogger instance
+ * @returns The remote URL based on network IP
+ */
+function getIdeRemoteUrl(logger) {
+    try {
+        const networkIP = getNetworkIP();
+        if (!networkIP) {
+            logger.warn('Could not determine network IP address for remote access');
+            return undefined;
+        }
+        const protocol = 'http';
+        const port = getPortFromArgs() ?? 8080;
+        const baseUrl = `${protocol}://${networkIP}:${port}`;
+        const remoteUrl = appendOpenPath(baseUrl, getOpenPathFromArgs());
+        logger.debug(`IDE remote URL generated: ${remoteUrl}`);
+        return remoteUrl;
+    }
+    catch (error) {
+        logger.error(`Failed to generate IDE remote URL: ${error.message}`);
+        return undefined;
+    }
+}
+/**
+ * Get the first available network IP address (excluding localhost).
+ *
+ * @returns The network IP address
+ */
+function getNetworkIP() {
+    const interfaces = (0, os_1.networkInterfaces)();
+    // Priority order: prefer non-internal IPv4 addresses
+    for (const interfaceName of Object.keys(interfaces)) {
+        const networkInterface = interfaces[interfaceName];
+        if (!networkInterface) {
+            continue;
+        }
+        for (const alias of networkInterface) {
+            // Skip internal (localhost) addresses and IPv6
+            if (alias.family === 'IPv4' && !alias.internal) {
+                return alias.address;
+            }
+        }
+    }
+    return undefined;
+}
+/**
+ * Append the open path to a base URL if provided.
+ *
+ * @param baseUrl The base URL
+ * @param openPath The path to append
+ * @returns The complete URL with path appended
+ */
+function appendOpenPath(baseUrl, openPath) {
+    if (!openPath) {
+        return baseUrl;
+    }
+    // Ensure the path starts with a forward slash
+    const normalizedPath = openPath.startsWith('/') ? openPath : `/${openPath}`;
+    return `${baseUrl}${normalizedPath}`;
+}
+/**
+ * Check if remote connections should be enabled based on command line arguments.
+ *
+ * @returns Whether --accept-remote-connections is present in process arguments
+ */
+function isRemoteConnectionsEnabled() {
+    return process.argv.includes('--accept-remote-connections');
+}
+/**
+ * Extract port from command line arguments or environment.
+ *
+ * @returns The port number if found
+ */
+function getPortFromArgs() {
+    // Check for --port argument
+    const portIndex = process.argv.findIndex((arg) => arg === '--port' || arg.startsWith('--port='));
+    if (portIndex !== -1) {
+        const portArg = process.argv[portIndex];
+        if (portArg.includes('=')) {
+            // --port=8080 format
+            const port = parseInt(portArg.split('=')[1], 10);
+            return isNaN(port) ? undefined : port;
+        }
+        else if (portIndex + 1 < process.argv.length) {
+            // --port 8080 format
+            const port = parseInt(process.argv[portIndex + 1], 10);
+            return isNaN(port) ? undefined : port;
+        }
+    }
+    // Check environment variable
+    const envPort = process.env.PORT;
+    if (envPort) {
+        const port = parseInt(envPort, 10);
+        return isNaN(port) ? undefined : port;
+    }
+    return undefined;
+}
+/**
+ * Extract open path from command line arguments.
+ *
+ * @returns The path from --open or -o parameter if found
+ */
+function getOpenPathFromArgs() {
+    // Check for --open or -o argument
+    const openIndex = process.argv.findIndex((arg) => arg === '--open' || arg === '-o' || arg.startsWith('--open=') || arg.startsWith('--o='));
+    if (openIndex !== -1) {
+        const openArg = process.argv[openIndex];
+        if (openArg.includes('=')) {
+            // --open=path or -o=path format
+            return openArg.split('=')[1];
+        }
+        else if (openIndex + 1 < process.argv.length) {
+            // --open path or -o path format
+            return process.argv[openIndex + 1];
+        }
+    }
+    return undefined;
+}
+//# sourceMappingURL=remote-url.js.map

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './ui5/middleware';
-export { FlpSandbox, initAdp, generatePreviewFiles, getPreviewPaths, sanitizeRtaConfig } from './base';
+export { FlpSandbox, initAdp, generatePreviewFiles, getPreviewPaths, sanitizeRtaConfig, logRemoteUrl, isRemoteConnectionsEnabled } from './base';
 export { FlpConfig, RtaConfig, TestConfig, MiddlewareConfig, DefaultFlpPath, DefaultIntent, TestConfigDefaults } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -14,7 +14,7 @@ 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 });
-exports.sanitizeRtaConfig = exports.getPreviewPaths = exports.generatePreviewFiles = exports.initAdp = exports.FlpSandbox = void 0;
+exports.isRemoteConnectionsEnabled = exports.logRemoteUrl = exports.sanitizeRtaConfig = exports.getPreviewPaths = exports.generatePreviewFiles = exports.initAdp = exports.FlpSandbox = void 0;
 __exportStar(require("./ui5/middleware"), exports);
 var base_1 = require("./base");
 Object.defineProperty(exports, "FlpSandbox", { enumerable: true, get: function () { return base_1.FlpSandbox; } });
@@ -22,4 +22,6 @@ Object.defineProperty(exports, "initAdp", { enumerable: true, get: function () {
 Object.defineProperty(exports, "generatePreviewFiles", { enumerable: true, get: function () { return base_1.generatePreviewFiles; } });
 Object.defineProperty(exports, "getPreviewPaths", { enumerable: true, get: function () { return base_1.getPreviewPaths; } });
 Object.defineProperty(exports, "sanitizeRtaConfig", { enumerable: true, get: function () { return base_1.sanitizeRtaConfig; } });
+Object.defineProperty(exports, "logRemoteUrl", { enumerable: true, get: function () { return base_1.logRemoteUrl; } });
+Object.defineProperty(exports, "isRemoteConnectionsEnabled", { enumerable: true, get: function () { return base_1.isRemoteConnectionsEnabled; } });
 //# sourceMappingURL=index.js.map

package/dist/ui5/middleware.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const logger_1 = require("@sap-ux/logger");
 const flp_1 = require("../base/flp");
 const config_1 = require("../base/config");
+const remote_url_1 = require("../base/remote-url");
 /**
  * Create the router that is to be exposed as UI5 middleware.
  *
@@ -33,6 +34,9 @@ async function createRouter({ resources, options, middlewareUtil }, logger) {
             throw new Error('No manifest.json found.');
         }
     }
+    if ((0, remote_url_1.isRemoteConnectionsEnabled)()) {
+        await (0, remote_url_1.logRemoteUrl)(logger);
+    }
     // add exposed endpoints for cds-plugin-ui5
     flp.router.getAppPages = () => (0, config_1.getPreviewPaths)(config).map(({ path }) => path);
     return flp.router;

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.23.9",
+  "version": "0.23.11",
   "license": "Apache-2.0",
   "author": "@SAP/ux-tools-team",
   "main": "dist/index.js",
@@ -25,18 +25,21 @@
     "ejs": "3.1.10",
     "mem-fs": "2.1.0",
     "mem-fs-editor": "9.4.0",
-    "@sap-ux/adp-tooling": "0.15.27",
+    "qrcode": "1.5.4",
+    "@sap/bas-sdk": "3.11.6",
+    "@sap-ux/adp-tooling": "0.15.28",
     "@sap-ux/btp-utils": "1.1.1",
     "@sap-ux/control-property-editor-sources": "npm:@sap-ux/control-property-editor@0.7.0",
     "@sap-ux/feature-toggle": "0.3.1",
     "@sap-ux/logger": "0.7.0",
-    "@sap-ux/project-access": "1.30.14",
+    "@sap-ux/project-access": "1.31.0",
     "@sap-ux/system-access": "0.6.16",
     "@sap-ux/i18n": "0.3.3"
   },
   "devDependencies": {
     "@sap-ux-private/playwright": "0.2.0",
     "@types/connect": "^3.4.38",
+    "@types/qrcode": "1.5.5",
     "@types/ejs": "3.1.2",
     "@types/express": "4.17.21",
     "@types/mem-fs": "1.1.2",