@sap-ux/ui5-library-writer 0.1.0

package/dist/options/typescript.js

@@ -0,0 +1,92 @@
+"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.enableTypescript = void 0;
+const ejs_1 = require("ejs");
+const project_access_1 = require("@sap-ux/project-access");
+const ui5_config_1 = require("@sap-ux/ui5-config");
+const path_1 = require("path");
+const semver_1 = require("semver");
+/**
+ * Enable typescript for the given input.
+ *
+ * @param libInput Input required to enable the optional typescript features
+ * @param basePath - the base path
+ * @param tmplPath - the template path
+ * @param fs - the memfs editor instance
+ */
+function enableTypescript(libInput, basePath, tmplPath, fs) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const tsTmplDirPath = (0, path_1.join)(tmplPath, 'optional', 'typescript');
+        const tsTmplFilePaths = yield (0, project_access_1.getFilePaths)(tsTmplDirPath);
+        const tsLibInput = Object.assign(Object.assign({}, libInput), { tsTypes: getTypePackageFor(libInput.framework, libInput.frameworkVersion), tsTypesVersion: libInput.frameworkVersion });
+        tsTmplFilePaths.forEach((tsTmplFilePath) => {
+            const relPath = tsTmplFilePath.replace(tsTmplDirPath, '');
+            const outPath = (0, path_1.join)(basePath, relPath);
+            // Extend or add
+            if (!fs.exists(outPath)) {
+                fs.copyTpl(tsTmplFilePath, outPath, tsLibInput, undefined, {
+                    globOptions: { dot: true }
+                });
+            }
+            else {
+                const add = JSON.parse((0, ejs_1.render)(fs.read(tsTmplFilePath), tsLibInput, {}));
+                const existingFile = JSON.parse(fs.read(outPath));
+                const merged = (0, ui5_config_1.mergeObjects)(existingFile, add);
+                fs.writeJSON(outPath, merged);
+            }
+        });
+        // ui5 yaml
+        const ui5ConfigPath = (0, path_1.join)(basePath, 'ui5.yaml');
+        const ui5Config = yield ui5_config_1.UI5Config.newInstance(fs.read(ui5ConfigPath));
+        ui5Config.updateCustomMiddleware({
+            name: 'fiori-tools-appreload',
+            afterMiddleware: 'compression',
+            configuration: {
+                path: 'src',
+                port: 35729,
+                delay: 300
+            }
+        });
+        ui5Config.updateCustomMiddleware({
+            name: 'ui5-tooling-transpile-middleware',
+            afterMiddleware: 'compression',
+            configuration: {
+                debug: true,
+                excludePatterns: ['/Component-preload.js']
+            }
+        });
+        ui5Config.addCustomTasks([
+            {
+                name: 'ui5-tooling-transpile-task',
+                afterTask: 'replaceVersion',
+                configuration: {
+                    debug: true
+                }
+            }
+        ]);
+        // write ts ui5 yaml
+        fs.write(ui5ConfigPath, ui5Config.toString());
+    });
+}
+exports.enableTypescript = enableTypescript;
+/**
+ * Returns the types package depending on ui5 version.
+ *
+ * @param framework SAPUI5 or OpenUI5
+ * @param version ui5 version
+ * @returns types package
+ */
+function getTypePackageFor(framework, version) {
+    const typesName = (0, semver_1.gte)(version, '1.113.0') ? 'types' : 'ts-types-esm';
+    return `@${framework.toLowerCase()}/${typesName}`;
+}
+//# sourceMappingURL=typescript.js.map

package/dist/translations/ui5-library-writer.i18n.json

