@ui5/mcp-server 0.1.0

package/resources/template-ts/README.md

@@ -0,0 +1,101 @@
+# UI5 Application <%= namespace %>
+
+Insert the purpose of this project and some interesting info here...
+
+## Description
+
+This app uses a TypeScript setup for developing UI5 applications. The central entry point for all information about using TypeScript with UI5 is at [https://ui5.github.io/typescript](https://ui5.github.io/typescript).
+
+See [`SAP-samples/ui5-typescript-helloworld`](https://github.com/SAP-samples/ui5-typescript-helloworld) for a similar sample app including documentation how all the bits and pieces fit together.
+
+## Requirements
+
+Either [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) for dependency management.
+
+## Preparation
+
+Use `npm` (or `yarn`) to install the dependencies:
+
+```sh
+npm install
+```
+
+(To use yarn, just do `yarn` instead.)
+
+## Run the App
+
+Execute the following command to run the app locally for development in watch mode (the browser reloads the app automatically when there are changes in the source code):
+
+```sh
+npm start
+```
+
+As shown in the terminal after executing this command, the app is then running on http://localhost:8080/index.html. A browser window with this URL should automatically open.
+
+(When using yarn, do `yarn start` instead.)
+
+## Debug the App
+
+In the browser, you can directly debug the original TypeScript code, which is supplied via sourcemaps (need to be enabled in the browser's developer console if it does not work straight away). If the browser doesn't automatically jump to the TypeScript code when setting breakpoints, use e.g. `Ctrl`/`Cmd` + `P` in Chrome to open the `*.ts` file you want to debug.
+
+## Build the App
+
+### Unoptimized (but quick)
+
+Execute the following command to build the project and get an app that can be deployed:
+
+```sh
+npm run build
+```
+
+The result is placed into the `dist` folder. To start the generated package, just run
+
+```sh
+npm run start:dist
+```
+
+Note that `index.html` still loads the UI5 framework from the relative URL `resources/...`, which does not physically exist, but is only provided dynamically by the UI5 tooling. So for an actual deployment you should change this URL to either [the CDN](https://sdk.openui5.org/#/topic/2d3eb2f322ea4a82983c1c62a33ec4ae) or your local deployment of UI5.
+
+(When using yarn, do `yarn build` and `yarn start:dist` instead.)
+
+### Optimized
+
+For an optimized self-contained build (takes longer because the UI5 resources are built, too), do:
+
+```sh
+npm run build:opt
+```
+
+To start the generated package, again just run:
+
+```sh
+npm run start:dist
+```
+
+In this case, all UI5 framework resources are also available within the `dist` folder, so the folder can be deployed as-is to any static web server, without changing the bootstrap URL.
+
+With the self-contained build, the bootstrap URL in `index.html` has already been modified to load the newly created `sap-ui-custom.js` for bootstrapping, which contains all app resources as well as all needed UI5 JavaScript resources. Most UI5 resources inside the `dist` folder are for this reason actually **not** needed to run the app. Only the non-JS-files, like translation texts and CSS files, are used and must also be deployed. (Only when for some reason JS files are missing from the optimized self-contained bundle, they are also loaded separately.)
+
+(When using yarn, do `yarn build:opt` and `yarn start:dist` instead.)
+
+## Check the Code
+
+Do the following to run a TypeScript check:
+
+```sh
+npm run ts-typecheck
+```
+
+This checks the application code for any type errors (but will also complain in case of fundamental syntax issues which break the parsing).
+
+To lint the TypeScript code, do:
+
+```sh
+npm run lint
+```
+
+(Again, when using yarn, do `yarn ts-typecheck` and `yarn lint` instead.)
+
+## License
+
+This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](LICENSE) file.

package/resources/template-ts/_.editorconfig

@@ -0,0 +1,23 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Change these settings to your own preference
+indent_style = tab
+indent_size = 2
+
+[*.{yaml,yml}]
+indent_style = space
+
+[*.md]
+indent_style = unset
+trim_trailing_whitespace = false

package/resources/template-ts/_.gitignore

@@ -0,0 +1,18 @@
+# build results
+dist
+coverage
+report
+.nyc_output
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+
+.DS_Store
+.env

package/resources/template-ts/_.nycrc.json

@@ -0,0 +1,7 @@
+{
+    "all": true,
+    "sourceMap": false,
+    "exclude": [
+        "**/test/**/*.ts"
+    ]
+}

package/resources/template-ts/_tsconfig.json

@@ -0,0 +1,21 @@
+{
+	"compilerOptions": {
+		"target": "es2023",
+		"module": "es2022",
+		"moduleResolution": "node",
+		"skipLibCheck": true,
+		"allowJs": true,
+		"strict": true,
+		"strictNullChecks": false,
+		"strictPropertyInitialization": false,
+		"rootDir": "./webapp",
+		"types": ["<%= tstypes %>", "@types/qunit"<% if (!gte1_100_0) { %>, "@types/jquery"<% } %>],
+		"paths": {
+			"<%= appURI %>/*": ["./webapp/*"],
+			"unit/*": ["./webapp/test/unit/*"],
+			"integration/*": ["./webapp/test/integration/*"]
+		}
+	},
+	"exclude": ["./webapp/test/e2e/**/*"],
+	"include": ["./webapp/**/*"]
+}

package/resources/template-ts/eslint.config.mjs

@@ -0,0 +1,27 @@
+import eslint from "@eslint/js";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import path from "node:path";
+import {fileURLToPath} from "node:url";
+
+export default tseslint.config(
+	eslint.configs.recommended,
+	...tseslint.configs.recommended,
+	...tseslint.configs.recommendedTypeChecked,
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				sap: "readonly"
+			},
+			ecmaVersion: 2023,
+			parserOptions: {
+				project: true,
+				tsconfigRootDir: path.dirname(fileURLToPath(import.meta.url))
+			}
+		}
+	},
+	{
+		ignores: ["eslint.config.mjs", "webapp/test/e2e/**"]
+	}
+);

