babel-preset-transform-ui5
A Babel transformer that converts modern ECMAScript or TypeScript UI5 code (ES modules and classes) into the sap.ui.define and Control.extend syntax the UI5 loader expects.
UI5's own module loader expects sap.ui.define calls and Control.extend syntax rather than the ES modules and classes most tooling assumes today. This Babel plugin converts both: import and export statements become sap.ui.define or sap.ui.require calls, and an ES class that extends an imported class becomes an extend() call, while leaving everything else, including transforming down to ES5, to other presets such as @babel/preset-env. A file, or a single import inside it, can opt out of the conversion entirely with the @ui5-no-wrap or @ui5-ignore-import comment pragmas, for code such as a Web Worker script that must stay a native ES module.
Facts
Where it sits
Who is behind it
In the atlas: maintains 69@ui5-communitymaintainerAndreas KunzContributes to this
In the atlas: contributes to 19@akudevBrian BogovichContributes to this
In the atlas: contributes to 1@bbogovich-sapGuillaume des PommareContributes to this
In the atlas: contributes to 1@GuillaumedesPommareSAPLucas da Silva HeimContributes to this
In the atlas: contributes to 1@lucas-leanixHenry LiContributes to this
In the atlas: contributes to 1@MagicCubeNicolas LunetContributes to this
In the atlas: contributes to 14@nlunetsOliver at evosightContributes to this
In the atlas: contributes to 1@oliversvisztPeter MuessigContributes to this
In the atlas: maintains 14, contributes to 80, wrote 1@petermuessigRyan MurphyContributes to this
In the atlas: contributes to 1@r-murphystabpdContributes to this
In the atlas: contributes to 1@stabpd11 contributors
What it declares
Every artifact
- Type
- Build tool
- Origin
- By a community org
As a build tool
- Distributed through
- npm
Connections
Writing UI5 apps and libraries in TypeScript
Download
Install
npm add babel-preset-transform-ui5Derived from the package name. No recipe recorded; the README has the configuration.
README
quoted from ui5-community/babel-plugin-transform-modules-ui5 under MIT, readHistory
Features 1, Fixes 1
Notes
Minor Changes
-
#154
f62f9fbThanks @bbogovich-sap! - Add two comment pragmas to opt out of module transformation:/* @ui5-no-wrap */(file level) leaves a module completely unwrapped — nosap.ui.define/sap.ui.requireand no import/export rewriting — while still stripping TypeScript types. Intended for modules consumed as native ES modules, e.g. web workers./* @ui5-ignore-import */(statement level) excludes a single staticimportor dynamicimport()from being converted into a UI5 dependency.
Note:
@ui5-ignore-importon a static import only yields valid output in an unwrapped module (no exports, or together with@ui5-no-wrap); a leftover ESimportinside asap.ui.definefactory is not valid at runtime.
Patch Changes
- Updated dependencies [
f62f9fb]:- babel-plugin-transform-modules-ui5@7.10.0
Features 1, Fixes 2
Notes
Minor Changes
-
#151
ce059b3Thanks @petermuessig! - Raise minimum Node.js version to 20.19, refresh dev dependencies, and migrate ESLint to v9 flat config.engines.nodeis now>=20.19.0for both packages.- ESLint upgraded to 9.x with new
eslint.config.js(legacy.eslintrc.jsand.eslintignoreremoved). eslint-plugin-node(unmaintained) replaced byeslint-plugin-n@17.- Removed obsolete dev dependencies:
babel-eslint(superseded by@babel/eslint-parser),eslint-config-standard,eslint-plugin-standard. - Bumped
eslint-config-prettierto 10.x,eslint-plugin-prettierto 5.5.x,eslint-plugin-promiseto 7.x,prettierto 3.8.x,jest/babel-jestto 30.4.x,core-jsto 3.49.x. - CI matrix updated from Node 18/20/22/24 to 20/22/24.
No changes to plugin runtime behavior or production dependencies.
Patch Changes
-
#151
ce059b3Thanks @petermuessig! - Bump dev-only dependencies to their latest minor releases:globals17.6 → 17.7prettier3.8 → 3.9
Both stay within the Node 20.19+ support window declared in our Node.js support policy. No plugin behavior changes.
-
Updated dependencies [
ce059b3,ce059b3,ce059b3,ce059b3,ce059b3]:- babel-plugin-transform-modules-ui5@7.9.0
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
-
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Notes
Note: Version bump only for package babel-preset-transform-ui5
Others providing
Compare all 7 on the TypeScript support page →- 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 declarations
- @openui5/sap.ui.core@openui5/sap.ui.coreThe OpenUI5 core: the module loader, the MVC runtime, data binding, routing, theming and the test stack, which is everything a UI5 app does before a single community package is added.sap official, ui5Framework core: module loader, MVC runtime, binding, routing, theming
- @ui5-community/jsx-runtime@ui5-community/jsx-runtimeA plugin-based JSX runtime for UI5: views are written as .tsx files with per-control typing, and the JSX compiles to plain new Control(settings) calls.community org, ui5Plugin-based JSX runtime for UI5 views written as .tsx
- ui5-task-transpileui5-task-transpileA UI5 Tooling task that transpiles TypeScript, ES modules and other ES6+ sources during the build so the UI5 runtime can load them.community org, ui5UI5 Tooling task transpiling TypeScript and ES modules
- @ui5/mcp-server@ui5/mcp-serverSAP's MCP server for UI5 development: ten tools that scaffold an app or a card, read the project in front of the agent, and run the linter and the manifest validator against it.sap official, ui5MCP server for UI5 development with ten tools
- @ui5/webcomponents@ui5/webcomponentsSAP's UI elements as standard custom elements, ui5-button among them, implementing SAP Fiori design and usable from plain HTML, React, Angular or Vue.sap official, ui5SAP's UI elements as standard custom elements
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
Contributors
History in the atlas
- First seen.
For your agent
- Ref
artifact:ui5-community-babel-plugin-transform-modules-ui5- JSON
- /artifacts/ui5-community-babel-plugin-transform-modules-ui5.json
- MCP
- Connecting an agent