https://github.com/e-fever/qmljsify
Convert an NPM package into a QML friendly JavaScript file
https://github.com/e-fever/qmljsify
Last synced: 14 days ago
JSON representation
Convert an NPM package into a QML friendly JavaScript file
- Host: GitHub
- URL: https://github.com/e-fever/qmljsify
- Owner: e-fever
- License: apache-2.0
- Created: 2017-05-18T11:28:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T11:47:26.000Z (almost 3 years ago)
- Last Synced: 2025-10-12T11:57:38.904Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 612 KB
- Stars: 59
- Watchers: 10
- Forks: 4
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-qt-qml - Qmljsify - Convert an NPM package into a QML friendly JavaScript file. (Development)
README
# Qmljsify
Convert an NPM package into a QML friendly JavaScript file
It is still a prototype software. Use it at your own risk.
**Proven Working Packages**
fecha (Lightweight version of moment)
lodash(--no-minify)
sprintf
Installation Instruction
=================
A pre-built version of qmljsify is available in Docker Hub. You may pull the docker image directly:
```
docker pull benlau/qmljsify
docker tag benlau/qmljsify qmljsify
alias qmljsify='docker run --rm -v $PWD:/data --user $(id -u):$(id -g) -i -t qmljsify'
```
Usage
=====
```
Usage: qmljsify [options] command package
qmljsify - Download and convert an NPM package to a QML friendly JavaScript file
Options:
-h, --help Displays this help.
--no-minify Turn off JavaScript Compression
Arguments:
command Command [Available Commands: convert]
package NPM package to be qmljsified
```
Example:
```
qmljsify convert sprintf
```
Then it will fetch `sprintf` from NPM and create two files
```
sprintf.orig.js # A compiled and minified sprintf library
sprintf.js # A Wrapper of the compiled sprintf library for QML
```
That is what `sprintf.js` looks like:
```
.pragma library
Qt.include("sprintf.orig.js")
var object_stringify = QML.object_stringify;
var format = QML.format;
var cache = QML.cache;
var parse = QML.parse;
var sprintf = QML.sprintf;
var vsprintf = QML.vsprintf;
```
Then you could use it in your QML file:
```
import "./sprintf.js" as SPrintf
// [snipped]
SPrintf.sprintf("%d %d", 1 , 2);
```
Known Issues
============
1. It doesn't work on Windows.
2. setTimeout is not wrapped.
3. It may not works for some npm package.
Remarks: NPM library with only a single function is supported now (e.g. left-pad)
Build Instruction
=================
Prerequisite:
- webpack < 4.0
- npm
- nodejs
```
cd app/qmljsify
qpm install
qmake
make
#Then copy qmljsify to your favor path
```
p.s Windows is not working yet.
Build Instruction (Docker)
==========================
```
cd qmljsify/docker
./build-docker-images.sh
alias qmljsify='docker run --rm -v $PWD:/data --user $(id -u):$(id -g) -i -t qmljsify'
```
TroubleShooting
===============
1) qml: SyntaxError: Expected token `;'
```
$ qmljsify convert lodash
qml: SyntaxError: Expected token `;'
```
Try --no-minify
```
$ qmljsify convert --no-minify lodash
lodash.orig.js saved
lodash.js saved
```
2) SyntaxError: Expected token `identifier`
The Javascript loaded by `Qt.include` could not use "as" as a variable name. The minified Javascript may contain such kind of variable so it will raise the exception. You may try to use the `--no-minify` argument to create a non-minified QML friendly Javascript.
Brainstorming
------------
Proposed features:
1. --combine - Merge orig js and wrapper js into a single file. (It could be a solution of the bug of Qt.include)
2. Handle library with only a single function
3. --function name - Set the function name of the library that only provides a single function
4. Break down the "convert" function into multiple steps.
5. --retry-minify - Try to minify for few more times unless it doesn't use any variable name with `as'