package/resources/template-ts/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "<%= namespace %>",
+	"version": "1.0.0",
+	"description": "UI5 Application: <%= namespace %>",
+	"author": "<%= author %>",
+	"license": "Apache-2.0",
+	"scripts": {
+		"clean": "rimraf dist coverage",
+		"build": "ui5 build --clean-dest",
+		"build:opt": "ui5 build self-contained --clean-dest --all",
+		"start": "ui5 serve --port 8080 -o index.html",
+		"start-cdn": "ui5 serve --port 8080 -o index-cdn.html",
+		"start-coverage": "ui5 serve --port 8080 --config ui5-coverage.yaml",
+		"start:dist": "npm start -- --config ui5-dist.yaml",
+		"start:dist-cdn": "npm run start-cdn -- --config ui5-dist.yaml",
+		"ts-typecheck": "tsc --noEmit",
+		"lint": "eslint webapp",
+		"ui5lint": "ui5lint",
+		"test-runner": "ui5-test-runner --url http://localhost:8080/test/testsuite.qunit.html",
+		"test-runner-coverage": "ui5-test-runner --url http://localhost:8080/test/testsuite.qunit.html --coverage -ccb 50 -ccf 40 -ccl 50 -ccs 50",
+		"test-ui5": "ui5-test-runner --start start-coverage --url http://localhost:8080/test/testsuite.qunit.html --coverage -ccb 50 -ccf 40 -ccl 50 -ccs 50",
+		"test": "npm run lint && npm run test-ui5"
+	},
+	"devDependencies": {
+		"<%= tstypes %>": "<%= tstypesVersion %>",
+		"<% if (!gte1_100_0) { %>@types/jquery": "3.5.13",
+		"@types/qunit": "2.5.4",
+		"<% } %>@ui5/cli": "^4.0.23",
+		"@ui5/linter": "^1.19.0",
+		"babel-plugin-istanbul": "^7.0.0",
+		"eslint": "^9.34.0",
+		"typescript-eslint": "^8.41.0",
+		"globals": "^16.3.0",
+		"rimraf": "^6.0.1",
+		"typescript": "^5.9.2",
+		"ui5-middleware-livereload": "^3.1.2",
+		"ui5-test-runner": "^5.9.1",
+		"ui5-tooling-transpile": "^3.9.0"
+	}
+}

