@sap-ux/fe-fpm-writer 0.17.2 → 0.17.4

package/dist/action/index.js

@@ -77,7 +77,7 @@ function generateCustomAction(basePath, actionConfig, fs) {
     const config = enhanceConfig(actionConfig, manifestPath, manifest);
     // Apply event handler
     if (config.eventHandler) {
-        config.eventHandler = event_handler_1.applyEventHandlerConfiguration(fs, config, config.eventHandler, false, config.typescript);
+        config.eventHandler = event_handler_1.applyEventHandlerConfiguration(fs, config, config.eventHandler, false, config.typescript, event_handler_1.contextParameter);
     }
     // enhance manifest with action definition and controller reference
     const actions = enhanceManifestAndGetActionsElementReference(manifest, config.target);

package/dist/app/index.d.ts

@@ -13,6 +13,9 @@ export interface FPMConfig {
      * (Note: if set to false, nothing will be done i.e. FCL is not disabled)
      */
     fcl?: boolean;
+    /**
+     * If set to true then all code snippets are generated in Typescript instead of Javascript.
+     */
     typescript?: boolean;
 }
 export declare const MIN_VERSION = "1.94.0";

package/dist/app/index.js

@@ -7,6 +7,7 @@ const path_1 = require("path");
 const semver_1 = require("semver");
 const defaults_1 = require("../common/defaults");
 const templates_1 = require("../templates");
+const utils_1 = require("../common/utils");
 exports.MIN_VERSION = '1.94.0';
 /**
  * Enable the flexible programming model for an application.
@@ -17,7 +18,7 @@ exports.MIN_VERSION = '1.94.0';
  * @returns {Promise<Editor>} the updated mem-fs editor instance
  */
 function enableFPM(basePath, config = {}, fs) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     if (!fs) {
         fs = mem_fs_editor_1.create(mem_fs_1.create());
     }
@@ -49,6 +50,10 @@ function enableFPM(basePath, config = {}, fs) {
             }
         });
     }
