-
Notifications
You must be signed in to change notification settings - Fork 7
feat(ui5-modernization): Add UI5 modernization plugin #77
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 7 commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
347daad
feat(ui5-modernization): Add UI5 modernization plugin
devtomtom 0710797
fix(ui5-modernization): Fix incomplete string escaping or encoding
devtomtom c6555ae
fix(ui5-modernization): Fix incomplete string escaping or encoding
devtomtom b16d8b2
fix(ui5-modernization): Align plugin version to 0.1.4
devtomtom 8090bd7
fix(ui5-modernization): Fix prettier formatting in plugin.json
devtomtom 0c8494e
fix(ui5-modernization): Fix prettier formatting in .github/plugin/plu…
devtomtom 90a793a
fix(ui5-modernization): Add knip.json config for unused file detection
devtomtom 853ed4e
fix(ui5-modernization): Reorder skills by phase and simplify prerequi…
devtomtom 6528ca5
fix(ui5-modernization): Adapt "skills" reference in plugin.json
devtomtom cd341d1
fix(ui5-modernization): Adapt "skills" reference in plugin.json
devtomtom f555152
fix(ui5-modernization): Switch from knip.json to knip.config.js and u…
devtomtom b112d60
fix(ui5-modernization): Apply suggestions from code review
devtomtom 334254e
fix(ui5-modernization): Apply Code Review
devtomtom 847c9a3
fix(ui5-modernization): Apply code review suggestions
devtomtom 56f2067
docs: Add ui5-modernization plugin to root README
devtomtom 3fdff64
fix(ui5-modernization): Apply code review suggestions
devtomtom f8f9682
fix(ui5-modernization): Apply code review suggestions
devtomtom 3439dec
fix(ui5-modernization): Further updates on the README
devtomtom File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "entry": ["plugins/**/scripts/**/*.js"], | ||
| "ignoreBinaries": ["commitlint", "husky", "knip", "licensee", "prettier"], | ||
| "ignoreDependencies": ["@commitlint/cli", "husky", "licensee", "prettier"] | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "name": "ui5-modernization", | ||
| "version": "0.1.4", | ||
| "description": "Complete UI5 modernization toolkit with workflow and specialized fix patterns for modernizing SAPUI5/OpenUI5 applications", | ||
| "author": { | ||
| "name": "SAP SE" | ||
| }, | ||
| "homepage": "https://github.com/UI5/plugins-coding-agents", | ||
| "repository": "https://github.com/UI5/plugins-coding-agents", | ||
| "keywords": [ | ||
| "ui5", | ||
| "sapui5", | ||
| "openui5", | ||
| "modernization", | ||
| "linter", | ||
| "upgrade" | ||
| ], | ||
| "license": "Apache-2.0", | ||
| "skills": "./skills" | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "mcpServers": { | ||
| "chrome-devtools": { | ||
|
devtomtom marked this conversation as resolved.
|
||
| "command": "npx", | ||
| "args": ["-y", "chrome-devtools-mcp@latest"] | ||
| } | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,215 @@ | ||
| # UI5 Modernization Plugin | ||
|
|
||
| A comprehensive plugin providing a complete toolkit for modernizing SAPUI5/OpenUI5 applications. | ||
|
devtomtom marked this conversation as resolved.
|
||
|
|
||
| ## Overview | ||
|
|
||
| Modern UI5 removes all deprecated APIs and global namespace access that were present in older versions. This plugin provides: | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
|
|
||
| - **Autonomous modernization workflow** with end-to-end orchestration in five phases | ||
| - **Specialized fix skills** for every linter rule category | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| - **Verification gates** at every phase boundary (full autonomous, half autonomous, or manual) | ||
| - **Validation** at every step via UI5 linter integration | ||
|
|
||
| ## Installation | ||
|
|
||
| ### Via Claude CLI | ||
|
|
||
| ```bash | ||
| claude plugin install ui5-modernization@claude-plugins-official | ||
| ``` | ||
|
|
||
| ### In Claude Code | ||
|
|
||
| ```bash | ||
| /plugin install ui5-modernization@claude-plugins-official | ||
| ``` | ||
|
|
||
| ## How It Works | ||
|
|
||
| The goal is to make your app compatible with **modern UI5** — targeting manifest version 2.0.0 with a minimum framework version of 1.136.0. Modern UI5 removes all deprecated APIs and enforces strict module imports, meaning apps that rely on globals or legacy patterns will break at runtime. | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
|
|
||
| This plugin is built around the [UI5 Linter](https://github.com/SAP/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: | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
|
|
||
| 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. | ||
| 2. **Verification** — After applying fixes, the linter is re-run to confirm errors are resolved. Zero remaining errors = phase complete. | ||
|
|
||
| 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. | ||
|
|
||
| ## Quick Start | ||
|
|
||
| ### 1. Start with the Modernization Workflow | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
|
|
||
| The main entry point is the orchestrator which runs all five phases: | ||
|
|
||
| ``` | ||
| /modernize-ui5-app | ||
| ``` | ||
|
|
||
| This will: | ||
| 1. Ask which verification mode you want (full autonomous / half autonomous / manual) | ||
| 2. Run Phase 1: UI5 Linter autofix + test starter restructure | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| 3. Run Phase 2: manifest.json + Component.js foundation | ||
| 4. Run Phase 3: module system (globals, pseudo-modules, cyclic deps, blind spots) | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| 5. Run Phase 4: deprecated API replacements | ||
| 6. Run Phase 5: CSP compliance | ||
| 7. Generate `MODERNIZATION-REPORT.md` and `MODERNIZATION-ISSUES.md` | ||
|
|
||
| Each phase creates a git commit and runs the verification gate per your chosen mode. | ||
|
|
||
| ### 2. Use Specialized Skills for Specific Issues | ||
|
|
||
| When you encounter specific error patterns, use the targeted skills directly: | ||
|
|
||
| ``` | ||
| # Module system issues (Phase 3) | ||
|
devtomtom marked this conversation as resolved.
|
||
| /fix-js-globals # no-globals errors in JS files | ||
| /fix-xml-globals # no-globals errors in XML views/fragments | ||
| /fix-pseudo-modules # no-pseudo-modules, no-implicit-globals | ||
| /fix-linter-blind-spots # Runtime patterns linter misses | ||
| /fix-cyclic-deps # Circular sap.ui.define dependencies | ||
|
|
||
| # Deprecated API modernizations (Phase 4) | ||
| /fix-bootstrap-params # HTML bootstrap parameters | ||
| /fix-library-init # Library.init() apiVersion | ||
| /fix-control-renderer # Control renderer issues | ||
| /fix-deprecated-controls # Deprecated controls, classes, interfaces | ||
| /fix-fiori-elements-extensions # Fiori Elements V2 controller extensions | ||
| /fix-partially-deprecated-apis # Partially deprecated API calls | ||
| /fix-table-row-mode # Deprecated Table row properties | ||
| /fix-xml-native-html # Native HTML/SVG in XML views | ||
|
|
||
| # Foundation (Phase 2) | ||
| /fix-component-async # Component.js async issues | ||
| /fix-manifest-json # manifest.json issues | ||
|
|
||
| # CSP compliance (Phase 5) | ||
| /fix-csp-compliance # Unsafe inline scripts | ||
|
|
||
| # Test infrastructure (Phase 1) | ||
| /modernize-test-starter # Test Starter modernization | ||
|
|
||
| # FLP sandbox | ||
| /modernize-flp-sandbox # FLP Sandbox 2.0 modernization | ||
| ``` | ||
|
devtomtom marked this conversation as resolved.
|
||
|
|
||
| ## What Gets Changed | ||
|
|
||
| The modernization workflow modifies your project in predictable ways: | ||
|
|
||
| - **Files modified**: JS controllers, XML views/fragments, HTML test pages, `manifest.json`, `Component.js` | ||
| - **Files generated**: `MODERNIZATION-REPORT.md` (statistics), `MODERNIZATION-ISSUES.md` (unfixable errors) | ||
| - **Git commits**: One commit per phase (5–6 total) | ||
| - **Not touched**: `node_modules/`, `dist/`, build artifacts, or files outside the app source | ||
|
|
||
| ### Rollback | ||
|
|
||
| Start with a clean working directory. Each phase is a separate git commit, so you can undo any phase: | ||
|
|
||
| ```bash | ||
| git revert HEAD # undo the last phase | ||
| git reset --hard HEAD~3 # undo the last 3 phases | ||
| ``` | ||
|
|
||
| ## Skills Included | ||
|
|
||
| ### Orchestrator | ||
|
|
||
| - **`/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 | ||
|
|
||
| ### Phase 1: Mechanical Baseline | ||
|
|
||
| - **`/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) | ||
|
|
||
| ### Phase 2: Foundation | ||
|
|
||
| - **`/fix-manifest-json`** - Fix manifest.json issues: outdated manifest version, legacy UI5 version, deprecated libraries/components, deprecated view/model types, removed properties | ||
| - **`/fix-component-async`** - Fix Component.js async configuration: `IAsyncContentCreation` interface, manifest declaration, redundant async flags | ||
|
|
||
| ### Phase 3: Module System & Globals | ||
|
|
||
| - **`/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 | ||
| - **`/fix-xml-globals`** - Fix XML view/fragment globals: global variable access, ambiguous event handlers, formatters, type references in bindings, factory functions, app-namespace globals | ||
| - **`/fix-pseudo-modules`** - Fix pseudo module and implicit global issues: deprecated enum/DataType pseudo module access, direct `library.EnumName` access, OData expression addons | ||
| - **`/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 | ||
| - **`/fix-cyclic-deps`** - Detect and resolve cyclic module dependencies introduced during modernization (2-node direct cycles auto-fixed, 3+ node chains flagged) | ||
|
|
||
| ### Phase 4: Deprecated APIs | ||
|
|
||
| - **`/fix-bootstrap-params`** - Fix HTML bootstrap parameter issues: missing/deprecated parameters (`async`, `compat-version`, `animation`, `binding-syntax`), deprecated theme values, deprecated libraries | ||
| - **`/fix-library-init`** - Fix Library.init() apiVersion issues and modernize library initialization | ||
| - **`/fix-control-renderer`** - Fix Control renderer issues: missing renderer declaration, string-based renderer, implicit auto-discovery, `apiVersion:2` configuration | ||
| - **`/fix-deprecated-controls`** - Fix deprecated controls, classes, interfaces, and types with modern replacements (e.g., `sap.m.MessagePage` to `IllustratedMessage`) | ||
| - **`/fix-fiori-elements-extensions`** - Handle Fiori Elements V2 controller extensions during modernization (manifest-based `sap.ui.controllerExtensions`) | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| - **`/fix-partially-deprecated-apis`** - Fix partially deprecated API usage: `Parameters.get`, `JSONModel.loadData`, `Mobile.init`, `ODataModel.v2.createEntry`, `View.create`, `Fragment.load`, `Router` constructor | ||
| - **`/fix-table-row-mode`** - Modernize deprecated Table row properties (`visibleRowCountMode`, `visibleRowCount`, `rowHeight`, etc.) to structured `rowMode` aggregation | ||
| - **`/fix-xml-native-html`** - Fix native HTML and SVG usage in XML views/fragments: replace `html:div`, `html:span`, `html:a` with UI5 controls | ||
|
|
||
| ### Phase 5: CSP Compliance | ||
|
|
||
| - **`/fix-csp-compliance`** - Fix Content Security Policy compliance: extract unsafe inline scripts to external files | ||
|
|
||
| ### FLP Sandbox Modernization | ||
|
|
||
| - **`/modernize-flp-sandbox`** - Modernize legacy FLP sandbox HTML files to FLP Sandbox 2.0 format: converts inline `window["sap-ushell-config"]` to declarative JSON | ||
|
|
||
|
devtomtom marked this conversation as resolved.
|
||
| ## Verification Modes | ||
|
|
||
| The orchestrator asks once at the start which verification mode to use at every phase boundary: | ||
|
|
||
| | Mode | Behavior | | ||
| |------|----------| | ||
| | **Full autonomous** | Run build + tests → attempt fix on failure → escalate after 3 retries | | ||
| | **Half autonomous** | Run build + tests → report results → wait for user input | | ||
| | **Manual** | Print summary → wait for user to verify externally | | ||
|
|
||
| ## Prerequisites | ||
|
|
||
| Before using this plugin, ensure you have: | ||
|
|
||
| 1. **Node.js 18+** | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| 2. **UI5 application** with `ui5.yaml` in project root (required for linter) | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| 3. **UI5 linter installed**: `npm install --save-dev @ui5/linter` | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| 4. **Git repository** with clean working directory | ||
| 5. **Chrome DevTools MCP** (optional) — only needed for automated test verification in full/half autonomous modes | ||
|
|
||
| ## Success Criteria | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
|
|
||
| For your app to work with modern UI5, you must fix **all linter errors (severity 2)**: | ||
|
|
||
| ```bash | ||
| npx @ui5/linter | ||
| ``` | ||
|
|
||
| Zero errors = ready for modern UI5. Warnings (severity 1) are non-blocking. | ||
|
|
||
| For machine-readable output (CI pipelines): | ||
|
|
||
| ```bash | ||
| # Count all critical errors (must be 0) | ||
| npx @ui5/linter --format json 2>&1 | jq '[.[] | .messages[]? | select(.severity == 2)] | length' | ||
|
|
||
| # Group by rule | ||
| npx @ui5/linter --format json 2>&1 | jq '[.[] | .messages[]? | select(.severity == 2)] | group_by(.ruleId) | map({rule: .[0].ruleId, count: length})' | ||
| ``` | ||
|
|
||
| ## Troubleshooting | ||
|
|
||
| ```bash | ||
| # Get fix guidance for all errors | ||
| npx @ui5/linter --details | ||
|
|
||
| # Get fix guidance for specific file | ||
| npx @ui5/linter --details path/to/file.js | ||
| ``` | ||
|
|
||
| ## Resources | ||
|
|
||
| - [UI5 Modernization Guide](https://ui5.sap.com/#/topic/db492368adbe490fa5d4ec7ebd98b187) | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| - [Deprecated Core API](https://ui5.sap.com/#/topic/798dd9abcae24c8194922615191ab3f5) | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| - [UI5 MCP Server](https://github.com/UI5/mcp-server) — query deprecated APIs, find modern replacements, get code examples | ||
| - [Commit history](https://github.com/UI5/plugins-coding-agents/commits/main) — changelog | ||
|
|
||
| ## License | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
|
|
||
| Apache-2.0 | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "name": "ui5-modernization", | ||
| "version": "0.1.4", | ||
| "description": "Complete UI5 modernization toolkit with workflow and specialized fix patterns for modernizing SAPUI5/OpenUI5 applications", | ||
| "author": { | ||
| "name": "SAP SE" | ||
| }, | ||
| "homepage": "https://github.com/UI5/plugins-coding-agents", | ||
| "repository": "https://github.com/UI5/plugins-coding-agents", | ||
| "keywords": [ | ||
| "ui5", | ||
| "sapui5", | ||
| "openui5", | ||
| "modernization", | ||
| "linter", | ||
| "upgrade" | ||
| ], | ||
| "license": "Apache-2.0", | ||
| "skills": "./skills" | ||
|
devtomtom marked this conversation as resolved.
Outdated
|
||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.