package/resources/template-ts/ui5-coverage.yaml

@@ -0,0 +1,40 @@
+specVersion: "4.0"
+metadata:
+  name: <%= appId %>
+type: application
+framework:
+  name: <%= framework %>
+  version: "<%= frameworkVersion %>"
+  libraries:
+    - name: sap.m<%if (oDataEntitySet) { %>
+    - name: sap.f
+    - name: sap.ui.layout
+    - name: sap.ui.table<% } %>
+    - name: sap.ui.core
+    - name: themelib_<%= defaultTheme %>
+builder:
+  resources:
+    excludes:
+      - "test/e2e/**"
+  customTasks:
+    - name: ui5-tooling-transpile-task
+      afterTask: replaceVersion
+server:
+  customMiddleware:
+    - name: ui5-tooling-transpile-middleware
+      afterMiddleware: compression
+      configuration:
+        debug: true
+        babelConfig:
+          sourceMaps: true
+          ignore:
+          - "**/*.d.ts"
+          presets:
+          - - "@babel/preset-env"
+            - targets: defaults
+          - - transform-ui5
+          - "@babel/preset-typescript"
+          plugins:
+          - istanbul
+    - name: ui5-middleware-livereload
+      afterMiddleware: compression

package/resources/template-ts/ui5-dist.yaml

@@ -0,0 +1,18 @@
+specVersion: "4.0"
+metadata:
+  name: <%= appId %>
+type: application
+resources:
+  configuration:
+    paths:
+      webapp: dist
+framework:
+  name: <%= framework %>
+  version: "<%= frameworkVersion %>"
+  libraries:
+    - name: sap.m<%if (oDataEntitySet) { %>
+    - name: sap.f
+    - name: sap.ui.layout
+    - name: sap.ui.table<% } %>
+    - name: sap.ui.core
+    - name: themelib_<%= defaultTheme %>

package/resources/template-ts/ui5.yaml

@@ -0,0 +1,27 @@
+specVersion: "4.0"
+metadata:
+  name: <%= appId %>
+type: application
+framework:
+  name: <%= framework %>
+  version: "<%= frameworkVersion %>"
+  libraries:
+    - name: sap.m<%if (oDataEntitySet) { %>
+    - name: sap.f
+    - name: sap.ui.layout
+    - name: sap.ui.table<% } %>
+    - name: sap.ui.core
+    - name: themelib_<%= defaultTheme %>
+builder:
+  resources:
+    excludes:
+      - "test/e2e/**"
+  customTasks:
+    - name: ui5-tooling-transpile-task
+      afterTask: replaceVersion
+server:
+  customMiddleware:
+    - name: ui5-tooling-transpile-middleware
+      afterMiddleware: compression
+    - name: ui5-middleware-livereload
+      afterMiddleware: compression

package/resources/template-ts/webapp/Component.ts

