@sap-ux/ui5-application-writer 0.14.6 → 0.16.0

package/dist/data/ui5Libs.d.ts

@@ -5,4 +5,46 @@
  * @returns UI5 libs with defaults
  */
 export declare const getUI5Libs: (ui5Libs?: string | string[] | undefined) => string[];
+/**
+ * UI5 tasks configurations required for TypeScript projects
+ */
+export declare const ui5TsTasks: ({
+    name: string;
+    afterTask: string;
+    configuration: {
+        debug?: undefined;
+        removeConsoleStatements?: undefined;
+        transpileAsync?: undefined;
+        transpileTypeScript?: undefined;
+    };
+} | {
+    name: string;
+    afterTask: string;
+    configuration: {
+        debug: boolean;
+        removeConsoleStatements: boolean;
+        transpileAsync: boolean;
+        transpileTypeScript: boolean;
+    };
+})[];
+/**
+ * UI5 middleware configurations required for TypeScript projects
+ */
+export declare const ui5TsMiddlewares: ({
+    name: string;
+    afterMiddleware: string;
+    configuration: {
+        debug?: undefined;
+        transpileAsync?: undefined;
+        transpileTypeScript?: undefined;
+    };
+} | {
+    name: string;
+    afterMiddleware: string;
+    configuration: {
+        debug: boolean;
+        transpileAsync: boolean;
+        transpileTypeScript: boolean;
+    };
+})[];
 //# sourceMappingURL=ui5Libs.d.ts.map

package/dist/data/ui5Libs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getUI5Libs = void 0;
+exports.ui5TsMiddlewares = exports.ui5TsTasks = exports.getUI5Libs = void 0;
 const defaults_1 = require("./defaults");
 /**
  * Merges the specified ui5 libs with the defaults.
@@ -14,4 +14,43 @@ exports.getUI5Libs = (ui5Libs) => {
         return self.indexOf(value) === index;
     });
 };
+/**
+ * UI5 tasks configurations required for TypeScript projects
+ */
+exports.ui5TsTasks = [
+    {
+        name: 'ui5-tooling-modules-task',
+        afterTask: 'replaceVersion',
+        configuration: {}
+    },
+    {
+        name: 'ui5-tooling-transpile-task',
+        afterTask: 'replaceVersion',
+        configuration: {
+            debug: true,
+            removeConsoleStatements: true,
+            transpileAsync: true,
+            transpileTypeScript: true
+        }
+    }
+];
+/**
+ * UI5 middleware configurations required for TypeScript projects
+ */
+exports.ui5TsMiddlewares = [
+    {
+        name: 'ui5-tooling-modules-middleware',
+        afterMiddleware: 'compression',
+        configuration: {}
+    },
+    {
+        name: 'ui5-tooling-transpile-middleware',
+        afterMiddleware: 'compression',
+        configuration: {
+            debug: true,
+            transpileAsync: true,
+            transpileTypeScript: true
+        }
+    }
+];
 //# sourceMappingURL=ui5Libs.js.map

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import type { Editor } from 'mem-fs-editor';
+import type { App, AppOptions, Package, UI5 } from './types';
 import { Ui5App } from './types';
 /**
  * Writes the template to the memfs editor instance.
@@ -10,5 +11,5 @@ import { Ui5App } from './types';
  */
 declare function generate(basePath: string, ui5AppConfig: Ui5App, fs?: Editor): Promise<Editor>;
 export { Ui5App, generate };
-export { App, Package, UI5 } from './types';
+export { App, Package, UI5, AppOptions };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -18,6 +18,7 @@ const json_merger_1 = require("json-merger");
 const ejs_1 = require("ejs");
 const files_1 = require("./files");
 const ui5_config_1 = require("@sap-ux/ui5-config");
