Requirement

Provide an ESLint plugin to easily integrate UI5 linter checks into existing development workflows.

Challenges

Or why this was not our initial design goal

• ESLint rules only check one file at a time. There's no built-in way of holding a context of the project, so that imported modules from the same project can be found and used to gather type information
  • A key requirement of UI5 linter is the ability to resolve indirect usage of deprecated API. This is done by resolving the (TypeScript-) types of dependencies used in a module and checking every access to them for usage of deprecated API
  • This is very similar to what for example typescript-eslint calls "type-aware linting"
  • ESLint might provide functionality for "project aware linting" in the future, see also: eslint/eslint#16819
• ESLint creates an AST representation of every source file. In order to lint non-JS resources such as XML-views, the UI5 manifest.json or ui5.yaml, we would need to provide a set of custom processors or even a custom parser
  • See for example the eslint-plugin kennyzhangdev/ui5depchk which makes use of a custom parser for XML resources
• Unclear integration with typescript-eslint: UI5 JavaScript files first need to be transpiled (from our proprietary AMD implementation to ESM), before doing the type-aware analysis using the TypeScript compiler. The latter could potentially be realized using a plugin for typescript-eslint (similar to for example gund/eslint-plugin-deprecation, but it's unclear how the first step can be integrated in that process
  • Additionally, since we are explicitly targeting projects that are not using Typescript, we would need to find a way to configure typescript-eslint for our own plugin. For example we need to provide it with our predefined tsconfig (the project typically doesn't have one), and we need to inject the UI5 type definitions provided by UI5 linter
    • Otherwise every project that wants to use UI5 linter would first need to properly setup TypeScript, even though it is not used for anything but the linter
  • UI5 linter currently declares its own dependency to typescript (required for linting and transpilation), while typescript-eslint requires projects to define the dependency themselves
  • typescript-eslint itself shows the limits of integrating "type-aware" linting into ESLint, especially with regards to performance (see https://typescript-eslint.io/packages/parser#allowautomaticsingleruninference, typescript-eslint/typescript-eslint#6366)
• ESLint requires synchronous implementations of custom processors and parsers (see eslint/eslint#14733 and eslint/eslint#15475)
  • Some of the UI5 Tooling API currently used within UI5 linter is asynchronous. Providing synchronous alternatives would require substantial development efforts

Proposal

• Monitor development on ESLint and typescript-eslint side
• Focus on providing a good out-of-box experience
  • Installing the UI5 linter CLI and execute ui5lint should just work for the majority of today's UI5 projects. Projects should typically not need to be modified
  • By requiring users to install additional dependencies and to maintain (eslint) configuration, we expect a much lower level of adoption, making such scenarios a secondary requirement.
• Provide Node.js API for individual linting steps to enable integration in third-party projects
  • This might include ESLint plugins provided by the community
  • Other possible consumers are existing linting solutions such as https://github.com/kennyzhangdev/ui5depchk, https://github.com/iljapostnovs/ui5plugin-linter or https://github.com/SAP/ui5-language-assistant
• Investigate LSP implementation to provide direct IDE integration

Running the linter today, you can specify specific files, but not folders to lint. It doesn't make sense to expand file paths to allow folders, it does make sense that we should be able to set an ignore file to ignore generated files like the component.js for instance, or 3rd-party code and libraries.

The workaround right now is to specify every individual file in the project to be linted, which is a bit tedious but works for now.

I would prefer to be able to set a global ignore file for use across projects.

Expected Behavior

UI5 linter should process our project without running into an internal error.

Current Behavior

When executing the UI5 linter on one of our projects, we see a "Maximum call stack size exceeded" error.

Steps to Reproduce the Issue

I can't share internal URLs here. I'll provide the information via a different channel.

Context

• UI5 linter version: 0.2.0
• Node.js Version: 20.11.1
• npm Version: unknown
• OS/Platform: Linux (no further details known)
• Browser (if relevant): n/a
• Other information regarding your environment (optional): nothing

Log Output / Stack Trace

Run UI5 linter on project ######## in repository ######
  
  ...

  ⚠️  Process Failed With Error
  
  Error Message:
  Failed to produce report for ###################################: Maximum call stack size exceeded
  
  For details, execute the same command again with an additional '--verbose' parameter
  
      at ChildProcess.exithandler (node:child_process:422:12)
      at ChildProcess.emit (node:events:518:28)
      at maybeClose (node:internal/child_process:1105:16)
      at ChildProcess._handle.onexit (node:internal/child_process:305:5) {
    code: 2,
    killed: false,
    signal: null,
    cmd: 'npx -c ############################/node_modules/@ui5/linter/bin/ui5lint.js --format json --details'

Is your feature request related to a problem? Please describe.

I´d like to run the ui5-linter for my Component. Out of the box this does not work because of the type: module in my ui5.yaml file. Because of this i think this is more a feature request then bug.

Recreate the problem:

git clone https://github.com/spreadsheetimporter/ui5-cc-spreadsheetimporter
cd packages/ui5-cc-spreadsheetimporter
ui5lint

Output when i run ui5lint:

⚠️  Process Failed With Error

Error Message:
Projects of type module have more than one source path

Error comes from https://github.com/SAP/ui5-project/blob/a085232514ebdd8ad11f5fd49323b0c0bb5c240b/lib/specifications/types/Module.js#L31

Describe the solution you'd like

I use the middleware ui5-middleware-ui5 to use the Component in my UI5 App, so use a special yaml file for this anyway ui5-serve.yaml change the type to application.

Most simple solution would that there would be a option so i can use the ui5-serve.yaml instead of the default ui5.yaml. I did not see the option in the cli yet.
Something like ui5lint --configFile ui5-serve.yaml

Additional context

I think i need to change my type in the ui5.yaml anyway, because application fits better to my project, right?
Either way, a option to change the default yaml file would be great

Expected Behavior

When saving the results of the linter to a file the ANSI codes should always be removed.

Current Behavior

When saving the results of the linter to a file within a CI pipeline on AzDO the ANSI codes were not removed. Running the same command on the terminal (MacOS 13.2.1 + zsh/bash) the ANSI codes are removed and everything is fine.

We are writing the lint results back to a pull request in AzDO and this is how it is looking like (without the sed workaround being applied)

I did not yet check any other CI/CD platform like GitHub Actions, Jenkins, etc.

Steps to Reproduce the Issue

1. Take any UI5 application with some ui5lint errors
2. Create a build pipeline in AzDo

pool:
  vmImage: 'ubuntu-latest'

steps:
  - script: |
       corepack enable
       corepack prepare pnpm@latest-9 --activate
    displayName: "🛠 Setup pnpm..."
  - script: >
       pnpm install -D @ui5/[email protected]
    displayName: "🛠 Install dependencies..."
  - script: 
       npx ui5lint --details &> $(Build.ArtifactStagingDirectory)/ui5lint-results.txt || true
       # sed 's/\x1b\[[0-9;]*m//g' $(Build.ArtifactStagingDirectory)/ui5lint-results.txt > $(Build.ArtifactStagingDirectory)/ui5lint-results-no-color.txt # workaround
    displayName: "🔍 Run ui5lint..."
  - task: PublishBuildArtifacts@1
    displayName: "📦 Publish build..."

Context

• UI5 linter version: 0.2.5
• Node.js Version: 20.14.0
• npm Version: pnpm 9.4.0
• OS/Platform: Ubuntu 22.04
• Other information regarding your environment (optional): bash environment running on agent with image ubuntu-22.04

When running the linter on a large project, the user has no feedback for progress during execution of linter.
I personally was not sure if the linter was actually running, or if it was stuck.

I was running a linter on a large folder structure, and linting took ~1.5 minutes (10k+ files)
Having no progress indication also is visible for smaller projects/ folders.
To easily get a sample project where linting also takes several seconds i used https://github.com/SAP/generator-easy-ui5 to get a fresh project.
Running ui5lint in this sample project also takes ~5seconds and no progress indication is visible.

It would be great to have some sort of visible progress indicator to know that linting is in progress.

Some options i can think of are:

• using "blinking" dots . . .
• using a "rotating line" - \ | / - \ | / -
• some text feedback that "linting in progress"

Steps to reproduce:
I added ui5linter to my CAP project using
npm install --save-dev @ui5/linter

There is an error when building the CAP project:
mbt build -p=cf

Error Message (root cause)
Unsupported platform for @esbuild/[email protected]: wanted {"os":"aix","cpu":"ppc64"} (current: {"os":"win32","cpu":"x64"})

Error Message (full)
[2024-03-13 18:56:19] INFO executing the "npm clean-install --production" command... npm WARN config production Use --omit=dev instead. .npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '@ui5/[email protected]', npm WARN EBADENGINE required: { node: '^18.14.2 || ^20.11.0 || >=21.2.0', npm: '>= 9.5.0' }, npm WARN EBADENGINE current: { node: 'v20.9.0', npm: '10.4.0' } npm WARN EBADENGINE } npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for @esbuild/[email protected]: wanted {"os":"aix","cpu":"ppc64"} (current: {"os":"win32","cpu":"x64"}) npm ERR! notsup Valid os: aix npm ERR! notsup Actual os: win32 npm ERR! notsup Valid cpu: ppc64 npm ERR! notsup Actual cpu: x64

Reason:
In package-lock.json there is following dependency which came from ui5linter installation. This esbuild library has "aix" defined as operating system (os):
"node_modules/@ui5/linter/node_modules/@esbuild/aix-ppc64": { "version": "0.19.12", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz", "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==", "cpu": [ "ppc64" ], "extraneous": true, "os": [ "aix" ], "engines": { "node": ">=12" } }

Expected Behavior

The linter should not complain about allowed globals, no matter how they are accessed.

Current Behavior

The linter complains about calls to sap.ui.define or other allowed globals when they are accessed via globalThis or one of the other names that refer to the global JavaScript context (e.g. self, window, top, parent, top level this).

Example:

if (typeof self.sap?.ui?.define === 'function') {
    sap.ui.define(['sap/ui/thirdparty/URI'], factory);

(found in sap/ui/documentation/sdk/util/Resources.js)

Context

• UI5 linter version: 0.2.2
• Node.js Version: v20.11.1
• npm Version: 10.2.4
• OS/Platform: macOS 14.4.1

Hi guys,

I got this one:
"idVehicleTableTitle" should match pattern: "/^idVehicleItems.*?Title$/"TagAttributeLinter(UI5plugin)

How can I change/disable existing checks?

Thanks,
Jan

Expected Behavior

Declaring a dependency to a deprecated module (e.g. via sap.ui.define) should yield an error, even when no API of that module is being used.

Current Behavior

Declaring a dependency to a deprecated module which exports an interface (e.g. sap.ui.core.Configuration) does not yield an error.

I suspect that this is related to check for symbol.valueDeclaration and the different behavior for interfaces.
The valueDeclaration can be undefined. This happens when there are no declarations associated with a symbol that could hold a value. If a symbol only represents an interface declaration, valueDeclaration would be undefined because an interface itself cannot hold a value. The code should probably check for all declarations of the symbol (symbol.getDeclarations()).

Steps to Reproduce the Issue

Run ui5lint for this code:

sap.ui.define(["sap/ui/core/Configuration"]);

Context

• UI5 linter package and version: 0.2.1
• Node.js Version: v20.11.1
• npm Version: 10.2.4
• OS/Platform: macOS 14.4.1

Log Output / Stack Trace

UI5 linter report:

0 problems (0 errors, 0 warnings)

Expected Behavior

Findings should be reported at the exact place where they are in the code.
More specifically, findings for different functions should not be reported at the exact same line/column position.

Background

Some tools or IDEs only display one finding per line/column, which currently prevents some findings from being displayed.
One example of this are the tasks in VS Code, which can be used to display problems based on the output of a task, like running ui5lint.

Example

The code

sap.ui.getCore().attachInit(() => {});

should create two findings

• Call to deprecated function 'getCore' (sap.ui.getCore) pointing to column 8 (getCore)
• Call to deprecated function 'attachInit' of class 'Core' pointing to column 18 (attachInit)

[
  {
    "filePath": "webapp/Test.js",
    "messages": [
      {
        "ruleId": "ui5-linter-no-deprecated-api",
        "severity": 2,
        "line": 1,
        "column": 18,
        "message": "Call to deprecated function 'attachInit' of class 'Core'"
      },
      {
        "ruleId": "ui5-linter-no-deprecated-api",
        "severity": 2,
        "line": 1,
        "column": 8,
        "message": "Call to deprecated function 'getCore' (sap.ui.getCore)"
      }
    ],
    "errorCount": 2,
    "warningCount": 0,
    "fatalErrorCount": 0
  }
]

Current Behavior

Both findings point to column 1

[
  {
    "filePath": "webapp/Test.js",
    "messages": [
      {
        "ruleId": "ui5-linter-no-deprecated-api",
        "severity": 2,
        "line": 1,
        "column": 1,
        "message": "Call to deprecated function 'attachInit' of class 'Core'"
      },
      {
        "ruleId": "ui5-linter-no-deprecated-api",
        "severity": 2,
        "line": 1,
        "column": 1,
        "message": "Call to deprecated function 'getCore' (sap.ui.getCore)"
      }
    ],
    "errorCount": 2,
    "warningCount": 0,
    "fatalErrorCount": 0
  }
]

Steps to Reproduce the Issue

See example above.

Context

• UI5 linter version: 0.2.2
• Node.js Version: 20.12.2
• npm Version: 10.5.0
• OS/Platform: macOS
• Browser (if relevant): unknown
• Other information regarding your environment (optional): nothing

Log Output / Stack Trace

See above.

When running the linter in a newly generated Fiori elements application then an error is shown in the Component.js. The error indicates that the component needs to implement the interface sap.ui.core.IAsyncContentCreation, however, the interface is already implemented by the base class (sap/fe/core/AppComponent), therefore, it shouldn't be necessary.

Expected Behavior

No error in the Component.js

Current Behavior

6:16 **error** Component Routing is not configured to load its targets asynchronously.. Details: Use Asynchronous Loading (https://ui5.sap.com/#/topic/676b636446c94eada183b1218a824717). Implement sap.ui.core.IAsyncContentCreation interface in Component.js or set the "async" flag for "sap.ui5/routing/config" in the component manifest.

Steps to Reproduce the Issue

1. Use the Fiori application generate and generate a LROP application for an OData v4 service
2. Run npx --yes @ui5/linter@latest --details
3. Check the console

Context

• UI5 linter version: latest
• Node.js Version: unknown
• npm Version: unknown
• OS/Platform: unknown
• Browser (if relevant): unknown
• Other information regarding your environment (optional): nothing

Log Output / Stack Trace

{...}

Description

Currently, the UI5 Linter outputs results in an ESLint-like style to the console. To make these findings transferrable to the VSCode "Reports" tab, we need to adopt VSCode's formatter style.

Steps to Reproduce

1. Set up VSCode tasks for the project using the following sample code:

   // .vscode > tasks.json
   {
       "version": "2.0.0",
       "tasks": [
           {
               "label": "UI5 version 2.0 check",
               "type": "shell",
               "command": "npx --yes @ui5/linter@latest",
               "problemMatcher": ["$eslint-stylish"]
           }
       ]
   }

2. Run the task on a Windows machine.

Expected Behavior

The VSCode "Reports" tab should correctly parse the output from the UI5 Linter and display all findings.

Actual Behavior

On Windows machines, the output format is not properly parsed, and not all findings are transferred to the "Reports" tab.

Documentation

For more information on configuring VSCode tasks, refer to the documentation: VSCode Tasks Documentation.

Findings & Possible Solution

Currently, on Windows, when a new row is added by the terminal (not programmatically by the linter), it adds some whitespaces. These whitespaces are interpreted by the "problemMatcher": ["$eslint-stylish"] as a data separator, causing the description to be cut off.

We must find a way to make the problemMatcher treat the description as a whole text.
Hint: The issue is not related to the chalk module. It does add some ANSI characters, but the issue is reproducible even without it.

A possible solution is to check ESLint's formatter implementation: ESLint Stylish Formatter. The table module used in the implementation orders the data in columns and rows, and the "divider" is a whitespace, which is likely causing the formatting issue on Windows.

Is your feature request related to a problem? Please describe.

As of now it is only possibe to display the linter reports as text style comments in pull requests (see #175).

Describe the solution you'd like

For better readability and interactivity (links to documentation, API reference, ...) it would be great to have a markdown style output that can be just displayed as is in the comment section of pull requests. Therefore a new format option markdown could be introduced that ensures proper output of the linter results in markdown.

Expected Behavior

I ran ui5lint and expected a code quality report.

Current Behavior

Running ui5lint failed with the following error: "Unable to find a UI5 Project"

$ ui5lint --verbose
verb cli:middlewares:base using ui5lint version 0.1.3 (from C:\Users\Roland_Bouman\AppData\Roaming\npm\node_modules\@ui5\linter\bin\ui5lint.js)
verb cli:middlewares:base using node version v20.11.1

⚠️  Process Failed With Error

Error Message:
Unable to find a UI5 project at C:\roland\projects\s4explorer\zsavis-launchpad\web\zsavis.
Please make sure to run "ui5lint" in the root directory of your UI5 project.

Stack Trace:
Error: Unable to find a UI5 project at C:\roland\projects\s4explorer\zsavis-launchpad\web\zsavis.
Please make sure to run "ui5lint" in the root directory of your UI5 project.
    at getProjectGraph (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/linter/linter.js:61:15)
    at async lintProject (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/linter/linter.js:79:19)
    at async Object.handleLint [as handler] (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/cli/base.js:95:17)

If you think this is an issue of the ui5-linter, you might report it using the following URL: https://github.com/SAP/ui5-linter/issues/new/choose

Steps to Reproduce the Issue

See above

Context

• UI5 linter package and version: 0.1.3
• Node.js Version: v20.11.1
• npm 9.6.4
• OS/Platform: Microsoft Windows 10 Enterprise
• Browser (if relevant): NA
• Other information regarding your environment (optional): This is wat my project dir looks like:

Log Output / Stack Trace

Error: Unable to find a UI5 project at C:\roland\projects\s4explorer\zsavis-launchpad\web\zsavis.
Please make sure to run "ui5lint" in the root directory of your UI5 project.
    at getProjectGraph (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/linter/linter.js:61:15)
    at async lintProject (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/linter/linter.js:79:19)
    at async Object.handleLint [as handler] (file:///C:/Users/Roland_Bouman/AppData/Roaming/npm/node_modules/@ui5/linter/lib/cli/base.js:95:17)

Expected Behavior

I expected the linter would pick up the ui5 version from the bootstrap script in my index.html

Current Behavior

I changed the ui5 version from 1.108.27 to 1.120.11 by changing the url in my bootstrap script tag in index.html:

    <script
      id="sap-ui-bootstrap"
      src="https://sapui5.hana.ondemand.com/1.120.11/resources/sap-ui-core.js"
      ....  
    > 

I ran the linter but the error report was identical. However, when running the ui5 app with the 1.120 version, there were numerous deprecation messages in the console log. I would love to catch those with the linter without having to run the app (and access every feature to see if the runtime generates deprecation messages)

Steps to Reproduce the Issue

1. create app run linter
2. update ui5 uri in bootstrap script
3. run linter again

Context

UI5 linter package and version: 0.1.3
Node.js Version: v20.11.1
npm 9.6.4
OS/Platform: Microsoft Windows 10 Enterprise

Is your feature request related to a problem? Please describe.

Our source folder is called app instead of webapp. Therefore, we cannot use the ui5-linter.

Even with a direct file path, ui5-linter refuses to lint the file:

ui5lint --details --file-paths /home/xxx/dev/project/app/folder123/business-objects/business-objects.controller.js
Error Message:
File path /home/xxx/dev/project/app/folder123/business-objects/business-objects.controller.js is not located within the detected source or test directories of the project

Describe the solution you'd like

There should be an option to specify the source directory. Or at least a way to forcefully lint a file using a direct file path without being patronized by the ui5-linter.

This issue describes the currently foreseen changes for the first stable release of @ui5/linter. The list is not exhaustive and may change over time.

Detection improvements

• Detect usage of deprecated dependencies
  • #34
  • #39
  • #104
• #23
• #60
• #73
• Check JavaScript code within HTML
  • #48
• Detect usage of partially deprecated UI5 APIs (e.g. when only a parameter of a method is deprecated, but not the method itself)
  • #33
  • ...
• #86
• Check for Control best practices (CPOUI5FOUNDATION-858)
• Detect usage of deprecated JSON/HTML views/fragments
• Detect usage of private/restricted UI5 APIs
• Check TypeScript code

Features

• #170 (CPOUI5FOUNDATION-782)
• Allow configuration of UI5 version (CPOUI5FOUNDATION-856)
  • Currently, the latest LTS version 1.120 is used
• Provide a Node.js API

Optimizations

• Improve performance and reduce memory consumption
  • #29
  • #46
  • #179

Expected Behavior

When reporting the use of a deprecated method, the linter should name the correct type that provides the method (Naming the subclass on which the method is called instead of naming the type that defines the method would be acceptable, too).

Current Behavior

In the case of method call chains, the linter might name a totally different type, which is confusing for developers.

Steps to Reproduce the Issue

Lint the following module

sap.ui.define(["sap/m/Button"], (Button) => {
	const ctrl = new Button();
	ctrl.$().control(document.body); // jQuery.fn.control is deprecated
});

The linter reports the following

"Call to deprecated function 'control' of class 'Button'"

but Button neither defines nor inherits method control. control is a method of jQuery.

Context

• UI5 linter version: 0.2.2
• Node.js Version: v20.11.1
• npm Version: 10.2.4
• OS/Platform: macOS 14.4.1
• Browser (if relevant): n/a
• Other information regarding your environment (optional): n/a