@@ -0,0 +1,16 @@
+{
+    "error": {
+        "missingRequiredProperty": "The property: {{ propertyName }} must have a value",
+        "useAlphaNumeric": "Please use lowercase alpha numeric characters only for the property {{ propertyName }}",
+        "invalidUI5Version": "The specified UI5 version is invalid: {{ version }}",
+        "invalidNamespace": {
+            "mustStartWithLetter": "The namespace must start with a letter",
+            "endsInPeriod": "The namespace cannot end with a period",
+            "isSap": "The namespace cannot be {{ str }}",
+            "startsWithNew": "The namespace cannot start with {{ str }}",
+            "numAfterPeriod": "A number cannot follow a period in the namespace",
+            "specialCharacter": "The namespace can only contain letters, digits, dots, and underscores",
+            "tooLong": "The combined length of the application namespace and module name must not exceed {{ length }} characters"
+        }
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+export interface UI5LibConfig {
+    libraryName: string;
+    namespace: string;
+    framework: 'SAPUI5' | 'OpenUI5';
+    frameworkVersion: string;
+    author?: string;
+    typescript?: boolean;
+}
+export interface UI5LibInput extends UI5LibConfig {
+    namespaceURI: string;
+    libraryNamespace: string;
+    libraryNamespaceURI: string;
+    libraryBasepath: string;
+}
+export interface UI5LibInputTS extends UI5LibInput {
+    tsTypes: string;
+    tsTypesVersion: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.js

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

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@sap-ux/ui5-library-writer",
+  "description": "Writer module to generate a new ui5 library",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SAP/open-ux-tools.git",
+    "directory": "packages/ui5-library-writer"
+  },
+  "bugs": {
+    "url": "https://github.com/SAP/open-ux-tools/issues?q=is%3Aopen+is%3Aissue+label%3Abug+label%3Aui5-library-writer"
+  },
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "files": [
+    "LICENSE",
+    "dist",
+    "templates",
+    "!dist/*.map",
+    "!dist/**/*.map"
+  ],
+  "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"
+  },
+  "dependencies": {
+    "ejs": "3.1.7",
+    "i18next": "20.3.2",
+    "lodash": "4.17.21",
+    "mem-fs": "2.1.0",
+    "mem-fs-editor": "9.4.0",
+    "semver": "7.3.5",
+    "@sap-ux/project-access": "1.8.1",
+    "@sap-ux/ui5-application-writer": "0.23.1",
+    "@sap-ux/ui5-config": "0.17.1"
+  },
+  "devDependencies": {
+    "@types/ejs": "3.1.0",
+    "@types/fs-extra": "9.0.13",
+    "@types/lodash": "4.14.176",
+    "@types/mem-fs-editor": "7.0.1",
+    "@types/mem-fs": "1.1.2",
+    "fs-extra": "10.0.0",
+    "@types/semver": "7.3.9",
+    "@sap-ux/eslint-plugin-fiori-tools": "0.2.0"
+  },
+  "scripts": {
+    "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/common/gitignore.tmpl

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+.scp/
+Makefile*.mta
+mta_archives
+mta-*
+resources
+archive.zip
+.*_mta_build_tmp

package/templates/common/karma.conf.tmpl

@@ -0,0 +1,7 @@
+// karma-ui5 usage: https://github.com/SAP/karma-ui5
+module.exports = function (config) {
+    config.set({
+        frameworks: ["ui5"],
+        browsers: ["Chrome"]
+    });
+};

package/templates/common/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "<%= libraryName %>",
+  "version": "1.0.0",
+  "private": true,
+  "devDependencies": {
+    "@ui5/cli": "^3.0.0",
+    "karma": "6.3.17",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-cli": "^2.0.0",
+    "karma-ui5": "^3.0.3",
+    "@sap/ux-ui5-tooling": "1"
+  },
+  "scripts": {
+    "build": "ui5 build --clean-dest",
+    "start": "fiori run --open test-resources/<%= libraryNamespaceURI %>/Example.html",
+    "testsuite": "fiori run --open test-resources/<%= libraryNamespaceURI %>/qunit/testsuite.qunit.html",
+    "test": "karma start --browsers=ChromeHeadless --singleRun=true"
+  }
+}

package/templates/common/src/baselibrary/.library

@@ -0,0 +1,14 @@
+<?xml version="1.0" ?>
+<library xmlns="http://www.sap.com/sap.ui.library.xsd">
+	<name><%= libraryNamespace %></name>
+	<vendor><%= author %></vendor>
+	<version>${version}</version>
+	<copyright>${copyright}</copyright>
+	<title><%= libraryName %></title>
+	<documentation>Some description about <%= libraryName %></documentation>
+	<dependencies>
+		<dependency>
+			<libraryName>sap.ui.core</libraryName>
+		</dependency>
+	</dependencies>
+</library>

package/templates/common/src/baselibrary/Example.gen.d.ts

@@ -0,0 +1,33 @@
+import { ExampleColor } from "./library";
+import Event from "sap/ui/base/Event";
+import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
+import { $ControlSettings } from "sap/ui/core/Control";
+
+declare module "./Example" {
+
+    /**
+     * Interface defining the settings object used in constructor calls
+     */
+    interface $ExampleSettings extends $ControlSettings {
+        text?: string | PropertyBindingInfo;
+        color?: ExampleColor | PropertyBindingInfo | `{${string}}`;
+        press?: (event: Event) => void;
+    }
+
+    export default interface Example {
+
+        // property: text
+        getText(): string;
+        setText(text: string): this;
+
+        // property: color
+        getColor(): ExampleColor;
+        setColor(color: ExampleColor): this;
+
+        // event: press
+        attachPress(fn: (event: Event) => void, listener?: object): this;
+        attachPress<CustomDataType extends object>(data: CustomDataType, fn: (event: Event, data: CustomDataType) => void, listener?: object): this;
+        detachPress(fn: (event: Event) => void, listener?: object): this;
+        firePress(parameters?: object): this;
+    }
+}

package/templates/common/src/baselibrary/Example.js

@@ -0,0 +1,68 @@
+/*!
+ * ${copyright}
+ */
+
+// Provides control <%= libraryNamespace %>.Example.
+sap.ui.define([
+	"./library", 
+	"sap/ui/core/Control", 
+	"./ExampleRenderer"
+], function (library, Control, ExampleRenderer) {
+	"use strict";
+
+	// refer to library types
+	var ExampleColor = library.ExampleColor;
+
+	/**
+	 * Constructor for a new <code><%= libraryNamespace %>.Example</code> control.
+	 *
+	 * @param {string} [sId] id for the new control, generated automatically if no id is given
+	 * @param {object} [mSettings] initial settings for the new control
+	 *
+	 * @class
+	 * Some class description goes here.
+	 * @extends sap.ui.core.Control
+	 *
+	 * @author <%= author %>
+	 * @version ${version}
+	 *
+	 * @constructor
+	 * @public
+	 * @alias <%= libraryNamespace %>.Example
+	 */
+	var Example = Control.extend("<%= libraryNamespace %>.Example", /** @lends <%= libraryNamespace %>.Example.prototype */ {
+		metadata: {
+			library: "<%= libraryNamespace %>",
+			properties: {
+				/**
+				 * The text to display.
+				 */
+				text: {
+					type: "string",
+					group: "Data",
+					defaultValue: null
+				},
+				/**
+				 * The color to use (default to "Default" color).
+				 */
+				color: {
+					type: "<%= libraryNamespace %>.ExampleColor",
+					group: "Appearance",
+					defaultValue: ExampleColor.Default
+				}
+			},
+			events: {
+				/**
+				 * Event is fired when the user clicks the control.
+				 */
+				press: {}
+			}
+		},
+		renderer: ExampleRenderer,
+    onclick: function() {
+      this.firePress();
+    }
+	});
+	return Example;
+
+});

package/templates/common/src/baselibrary/Example.ts

@@ -0,0 +1,65 @@
+/*!
+ * ${copyright}
+ */
+
+// Provides control <%= libraryNamespace %>.Example.
+import Control from	"sap/ui/core/Control";
+import ExampleRenderer from "./ExampleRenderer";
+import { ExampleColor } from "./library";
+
+
+
+/**
+ * Constructor for a new <code><%= libraryNamespace %>.Example</code> control.
+ *
+ * Some class description goes here.
+ * @extends Control
+ *
+ * @author OpenUI5 Team 
+ * @version ${version}
+ *
+ * @constructor
+ * @public
+ * @name <%= libraryNamespace %>.Example
+ */
+export default class Example extends Control {
+
+	// The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures
+	constructor(id?: string | $ExampleSettings);
+	constructor(id?: string, settings?: $ExampleSettings);
+	constructor(id?: string, settings?: $ExampleSettings) { super(id, settings); }
+
+	static readonly metadata = {
+		library: "<%= libraryNamespace %>",
+		properties: {
+			/**
+			 * The text to display.
+			 */
+			text: {
+				type: "string",
+				group: "Data",
+				defaultValue: null
+			},
+			/**
+			 * The color to use (default to "Default" color).
+			 */
+			color: {
+				type: "<%= libraryNamespace %>.ExampleColor",
+				group: "Appearance",
+				defaultValue: ExampleColor.Default
+			}
+		},
+		events: {
+			/**
+			 * Event is fired when the user clicks the control.
+			 */
+			press: {}
+		}
+	};
+
+	static renderer = ExampleRenderer;
+
+	onclick = () => {
+		this.firePress();
+	}
+}

package/templates/common/src/baselibrary/ExampleRenderer.js

@@ -0,0 +1,47 @@
+/*!
+ * ${copyright}
+ */
+
+sap.ui.define([
+	"sap/ui/core/Core",
+	"./library"
+], function (Core, library) {
+	"use strict";
+
+	// refer to library types
+	var ExampleColor = library.ExampleColor;
+
+	/**
+	 * Example renderer.
+	 * @namespace
+	 */
+	var ExampleRenderer = {
+		apiVersion: 2 // usage of DOM Patcher
+	};
+
+	/**
+	 * Renders the HTML for the given control, using the provided
+	 * {@link sap.ui.core.RenderManager}.
+	 *
+	 * @param {sap.ui.core.RenderManager} rm The reference to the <code>sap.ui.core.RenderManager</code>
+	 * @param {sap.ui.core.Control} control The control instance to be rendered
+	 */
+	ExampleRenderer.render = function (rm, control) {
+
+		var i18n = Core.getLibraryResourceBundle("<%= libraryNamespace %>");
+
+		rm.openStart("div", control);
+		if (control.getColor() === ExampleColor.Highlight) {
+			rm.class("myLibPrefixExampleHighlight");
+		} else {
+			rm.class("myLibPrefixExample");
+		}
+		rm.openEnd( );
+		rm.text(i18n.getText("ANY_TEXT") + ": " + control.getText());
+		rm.close("div");
+
+	};
+
+	return ExampleRenderer;
+
+});

package/templates/common/src/baselibrary/ExampleRenderer.ts

@@ -0,0 +1,41 @@
+/*!
+ * ${copyright}
+ */
+
+import ResourceBundle from "sap/base/i18n/ResourceBundle";
+import Core from "sap/ui/core/Core";
+import RenderManager from "sap/ui/core/RenderManager";
+import Example from "./Example";
+import { ExampleColor } from "./library";
+
+/**
+ * Example renderer.
+ * @namespace
+ */
+const ExampleRenderer = {
+	apiVersion: 2, // usage of DOM Patcher
+
+	/**
+	 * Renders the HTML for the given control, using the provided {@link RenderManager}.
+	 *
+	 * @param {RenderManager} rm The reference to the <code>sap.ui.core.RenderManager</code>
+	 * @param {Example} control The control instance to be rendered
+	 */
+	render: function (rm: RenderManager, control: Example) {
+
+		const i18n = Core.getLibraryResourceBundle("<%= libraryNamespace %>") as ResourceBundle;
+
+		rm.openStart("div", control);
+		if (control.getColor() === ExampleColor.Highlight) {
+			rm.class("myLibPrefixExampleHighlight");
+		} else {
+			rm.class("myLibPrefixExample");
+		}
+		rm.openEnd( );
+		rm.text(i18n.getText("ANY_TEXT") + ": " + control.getText());
+		rm.close("div");
+	}
+
+};
+
+export default ExampleRenderer;

package/templates/common/src/baselibrary/library.js

@@ -0,0 +1,67 @@
+/*!
+ * ${copyright}
+ */
+
+/**
+ * Initialization Code and shared classes of library <%= libraryNamespace %>.
+ */
+sap.ui.define([
+	"sap/ui/core/library"
+], function () {
+	"use strict";
+
+	// delegate further initialization of this library to the Core
+	// Hint: sap.ui.getCore() must still be used to support preload with sync bootstrap!
+	sap.ui.getCore().initLibrary({
+		name: "<%= libraryNamespace %>",
+		version: "${version}",
+		dependencies: [ // keep in sync with the ui5.yaml and .library files
+			"sap.ui.core"
+		],
+		types: [
+			"<%= libraryNamespace %>.ExampleColor"
+		],
+		interfaces: [],
+		controls: [
+			"<%= libraryNamespace %>.Example"
+		],
+		elements: [],
+		noLibraryCSS: false // if no CSS is provided, you can disable the library.css load here
+	});
+
+	/**
+	 * Some description about <code><%= libraryName %></code>
+	 *
+	 * @namespace
+	 * @name <%= libraryNamespace %>
+	 * @author <%= author %>
+	 * @version ${version}
+	 * @public
+	 */
+	var thisLib = <%= libraryNamespace %>;
+
+	/**
+	 * Semantic Colors of the <code><%= libraryNamespace %>.Example</code>.
+	 *
+	 * @enum {string}
+	 * @public
+	 */
+	thisLib.ExampleColor = {
+
+		/**
+		 * Default color (brand color)
+		 * @public
+		 */
+		Default : "Default",
+
+		/**
+		 * Highlight color
+		 * @public
+		 */
+		Highlight : "Highlight"
+
+	};
+
+	return thisLib;
+
+});

package/templates/common/src/baselibrary/library.ts

@@ -0,0 +1,56 @@
+/*!
+ * ${copyright}
+ */
+
+import ObjectPath from "sap/base/util/ObjectPath";
+
+/**
+ * Initialization Code and shared classes of library <%= libraryNamespace %>.
+ */
+
+// delegate further initialization of this library to the Core
+// Hint: sap.ui.getCore() must still be used here to support preload with sync bootstrap!
+sap.ui.getCore().initLibrary({
+	name: "<%= libraryNamespace %>",
+	version: "${version}",
+	dependencies: [ // keep in sync with the ui5.yaml and .library files
+		"sap.ui.core"
+	],
+	types: [
+		"<%= libraryNamespace %>.ExampleColor"
+	],
+	interfaces: [],
+	controls: [
+		"<%= libraryNamespace %>.Example"
+	],
+	elements: [],
+	noLibraryCSS: false // if no CSS is provided, you can disable the library.css load here
+});
+
+// get the library object from global object space because all enums must be attached to it to be usable as UI5 types
+// FIXME: this line is planned to become obsolete and may need to be removed later
+const thisLib : {[key: string]: unknown} = ObjectPath.get("<%= libraryNamespace %>") as {[key: string]: unknown};
+
+/**
+ * Semantic Colors of the com.myorg.myUI5Library.Example control.
+ *
+ * @enum {string}
+ * @public
+ */
+export enum ExampleColor {
+
+	/**
+	 * Default color (brand color)
+	 * @public
+	 */
+	Default = "Default",
+
+	/**
+	 * Highlight color
+	 * @public
+	 */
+	Highlight = "Highlight"
+
+}
+// FIXME: this line is planned to become obsolete and may need to be removed later
+thisLib.ExampleColor = ExampleColor; // add the enum to the library; this is important because UI5 otherwise cannot identify the type and will skip type checking for properties of this type

package/templates/common/src/baselibrary/messagebundle.properties

@@ -0,0 +1,2 @@
+# Translation file of library <%= libraryNamespace %>.
+ANY_TEXT=AnyText

package/templates/common/src/baselibrary/themes/base/Example.less

@@ -0,0 +1,19 @@
+/* Theme Parameter Toolbox: https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/theming/webapp/index.html */
+
+.myLibPrefixExample,
+.myLibPrefixExampleHighlight {
+	color: @sapUiText;
+	background-color: @sapUiNeutralBG;
+	border: 1rem solid @sapUiContentForegroundBorderColor;
+	border-radius: 1rem;
+	opacity: 0.8;
+	padding: 2rem;
+	margin: 2rem 8rem;
+	text-align: center;
+	font-size: 2em;
+	line-height: 3em;
+}
+
+.myLibPrefixExampleHighlight {
+	background-color: @sapUiSuccessBG;
+}

package/templates/common/src/baselibrary/themes/base/library.source.less

@@ -0,0 +1,4 @@
+@import "/resources/sap/ui/core/themes/base/base.less";
+@import "/resources/sap/ui/core/themes/base/global.less";
+
+@import "Example.less";

package/templates/common/src/baselibrary/themes/sap_belize/library.source.less

@@ -0,0 +1,3 @@
+@import "../base/library.source.less";
+@import "/resources/sap/ui/core/themes/sap_belize/base.less";
+@import "/resources/sap/ui/core/themes/sap_belize/global.less";

package/templates/common/src/baselibrary/themes/sap_belize_hcb/library.source.less

@@ -0,0 +1,3 @@
+@import "../base/library.source.less";
+@import "/resources/sap/ui/core/themes/sap_belize_hcb/base.less";
+@import "/resources/sap/ui/core/themes/sap_belize_hcb/global.less";

package/templates/common/src/baselibrary/themes/sap_belize_hcw/library.source.less

@@ -0,0 +1,3 @@
+@import "../base/library.source.less";
+@import "/resources/sap/ui/core/themes/sap_belize_hcw/base.less";
+@import "/resources/sap/ui/core/themes/sap_belize_hcw/global.less";