[FEATURE] Migrate to ECMAScript 2022 syntax

.eslintrc.json

@@ -1,21 +1,21 @@
 {
 	"env": {
-		"browser": true
+		"browser": true,
+		"es2022": "true"
 	},
+	"extends": "eslint:recommended",
 	"globals": {
 		"sap": true,
 		"jQuery": true
 	},
 	"rules": {
-		"block-scoped-var": 1,
 		"brace-style": [2, "1tbs", { "allowSingleLine": true }],
 		"consistent-this": 2,
 		"no-div-regex": 2,
 		"no-floating-decimal": 2,
 		"no-self-compare": 2,
 		"no-mixed-spaces-and-tabs": [2, true],
 		"no-nested-ternary": 2,
-		"no-unused-vars": [2, {"vars":"all", "args":"none"}],
 		"radix": 2,
 		"keyword-spacing": 2,
 		"space-unary-ops": 2,
@@ -49,6 +49,9 @@
 		"comma-spacing": 0,
 		"no-multi-spaces": 0,
 		"no-shadow": 0,
-		"no-irregular-whitespace": 0
+		"no-irregular-whitespace": 0,
+		"no-var": 2,
+		"no-const-assign": 2,
+		"prefer-const": 2
 	}
 }

.gitignore

@@ -54,7 +54,7 @@ typings/
 # Yarn Integrity file
 .yarn-integrity
 
-# dotenv environment variables file
+# dotenv environment constiables file
 .env
 
 # Misc

karma.conf.js

@@ -1,7 +1,7 @@
 module.exports = function(config) {
 	"use strict";
 
-	var chromeFlags = [
+	const chromeFlags = [
 		"--window-size=1280,1024"
 	];
 

ui5.yaml

@@ -1,4 +1,4 @@
-specVersion: '2.0'
+specVersion: '3.0'
 metadata:
   name: openui5-sample-app
 type: application

webapp/Component.js

@@ -1,4 +1,4 @@
-sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/ComponentSupport"], function(UIComponent) {
+sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/ComponentSupport"], (UIComponent) => {
 	"use strict";
 	return UIComponent.extend("sap.ui.demo.todo.Component", {
 		metadata: {

webapp/controller/App.controller.js

@@ -4,12 +4,12 @@ sap.ui.define([
 	"sap/ui/model/Filter",
 	"sap/ui/model/FilterOperator",
 	"sap/ui/model/json/JSONModel"
-], function(Device, Controller, Filter, FilterOperator, JSONModel) {
+], (Device, Controller, Filter, FilterOperator, JSONModel) => {
 	"use strict";
 
 	return Controller.extend("sap.ui.demo.todo.controller.App", {
 
-		onInit: function() {
+		onInit() {
 			this.aSearchFilters = [];
 			this.aTabFilters = [];
 
@@ -22,9 +22,9 @@ sap.ui.define([
 		/**
 		 * Adds a new todo item to the bottom of the list.
 		 */
-		addTodo: function() {
-			var oModel = this.getView().getModel();
-			var aTodos = oModel.getProperty("/todos").map(function (oTodo) { return Object.assign({}, oTodo); });
+		addTodo() {
+			const oModel = this.getView().getModel();
+			const aTodos = oModel.getProperty("/todos").map((oTodo) => Object.assign({}, oTodo));
 
 			aTodos.push({
 				title: oModel.getProperty("/newTodo"),
@@ -38,13 +38,13 @@ sap.ui.define([
 		/**
 		 * Removes all completed items from the todo list.
 		 */
-		clearCompleted: function() {
-			var oModel = this.getView().getModel();
-			var aTodos = oModel.getProperty("/todos").map(function (oTodo) { return Object.assign({}, oTodo); });
+		clearCompleted() {
+			const oModel = this.getView().getModel();
+			const aTodos = oModel.getProperty("/todos").map((oTodo) => Object.assign({}, oTodo));
 
-			var i = aTodos.length;
+			let i = aTodos.length;
 			while (i--) {
-				var oTodo = aTodos[i];
+				const oTodo = aTodos[i];
 				if (oTodo.completed) {
 					aTodos.splice(i, 1);
 				}
@@ -56,13 +56,11 @@ sap.ui.define([
 		/**
 		 * Updates the number of items not yet completed
 		 */
-		updateItemsLeftCount: function() {
-			var oModel = this.getView().getModel();
-			var aTodos = oModel.getProperty("/todos") || [];
+		updateItemsLeftCount() {
+			const oModel = this.getView().getModel();
+			const aTodos = oModel.getProperty("/todos") || [];
 
-			var iItemsLeft = aTodos.filter(function(oTodo) {
-				return oTodo.completed !== true;
-			}).length;
+			const iItemsLeft = aTodos.filter((oTodo) => oTodo.completed !== true).length;
 
 			oModel.setProperty("/itemsLeftCount", iItemsLeft);
 		},
@@ -71,8 +69,8 @@ sap.ui.define([
 		 * Trigger search for specific items. The removal of items is disable as long as the search is used.
 		 * @param {sap.ui.base.Event} oEvent Input changed event
 		 */
-		onSearch: function(oEvent) {
-			var oModel = this.getView().getModel();
+		onSearch(oEvent) {
+			const oModel = this.getView().getModel();
 
 			// First reset current filters
 			this.aSearchFilters = [];
@@ -81,7 +79,7 @@ sap.ui.define([
 			this.sSearchQuery = oEvent.getSource().getValue();
 			if (this.sSearchQuery && this.sSearchQuery.length > 0) {
 				oModel.setProperty("/itemsRemovable", false);
-				var filter = new Filter("title", FilterOperator.Contains, this.sSearchQuery);
+				const filter = new Filter("title", FilterOperator.Contains, this.sSearchQuery);
 				this.aSearchFilters.push(filter);
 			} else {
 				oModel.setProperty("/itemsRemovable", true);
@@ -90,7 +88,7 @@ sap.ui.define([
 			this._applyListFilters();
 		},
 
-		onFilter: function(oEvent) {
+		onFilter(oEvent) {
 			// First reset current filters
 			this.aTabFilters = [];
 
@@ -113,13 +111,13 @@ sap.ui.define([
 			this._applyListFilters();
 		},
 
-		_applyListFilters: function() {
-			var oList = this.byId("todoList");
-			var oBinding = oList.getBinding("items");
+		_applyListFilters() {
+			const oList = this.byId("todoList");
+			const oBinding = oList.getBinding("items");
 
 			oBinding.filter(this.aSearchFilters.concat(this.aTabFilters), "todos");
 
-			var sI18nKey;
+			let sI18nKey;
 			if (this.sFilterKey && this.sFilterKey !== "all") {
 				if (this.sFilterKey === "active") {
 					sI18nKey = "ACTIVE_ITEMS";
@@ -134,9 +132,9 @@ sap.ui.define([
 				sI18nKey = "ITEMS_CONTAINING";
 			}
 
-			var sFilterText;
+			let sFilterText;
 			if (sI18nKey) {
-				var oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
+				const oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
 				sFilterText = oResourceBundle.getText(sI18nKey, [this.sSearchQuery]);
 			}
 

webapp/test/integration/AllJourneys.js

@@ -4,7 +4,7 @@ sap.ui.define([
 	"sap/ui/demo/todo/test/integration/TodoListJourney",
 	"sap/ui/demo/todo/test/integration/SearchJourney",
 	"sap/ui/demo/todo/test/integration/FilterJourney"
-], function(Opa5, Startup) {
+], (Opa5, Startup) => {
 	"use strict";
 
 	Opa5.extendConfig({