Skip to content

Commit 5d07411

Browse files
authored
feat(ui5-modernization): Add UI5 modernization plugin (#77)
Adds the new ui5-modernization plugin with 20 skills for automated UI5 app modernization. The plugin provides agent skills that fix UI5 linter findings and modernize legacy patterns. Skills on top of the fixing capabilities of the UI5 linter: - fix-bootstrap-params - fix-component-async - fix-control-renderer - fix-csp-compliance - fix-cyclic-deps - fix-deprecated-controls - fix-fiori-elements-extensions - fix-js-globals - fix-library-init - fix-linter-blind-spots - fix-manifest-json - fix-partially-deprecated-apis - fix-pseudo-modules - fix-table-row-mode - fix-xml-globals - fix-xml-native-html Skills applying modernization best practices: - modernize-ui5-app - modernize-test-starter - modernize-flp-sandbox JIRA: CPOUI5FRAMEWORK-895
1 parent 2da5767 commit 5d07411

76 files changed

Lines changed: 20287 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525

2626
## Plugin Overview
2727
- [UI5](./plugins/ui5/README.md)
28+
- [UI5 Modernization](./plugins/ui5-modernization/README.md)
2829
- [UI5 TypeScript Conversion](./plugins/ui5-typescript-conversion/README.md)
2930

3031
## Further Information

knip.config.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const config = {
2+
/**
3+
* We only need dependency checking at the moment,
4+
* so all checks except for dependencies are turned off.
5+
*/
6+
rules: {
7+
files: "off",
8+
duplicates: "off",
9+
unlisted: "off",
10+
binaries: "off",
11+
unresolved: "off",
12+
catalog: "off",
13+
exports: "off",
14+
types: "off",
15+
enumMembers: "off",
16+
}
17+
};
18+
19+
export default config;
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "ui5-modernization",
3+
"version": "0.1.4",
4+
"description": "Complete UI5 modernization toolkit with workflow and specialized fix patterns for modernizing SAPUI5/OpenUI5 applications",
5+
"author": {
6+
"name": "SAP SE"
7+
},
8+
"homepage": "https://github.com/UI5/plugins-coding-agents",
9+
"repository": "https://github.com/UI5/plugins-coding-agents",
10+
"keywords": [
11+
"ui5",
12+
"sapui5",
13+
"openui5",
14+
"modernization",
15+
"linter",
16+
"upgrade"
17+
],
18+
"license": "Apache-2.0",
19+
"skills": [
20+
"./skills/"
21+
]
22+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"mcpServers": {
3+
"chrome-devtools": {
4+
"command": "npx",
5+
"args": ["-y", "chrome-devtools-mcp@latest"]
6+
}
7+
}
8+
}
Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
# UI5 Modernization Plugin
2+
3+
A comprehensive plugin providing a complete toolkit for modernizing SAPUI5/OpenUI5 applications.
4+
5+
## Overview
6+
7+
This plugin provides:
8+
9+
- **Autonomous modernization workflow** with end-to-end orchestration in five phases
10+
- **Specialized fix skills** for every UI5 linter rule category
11+
- **Verification gates** at every phase boundary (full autonomous, half autonomous, or manual)
12+
- **Validation** at every step via UI5 linter integration
13+
14+
## Installation
15+
16+
### Via Claude CLI
17+
18+
```bash
19+
claude plugin install ui5-modernization@claude-plugins-official
20+
```
21+
22+
### In Claude Code
23+
24+
```bash
25+
/plugin install ui5-modernization@claude-plugins-official
26+
```
27+
28+
## How It Works
29+
30+
The goal is to modernize your OpenUI5/SAPUI5 app — targeting manifest version 2.0.0 with a minimum framework version of 1.136.0. This means replacing deprecated APIs with their modern equivalents and enforcing strict module imports, eliminating reliance on globals and legacy patterns.
31+
32+
This plugin is built around the [UI5 linter](https://github.com/UI5/linter) (`@ui5/linter`) — a static analysis tool that detects deprecated APIs, global namespace access, and other incompatibilities. The linter serves two roles in the modernization workflow:
33+
34+
1. **Detection** — Each skill reads linter output to identify what needs fixing. The linter's rule IDs (e.g., `no-deprecated-api`, `no-globals`) map directly to specific fix skills.
35+
2. **Verification** — After applying fixes, the linter is re-run to confirm errors are resolved. Zero remaining errors = phase complete.
36+
37+
A few issues cannot be detected by the linter (runtime-only patterns, cyclic dependencies). For these, the plugin includes its own detection scripts that fill the gap.
38+
39+
## Quick Start
40+
41+
### 1. Start With the Modernization Workflow
42+
43+
The main entry point is the orchestrator which runs all five phases:
44+
45+
```
46+
/modernize-ui5-app
47+
```
48+
49+
This will:
50+
1. Ask which verification mode you want (full autonomous / half autonomous / manual)
51+
2. Run Phase 1: UI5 linter autofix + test starter restructure
52+
3. Run Phase 2: manifest.json + Component.js foundation
53+
4. Run Phase 3: module system (globals, pseudo modules, cyclic dependencies, blind spots)
54+
5. Run Phase 4: deprecated API replacements
55+
6. Run Phase 5: CSP compliance
56+
7. Generate `MODERNIZATION-REPORT.md` and `MODERNIZATION-ISSUES.md`
57+
58+
Each phase creates a git commit and runs the verification gate per your chosen mode.
59+
60+
### 2. Use Specialized Skills for Specific Issues
61+
62+
When you encounter specific error patterns, use the targeted skills directly:
63+
64+
```
65+
# Test infrastructure (Phase 1)
66+
/modernize-test-starter # Test Starter modernization
67+
68+
# Foundation (Phase 2)
69+
/fix-component-async # Component.js async issues
70+
/fix-manifest-json # manifest.json issues
71+
72+
# Module system issues (Phase 3)
73+
/fix-js-globals # no-globals errors in JS files
74+
/fix-xml-globals # no-globals errors in XML views/fragments
75+
/fix-pseudo-modules # no-pseudo-modules, no-implicit-globals
76+
/fix-linter-blind-spots # Runtime patterns linter misses
77+
/fix-cyclic-deps # Circular sap.ui.define dependencies
78+
79+
# Deprecated API modernizations (Phase 4)
80+
/fix-bootstrap-params # HTML bootstrap parameters
81+
/fix-library-init # Library.init() apiVersion
82+
/fix-control-renderer # Control renderer issues
83+
/fix-deprecated-controls # Deprecated controls, classes, interfaces
84+
/fix-fiori-elements-extensions # Fiori Elements V2 controller extensions
85+
/fix-partially-deprecated-apis # Partially deprecated API calls
86+
/fix-table-row-mode # Deprecated Table row properties
87+
/fix-xml-native-html # Native HTML/SVG in XML views
88+
89+
# CSP compliance (Phase 5)
90+
/fix-csp-compliance # Unsafe inline scripts
91+
92+
# FLP sandbox
93+
/modernize-flp-sandbox # Dedicated FLP Sandbox modernization skill
94+
```
95+
96+
## What Gets Changed
97+
98+
The modernization workflow modifies your project in predictable ways:
99+
100+
- **Files modified**: JS controllers, XML views/fragments, HTML test pages, `manifest.json`, `Component.js`
101+
- **Files generated**: `MODERNIZATION-REPORT.md` (statistics), `MODERNIZATION-ISSUES.md` (unfixable errors)
102+
- **Git commits**: One commit per phase (5–6 total)
103+
- **Not touched**: `node_modules/`, `dist/`, build artifacts, or files outside the app source
104+
105+
### Rollback
106+
107+
Start with a clean working directory. Each phase is a separate git commit, so you can undo any phase:
108+
109+
```bash
110+
git revert HEAD # undo the last phase
111+
git reset --hard HEAD~3 # undo the last 3 phases
112+
```
113+
114+
## Skills Included
115+
116+
### Orchestrator
117+
118+
- **`/modernize-ui5-app`** - End-to-end workflow: runs five phases with verification gates, delegates to specialized skills via sub-agents, and generates a modernization report
119+
120+
### Phase 1: Mechanical Baseline
121+
122+
- **`/modernize-test-starter`** - Modernize QUnit unit tests and OPA5 integration tests to the Test Starter concept (handles both single-HTML + AllJourneys and many-individual-HTML patterns)
123+
124+
### Phase 2: Foundation
125+
126+
- **`/fix-manifest-json`** - Fix manifest.json issues: outdated manifest version, legacy OpenUI5/SAPUI5 version, deprecated libraries/components, deprecated view/model types, removed properties
127+
- **`/fix-component-async`** - Fix Component.js async configuration: `IAsyncContentCreation` interface, manifest declaration, redundant async flags
128+
129+
### Phase 3: Module System & Globals
130+
131+
- **`/fix-js-globals`** - Fix JavaScript `no-globals` errors: global namespace assignments, `sap.ui.core.Core` direct access, jQuery/$ global calls, controller factories, legacy module wrapping
132+
- **`/fix-xml-globals`** - Fix XML view/fragment globals: global variable access, ambiguous event handlers, formatters, type references in bindings, factory functions, app-namespace globals
133+
- **`/fix-pseudo-modules`** - Fix pseudo module and implicit global issues: deprecated enum/DataType pseudo module access, direct `library.EnumName` access, OData expression addons
134+
- **`/fix-linter-blind-spots`** - Fix runtime-breaking patterns the linter does NOT report: app-namespace globals in JS files, QUnit 1.x assertions, sinon mocking via global chains
135+
- **`/fix-cyclic-deps`** - Detect and resolve cyclic module dependencies introduced during modernization (2-node direct cycles auto-fixed, 3+ node chains flagged)
136+
137+
### Phase 4: Deprecated APIs
138+
139+
- **`/fix-bootstrap-params`** - Fix HTML bootstrap parameter issues: missing/deprecated parameters (`async`, `compat-version`, `animation`, `binding-syntax`), deprecated theme values, deprecated libraries
140+
- **`/fix-library-init`** - Fix Library.init() apiVersion issues and modernize library initialization
141+
- **`/fix-control-renderer`** - Fix Control renderer issues: missing renderer declaration, string-based renderer, implicit auto-discovery, `apiVersion:2` configuration
142+
- **`/fix-deprecated-controls`** - Fix deprecated controls, classes, interfaces, and types with modern replacements (e.g., `sap.m.MessagePage` to `IllustratedMessage`)
143+
- **`/fix-fiori-elements-extensions`** - Handle Fiori elements V2 controller extensions during modernization (manifest-based `sap.ui.controllerExtensions`)
144+
- **`/fix-partially-deprecated-apis`** - Fix partially deprecated API usage: `Parameters.get`, `JSONModel.loadData`, `Mobile.init`, `ODataModel.v2.createEntry`, `View.create`, `Fragment.load`, `Router` constructor
145+
- **`/fix-table-row-mode`** - Modernize deprecated Table row properties (`visibleRowCountMode`, `visibleRowCount`, `rowHeight`, etc.) to structured `rowMode` aggregation
146+
- **`/fix-xml-native-html`** - Fix native HTML and SVG usage in XML views/fragments: replace `html:div`, `html:span`, `html:a` with UI5 controls
147+
148+
### Phase 5: CSP Compliance
149+
150+
- **`/fix-csp-compliance`** - Fix Content Security Policy compliance: extract unsafe inline scripts to external files
151+
152+
### Other Skills
153+
154+
#### FLP Sandbox Modernization
155+
156+
- **`/modernize-flp-sandbox`** - Modernize legacy FLP sandbox HTML files to new FLP Sandbox format: converts inline `window["sap-ushell-config"]` to declarative JSON. Requires framework version >= 1.147. This is a dedicated skill not part of the `/modernize-ui5-app` workflow and needs to be triggered separately.
157+
158+
## Verification Modes
159+
160+
The orchestrator asks once at the start which verification mode to use at every phase boundary:
161+
162+
| Mode | Behavior |
163+
|------|----------|
164+
| **Full autonomous** | Run build + tests → attempt fix on failure → escalate after 3 retries |
165+
| **Half autonomous** | Run build + tests → report results → wait for user input |
166+
| **Manual** | Print summary → wait for user to verify externally |
167+
168+
## Prerequisites
169+
170+
Before using this plugin, ensure you have:
171+
172+
1. **Node.js Version v20.11.0, v22.0.0, or higher**
173+
2. **OpenUI5/SAPUI5 application** with `ui5.yaml` in project root (required for linter)
174+
3. **Git repository** with clean working directory
175+
4. **Chrome DevTools MCP** (optional) — only needed for automated test verification in full/half autonomous modes
176+
177+
## Chrome DevTools MCP Integration
178+
179+
This plugin leverages the [Chrome DevTools MCP](https://www.npmjs.com/package/chrome-devtools-mcp) server for browser-based test verification and debugging. The MCP server is configured in `.mcp.json` and provides:
180+
181+
- **Automated test execution** — Run QUnit and OPA5 tests in a real browser during full/half autonomous verification modes
182+
- **Page inspection** — Take accessibility snapshots, capture screenshots, and read console output to verify OpenUI5/SAPUI5 app behavior after modernization
183+
184+
The Chrome DevTools MCP is optional — it is only used when running in full or half autonomous verification mode. The manual mode does not require it.
185+
186+
## Troubleshooting
187+
188+
```bash
189+
# Get fix guidance for all errors
190+
npx @ui5/linter --details
191+
192+
# Get fix guidance for specific file
193+
npx @ui5/linter --details path/to/file.js
194+
```
195+
196+
## Resources
197+
198+
- [Modernization Guide for OpenUI5](https://sdk.openui5.org/#/topic/db492368adbe490fa5d4ec7ebd98b187?q=modern)
199+
- [Modernization Guide for SAPUI5](https://ui5.sap.com/#/topic/db492368adbe490fa5d4ec7ebd98b187)
200+
- [Deprecated Core API for OpenUI5](https://sdk.openui5.org/#/topic/798dd9abcae24c8194922615191ab3f5?q=Deprecated)
201+
- [Deprecated Core API for SAPUI5](https://ui5.sap.com/#/topic/798dd9abcae24c8194922615191ab3f5?q=Deprecated%20Core)
202+
- [UI5 MCP Server](https://github.com/UI5/mcp-server) — query deprecated APIs, find modern replacements, get code examples
203+
- [Commit history](https://github.com/UI5/plugins-coding-agents/commits/main) — changelog
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "ui5-modernization",
3+
"version": "0.1.4",
4+
"description": "Complete UI5 modernization toolkit with workflow and specialized fix patterns for modernizing SAPUI5/OpenUI5 applications",
5+
"author": {
6+
"name": "SAP SE"
7+
},
8+
"homepage": "https://github.com/UI5/plugins-coding-agents",
9+
"repository": "https://github.com/UI5/plugins-coding-agents",
10+
"keywords": [
11+
"ui5",
12+
"sapui5",
13+
"openui5",
14+
"modernization",
15+
"linter",
16+
"upgrade"
17+
],
18+
"license": "Apache-2.0",
19+
"skills": [
20+
"./skills/"
21+
]
22+
}

0 commit comments

Comments
 (0)