+const ui5Libs_1 = require("./data/ui5Libs");
 /**
  * Writes the template to the memfs editor instance.
  *
@@ -47,13 +48,11 @@ function generate(basePath, ui5AppConfig, fs) {
             }
         });
         ui5Config.addFioriToolsAppReloadMiddleware();
-        fs.write(ui5ConfigPath, ui5Config.toString());
         // ui5-local.yaml
         const ui5LocalConfigPath = path_1.join(basePath, 'ui5-local.yaml');
         const ui5LocalConfig = yield ui5_config_1.UI5Config.newInstance(fs.read(ui5LocalConfigPath));
         ui5LocalConfig.addUI5Framework(ui5App.ui5.framework, ui5App.ui5.localVersion, ui5App.ui5.ui5Libs, ui5App.ui5.ui5Theme);
         ui5LocalConfig.addFioriToolsAppReloadMiddleware();
-        fs.write(ui5LocalConfigPath, ui5LocalConfig.toString());
         // Add optional features
         if (ui5App.appOptions) {
             Object.entries(ui5App.appOptions).forEach(([key, value]) => {
@@ -78,7 +77,17 @@ function generate(basePath, ui5AppConfig, fs) {
                     });
                 }
             });
+            if (ui5App.appOptions.typescript) {
+                fs.delete(path_1.join(basePath, 'webapp/Component.js'));
+                ui5Config.addCustomMiddleware(ui5Libs_1.ui5TsMiddlewares);
+                ui5Config.addCustomTasks(ui5Libs_1.ui5TsTasks);
+                ui5LocalConfig.addCustomMiddleware(ui5Libs_1.ui5TsMiddlewares);
+                ui5LocalConfig.addCustomTasks(ui5Libs_1.ui5TsTasks);
+            }
         }
+        // write ui5 yamls
+        fs.write(ui5ConfigPath, ui5Config.toString());
+        fs.write(ui5LocalConfigPath, ui5LocalConfig.toString());
         return fs;
     });
 }

package/dist/types.d.ts

@@ -51,7 +51,14 @@ export interface AppOptions {
     codeAssist: boolean;
     eslint: boolean;
     sapux: boolean;
+    /**
+     * Enables loading of re-use libs
+     */
     loadReuseLibs: boolean;
+    /**
+     * Enable Typescript support and generate all files in Typescript instead of Javascript
+     */
+    typescript: boolean;
 }
 export interface Ui5App {
     app: App;

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%3Aui5-application-writer"
   },