@@ -0,0 +1,49 @@
+import UIComponent from "sap/ui/core/UIComponent";
+import models from "./model/models";<% if (gte1_115_0) { %>
+import Device from "sap/ui/Device";<% } else { %>
+import * as Device from "sap/ui/Device"; // for UI5 >= 1.115.0 use: import Device from "sap/ui/Device";<% } %>
+
+/**
+ * @namespace <%= appId %>
+ */
+export default class Component extends UIComponent {
+	public static metadata = {
+		manifest: "json",
+		interfaces: ["sap.ui.core.IAsyncContentCreation"]
+	};
+
+	private contentDensityClass: string;
+
+	public init(): void {
+		// call the base component's init function
+		super.init();
+
+		// create the device model
+		this.setModel(models.createDeviceModel(), "device");
+
+		// create the views based on the url/hash
+		this.getRouter().initialize();
+	}
+
+	/**
+	 * This method can be called to determine whether the sapUiSizeCompact or sapUiSizeCozy
+	 * design mode class should be set, which influences the size appearance of some controls.
+	 * @public
+	 * @returns css class, either 'sapUiSizeCompact' or 'sapUiSizeCozy' - or an empty string if no css class should be set
+	 */
+	public getContentDensityClass(): string {
+		if (this.contentDensityClass === undefined) {
+			// check whether FLP has already set the content density class; do nothing in this case
+			if (document.body.classList.contains("sapUiSizeCozy") || document.body.classList.contains("sapUiSizeCompact")) {
+				this.contentDensityClass = "";
+			} else if (!Device.support.touch) {
+				// apply "compact" mode if touch is not supported
+				this.contentDensityClass = "sapUiSizeCompact";
+			} else {
+				// "cozy" in case of touch support; default for most sap.m controls, but needed for desktop-first controls like sap.ui.table.Table
+				this.contentDensityClass = "sapUiSizeCozy";
+			}
+		}
+		return this.contentDensityClass;
+	}
+}

package/resources/template-ts/webapp/controller/App.controller.ts

@@ -0,0 +1,11 @@
+import BaseController from "./BaseController";
+
+/**
+ * @namespace <%= appId %>.controller
+ */
+export default class App extends BaseController {
+	public onInit(): void {
+		// apply content density mode to root view
+		this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());
+	}
+}

package/resources/template-ts/webapp/controller/BaseController.ts

@@ -0,0 +1,83 @@
+import Controller from "sap/ui/core/mvc/Controller";
+import UIComponent from "sap/ui/core/UIComponent";
+import AppComponent from "../Component";
+import Model from "sap/ui/model/Model";
+import ResourceModel from "sap/ui/model/resource/ResourceModel";
+import ResourceBundle from "sap/base/i18n/ResourceBundle";
+import Router from "sap/ui/core/routing/Router";
+import History from "sap/ui/core/routing/History";
+
+/**
+ * @namespace <%= appId %>.controller
+ */
+export default abstract class BaseController extends Controller {
+	/**
+	 * Convenience method for accessing the component of the controller's view.
+	 * @returns The component of the controller's view
+	 */
+	public getOwnerComponent(): AppComponent {
+		return super.getOwnerComponent() as AppComponent;
+	}
+
+	/**
+	 * Convenience method to get the components' router instance.
+	 * @returns The router instance
+	 */
+	public getRouter(): Router {
+		return UIComponent.getRouterFor(this);
+	}
+
+	/**
+	 * Convenience method for getting the i18n resource bundle of the component.
+	 * @returns {Promise<sap.base.i18n.ResourceBundle>} The i18n resource bundle of the component
+	 */
+	public getResourceBundle(): Promise<ResourceBundle> {
+		const oModel = this.getOwnerComponent().getModel("i18n") as ResourceModel;
+		return oModel.getResourceBundle() as Promise<ResourceBundle>;
+	}
+
+	/**
+	 * Convenience method for getting the view model by name in every controller of the application.
+	 * @param [sName] The model name
+	 * @returns The model instance
+	 */
+	public getModel(sName?: string): Model {
+		return this.getView().getModel(sName);
+	}
+
+	/**
+	 * Convenience method for setting the view model in every controller of the application.
+	 * @param oModel The model instance
+	 * @param [sName] The model name
+	 * @returns The current base controller instance
+	 */
+	public setModel(oModel: Model, sName?: string): BaseController {
+		this.getView().setModel(oModel, sName);
+		return this;
+	}
+
+	/**
+	 * Convenience method for triggering the navigation to a specific target.
+	 * @public
+	 * @param sName Target name
+	 * @param [oParameters] Navigation parameters
+	 * @param [bReplace] Defines if the hash should be replaced (no browser history entry) or set (browser history entry)
+	 */
+	public navTo(sName: string, oParameters?: object, bReplace?: boolean): void {
+		this.getRouter().navTo(sName, oParameters, undefined, bReplace);
+	}
+
+	/**
+	 * Convenience event handler for navigating back.
+	 * It there is a history entry we go one step back in the browser history
+	 * If not, it will replace the current entry of the browser history with the main route.
+	 */
+	public onNavBack(): void {
+		const sPreviousHash = History.getInstance().getPreviousHash();
+		if (sPreviousHash !== undefined) {
+			window.history.go(-1);
+		} else {
+			this.getRouter().navTo("main", {}, undefined, true);
+		}
+	}
+}

