qmljsify - Convert an NPM package into a QML friendly JavaScript file

benlau

Hello,

I would like to share a experimental project here. It is qmljsify , a tool that could converts an NPM package into a QML friendly JavaScript file.

Project Site
http://www.github.com/e-fever/qmljsify

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);

It is just the first release and not every package works. If you have any problem / suggestion , please feel free to tell me.

SGaist

Hi,

Looks nice ! Thanks for sharing !

benlau

Updates: Now, it is supported to handle NPM package that returns a single function likes left-pad and lodash.merge

e.g

$ qmljsify convert lodash.merge@4.5.0
/usr/local/bin/npm install --save --save-exact lodash.merge@4.5.0
qmljsify@1.0.0 
└── lodash.merge@4.5.0 

/usr/local/bin/npm install
/usr/local/bin/webpack --env minify
Hash: 43529705cfe4a5efa83d
Version: webpack 2.5.1
Time: 616ms
    Asset   Size  Chunks             Chunk Names
bundle.js  13 kB       0  [emitted]  main
   [0] ./index.js 163 bytes {0} [built]
   [1] ./~/lodash.merge/index.js 60.7 kB {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
   [4] multi ./index.js 28 bytes {0} [built]
lodash.merge.orig.js  saved
lodash.merge.js  saved

benlau

Updates: If you are familiar with docker, now you could use docker-compose to build a qmljsify image, that will save you a lot of time for getting required software to build it.

Build Instruction

cd qmljsify
docker-compose build

Usage

docker-compose qmljsify --rm run convert leftpad

stlf

@benlau said in qmljsify - Convert an NPM package into a QML friendly JavaScript file:

Updates: If you are familiar with docker, now you could use docker-compose to build a qmljsify image, that will save you a lot of time for getting required software to build it.

Build Instruction
cd qmljsify
docker-compose build
Usage
docker-compose qmljsify --rm run convert leftpad

awesome! npm is a big ecosystem.