+    // add type extensions if required
+    if (config.typescript) {
+        utils_1.addExtensionTypes(basePath, (_f = manifest['sap.ui5']) === null || _f === void 0 ? void 0 : _f.dependencies.minUI5Version, fs);
+    }
     // enable FCL if requested
     if (config.fcl) {
         fs.extendJSON(manifestPath, {

package/dist/common/event-handler.d.ts

@@ -1,14 +1,32 @@
 import type { Editor } from 'mem-fs-editor';
 import type { EventHandlerConfiguration, InternalCustomElement } from '../common/types';
+/**
+ * Interface to describe the input parameters for the generated event handler function.
+ */
+export interface EventHandlerTypescriptParameters {
+    name: string;
+    description: string;
+    importType: string;
+    importSource: string;
+}
+/**
+ * Default values for the input parameters of newly created event handlers.
+ */
+export declare const defaultParameter: EventHandlerTypescriptParameters;
+/**
+ * Values for the input parameters of newly created event handlers that are added as manifest actions.
+ */
+export declare const contextParameter: EventHandlerTypescriptParameters;
 /**
  * Method creates or updates handler js file and update 'settings.eventHandler' entry with namespace path entry to method.
  *
- * @param {Editor} fs - the memfs editor instance
- * @param {InternalCustomElement} config - configuration
- * @param {EventHandlerConfiguration | true | string} [eventHandler] - eventHandler for creation
- * @param {boolean} [controllerSuffix=false] - append controller suffix to new file
- * @param {boolean} typescript - create Typescript file instead of Javascript
+ * @param fs - the memfs editor instance
+ * @param config - configuration
+ * @param eventHandler - eventHandler for creation
+ * @param controllerSuffix - append controller suffix to new file
+ * @param typescript - create Typescript file instead of Javascript
+ * @param parameters - parameter configurations for the event handler
  * @returns {string} full namespace path to method
  */
-export declare function applyEventHandlerConfiguration(fs: Editor, config: Partial<InternalCustomElement>, eventHandler: EventHandlerConfiguration | true | string, controllerSuffix?: boolean, typescript?: boolean): string;
+export declare function applyEventHandlerConfiguration(fs: Editor, config: Partial<InternalCustomElement>, eventHandler: EventHandlerConfiguration | true | string, controllerSuffix?: boolean, typescript?: boolean, parameters?: EventHandlerTypescriptParameters): string;
 //# sourceMappingURL=event-handler.d.ts.map

package/dist/common/event-handler.js

@@ -1,20 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyEventHandlerConfiguration = void 0;
+exports.applyEventHandlerConfiguration = exports.contextParameter = exports.defaultParameter = void 0;
 const path_1 = require("path");
 const templates_1 = require("../templates");
 const utils_1 = require("../common/utils");
+/**
+ * Default values for the input parameters of newly created event handlers.
+ */
+exports.defaultParameter = {
+    name: 'event',
+    description: 'the event object provided by the event provider',
+    importType: 'UI5Event',
+    importSource: 'sap/ui/base/Event'
+};
+/**
+ * Values for the input parameters of newly created event handlers that are added as manifest actions.
+ */
+exports.contextParameter = {
+    name: 'pageContext',
+    description: 'the context of the page on which the event was fired',
+    importType: 'Context',
+    importSource: 'sap/ui/model/odata/v4/Context'
+};
 /**
  * Method creates or updates handler js file and update 'settings.eventHandler' entry with namespace path entry to method.
  *
- * @param {Editor} fs - the memfs editor instance
- * @param {InternalCustomElement} config - configuration
- * @param {EventHandlerConfiguration | true | string} [eventHandler] - eventHandler for creation
- * @param {boolean} [controllerSuffix=false] - append controller suffix to new file
- * @param {boolean} typescript - create Typescript file instead of Javascript
+ * @param fs - the memfs editor instance
+ * @param config - configuration
+ * @param eventHandler - eventHandler for creation
+ * @param controllerSuffix - append controller suffix to new file
+ * @param typescript - create Typescript file instead of Javascript
+ * @param parameters - parameter configurations for the event handler
  * @returns {string} full namespace path to method
  */
-function applyEventHandlerConfiguration(fs, config, eventHandler, controllerSuffix = false, typescript) {
+function applyEventHandlerConfiguration(fs, config, eventHandler, controllerSuffix = false, typescript, parameters = exports.defaultParameter) {
     if (typeof eventHandler === 'string') {
         // Existing event handler is passed - no need for file creation/update
         return eventHandler;
@@ -38,7 +57,8 @@ function applyEventHandlerConfiguration(fs, config, eventHandler, controllerSuff
     const controllerPath = path_1.join(config.path || '', `${fileName}${controllerSuffix ? '.controller' : ''}.${ext}`);
     if (!fs.exists(controllerPath)) {
         fs.copyTpl(templates_1.getTemplatePath(`common/EventHandler.${ext}`), controllerPath, {
-            eventHandlerFnName
+            eventHandlerFnName,
+            parameters
         });
     }
     else if (insertScript) {

package/dist/common/utils.d.ts

@@ -1,3 +1,4 @@
+import type { Editor } from 'mem-fs-editor';
 import type { FileContentPosition } from '../common/types';
 /**
  * Method inserts passed text into content by char index position.
@@ -21,4 +22,13 @@ export declare function insertTextAtAbsolutePosition(text: string, content: stri
  * @returns new content with inserted text
  */
 export declare function insertTextAtPosition(text: string, content: string, position: FileContentPosition): string;
+/**
+ * Adds type extensions for sap.fe types if an older version is used.
+ * The types were fixed in 1.108 and downported to 1.102.
+ *
+ * @param basePath - the base path
+ * @param minUI5Version - minimal required UI5 version
+ * @param fs - the memfs editor instance
+ */
+export declare function addExtensionTypes(basePath: string, minUI5Version: string | undefined, fs: Editor): void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/common/utils.js

@@ -3,8 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertTextAtPosition = exports.insertTextAtAbsolutePosition = void 0;
+exports.addExtensionTypes = exports.insertTextAtPosition = exports.insertTextAtAbsolutePosition = void 0;
 const os_1 = __importDefault(require("os"));
+const path_1 = require("path");
+const semver_1 = require("semver");
+const templates_1 = require("../templates");
 /**
  * Method inserts passed text into content by char index position.
  * In case if position is out of range, then whitespaces would be created.
@@ -53,4 +56,21 @@ function insertTextAtPosition(text, content, position) {
     return lines.join(os_1.default.EOL);
 }
 exports.insertTextAtPosition = insertTextAtPosition;
+/**
+ * Adds type extensions for sap.fe types if an older version is used.
+ * The types were fixed in 1.108 and downported to 1.102.
+ *
+ * @param basePath - the base path
+ * @param minUI5Version - minimal required UI5 version
+ * @param fs - the memfs editor instance
+ */
+function addExtensionTypes(basePath, minUI5Version, fs) {
+    var _a;
+    const version = semver_1.minor((_a = semver_1.coerce(minUI5Version)) !== null && _a !== void 0 ? _a : '1.108.0');
+    const path = path_1.join(basePath, '/webapp/ext/sap.fe.d.ts');
+    if (version < 108 && version !== 102 && !fs.exists(path)) {
+        fs.copyTpl(templates_1.getTemplatePath('common/sap.fe.d.ts'), path, { version });
+    }
+}
+exports.addExtensionTypes = addExtensionTypes;
 //# sourceMappingURL=utils.js.map

package/dist/controller-extension/index.js

@@ -9,6 +9,7 @@ const types_1 = require("./types");
 const validate_1 = require("../common/validate");
 const defaults_1 = require("../common/defaults");
 const templates_1 = require("../templates");
+const utils_1 = require("../common/utils");
 exports.UI5_CONTROLLER_EXTENSION_LIST_REPORT = 'sap.fe.templates.ListReport.ListReportController';
 exports.UI5_CONTROLLER_EXTENSION_OBJECT_PAGE = 'sap.fe.templates.ObjectPage.ObjectPageController';
 const UI5_CONTROLLER_EXTENSIONS = 'sap.ui.controllerExtensions';
@@ -189,6 +190,9 @@ function generateControllerExtension(basePath, controllerConfig, fs) {
     if (!fs.exists(viewPath)) {
         fs.copyTpl(templates_1.getTemplatePath(`controller-extension/Controller.${ext}`), viewPath, internalConfig);
     }
+    if (controllerConfig.typescript) {
+        utils_1.addExtensionTypes(basePath, controllerConfig.minUI5Version, fs);
+    }
     return fs;
 }
 exports.generateControllerExtension = generateControllerExtension;

package/dist/page/custom.js

@@ -10,6 +10,7 @@ const defaults_1 = require("../common/defaults");
 const validate_1 = require("../common/validate");
 const templates_1 = require("../templates");
 const semver_1 = require("semver");
+const utils_1 = require("../common/utils");
 /**
  * Enhances the provided custom page configuration with default data.
  *
@@ -80,6 +81,9 @@ function generate(basePath, data, fs) {
     if (!fs.exists(controllerPath)) {
         fs.copyTpl(path_1.join(root, `ext/Controller.${ext}`), controllerPath, config);
     }
+    if (data.typescript) {
+        utils_1.addExtensionTypes(basePath, data.minUI5Version, fs);
+    }
     return fs;
 }
 exports.generate = generate;

package/dist/section/index.js

@@ -26,6 +26,16 @@ function getManifestRoot(ui5Version) {
     }
 }
 exports.getManifestRoot = getManifestRoot;
+/**
+ * Get additional dependencies for fragment.xml template based on passed ui5 version.
+ *
+ * @param ui5Version required UI5 version.
+ * @returns Additional dependencies for fragment.xml
+ */
+function getAdditionalDependencies(ui5Version) {
+    const minVersion = semver_1.coerce(ui5Version);
+    return !minVersion || minVersion.minor >= 90 ? { 'xmlns:macros': 'sap.fe.macros' } : undefined;
+}
 /**
  * Enhances the provided custom section configuration with additonal data.
  *
@@ -44,6 +54,8 @@ function enhanceConfig(fs, data, manifestPath, manifest) {
     }
     // generate section content
     config.content = config.control || defaults_1.getDefaultFragmentContent(config.name, config.eventHandler);
+    // Additional dependencies to include into 'Fragment.xml'
+    config.dependencies = getAdditionalDependencies(config.minUI5Version);
     return config;
 }
 /**

package/dist/section/types.d.ts

@@ -17,7 +17,11 @@ export interface CustomSection extends CustomElement, EventHandler {
      */
     control?: string;
 }
+export interface CustomSectionDependencies {
+    [key: string]: string;
+}
 export interface InternalCustomSection extends CustomSection, InternalCustomElement {
     content: string;
+    dependencies?: CustomSectionDependencies;
 }
 //# sourceMappingURL=types.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sap-ux/fe-fpm-writer",
   "description": "SAP Fiori elements flexible programming model writer",
-  "version": "0.17.2",
+  "version": "0.17.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/SAP/open-ux-tools.git",
@@ -40,8 +40,8 @@
     "node": ">= 14.16.0 < 15.0.0 || >=16.1.0 < 17.0.0 || >=18.0.0 < 19.0.0"
   },
   "scripts": {
-    "build": "pnpm clean && tsc",
-    "clean": "rimraf dist",
+    "build": "pnpm clean && tsc -p tsconfig-build.json",
+    "clean": "rimraf dist test/test-output",
     "format": "prettier --write '**/*.{js,json,ts,yaml,yml}' --ignore-path ../../.prettierignore",
     "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",

package/templates/common/EventHandler.js

@@ -4,7 +4,7 @@ sap.ui.define([
     'use strict';
 
     return {
-        <%- (typeof eventHandlerFnName !== 'undefined' && eventHandlerFnName) || 'onPress' %>: function() {
+        <%- (typeof eventHandlerFnName !== 'undefined' && eventHandlerFnName) || 'onPress' %>: function(oEvent) {
             MessageToast.show("Custom handler invoked.");
         }
     };

package/templates/common/EventHandler.ts

@@ -1,5 +1,13 @@
+import ExtensionAPI from 'sap/fe/core/ExtensionAPI';
+import <%- parameters.importType %> from '<%- parameters.importSource %>';
 import MessageToast from 'sap/m/MessageToast';
 
-export function <%- (typeof eventHandlerFnName !== 'undefined' && eventHandlerFnName) || 'onPress' %>() {
+/**
+ * Generated event handler.
+ *
+ * @param this reference to the 'this' that the event handler is bound to.
+ * @param <%- parameters.name %> <%- parameters.description %>
+ */
+export function <%- (typeof eventHandlerFnName !== 'undefined' && eventHandlerFnName) || 'onPress' %>(this: ExtensionAPI, <%- parameters.name %>: <%- parameters.importType %>) {
     MessageToast.show("Custom handler invoked.");
 }

package/templates/common/Fragment.xml

@@ -1,3 +1,3 @@
-<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
+<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m"<%- typeof dependencies !== 'undefined' ? Object.entries(dependencies).map((dependency) => ` ${dependency[0]}="${dependency[1]}"`).join('') : '' %>>
 	<%- content %>
 </core:FragmentDefinition>

package/templates/common/sap.fe.d.ts

@@ -0,0 +1,43 @@
+import ExtensionAPI from 'sap/fe/core/ExtensionAPI';
+import Routing from 'sap/fe/core/controllerextensions/Routing';
+import EditFlow from 'sap/fe/core/controllerextensions/EditFlow';
+import IntentBasedNavigation from 'sap/fe/core/controllerextensions/IntentBasedNavigation';
+
+/**
+ * Missing public properties (https://ui5.sap.com/#/api/sap.fe.core.ExtensionAPI)
+ */
+interface ExtensionAPIProperties {
+    routing: Routing;
+    editFlow: EditFlow;
+    intentBasedNavigation: IntentBasedNavigation;
+}
+
+/**
+ * Add missing public properties
+ */
+declare module 'sap/fe/core/ExtensionAPI' {
+	export default interface ExtensionAPI extends ExtensionAPIProperties {}
+}
+
+/**
+ * Add missing public properties
+ */
+declare module 'sap/fe/templates/ObjectPage/ExtensionAPI' {
+	export default interface ExtensionAPI extends ExtensionAPIProperties {}
+}
+
+/**
+ * Add missing public properties
+ */
+declare module 'sap/fe/templates/ListReport/ExtensionAPI' {
+	export default interface ExtensionAPI extends ExtensionAPIProperties {}
+}
+
+/**
+ * Enhancing the PageController type to simplify the work with the extension API
+ */
+declare module 'sap/fe/core/PageController' {
+	export default interface PageController {
+		getExtensionAPI() : ExtensionAPI;
+	}
+}

package/templates/controller-extension/Controller.ts

@@ -2,14 +2,19 @@ import ControllerExtension from 'sap/ui/core/mvc/ControllerExtension';
 import ExtensionAPI from 'sap/fe/<%- typeof extension === "object" ? `templates/${extension.pageType}` : "core" -%>/ExtensionAPI';
 
 /**
- * Definition of the override interface as workaround until https://github.com/SAP/ui5-typescript/issues/332 is fixed.
+ * Helper to be able to define how to get the extension API when writing a controller extension.
  */
-interface ExtensionOverride {
-	base: {
-		getExtensionAPI(): ExtensionAPI;
-	}
+declare module 'sap/ui/core/mvc/ControllerExtension' {
+    export default interface ControllerExtension {
+        base: {
+            getExtensionAPI(): ExtensionAPI;
+        }
+    }
 }
 
+/**
+ * Cannot change to class syntax until https://github.com/SAP/ui5-typescript/issues/332 is fixed.
+ */
 export default ControllerExtension.extend('<%- ns %>.<%- name %>', {
 	// this section allows to extend lifecycle hooks or hooks provided by Fiori elements
 	override: {
@@ -18,7 +23,7 @@ export default ControllerExtension.extend('<%- ns %>.<%- name %>', {
 		 * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
 		 * @memberOf <%- ns %>.<%- name %>
 		 */
-		onInit(this: ExtensionOverride) {
+		onInit(this: ControllerExtension) {
 			// you can access the Fiori elements extensionAPI via this.base.getExtensionAPI
 			const model = this.base.getExtensionAPI().getModel();
 		}