package/resources/template-ts/webapp/controller/Main.controller.ts

@@ -0,0 +1,19 @@
+import BaseController from "./BaseController";<% if (oDataEntitySet) { %><% if (gte1_115_0) { %>
+import {Table$RowSelectionChangeEvent} from "sap/ui/table/Table";<% } else { %>
+import Event from "sap/ui/base/Event";
+import Context from "sap/ui/model/Context";<% } %><% } else { %>
+import MessageBox from "sap/m/MessageBox";<% } %>
+
+/**
+ * @namespace <%= appId %>.controller
+ */
+export default class Main extends BaseController {<% if (!oDataEntitySet) { %>
+	public sayHello(): void {
+		MessageBox.show("Hello World!");
+	}<% } else { %>
+
+	onRowSelectionChange(oEvent: <% if (gte1_115_0) { %>Table$RowSelectionChangeEvent<% } else { %>Event<% } %>): void {
+		const selectedContext = oEvent.getParameter("rowContext")<% if (!gte1_115_0) { %> as Context<% } %>;
+		this.byId("detailForm").setBindingContext(selectedContext);
+	}<% } %>
+}

package/resources/template-ts/webapp/i18n/i18n.properties

@@ -0,0 +1,3 @@
+appTitle=<%= namespace %>
+appDescription=UI5 Application <%= namespace %>
+btnText=Say Hello

package/resources/template-ts/webapp/i18n/i18n_en.properties

@@ -0,0 +1,3 @@
+appTitle=<%= namespace %>
+appDescription=UI5 Application <%= namespace %>
+btnText=Say Hello

package/resources/template-ts/webapp/index-cdn.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+	<head>
+		<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="expires" content="0" />
+
+		<meta charset="utf-8" />
+
+		<title>UI5 Application: <%= namespace %></title>
+
+		<script
+			id="sap-ui-bootstrap"
+			src="https://<%= cdnDomain %>/<%= frameworkVersion %>/resources/sap-ui-core.js"<% if (gte1_120_0) { %>
+			data-sap-ui-resource-roots='{
+				"<%= appId %>": "./"
+			}'
+			data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
+			data-sap-ui-compat-version="edge"
+			data-sap-ui-frame-options="trusted"<% } else { %>
+			data-sap-ui-theme="<%= defaultTheme %>"
+			data-sap-ui-resourceroots='{
+				"<%= appId %>": "./"
+			}'
+			data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
+			data-sap-ui-compatVersion="edge"
+			data-sap-ui-frameOptions="trusted"<% } %>
+			data-sap-ui-async="true"
+		></script>
+	</head>
+
+	<body class="sapUiBody">
+		<div data-sap-ui-component data-name="<%= appId %>"></div>
+	</body>
+</html>

package/resources/template-ts/webapp/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+	<head>
+		<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="expires" content="0" />
+
+		<meta charset="utf-8" />
+
+		<title>UI5 Application: <%= namespace %></title>
+
+		<script
+			id="sap-ui-bootstrap"
+			src="resources/sap-ui-core.js"<% if (gte1_120_0) { %>
+			data-sap-ui-resource-roots='{
+				"<%= appId %>": "./"
+			}'
+			data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
+			data-sap-ui-compat-version="edge"
+			data-sap-ui-frame-options="trusted"<% } else { %>
+			data-sap-ui-theme="<%= defaultTheme %>"
+			data-sap-ui-resourceroots='{
+				"<%= appId %>": "./"
+			}'
+			data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
+			data-sap-ui-compatVersion="edge"
+			data-sap-ui-frameOptions="trusted"<% } %>
+			data-sap-ui-async="true"
+		></script>
+	</head>
+
+	<body class="sapUiBody">
+		<div data-sap-ui-component data-name="<%= appId %>"></div>
+	</body>
+</html>