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

  • Qt Champions 2016


    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

    Usage: qmljsify [options] command package
    qmljsify - Download and convert an NPM package to a QML friendly JavaScript file
      -h, --help   Displays this help.
      --no-minify  Turn off JavaScript Compression
      command      Command [Available Commands: convert]
      package      NPM package to be qmljsified


      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
    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.

  • Lifetime Qt Champion


    Looks nice ! Thanks for sharing !

  • Qt Champions 2016

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


    $ qmljsify convert lodash.merge@4.5.0
    /usr/local/bin/npm install --save --save-exact lodash.merge@4.5.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

  • Qt Champions 2016

    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


    docker-compose qmljsify --rm run convert leftpad

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.