Update dependencies, add ui5-linter and adapt

Author: akudev

package.json

@@ -10,7 +10,8 @@
     "start": "ui5 serve --port 8080 -o index.html",
     "start:dist": "ui5 serve  --port 8080 -o index.html --config ui5-dist.yaml",
     "ts-typecheck": "tsc --noEmit",
-    "lint": "eslint webapp"
+    "lint": "eslint webapp",
+    "ui5lint": "ui5lint"
   },
   "repository": {
     "type": "git",
@@ -19,10 +20,11 @@
   "devDependencies": {
     "@types/openui5": "1.127.0",
     "@ui5/cli": "^4",
-    "eslint": "^9.10.0",
-    "typescript-eslint": "^8.4.0",
-    "globals": "^15.9.0",
-    "typescript": "^5.6.2",
+    "@ui5/linter": "^1.1.1",
+    "eslint": "^9.13.0",
+    "globals": "^15.11.0",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.11.0",
     "ui5-middleware-livereload": "^3",
     "ui5-middleware-simpleproxy": "^3",
     "ui5-tooling-transpile": "^3"

step-by-step.md

@@ -4,7 +4,7 @@ This guide explains step-by-step and command-by-command how you get to a complet
 
 While you can get started faster by just copying and modifying the entire *Hello World* app, this step-by-step guide will help you understand every bit and piece of the setup and how the pieces fit together.
 
-It consists of ten steps, but in fact only the first half is really related to TypeScript. The remaining five steps are about adding the UI5 tools to the project and wrapping everything up nicely, so these steps apply more or less to any UI5 application project.
+It consists of ten steps, but in fact only the first four steps and step six are really related to TypeScript. The other steps are about adding the UI5 tools to the project and wrapping everything up nicely, so these steps apply more or less to any UI5 application project.
 
 ## Table of Contents
 
@@ -238,7 +238,7 @@ metadata:
 type: application
 ```
 
-For running UI5 applications with the UI5 Tooling we also need some additional `framework` information like framework `name` and `version`) and the required libraries and theme libraries. Now put the following content in your `ui5.yaml` (please adopt the `metadata > name` to `ui5.typescript.helloworld`):
+For running UI5 applications with the UI5 Tooling we also need some additional `framework` information (like framework `name` and `version`) and the required libraries and theme libraries. Now put the following content in your `ui5.yaml` (please adopt the `metadata > name` to `ui5.typescript.helloworld`):
 
 ```yaml
 specVersion: "3.0"
@@ -284,8 +284,8 @@ What you can do now: create a simple `test.html` file in the `webapp` folder and
             src="resources/sap-ui-core.js"
             data-sap-ui-libs="sap.m"
             data-sap-ui-theme="sap_horizon"
-            data-sap-ui-compatVersion="edge"
-            data-sap-ui-oninit="onInit"
+            data-sap-ui-compat-version="edge"
+            data-sap-ui-on-init="onInit"
             data-sap-ui-async="true"
     ></script>
     <script>
@@ -307,7 +307,7 @@ What you can do now: create a simple `test.html` file in the `webapp` folder and
 </html>
 ```
 
-After you can start the `test.html` running inside the development server of the UI5 CLI Tooling:
+After that, you can start the `test.html` running inside the development server of the UI5 CLI Tooling:
 
 ```sh
 npx ui5 serve -o test.html
@@ -473,6 +473,14 @@ npx ui5 serve -o index.html --config ui5-dist.yaml
 
 Now it's time to write down the various commands used so far as scripts in `package.json`, so you don't need to type them every time they are used.
 
+While we are at it, we can add one more command: the `ui5-linter`, which complements eslint with code checks that make sure the code adheres to the best practices and is ready for UI5 2.0:
+
+```sh
+npm install --save-dev @ui5/linter
+```
+
+It can be invoked using `npx ui5lint`.
+
 Change the `"scripts"` section in the `package.json` file to have the following content. All scripts have already been used and explained earlier, so there is nothing new here, it's just for convenience.
 
 ```json
@@ -482,7 +490,8 @@ Change the `"scripts"` section in the `package.json` file to have the following
     "start": "ui5 serve --port 8080 -o index.html",
     "start:dist": "ui5 serve  --port 8080 -o index.html --config ui5-dist.yaml",
     "ts-typecheck": "tsc --noEmit",
-    "lint": "eslint webapp"
+    "lint": "eslint webapp",
+    "ui5lint": "ui5lint"
 }
 ```
 

webapp/Component.ts

@@ -8,6 +8,7 @@ import Device from "sap/ui/Device";
 export default class Component extends UIComponent {
 
 	public static metadata = {
+		interfaces: ["sap.ui.core.IAsyncContentCreation"],
 		manifest: "json"
 	};
 

webapp/index.html

@@ -5,12 +5,12 @@
 	<title>UI5 TypeScript Hello World App</title>
 	<script id="sap-ui-bootstrap"
 	        src="resources/sap-ui-core.js"
-	        data-sap-ui-resourceroots='{
+	        data-sap-ui-resource-roots='{
 	            "ui5.typescript.helloworld": "./"
 	        }'
 	        data-sap-ui-theme="sap_horizon"
-	        data-sap-ui-compatVersion="edge"
-	        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
+	        data-sap-ui-compat-version="edge"
+	        data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
 	        data-sap-ui-async="true"
 	        data-sap-ui-xx-waitForTheme="true"
 	        data-sap-ui-xx-supportedLanguages="en,de"

webapp/manifest.json

@@ -33,7 +33,6 @@
 		"rootView": {
 			"viewName": "ui5.typescript.helloworld.view.App",
 			"type": "XML",
-			"async": true,
 			"id": "app"
 		},
 

webapp/test.html

@@ -7,8 +7,8 @@
 	        src="resources/sap-ui-core.js"
 	        data-sap-ui-libs="sap.m"
 	        data-sap-ui-theme="sap_horizon"
-	        data-sap-ui-compatVersion="edge"
-	        data-sap-ui-oninit="onInit"
+	        data-sap-ui-compat-version="edge"
+	        data-sap-ui-on-init="onInit"
 	        data-sap-ui-async="true"
 	></script>
 	<script>

webapp/view/App.view.xml

@@ -5,18 +5,24 @@
 	xmlns:mvc="sap.ui.core.mvc">
 
 	<App id="app">
-		<MessagePage
+		<Page
 			title="Hello World"
-			text="This is a UI5 TypeScript Hello World app"
-			icon="sap-icon://accept"
-			id="page"
-			description="">
-			<buttons>
-				<Button
-					text="Say Hello"
-					press="sayHello" />
-			</buttons>
-		</MessagePage>
+			id="page">
+			<content>
+				<IllustratedMessage
+					title="Hello World"
+					illustrationType="sapIllus-SuccessHighFive"
+					enableVerticalResponsiveness="true"
+					description="This is a UI5 TypeScript Hello World app">
+					<additionalContent>
+						<Button
+							id="helloButton"
+							text="Say Hello"
+							press="sayHello" />
+					</additionalContent>
+				</IllustratedMessage>
+			</content>
+		</Page>
 	</App>
 
 </mvc:View>