https://github.com/ui5-community/generator-ui5-control
yeoman-based (sub-)generator for a UI5 custom control, prepped for npm distribution as ui5-cc-*
https://github.com/ui5-community/generator-ui5-control
control easy-ui5 ui5 yeoman yeoman-generator
Last synced: 6 months ago
JSON representation
yeoman-based (sub-)generator for a UI5 custom control, prepped for npm distribution as ui5-cc-*
- Host: GitHub
- URL: https://github.com/ui5-community/generator-ui5-control
- Owner: ui5-community
- License: other
- Created: 2021-02-06T08:04:48.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-29T19:36:59.000Z (over 4 years ago)
- Last Synced: 2025-02-15T08:20:15.367Z (8 months ago)
- Topics: control, easy-ui5, ui5, yeoman, yeoman-generator
- Language: JavaScript
- Homepage:
- Size: 4.98 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# generator for a UI5 custom control
Scaffold a UI5 custom control that is structured in such a way that it can also distributed as a `node` module via `npm`.
Mainly intended for re-use via [`easy-ui5`](https://github.com/SAP/generator-easy-ui5), but also suitable to run standalone.
## use w/ `easy-ui5`
do `yo easy-ui5` and select this generator when prompted
## use w/ yeoman locally/standalone
```bash
$> npm i -g yo
$> yo ./path-to-this-repo/app
_-----_ ╭──────────────────────────╮
| | │ Welcome to the amazing │
|--(o)--| │ UI5 custom control │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What's the name space your custom control(s) should live in? (my.ui5.cc)
```
## use w/ options supplied
```bash
$> yo ./path-to-this-repo/app --controlNamespace=bla.fasel --buildDir=../some/dir
# will make the control live in namespace 'bla.fasel"
# and put the built control in directory `cwd` + '../some/dir'
```
## aftermath
the generator also provides a full dev- and test-environment for your new and shiny custom control 😱 !
```bash
$> cd path/to/generator/result
$> npm run test:manual
# ...
info normalizer:translators:ui5Framework Using OpenUI5 version: 1.86.3
info server:custommiddleware:livereload Livereload server started!
Server started
URL: http://localhost:8081
```
As obvious from the above, the `manual` test command boots up a barebones UI5 app using your new custom control, inclusing live reload capabilites. So once you edit the control, the app auto-reloads and changes are visible immediately.
```bash
$> npm run test
# ...
PASS test/ui5-app/basic.test.js
my.ui5.cc.Control
✓ should find the my.ui5.cc.Control in index.html (36 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.103 s
Ran all test suites.
```
## test for the generator
all tests are located in `__tests__`.
`jest` is used as test framework and runner.
## contributing
- as of now: stick to `yo` v3 (not 5) and `yeoman-generator` v4.x (not 5) due to incompatability issues
- use the `prettier` config in `.prettierrc` in this repo
- please supply an additional test per new feature and/or fixed bug