Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Qt Academy Launch in California!

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

    QML and Qt Quick
    3
    5
    1213
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • benlau
      benlau Qt Champions 2016 last edited by

      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.

      1 Reply Last reply Reply Quote 5
      • SGaist
        SGaist Lifetime Qt Champion last edited by

        Hi,

        Looks nice ! Thanks for sharing !

        Interested in AI ? www.idiap.ch
        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

        1 Reply Last reply Reply Quote 0
        • benlau
          benlau Qt Champions 2016 last edited by

          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
          
          1 Reply Last reply Reply Quote 0
          • benlau
            benlau Qt Champions 2016 last edited by

            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
            
            S 1 Reply Last reply Reply Quote 1
            • S
              stlf @benlau last edited by 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.

              1 Reply Last reply Reply Quote 0
              • First post
                Last post