|
| 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 |
0 commit comments