Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enyancc/babel-plugin-transform-ui5
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
https://github.com/enyancc/babel-plugin-transform-ui5
babel-plugin openui openui5 openui5-framework sapui5
Last synced: 7 days ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/enyancc/babel-plugin-transform-ui5
- Owner: enyancc
- License: mit
- Created: 2017-08-08T14:39:46.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-15T12:53:44.000Z (about 7 years ago)
- Last Synced: 2024-10-19T02:35:35.677Z (20 days ago)
- Topics: babel-plugin, openui, openui5, openui5-framework, sapui5
- Language: JavaScript
- Homepage:
- Size: 127 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-transform-ui5 for Babel 6
An 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.## Features
+ Class, inheritance and `super` keyword
+ UI5's `metadata` field
+ Static methods and fields## Babel version
Currently this version only supports `Babel 6`.## Usage with webpack
Suppose that in your project, all the source codes are stored in `app` folder.
```
├──
│ └──
│ └──
│ ├── ClassA.js
│ └── ClassB.js
├── .babelrc
├── webpack.config.js
└── package.json
```### 1. Install the dependencies
```js
{
...
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-class-properties": "^6.13.0",
"babel-plugin-transform-ui5": "^6.1.2",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"webpack": "^3.4.1"
}
...
}
``````
$ npm install --save-dev babel-preset-transform-ui5 babel-plugin-syntax-class-properties
```### 2. Configure .babelrc
Add `transform-ui5` to the `plugins` and pass the options to track the imports that should be transformed.
```json
{
"sourceRoot": "./",
"presets": [
[
"env",
{
"loose": true,
"modules": false
}
]
],
"plugins": [
"syntax-class-properties",
["transform-ui5", { "libs": ["^sap", "^jquery"], "files": ["app/controller", "app/model"] }]
]
}```
> The `sourceRoot` property can helps the plugin to output the right namespace.
### 3. Configure webpack.config.js
Add a `gulpfile.js` in your project root folder.
```js
module.exports = {
entry: {
'Component': ['babel-polyfill', path.resolve(__dirname, 'app/Component.mjs')],
'test/unit/allTests': ['babel-polyfill', path.resolve(__dirname, 'app/test/unit/allTests.mjs')]
},
output: {
path: path.resolve(__dirname, 'app/'),
filename: '[name].js'
},
// devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
loaders: [
'babel-loader'
]
}
]
}
};
```### 4. Build with Webpack
Please take a look at [example](https://github.com/sergiirocks/babel-plugin-transform-ui5/tree/master/example),
you'll find the answer.## Compilation
### ES6 Codes
``` javascript
/*---------------------------------*
* File: app/Component.mjs *
*---------------------------------*/import UIComponent from 'sap/ui/core/UIComponent';
import AppController from './controller/App';export default class Component extends UIComponent {
metadata = { manifest: 'json' }
init(...args) {
UIComponent.prototype.init.call(this, ...args);
}}
/*---------------------------------*
* File: app/controller/App.js *
*---------------------------------*/
import Controller from 'sap/ui/core/mvc/Controller';
import { setModel, dispatch } from '../store';export default class AppController extends Controller {
onInit() {
setModel(this);
}onHelloWorldClick() {
dispatch('exampleButtonClick')
}}
/*---------------------------------*
* File: app/store/index.js *
*---------------------------------*/
import * as actions from './actions';
import JSONModel from 'sap/ui/model/json/JSONModel';let state = null;
export function getState() {
if (!state) {
state = new JSONModel({
app: {
value: 0,
}
});
}return state;
}export function setModel(controller) {
controller.getView().setModel(getState());
}export async function dispatch(actionName, ...payload) {
if (!actions[actionName]) {
return console.error(`"${actionName}" is not registered!`);
}try {
return actions[actionName]({ state, dispatch }, ...payload);
} catch (err) {
console.error(`Error during dispatch of '${actionName}'`, err);
}
}```
## Compiled Codes
``` javascript
/*------------------------------------*
* File: app/Component.mjs *
*------------------------------------*/
import './controller/App';var UIComponent;
var AppController;
sap.ui.define('app/Component', ['sap/ui/core/UIComponent', 'app/controller/App'], function (_UIComponent, _AppController) {
UIComponent = _UIComponent
AppController = _AppController
return UIComponent.extend('app.Component', {
metadata: { manifest: 'json' },
init: function (...args) {
UIComponent.prototype.init.call(this, ...args);
}
});
});/*---------------------------------*
* File: app/controller/App.js *
*---------------------------------*/
import { setModel, dispatch } from '../store';var Controller;
sap.ui.define('app/controller/App', ['sap/ui/core/mvc/Controller'], function (_Controller) {
Controller = _Controller
return Controller.extend('app.controller.AppController', {
onInit: function () {
setModel(this);
},
onHelloWorldClick: function () {
dispatch('exampleButtonClick');
}
});
});/*---------------------------------*
* File: app/store/index.js *
*---------------------------------*/
import * as actions from './actions';
var JSONModel;
sap.ui.define('app/store/index', ['sap/ui/model/json/JSONModel'], function (_JSONModel) {
JSONModel = _JSONModel
});let state = null;
export function getState() {
if (!state) {
state = new JSONModel({
app: {
value: 0,
}
});
}return state;
}export function setModel(controller) {
controller.getView().setModel(getState());
}export async function dispatch(actionName, ...payload) {
...
}
```