ui5-plugin-loader
A UI5 Tooling v4 extension that registers a project's other extensions itself: one entry in ui5.yaml, and every dependency carrying a ui5-plugin-loader.json manifest is mounted as middleware and as a build task.
A UI5 project that uses ui5-tooling-transpileui5-tooling-transpileA UI5 CLI extension that transpiles modern JavaScript or TypeScript during the UI5 build, with a transformJSX option that handles JSX and TSX in the same step.community org, ui5, ui5-tooling-modulesui5-tooling-modulesA set of UI5 tooling extensions that load and convert plain npm packages into UI5 AMD-like modules, so the UI5 module loader can consume them.community org, ui5, ui5-tooling-stringreplaceui5-tooling-stringreplaceA UI5 CLI extension for string replacement during the build, for placeholders or tokens in source files that have to be replaced at build time.community org, ui5 and ui5-middleware-livereloadui5-middleware-livereloadA dev-server middleware that adds live reload to the UI5 dev server, reloading the page when the sources in the app's webapp folder change.community org, ui5 declares each of them in ui5.yaml twice, once as custom middleware for ui5 serve and once as a custom task for ui5 build, in an order that decides whether the result works. This replaces those blocks with ui5-plugin-loader and ui5-plugin-loader-task, scans dependencies and devDependencies for a ui5-plugin-loader.json manifest in each package, falls back to manifests it ships for those four, and sorts what it found by a fixed pattern: stringreplace, transpile, modules, livereload, then everything else. disable takes an extension out of the set and override changes one's order, mount path or configuration before it is registered. It rests on dynamic middleware registration, so UI5 Tooling 4.0 is the floor, and an extension outside the manifests it ships joins in only when its own package carries the file.
Facts
Where it sits
Who is behind it
In the atlas: maintains 35, contributes to 86, wrote 25@marianfoomaintainer
What it declares
Every artifact
- Type
- Build tool
- Origin
- Independently maintained
- Runtime
- Node.js
As a build tool
- Distributed through
- npm
Connections
Serving an app locally and building it for deployment
Download
Install
npm add ui5-plugin-loaderDerived from the package name. No recipe recorded; the README has the configuration.
README
quoted from marianfoo/ui5-plugin-loader under MIT, readui5‑plugin‑loader
A UI5 Tooling v4 extension that auto‑mounts other extensions based on manifest JSON files
Overview
ui5‑plugin‑loader v0.2.x provides a single‑line integration that automatically discovers and loads UI5 tooling extensions based on manifest JSON files. Simply add one entry to your ui5.yaml and all compatible dependencies will be loaded automatically in the correct order.
Features
- ✅ Single-line setup - Only requires one
ui5.yamlentry - ✅ Auto-discovery - Scans all dependencies for manifest files
- ✅ Smart ordering - Fixed pattern ordering: stringreplace → transpile → modules → livereload → rest
- ✅ Server & Build support - Works with both
ui5 serveandui5 build - ✅ Fallback manifests - Includes manifests for popular extensions
- ✅ Disable/Override support - Disable extensions or override their configuration
- ✅ Graceful failure - Invalid manifests won't crash your dev server
- ✅ Comprehensive logging - Uses
@ui5/loggerwith configurable levels
Requirements
- UI5 Tooling v4.0 or higher (for dynamic middleware registration)
- Node.js v18.0.0 or higher
- npm v8 or higher
Installation
npm install --save-dev ui5-plugin-loader
Quick Start
1. Add to your ui5.yaml
specVersion: '4.0'
metadata:
name: my-ui5-app
type: application
server:
customMiddleware:
- name: ui5-plugin-loader
afterMiddleware: compression
builder:
customTasks:
- name: ui5-plugin-loader-task
afterTask: replaceVersion
2. Install extensions
Install any supported UI5 tooling extension:
npm install --save-dev ui5-tooling-modules
npm install --save-dev ui5-middleware-livereload
npm install --save-dev ui5-tooling-transpile
npm install --save-dev ui5-tooling-stringreplace
3. Run your project
ui5 serve # or ui5 build
That's it! The plugin loader will automatically:
- Scan all your dependencies and devDependencies
- Look for
ui5-plugin-loader.jsonmanifests in each package - Fall back to built-in manifests for popular extensions
- Auto-register all found middlewares and tasks with smart ordering
Currently Supported Extensions
The plugin loader includes built-in support for these popular UI5 tooling extensions:
Middlewares
ui5-tooling-stringreplace- String replacement for placeholdersui5-tooling-transpile- TypeScript and modern JavaScript transpilationui5-tooling-modules- ES modules and Node.js modules transformationui5-middleware-livereload- Live reload functionality for development
Tasks
ui5-tooling-stringreplace- Build-time string replacementui5-tooling-transpile- Build-time TypeScript transpilationui5-tooling-modules- Build-time modules transformation
Adding More Extensions
To add support for additional extensions, create a manifest file in the manifests/ directory or contribute to this project by submitting a PR with new manifest files.
How It Works
The plugin loader follows this discovery and processing pipeline:
- Load Configuration: Validate and normalize the configuration options
- Discover Manifests: Scan dependencies for manifest files
- Apply Disable: Remove extensions from the disable list
- Fill Defaults: Add default
afterMiddleware: compressionandafterTask: replaceVersion - Apply Overrides: Merge override configurations
- Validate References: Check that all after/before targets exist
- Deduplicate: Remove duplicates (first occurrence wins)
- Smart Sort: Apply fixed pattern ordering: stringreplace → transpile → modules → livereload → rest
Configuration Options
You can customize the plugin loader behavior in your ui5.yaml:
server:
customMiddleware:
- name: ui5-plugin-loader
afterMiddleware: compression
configuration:
debug: false # Enable debug logging
disable: # Disable specific extensions
- ui5-middleware-livereload
- ui5-tooling-stringreplace-middleware
override: # Override extension configurations
ui5-tooling-transpile-middleware:
afterMiddleware: ui5-tooling-stringreplace-middleware
configuration:
debug: true
builder:
customTasks:
- name: ui5-plugin-loader-task
afterTask: replaceVersion
configuration:
debug: false # Enable debug logging
disable: # Disable specific extensions
- ui5-tooling-stringreplace-task
override: # Override extension configurations
ui5-tooling-modules-task:
afterTask: ui5-tooling-transpile-task
configuration:
debug: true
Configuration Properties
debug(boolean, default: false): Enable debug logging to@ui5/loggerverbosedisable(string[], default: []): Array of extension names to disableoverride(object, default: {}): Override configurations for specific extensions- Each key is an extension name
- Each value can contain:
afterMiddleware/beforeMiddleware- Change middleware orderafterTask/beforeTask- Change task ordermountPath- Override middleware mount pathconfiguration- Merge with extension's default configuration
Example Configurations
Basic Development Setup
server:
customMiddleware:
- name: ui5-plugin-loader
afterMiddleware: compression
TypeScript Development with Customization
server:
customMiddleware:
- name: ui5-plugin-loader
afterMiddleware: compression
configuration:
debug: true
disable:
- ui5-middleware-livereload # Disable livereload
override:
ui5-tooling-stringreplace-middleware:
configuration:
files: ["**/*.ts"] # Only process TypeScript files
Production Build Configuration
builder:
customTasks:
- name: ui5-plugin-loader-task
afterTask: replaceVersion
configuration:
disable:
- ui5-tooling-stringreplace-task # Skip string replacement in production
override:
ui5-tooling-modules-task:
configuration:
minify: true # Enable minification
Smart Ordering
The plugin loader uses a fixed pattern ordering system:
- String replacement (priority 10) -
ui5-tooling-stringreplace-* - Transpilation (priority 20) -
ui5-tooling-transpile-* - Modules (priority 30) -
ui5-tooling-modules-* - Live reload (priority 40) -
ui5-middleware-livereload - Rest (priority 50) - All other extensions
This ensures that transformations happen in the correct order without manual configuration.
Extension Development Guide
Making Your Extension Compatible
To make your UI5 tooling extension work with the plugin loader:
- Create a manifest file
ui5-plugin-loader.jsonin your package root:
{
"$schema": "https://sap.github.io/ui5-plugin-loader/schema/ui5-plugin-loader.schema.json",
"middleware": [
{
"name": "my-custom-middleware",
"configuration": {
"debug": false
}
}
],
"tasks": [
{
"name": "my-custom-task",
"configuration": {
"debug": false
}
}
]
}
-
Follow naming conventions:
- Middleware:
<package-name>-middlewareor<package-name> - Tasks:
<package-name>-task
- Middleware:
-
Test with the plugin loader:
- Install your extension alongside
ui5-plugin-loader - Verify it gets auto-discovered and registered
- Install your extension alongside
Troubleshooting
Enable Debug Logging
server:
customMiddleware:
- name: ui5-plugin-loader
configuration:
debug: true
Common Issues
- Extension not found: Ensure the package is in your
dependenciesordevDependencies - Wrong order: Use the
overrideconfiguration to adjust ordering - Duplicate registration: Check for manual registrations in your
ui5.yaml
Contributing
- Fork the repository
- Create a feature branch
- Add tests for new functionality
- Submit a pull request
License
This project is licensed under the MIT License - see the LICENSE file for details.
Changelog
v0.2.x
- ✅ Removed preset functionality (breaking change)
- ✅ Added
debug,disable, andoverrideconfiguration options - ✅ Implemented fixed pattern smart ordering
- ✅ Improved pipeline processing with validation
- ✅ Enhanced error handling and logging
v0.1.x
- ✅ Initial release with basic auto-discovery
- ✅ Support for popular UI5 tooling extensions
- ✅ Preset functionality (deprecated in v0.2.x)
History
v0.2.0
Others providing
Compare all 42 on the Build and dev-server tooling page →- UI5 ToolsUI5 ToolsA VS Code extension for UI5 developers that serves, proxies, builds and deploys UI5 projects from one workspace-wide configuration, with live reload, a Gateway deployer and a BSP importer.independent, ui5VS Code extension to serve, proxy, build and deploy UI5 projectsfrom UI5
- ui5-middleware-route-proxyui5-middleware-route-proxyA UI5 server middleware that forwards requests matching a route prefix to a backend host, configured per route in ui5.yaml, with credentials read from a .env file rather than the yaml.independent, ui5UI5 server middleware proxying route prefixes to a backendfrom UI5
- ui5-task-cachebuster-indexingui5-task-cachebuster-indexingA UI5 builder task that copies the build output into a timestamped folder inside dist so the UI5 cachebuster can resolve it; it supports timestamps only, not the hash mode.independent, ui5UI5 builder task preparing build output for the cachebusterfrom UI5
- ui5-task-transpile-genui5-task-transpile-genA UI5 builder task that transpiles ES6 to ES5, including async/await, with Babel at build time, registered in ui5.yaml with a bundle definition that includes the regenerator runtime.independent, ui5UI5 builder task transpiling ES6 to ES5 with Babelfrom UI5
- ui5-middleware-odata-recorderui5-middleware-odata-recorderA UI5 server middleware that records the OData traffic a running app makes against a real backend and writes entity JSON files and metadata.xml that the Fiori elements mock server can replay.independent, ui5UI5 middleware recording OData traffic as mock server datasetsfrom UI5
- ui5-deployerui5-deployerA custom module for UI5 Tooling that deploys Fiori/UI5 apps to SAP NetWeaver ABAP, SAP Cloud Platform Neo or Cloud Foundry, configured in a deployer section of ui5.yaml.independent, ui5UI5 Tooling module deploying Fiori/UI5 apps to SAP systemsfrom UI5
- ui5-task-dts-generatorui5-task-dts-generatorA UI5 builder task that generates d.ts files, TypeScript type declarations, during the build of a UI5 library written in JavaScript, by wrapping @ui5/dts-generator.independent, ui5UI5 builder task generating d.ts type declarationsfrom UI5
- ui5-task-minifierui5-task-minifierA UI5 builder task that minifies the HTML, CSS and JSON files the UI5 builder leaves as they are, with one switch per file type, using html-minifier-terser and clean-css.independent, ui5UI5 builder task minifying HTML, CSS and JSON filesfrom UI5
- ui5-middleware-oidcui5-middleware-oidcA UI5 Tooling server middleware that puts an OpenID Connect login in front of the UI5 dev server, built on express-openid-connect, which receives its configuration block as written.independent, ui5UI5 dev server middleware adding an OpenID Connect loginfrom UI5
- generator-ui5-library-af-deploygenerator-ui5-library-af-deployA Yeoman generator that writes the SAP BTP Application Frontend deployment configuration, mta.yaml, ui5-deploy.yaml, xs-app.json and xs-security.json, into an existing UI5 library project.independent, ui5Yeoman generator for Application Frontend config in UI5 librariesfrom UI5
- ui5-middleware-destinationui5-middleware-destinationA UI5 Tooling server middleware that proxies requests to backends named in WebIDE-style destination files and serves the routes of a neo-app.json, with Basic Authentication only.independent, ui5UI5 Tooling middleware proxying destinations and neo-app.json routesfrom UI5
- ui5-task-check-eocpui5-task-check-eocpA UI5 builder task that matches the UI5 version in ui5.yaml against the versions retrieved from ui5.sap.com and warns during the build once that version's End of Cloud Provisioning quarter has been reached.independent, ui5UI5 build task warning when the app's UI5 version reaches EOCPfrom UI5
- @ui5/cli@ui5/cliThe UI5 Tooling command line for project setup, the local dev server and the build, which defines a UI5 project's shape and its two extension points, custom middleware and custom tasks.sap official, ui5UI5 Tooling command line for project setup, dev server and buildfrom UI5
- ui5-task-btp-manifestui5-task-btp-manifestA UI5 Tooling custom task that writes the surrounding app's sap.cloud service name into the bundled Spreadsheet Importer's manifest at build time, so the two match on SAP BTP.community org, ui5UI5 Tooling task writing the service name into the importer manifestfrom UI5
- ui5-middleware-approuterui5-middleware-approuterA UI5 CLI middleware that puts @sap/approuter in front of the UI5 dev server, proxying it to Cloud Foundry or XS Advanced destinations during development.community org, ui5UI5 CLI middleware proxying the dev server through @sap/approuterfrom UI5
- ui5-middleware-capui5-middleware-capA UI5 CLI middleware that runs a CDS server inside the UI5 dev server, mounted at a path the UI5 project configures, so one command serves the app and its CAP services.community org, ui5UI5 CLI middleware running a CDS server inside the UI5 dev serverfrom UI5
- ui5-middleware-hmrui5-middleware-hmrAn experimental UI5 middleware for hot module replacement, swapping a changed module in during development instead of reloading the whole page.community org, ui5Experimental UI5 middleware for hot module replacementfrom UI5
- ui5-middleware-iasyncui5-middleware-iasyncA UI5 dev-server middleware built on browsersync.io that syncs user interactions across connected browsers over a websocket, replaying an action from one browser in the others for manual testing.community org, ui5UI5 middleware syncing interactions across browsers over websocketfrom UI5
- ui5-middleware-indexui5-middleware-indexA UI5 dev-server middleware that delivers a configured welcome page, index.html by default, for the root path instead of the ui5-server directory listing.community org, ui5UI5 middleware serving a chosen welcome page at the root pathfrom UI5
- ui5-middleware-livereloadui5-middleware-livereloadA dev-server middleware that adds live reload to the UI5 dev server, reloading the page when the sources in the app's webapp folder change.community org, ui5Live reload middleware for the UI5 dev serverfrom UI5
- ui5-middleware-oneloginui5-middleware-oneloginA UI5 dev-server middleware that logs into a system such as SAP Gateway with headless Playwright on the first request and reuses the session cookie for every later request.community org, ui5UI5 middleware logging in with Playwright and reusing the sessionfrom UI5
- ui5-middleware-serveframeworkui5-middleware-serveframeworkA UI5 middleware that serves a UI5 framework built on the local machine to the dev server, in place of a framework version resolved another way.community org, ui5UI5 middleware serving a locally built UI5 frameworkfrom UI5
- ui5-middleware-servestaticui5-middleware-servestaticA UI5 dev-server middleware that serves static resources from a filesystem path or an installed npm package path, built on serve-static, with either path settable through an environment variable.community org, ui5UI5 middleware serving static resources from a path or npm packagefrom UI5
- ui5-middleware-simpleproxyui5-middleware-simpleproxyA UI5 dev-server middleware that proxies requests from the local dev server to a backend system, so the app can reach the backend's services during development.community org, ui5Dev-server middleware proxying requests to a backend systemfrom UI5
- ui5-middleware-ui5ui5-middleware-ui5A UI5 middleware that lets one UI5 application be included as a dependency of another and served through that application's dev server.community org, ui5UI5 middleware including one UI5 application in anotherfrom UI5
- ui5-middleware-webjarsui5-middleware-webjarsA UI5 dev-server middleware that loads JAR files from a configured path and serves the static resources bundled inside them, following the WebJars convention of META-INF/resources/.community org, ui5UI5 middleware serving static resources from JAR files (WebJars)from UI5
- ui5-middleware-websocketui5-middleware-websocketUI5 middleware utilities that add WebSocket support to Express-based dev servers such as the UI5 server, which has no WebSocket channel of its own.community org, ui5WebSocket support for Express-based dev servers such as UI5'sfrom UI5
- ui5-task-cachebusterui5-task-cachebusterA UI5 builder task that cachebusts a standalone UI5 application by moving its build output into a timestamped subfolder and pointing index.html's resource roots at it.community org, ui5UI5 builder task cachebusting standalone UI5 applicationsfrom UI5
- ui5-task-copyrightui5-task-copyrightA UI5 builder task that appends copyright headers to TypeScript, JavaScript and XML files on every build, so the header is not added to each source file by hand.community org, ui5UI5 builder task appending copyright headers to source filesfrom UI5
- ui5-task-flatten-libraryui5-task-flatten-libraryA UI5 builder task that flattens a library's build output, removing the project namespace and resources folder for deployment to SAP NetWeaver, now also offered by the UI5 CLI itself.community org, ui5UI5 builder task flattening library output for SAP NetWeaverfrom UI5
- ui5-task-i18ncheckui5-task-i18ncheckA UI5 builder task that cross-checks every XML view against the app's i18n properties files and logs a warning where a translation is missing; views created in JavaScript are not checked.community org, ui5UI5 builder task checking XML views for missing i18n textsfrom UI5
- ui5-task-minify-xmlui5-task-minify-xmlA UI5 builder task that minifies XML resources such as views and fragments, which a plain UI5 build otherwise ships unminified.community org, ui5UI5 builder task minifying XML views and fragmentsfrom UI5
- ui5-task-pwa-enablerui5-task-pwa-enablerA UI5 builder task that turns a UI5 application into a progressive web app by generating a web manifest and a service worker under one of five caching strategies.community org, ui5UI5 builder task turning a UI5 app into a progressive web appfrom UI5
- ui5-task-zipperui5-task-zipperA build task for the UI5 tooling that packages the UI5 build result, the webapp, as a zip archive at the end of the build.community org, ui5Build task packaging the UI5 build result as a zip archivefrom UI5
- ui5-tooling-lessui5-tooling-lessA UI5 CLI extension, a build task and a dev-server middleware, that compiles an app's Less files into CSS at build time and live while the UI5 server runs.community org, ui5UI5 CLI extension compiling Less files into CSSfrom UI5
- ui5-tooling-modulesui5-tooling-modulesA set of UI5 tooling extensions that load and convert plain npm packages into UI5 AMD-like modules, so the UI5 module loader can consume them.community org, ui5UI5 tooling extensions loading npm packages as UI5 modulesfrom UI5
- ui5-tooling-stringreplaceui5-tooling-stringreplaceA UI5 CLI extension for string replacement during the build, for placeholders or tokens in source files that have to be replaced at build time.community org, ui5UI5 CLI extension for string replacement during the buildfrom UI5
- ui5-tooling-transpileui5-tooling-transpileA UI5 CLI extension that transpiles modern JavaScript or TypeScript during the UI5 build, with a transformJSX option that handles JSX and TSX in the same step.community org, ui5UI5 CLI extension transpiling code during the UI5 buildfrom UI5
- @ui5/logger@ui5/loggerUI5 CLI's internal logger, described by its own readme as internal — it appears here because other UI5 tooling depends on it.sap official, ui5Internal logger of the UI5 CLIfrom UI5
- @ui5/middleware-code-coverage@ui5/middleware-code-coverageUI5 CLI server middleware that instruments a project's JavaScript files with Istanbul as the dev server sends them, and generates the coverage report from the records the OpenUI5 QUnit tests send back.sap official, ui5UI5 CLI middleware for Istanbul code coveragefrom UI5
- @ui5/tooling-webc@ui5/tooling-webcDeprecated UI5 Tooling extensions that generate UI5 library wrapper projects for UI5 Web Components and serve them during development; the README points to ui5-tooling-modules instead.sap official, ui5Deprecated UI5 Tooling extensions for UI5 Web Components wrappersfrom UI5
Details
Sources
Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.
Compatibility and provenance
History in the atlas
- build-tool and capability:ui5-build-tooling for the same reason its four named neighbours carry them: it is registered in the customMiddleware and customTasks blocks of ui5.yaml and does its work inside `ui5 serve` and `ui5 build`. compat.runtimes is the README's Requirements section, "**Node.js v18.0.0 or higher**"; identity.license is the README's License section and the npm record, both MIT. No flavors: the README states no UI5 flavor, and absent is not a claim. One discrepancy for an editor rather than the entry: the npm record for ui5-plugin-loader 0.2.0, published 2025-07-23, gives its repository as git+https://github.com/marianzeis/ui5-plugin-loader.git, while the source read here is github.com/marianfoo/ui5-plugin-loader; the npm description, "Auto-mounts UI5 tooling extensions based on manifest JSON files", and the 0.2.x version line both match this README.
- First seen.
For your agent
- Ref
artifact:marianfoo-ui5-plugin-loader- JSON
- /artifacts/marianfoo-ui5-plugin-loader.json
- MCP
- Connecting an agent