-  "version": "0.14.6",
+  "version": "0.16.0",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "files": [

package/templates/core/webapp/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

package/templates/optional/loadReuseLibs/webapp/utils/locate-reuse-libs.js

@@ -1,173 +1,168 @@
 /*eslint-disable semi, no-console*/
 (function (sap) {
-  var fioriToolsGetManifestLibs = function (manifestPath) {
-    var url = manifestPath;
-    var result = "";
-    // SAPUI5 delivered namespaces from https://ui5.sap.com/#/api/sap
-    var ui5Libs = [
-      "sap.apf",
-      "sap.base",
-      "sap.chart",
-      "sap.collaboration",
-      "sap.f",
-      "sap.fe",
-      "sap.fileviewer",
-      "sap.gantt",
-      "sap.landvisz",
-      "sap.m",
-      "sap.ndc",
-      "sap.ovp",
-      "sap.rules",
-      "sap.suite",
-      "sap.tnt",
-      "sap.ui",
-      "sap.uiext",
-      "sap.ushell",
-      "sap.uxap",
-      "sap.viz",
-      "sap.webanalytics",
-      "sap.zen"
-    ];
-    function getKeys(libOrComp,libOrCompKeysString) {
-      Object.keys(libOrComp).forEach(function (libOrCompKey) {
-        // ignore libs or Components that start with SAPUI5 delivered namespaces
-        if (!ui5Libs.some(function (substring) { return libOrCompKey === substring || libOrCompKey.startsWith(substring + "."); })) {
-          if (libOrCompKeysString.length > 0) {
-            libOrCompKeysString = libOrCompKeysString + "," + libOrCompKey;
-          } else {
-            libOrCompKeysString = libOrCompKey;
-          }
-        }
-      });
-      return libOrCompKeysString;
-    }
-    return new Promise(function (resolve, reject) {
-      $.ajax(url)
-        .done(function (manifest) {
-          if (manifest) {
-            if (
-              manifest["sap.ui5"] &&
-              manifest["sap.ui5"].dependencies
-            ) {
-              if (manifest["sap.ui5"].dependencies.libs){
-                result = getKeys(manifest["sap.ui5"].dependencies.libs, result)
-              }
-              if (manifest["sap.ui5"].dependencies.components){
-                result = getKeys(manifest["sap.ui5"].dependencies.components, result)
-              }
-            }
+    var getKeys = function (libOrComp, libOrCompKeysString) {
+        // SAPUI5 delivered namespaces from https://ui5.sap.com/#/api/sap
+        var ui5Libs = [
+            "sap.apf",
+            "sap.base",
+            "sap.chart",
+            "sap.collaboration",
+            "sap.f",
+            "sap.fe",
+            "sap.fileviewer",
+            "sap.gantt",
+            "sap.landvisz",
+            "sap.m",
+            "sap.ndc",
+            "sap.ovp",
+            "sap.rules",
+            "sap.suite",
+            "sap.tnt",
+            "sap.ui",
+            "sap.uiext",
+            "sap.ushell",
+            "sap.uxap",
+            "sap.viz",
+            "sap.webanalytics",
+            "sap.zen"
+        ];
+        Object.keys(libOrComp).forEach(function (libOrCompKey) {
+            // ignore libs or Components that start with SAPUI5 delivered namespaces
             if (
-              manifest["sap.ui5"] &&
-              manifest["sap.ui5"].componentUsages
+                !ui5Libs.some(function (substring) {
+                    return libOrCompKey === substring || libOrCompKey.startsWith(substring + ".");
+                })
             ) {
-              result = getKeys(manifest["sap.ui5"].componentUsages, result)
+                if (libOrCompKeysString.length > 0) {
+                    libOrCompKeysString = libOrCompKeysString + "," + libOrCompKey;
+                } else {
+                    libOrCompKeysString = libOrCompKey;
+                }
             }
-          }
-          resolve(result);
-        })
-        .fail(function (error) {
-          reject(new Error("Could not fetch manifest at '" + manifestPath));
         });
-    });
-  };
-  /**
-   * Registers the module paths for dependencies of the given component.
-   * @param {string} manifestPath The the path to the app manifest path
-   * for which the dependencies should be registered.
-   * @returns {Promise} A promise which is resolved when the ajax request for
-   * the app-index was successful and the module paths were registered.
-   */
-  sap.registerComponentDependencyPaths = function (manifestPath) {
-    /*eslint-disable semi, consistent-return*/
-    return fioriToolsGetManifestLibs(manifestPath).then(function (libs) {
-      if (libs && libs.length > 0) {
-        var url = "/sap/bc/ui2/app_index/ui5_app_info?id=" + libs;
-        var sapClient = jQuery.sap.getUriParameters().get("sap-client");
-        if (sapClient && sapClient.length === 3) {
-          url = url + "&sap-client=" + sapClient;
+        return libOrCompKeysString;
+    };
+
+    var updateManifest = function (manifest) {
+        var result = "";
+        if (manifest) {
+            if (manifest["sap.ui5"] && manifest["sap.ui5"].dependencies) {
+                if (manifest["sap.ui5"].dependencies.libs) {
+                    result = getKeys(manifest["sap.ui5"].dependencies.libs, result);
+                }
+                if (manifest["sap.ui5"].dependencies.components) {
+                    result = getKeys(manifest["sap.ui5"].dependencies.components, result);
+                }
+            }
+            if (manifest["sap.ui5"] && manifest["sap.ui5"].componentUsages) {
+                result = getKeys(manifest["sap.ui5"].componentUsages, result);
+            }
         }
-        return $.ajax(url).done(function (data) {
-          if (data) {
-            Object.keys(data).forEach(function (moduleDefinitionKey) {
-              var moduleDefinition = data[moduleDefinitionKey];
-              if (moduleDefinition && moduleDefinition.dependencies) {
-                moduleDefinition.dependencies.forEach(function (dependency) {
-                  if (dependency.url && dependency.url.length > 0 && dependency.type === "UI5LIB") {
-                    jQuery.sap.log.info(
-                      "Registering Library " +
-                      dependency.componentId +
-                      " from server " +
-                      dependency.url
-                    );
-                    jQuery.sap.registerModulePath(dependency.componentId, dependency.url);
-                  }
+        return result;
+    };
+
+    var fioriToolsGetManifestLibs = function (manifestPath) {
+        var url = manifestPath;
+        return new Promise(function (resolve, reject) {
+            $.ajax(url)
+                .done(function (manifest) {
+                    resolve(updateManifest(manifest));
+                })
+                .fail(function () {
+                    reject(new Error("Could not fetch manifest at '" + manifestPath));
                 });
-              }
+        });
+    };
+
+    var updateModuleDefinition = function (data) {
+        if (data) {
+            Object.keys(data).forEach(function (moduleDefinitionKey) {
+                var moduleDefinition = data[moduleDefinitionKey];
+                if (moduleDefinition && moduleDefinition.dependencies) {
+                    moduleDefinition.dependencies.forEach(function (dependency) {
+                        if (dependency.url && dependency.url.length > 0 && dependency.type === "UI5LIB") {
+                            jQuery.sap.log.info(
+                                "Registering Library " + dependency.componentId + " from server " + dependency.url
+                            );
+                            jQuery.sap.registerModulePath(dependency.componentId, dependency.url);
+                        }
+                    });
+                }
             });
-          }
+        }
+    };
+
+    /**
+     * Registers the module paths for dependencies of the given component.
+     * @param {string} manifestPath The the path to the app manifest path
+     * for which the dependencies should be registered.
+     * @returns {Promise} A promise which is resolved when the ajax request for
+     * the app-index was successful and the module paths were registered.
+     */
+    sap.registerComponentDependencyPaths = function (manifestPath) {
+        /*eslint-disable semi, consistent-return*/
+        return fioriToolsGetManifestLibs(manifestPath).then(function (libs) {
+            if (libs && libs.length > 0) {
+                var url = "/sap/bc/ui2/app_index/ui5_app_info?id=" + libs;
+                var sapClient = jQuery.sap.getUriParameters().get("sap-client");
+                if (sapClient && sapClient.length === 3) {
+                    url = url + "&sap-client=" + sapClient;
+                }
+                return $.ajax(url).done(updateModuleDefinition);
+            }
         });
-      }
-    });
-  };
+    };
 })(sap);
 
 /*eslint-disable sap-browser-api-warning, sap-no-dom-access*/
 var scripts = document.getElementsByTagName("script");
-var currentScript = document.getElementById('locate-reuse-libs');
-if(!currentScript){
+var currentScript = document.getElementById("locate-reuse-libs");
+if (!currentScript) {
     currentScript = document.currentScript;
-};
+}
 var manifestUri = currentScript.getAttribute("data-sap-ui-manifest-uri");
 var componentName = currentScript.getAttribute("data-sap-ui-componentName");
 var useMockserver = currentScript.getAttribute("data-sap-ui-use-mockserver");
-sap.registerComponentDependencyPaths(manifestUri)
-  .catch(function (error) {
-    jQuery.sap.log.error(error);
-  })
-  .finally(function () {
-
-    // setting the app title with internationalization
-    sap.ui.getCore().attachInit(function () {
-      jQuery.sap.require("jquery.sap.resources");
-      var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
-      var oBundle = jQuery.sap.resources({
+var bundleResources = function () {
+    jQuery.sap.require("jquery.sap.resources");
+    var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
+    var oBundle = jQuery.sap.resources({
         url: "i18n/i18n.properties",
         locale: sLocale
-      });
-      document.title = oBundle.getText("appTitle");
     });
+    document.title = oBundle.getText("appTitle");
+};
+sap.registerComponentDependencyPaths(manifestUri)
+    .catch(function (error) {
+        jQuery.sap.log.error(error);
+    })
+    .finally(function () {
+        // setting the app title with internationalization
+        sap.ui.getCore().attachInit(bundleResources);
 
-    if (componentName && componentName.length > 0) {
-      if (useMockserver && useMockserver === "true") {
-        sap.ui.getCore().attachInit(function () {
-          sap.ui.require([componentName.replace(/\./g, "/") + "/localService/mockserver"], function (server) {
-            // set up test service for local testing
-            server.init();
-            // initialize the ushell sandbox component
-            sap.ushell.Container.createRenderer().placeAt("content");
-          });
-        });
-      } else {
-        // Requiring the ComponentSupport module automatically executes the component initialisation for all declaratively defined components
-        sap.ui.require(["sap/ui/core/ComponentSupport"]);
+        if (componentName && componentName.length > 0) {
+            if (useMockserver && useMockserver === "true") {
+                sap.ui.getCore().attachInit(function () {
+                    sap.ui.require([componentName.replace(/\./g, "/") + "/localService/mockserver"], function (server) {
+                        // set up test service for local testing
+                        server.init();
+                        // initialize the ushell sandbox component
+                        sap.ushell.Container.createRenderer().placeAt("content");
+                    });
+                });
+            } else {
+                // Requiring the ComponentSupport module automatically executes the component initialisation for all declaratively defined components
+                sap.ui.require(["sap/ui/core/ComponentSupport"]);
 
-        // setting the app title with the i18n text
-        sap.ui.getCore().attachInit(function () {
-          jQuery.sap.require("jquery.sap.resources");
-          var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
-          var oBundle = jQuery.sap.resources({
-            url: "i18n/i18n.properties",
-            locale: sLocale
-          });
-          document.title = oBundle.getText("appTitle");
-        });
-      }
-    } else {
-      sap.ui.getCore().attachInit(function () {
-        // initialize the ushell sandbox component
-        sap.ushell.Container.createRenderer().placeAt("content");
-      });
-    }
-  });
+                // setting the app title with the i18n text
+                sap.ui.getCore().attachInit(bundleResources);
+            }
+        } else {
+            sap.ui.getCore().attachInit(function () {
+                // initialize the ushell sandbox component
+                sap.ushell.Container.createRenderer().placeAt("content");
+            });
+        }
+    });
 
 sap.registerComponentDependencyPaths(manifestUri);

package/templates/optional/typescript/.babelrc.json

@@ -0,0 +1,4 @@
+{
+    "ignore": ["**/*.d.ts"],
+    "presets": ["transform-ui5", "@babel/preset-typescript"]
+}

package/templates/optional/typescript/.eslintrc

@@ -0,0 +1,23 @@
+{
+    "root": true,
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking"
+    ],
+	"ignorePatterns": [".eslintignore.js"],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "project": ["./tsconfig.json"],
+        "tsconfigRootDir": ".",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ]
+}

package/templates/optional/typescript/package.json

@@ -0,0 +1,19 @@
+{
+    "scripts": {
+        "ts-typecheck": "tsc --noEmit"
+    },
+    "devDependencies": {
+        "@sapui5/ts-types-esm": "latest",
+        "ui5-tooling-modules": "^0.6.0",
+        "ui5-tooling-transpile": "^0.2.0",
+        "typescript": "^4.6.3",
+        "@typescript-eslint/eslint-plugin": "^5.17.0",
+        "@typescript-eslint/parser": "^5.17.0"
+    },
+    "ui5": {
+        "dependencies": [
+            "ui5-tooling-modules",
+            "ui5-tooling-transpile"
+        ]
+    }
+}

package/templates/optional/typescript/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "es2015",
+    "skipLibCheck": true,
+    "preserveConstEnums": true,
+    "inlineSourceMap": true,
+    "allowJs": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": false,
+    "moduleResolution": "node",
+    "rootDir": "webapp",
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "paths": {
+      "<%- app.id %>/*": [
+        "webapp/*"
+      ]
+    },
+    "types": [ "@sapui5/ts-types-esm" ]
+  },
+  "include": [
+    "webapp/**/*"
+  ]
+}

package/templates/optional/typescript/webapp/Component.ts

@@ -0,0 +1,24 @@
+import UIComponent from "<%- app.baseComponent %>";
+
+/**
+ * @namespace <%- app.id %>
+ */
+export default class Component extends UIComponent {
+
+	public static metadata = {
+		manifest: "json"
+	};
+
+    /**
+     * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
+     * @public
+     * @override
+     */
+	public init() : void {
+		// call the base component's init function
+		super.init();
+
+        // enable routing
+        this.getRouter().initialize();
+	}
+}