build(deps-dev): bump eslint from 8.57.0 to 9.0.0 in /demo

.github/workflows/test.yml

@@ -18,6 +18,9 @@ jobs:
     - name: Install the Dependencies
       run: npm ci
       working-directory: ./demo
+    - name: Run ESLint Checks
+      run: npm run lint
+      working-directory: ./demo
     - name: Test the Application
       run: npm run test
       working-directory: ./demo/RootComponent

demo/BaseComponent/package.json

@@ -5,7 +5,7 @@
   "description": "This is the base component",
   "scripts": {
     "start": "ui5 serve",
-    "test": "npm run lint && rimraf coverage && npm run karma-ci",
+    "test": "rimraf coverage && npm run karma-ci",
     "lint": "eslint src",
     "karma": "karma start",
     "karma-ci": "karma start karma-ci.conf.js"
@@ -23,7 +23,7 @@
     "ui5-component"
   ],
   "devDependencies": {
-   "eslint": "^8.57.0",
+    "eslint": "^9.0.0",
     "@ui5/cli": "^3.9.2",
     "local-web-server": "^5.3.3",
     "karma": "^6.4.3",

demo/BaseComponent/src/my/lib/sample/base/BaseController.js

@@ -1,15 +1,15 @@
 sap.ui.define([
 	"sap/ui/core/mvc/Controller",
 	"sap/base/Log"
-], function(Controller, Log) {
+], (Controller, Log) => {
 	"use strict";
 
 	return Controller.extend("my.lib.sample.base.BaseController", {
-		onInit: function() {
-			Log.info(this.getView().getControllerName(), "onInit");
+		base64StringToImage(picture) {
+			return picture ? `data:image/bmp;base64,${  picture}` : null;
 		},
-		base64StringToImage: function(picture) {
-			return picture ? "data:image/bmp;base64," + picture : null;
+		onInit() {
+			Log.info(this.getView().getControllerName(), "onInit");
 		}
 	});
 });

demo/BaseComponent/src/my/lib/sample/base/Component.js

@@ -1,14 +1,14 @@
 sap.ui.define([
 	"sap/ui/core/UIComponent",
 	"sap/base/util/deepClone"
-], function(UIComponent, deepClone) {
+], (UIComponent, deepClone) => {
 	"use strict";
 
 	return UIComponent.extend("my.lib.sample.base.Component", {
-		init: function() {
-			UIComponent.prototype.init.apply(this, arguments);
+		init(...args) {
+			UIComponent.prototype.init.apply(this, args);
 
-			var oRouter = this.getRouter();
+			const oRouter = this.getRouter();
 			oRouter.getViews().attachCreated(this._processEventMappingOnTargetCreated, this);
 			oRouter.initialize();
 		},
@@ -32,55 +32,57 @@ sap.ui.define([
 		 * @param {object} oEvent The event object which is provided by the 'created' event from
 		 *   router's target cache
 		 */
-		_processEventMappingOnTargetCreated: function(oEvent) {
+		_processEventMappingOnTargetCreated(oEvent) {
 			if (!this.eventMappings) {
 				return;
 			}
 
-			var sType = oEvent.getParameter("type");
-			var oObject = oEvent.getParameter("object");
-			var oOptions = oEvent.getParameter("options");
-			var that = this;
-			var aEvents;
-
-			function processComponentTargetInfo(oComponentTargetInfo, oEvent) {
-				Object.keys(oComponentTargetInfo).forEach(function(sTargetName) {
-					var oInfo = oComponentTargetInfo[sTargetName];
+			const sType = oEvent.getParameter("type"),
+			 oObject = oEvent.getParameter("object"),
+			 oOptions = oEvent.getParameter("options"),
+			 that = this,
+			 processComponentTargetInfo = (oComponentTargetInfo, oEv) => {
+				Object.keys(oComponentTargetInfo).forEach((sTargetName) => {
+					const oInfo = oComponentTargetInfo[sTargetName];
 
 					if (oInfo.parameters) {
-						Object.keys(oInfo.parameters).forEach(function(sName) {
-							var sParamName = oInfo.parameters[sName];
-							var sEventValue = oEvent.getParameter(sParamName);
+						Object.keys(oInfo.parameters).forEach((sName) => {
+							const sParamName = oInfo.parameters[sName],
+							 sEventValue = oEv.getParameter(sParamName);
 
-							// expand the parameter mapping with the parameter value from
-							// the event
+							/*
+							 * Expand the parameter mapping with the parameter value from
+							 * the event
+							 */
 							oInfo.parameters[sName] = sEventValue;
 						});
 					}
 
 					if (oInfo.componentTargetInfo) {
-						processComponentTargetInfo(oInfo.componentTargetInfo, oEvent);
+						processComponentTargetInfo(oInfo.componentTargetInfo, oEv);
 					}
 				});
-			}
+			};
 
 			if (sType === "Component") {
-				aEvents = this.eventMappings[oOptions.usage];
+				const aEvents = this.eventMappings[oOptions.usage];
 				if (Array.isArray(aEvents)) {
-					aEvents.forEach(function(oEventMapping) {
-						oObject.attachEvent(oEventMapping.name, function(oEvent) {
-							var oComponentTargetInfo;
-							if (oEventMapping.route) { // route information defined, call 'navTo'
+					aEvents.forEach((oEventMapping) => {
+						oObject.attachEvent(oEventMapping.name, (oEv) => {
+							let oComponentTargetInfo = {};
+							if (oEventMapping.route) { // Route information defined, call 'navTo'
 								if (oEventMapping.componentTargetInfo) {
-									// if there's information for component target defined, replace the
-									// event parameter mapping with the value from the event object
+									/*
+									 * If there's information for component target defined, replace the
+									 * event parameter mapping with the value from the event object
+									 */
 									oComponentTargetInfo = deepClone(oEventMapping.componentTargetInfo);
-									processComponentTargetInfo(oComponentTargetInfo, oEvent);
+									processComponentTargetInfo(oComponentTargetInfo, oEv);
 								}
 
 								that.getRouter().navTo(oEventMapping.route, {}, oComponentTargetInfo);
-							} else if (oEventMapping.forward) { // event should be forwarded with the same parameters
-								that.fireEvent(oEventMapping.forward, oEvent.getParameters());
+							} else if (oEventMapping.forward) { // Event should be forwarded with the same parameters
+								that.fireEvent(oEventMapping.forward, oEv.getParameters());
 							}
 						});
 					});

demo/BaseComponent/src/my/lib/sample/base/library.js

@@ -1,15 +1,16 @@
-sap.ui.define(function() {
+sap.ui.define(() => {
 
 	"use strict";
 
 	sap.ui.getCore().initLibrary({
 		name : "my.lib.sample.base",
+		// eslint-disable-next-line no-template-curly-in-string
 		version : "${version}",
 		noLibraryCSS: true,
 		dependencies : [ "sap.ui.core" ],
 		controls : [ ],
 		types : [ ]
 	});
-
+	// eslint-disable-next-line no-undef
 	return my.lib.sample.base;
 });

demo/CategoriesComponent/package.json

@@ -7,8 +7,8 @@
     "start": "ui5 serve",
     "build": "ui5 build -a --clean-dest",
     "serve": "ws --compress -d dist",
-    "test": "npm run lint && rimraf coverage && npm run karma-ci",
-    "lint": "eslint webapp",
+    "test": "rimraf coverage && npm run karma-ci",
+    "lint": "eslint src",
     "karma": "karma start",
     "karma-ci": "karma start karma-ci.conf.js"
   },
@@ -29,7 +29,7 @@
     "my-lib-sample-products-component": "^0.0.1"
   },
   "devDependencies": {
-   "eslint": "^8.57.0",
+    "eslint": "^9.0.0",
     "@ui5/cli": "^3.9.2",
     "local-web-server": "^5.3.3",
     "karma": "^6.4.3",

demo/CategoriesComponent/src/my/lib/sample/categories/Component.js

@@ -1,4 +1,4 @@
-sap.ui.define(["my/lib/sample/base/Component"], function(Component) {
+sap.ui.define(["my/lib/sample/base/Component"], (Component) => {
 	"use strict";
 
 	return Component.extend("my.lib.sample.categories.Component", {

demo/CategoriesComponent/src/my/lib/sample/categories/controller/App.controller.js

@@ -1,4 +1,4 @@
-sap.ui.define(["my/lib/sample/base/BaseController"], function(BaseController) {
+sap.ui.define(["my/lib/sample/base/BaseController"], (BaseController) => {
 	"use strict";
 
 	return BaseController.extend("my.lib.sample.categories.controller.App", {

demo/CategoriesComponent/src/my/lib/sample/categories/controller/Detail.controller.js

@@ -1,42 +1,43 @@
 sap.ui.define([
 	"my/lib/sample/base/BaseController",
 	"sap/base/Log"
-], function(BaseController, Log) {
+], (BaseController, Log) => {
 	"use strict";
 	return BaseController.extend("my.lib.sample.categories.controller.Detail", {
 
-		onInit: function() {
-			BaseController.prototype.onInit.apply(this, arguments);
+		onInit(...args) {
+			BaseController.prototype.onInit.apply(this, args);
 			this.getOwnerComponent().getRouter().getRoute("detailRoute").attachMatched(this._onMatched, this);
 		},
 
-		_onMatched: function(oEvent) {
+		_onMatched(oEvent) {
 			Log.info(this.getView().getControllerName(), "_onMatched");
-			var oArgs = oEvent.getParameter("arguments");
+			const oArgs = oEvent.getParameter("arguments");
 			this.getOwnerComponent().getModel().metadataLoaded().then(this._bindData.bind(this, oArgs.id));
 		},
 
-		_bindData: function(id) {
+		_bindData(id) {
 			Log.info(this.getView().getControllerName(), "_bindData");
-			var sObjectPath = this.getOwnerComponent().getModel().createKey("Categories", { CategoryID: id });
+			const sObjectPath = this.getOwnerComponent().getModel().createKey("Categories", { CategoryID: id }),
+			 that = this;
 			this.getView().bindElement({
-				path: "/" + sObjectPath,
+				path: "/"+ sObjectPath,
 				events: {
-					change: function() {
-						Log.info(this.getView().getControllerName(), "_bindData change");
-						this.getView().setBusy(false);
-					}.bind(this),
-					dataRequested: function() {
-						Log.info(this.getView().getControllerName(), "_bindData dataRequested");
-						this.getView().setBusy(true);
-					}.bind(this),
-					dataReceived: function() {
-						Log.info(this.getView().getControllerName(), "_bindData dataReceived");
-						this.getView().setBusy(false);
-						if (this.getView().getBindingContext() === null) {
-							this.getOwnerComponent().getRouter().getTargets().display("notFound");
+					change() {
+						Log.info(that.getView().getControllerName(), "_bindData change");
+						that.getView().setBusy(false);
+					},
+					dataRequested() {
+						Log.info(that.getView().getControllerName(), "_bindData dataRequested");
+						that.getView().setBusy(true);
+					},
+					dataReceived() {
+						Log.info(that.getView().getControllerName(), "_bindData dataReceived");
+						that.getView().setBusy(false);
+						if (that.getView().getBindingContext() === null) {
+							that.getOwnerComponent().getRouter().getTargets().display("notFound");
 						}
-					}.bind(this)
+					}
 				}
 			});
 		}

demo/CategoriesComponent/src/my/lib/sample/categories/controller/List.controller.js

@@ -1,18 +1,20 @@
 sap.ui.define([
 	"my/lib/sample/base/BaseController",
 	"sap/base/Log"
-], function(Controller, Log) {
+], (Controller, Log) => {
 	"use strict";
 
 	return Controller.extend("my.lib.sample.categories.controller.List", {
-		onPressListItem: function(oEvent) {
+		onPressListItem(oEvent) {
 			Log.info(this.getView().getControllerName(), "onPressListItem");
 
-			var oBindingContext = oEvent.getSource().getBindingContext();
+			const oBindingContext = oEvent.getSource().getBindingContext();
 
-			// navigate to the detail page. Because the products component is
-			// integrated in the detail page, it's also needed to provide route
-			// information for the deeply nested products component
+			/*
+			 * Navigate to the detail page. Because the products component is
+			 * integrated in the detail page, it's also needed to provide route
+			 * information for the deeply nested products component
+			 */
 			this.getOwnerComponent()
 				.getRouter()
 				.navTo("detailRoute", {
@@ -21,8 +23,10 @@ sap.ui.define([
 					productsTarget: {
 						route: "listRoute",
 						parameters: {
-							// encode the path because it could contain "/" which
-							// isn't allowed to use as pattern parameter directly
+							/*
+							 * Encode the path because it could contain "/" which
+							 * isn't allowed to use as pattern parameter directly
+							 */
 							basepath: encodeURIComponent(oBindingContext.getPath())
 						}
 					}