{"id":14981944,"url":"https://github.com/enyancc/babel-plugin-transform-ui5","last_synced_at":"2026-03-12T14:08:23.677Z","repository":{"id":79990791,"uuid":"99703098","full_name":"enyancc/babel-plugin-transform-ui5","owner":"enyancc","description":"An UNOFFICIAL babel transform for SAP UI5 modules. It generates sap.ui.define() for SAP UI5 modules, while skips transformation of other ES6 imports in your file","archived":false,"fork":false,"pushed_at":"2017-08-15T12:53:44.000Z","size":130,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-02T01:29:03.537Z","etag":null,"topics":["babel-plugin","openui","openui5","openui5-framework","sapui5"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/enyancc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-08T14:39:46.000Z","updated_at":"2021-06-17T07:47:00.000Z","dependencies_parsed_at":"2023-03-12T09:37:41.199Z","dependency_job_id":null,"html_url":"https://github.com/enyancc/babel-plugin-transform-ui5","commit_stats":{"total_commits":37,"total_committers":4,"mean_commits":9.25,"dds":"0.21621621621621623","last_synced_commit":"9d8da06f477b1a3deb317b4963b3fa949cc95881"},"previous_names":["sergiirocks/babel-plugin-transform-ui5"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enyancc%2Fbabel-plugin-transform-ui5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enyancc%2Fbabel-plugin-transform-ui5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enyancc%2Fbabel-plugin-transform-ui5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enyancc%2Fbabel-plugin-transform-ui5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enyancc","download_url":"https://codeload.github.com/enyancc/babel-plugin-transform-ui5/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242198398,"owners_count":20088022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-plugin","openui","openui5","openui5-framework","sapui5"],"created_at":"2024-09-24T14:04:30.821Z","updated_at":"2026-03-12T14:08:23.664Z","avatar_url":"https://github.com/enyancc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-transform-ui5 for Babel 6\nAn UNOFFICIAL Babel transform plugin for SAP UI5 modules. It transforms SAP UI5 module imports into `sap.ui.define()` format, while skips transformation for the other imports. The other imports should be handled by the packaging tool like webpack.\n\n## Features\n+ Class, inheritance and `super` keyword\n+ UI5's `metadata` field\n+ Static methods and fields\n\n## Babel version\nCurrently this version only supports `Babel 6`.\n\n## Usage with webpack\n\nSuppose that in your project, all the source codes are stored in `app` folder.\n\n```\n\u003cyour-ui5-project\u003e\n    ├── \u003capp\u003e\n    │   └── \u003cyour_module\u003e\n    │       └── \u003csub_folder\u003e\n    │           ├── ClassA.js\n    │           └── ClassB.js\n    ├── .babelrc\n    ├── webpack.config.js\n    └── package.json\n```\n\n### 1. Install the dependencies\n```js\n{\n    ...\n    \"devDependencies\": {\n        \"babel-core\": \"^6.25.0\",\n        \"babel-loader\": \"^7.1.1\",\n        \"babel-plugin-syntax-class-properties\": \"^6.13.0\",\n        \"babel-plugin-transform-ui5\": \"^6.1.2\",\n        \"babel-polyfill\": \"^6.23.0\",\n        \"babel-preset-env\": \"^1.6.0\",\n        \"webpack\": \"^3.4.1\"\n    }\n    ...\n}\n```\n\n```\n$ npm install --save-dev babel-preset-transform-ui5 babel-plugin-syntax-class-properties\n```\n\n### 2. Configure .babelrc\nAdd `transform-ui5` to the `plugins` and pass the options to track the imports that should be transformed.\n```json\n{\n   \"sourceRoot\": \"./\",\n   \"presets\": [\n    [\n      \"env\",\n      {\n        \"loose\": true,\n        \"modules\": false\n      }\n    ]\n  ],\n  \"plugins\": [\n    \"syntax-class-properties\",\n    [\"transform-ui5\", { \"libs\": [\"^sap\", \"^jquery\"], \"files\": [\"app/controller\", \"app/model\"] }]\n  ]\n}\n\n```\n\n\u003e The `sourceRoot` property can helps the plugin to output the right namespace.\n\n### 3. Configure webpack.config.js\nAdd a `gulpfile.js` in your project root folder.\n```js\nmodule.exports = {\n  entry: {\n    'Component': ['babel-polyfill', path.resolve(__dirname, 'app/Component.mjs')],\n    'test/unit/allTests': ['babel-polyfill', path.resolve(__dirname, 'app/test/unit/allTests.mjs')]\n  },\n  output: {\n    path: path.resolve(__dirname, 'app/'),\n    filename: '[name].js'\n  },\n  // devtool: 'cheap-module-eval-source-map',\n  module: {\n    rules: [\n      {\n        test: /\\.m?js$/,\n        exclude: /node_modules/,\n        loaders: [\n          'babel-loader'\n        ]\n      }\n    ]\n  }\n};\n```\n\n### 4. Build with Webpack\nPlease take a look at [example](https://github.com/sergiirocks/babel-plugin-transform-ui5/tree/master/example),\nyou'll find the answer.\n\n\n## Compilation\n\n### ES6 Codes\n``` javascript\n/*---------------------------------*\n * File: app/Component.mjs *\n *---------------------------------*/\n\nimport UIComponent from 'sap/ui/core/UIComponent';\nimport AppController from './controller/App';\n\nexport default class Component extends UIComponent {\n\n  metadata = { manifest: 'json' }\n\n  init(...args) {\n    UIComponent.prototype.init.call(this, ...args);\n  }\n\n}\n\n\n/*---------------------------------*\n * File: app/controller/App.js *\n *---------------------------------*/\nimport Controller from 'sap/ui/core/mvc/Controller';\nimport { setModel, dispatch } from '../store';\n\nexport default class AppController extends Controller {\n\n  onInit() {\n    setModel(this);\n  }\n\n  onHelloWorldClick() {\n    dispatch('exampleButtonClick')\n  }\n\n}\n\n/*---------------------------------*\n * File: app/store/index.js *\n *---------------------------------*/\nimport * as actions from './actions';\nimport JSONModel from 'sap/ui/model/json/JSONModel';\n\nlet state = null;\n\nexport function getState() {\n  if (!state) {\n    state = new JSONModel({\n      app: {\n        value: 0,\n      }\n    });\n  }\n\n  return state;\n}\n\nexport function setModel(controller) {\n  controller.getView().setModel(getState());\n}\n\nexport async function dispatch(actionName, ...payload) {\n  if (!actions[actionName]) {\n    return console.error(`\"${actionName}\" is not registered!`);\n  }\n\n  try {\n    return actions[actionName]({ state, dispatch }, ...payload);\n  } catch (err) {\n    console.error(`Error during dispatch of '${actionName}'`, err);\n  }\n}\n\n```\n\n## Compiled Codes\n``` javascript\n/*------------------------------------*\n * File: app/Component.mjs *\n *------------------------------------*/\nimport './controller/App';\n\nvar UIComponent;\nvar AppController;\nsap.ui.define('app/Component', ['sap/ui/core/UIComponent', 'app/controller/App'], function (_UIComponent, _AppController) {\n  UIComponent = _UIComponent\n  AppController = _AppController\n  return UIComponent.extend('app.Component', {\n    metadata: { manifest: 'json' },\n    init: function (...args) {\n      UIComponent.prototype.init.call(this, ...args);\n    }\n  });\n});\n\n/*---------------------------------*\n * File: app/controller/App.js *\n *---------------------------------*/\nimport { setModel, dispatch } from '../store';\n\nvar Controller;\nsap.ui.define('app/controller/App', ['sap/ui/core/mvc/Controller'], function (_Controller) {\n  Controller = _Controller\n  return Controller.extend('app.controller.AppController', {\n    onInit: function () {\n      setModel(this);\n    },\n    onHelloWorldClick: function () {\n      dispatch('exampleButtonClick');\n    }\n  });\n});\n\n/*---------------------------------*\n * File: app/store/index.js *\n *---------------------------------*/\nimport * as actions from './actions';\nvar JSONModel;\nsap.ui.define('app/store/index', ['sap/ui/model/json/JSONModel'], function (_JSONModel) {\n  JSONModel = _JSONModel\n});\n\nlet state = null;\n\nexport function getState() {\n  if (!state) {\n    state = new JSONModel({\n      app: {\n        value: 0,\n      }\n    });\n  }\n\n  return state;\n}\n\nexport function setModel(controller) {\n  controller.getView().setModel(getState());\n}\n\nexport async function dispatch(actionName, ...payload) {\n  ...\n}\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenyancc%2Fbabel-plugin-transform-ui5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenyancc%2Fbabel-plugin-transform-ui5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenyancc%2Fbabel-plugin-transform-ui5/lists"}