Add support for CommonJS and AMD

[jpwsutton]

migrated from Bugzilla #437204 status UNCONFIRMED severity normal in component MQTT-JS for 0.9 Reported in version future on platform PC Assigned to: James Sutton

On 2014-06-11 12:13:50 -0400, Tim-Daniel Jacobi wrote:

Rationale for this request is to be able to load the JavaScript client asynchronously as a dependency as it is often required by larger scaled JavaScript projects. This addition would also ease the use of the client in Dojo based projects.

There are three major patterns of using/loading a JavaScript module nowadays.

Attach your module to the global namespace (global in node, window in the browser), this is the current approach: // define it MyModule = { // module code }; // use it MyModule.myMethod();

Define it as a CommonJS module (like all npm modules do): // define it (mymodule.js) module.exports = { // module code }; // use it (app.js) var mymodule = require('./mymodule'); mymodule.myMethod();

Define it as AMD module (for AngularJS, Dojo, ...) //define it define(function(){ // module code }); // use it require(['mymodule'], function(mymodule){ mymodule.myMethod(); });

The JavaScript MQTT client only supports the first pattern at the moment. Having it support all three patterns is as easy as wrapping the current code with the following. This will also ensure backwards compatibility.

(function(name, definition) { if (typeof module != 'undefined') module.exports = definition(); else if (typeof define == 'function' && typeof define.amd == 'object') define(definition); else this[name] = definition(); }('Messaging', function() { // Current code (mqttws31.js lines 84-2011) goes here }));

Further reading: AMD: http://dojotoolkit.org/documentation/tutorials/1.9/modules/ CommonJS: http://dailyjs.com/2010/10/18/modules/

On 2015-08-14 06:36:03 -0400, Ian Craggs wrote:

Assigning to James

[TichShowers]

Can I also request adding support for es6 style imports

I am going to attempt a workaround myself in my local version of the file by adding the following line at the end of the file

export default Paho.MQTT;

I will see if this can work as a quick fix.

[AngelKyriako]

I just made a pull request for this & other export related issues from here: https://github.com/angelkyriako/paho.mqtt.javascript

@jpwsutton sorry for the large ammount of changes. They are mostly due to indentation. Thats why I listed what I actually changed.

@TichShowers I don't know if the pull request will be accepted. If not you could try out the following in your project

// in package.json
"paho-mqtt": "git+https://github.com/AngelKyriako/paho.mqtt.javascript.git#master"

// import like this
import { Client, Message } from "paho-mqtt";

[jpwsutton]

This has now been merged into the develop branch in commit 522b48f. Thanks to @AngelKyriako, @surculus12 and @sickDevelopers. My apologies for taking so long with this, I'd really appreciate it if everyone could check that this is behaving correctly in their setups and that the API hasn't been broken for existing code.

[AngelKyriako]

@jpwsutton thanks for the changes. I will check it out when I find the time and will let you know

[sabbynair]

Hi, Am new to JavaScript as such am working on Angular 4/5. Am guessing that this change will let me import and use the client in a typical way angular 4/5 imports. For now I am using the ng2-mqtt but its not been updated in a while and does not support the latest features. Any idea when this will be available ? Thanks, Sabariesh.

[surculus12]

Verifying that the CommonJS change works in the '1.0.4' package inside the npmjs repository (but the repo's 1.0.3 does not). Note that the official 1.0.3 seems to include the CommonJS change, but I haven't tested against that source. (I assume that the npm repo just got out of sync in terms of version numbers).

Tested for webpack using babel-loader for es2015:

import Paho1 from 'paho-mqtt';
var Paho2 = require('paho-mqtt');
import { Client, Message } from 'paho-mqtt';

@sabbynair It is my (limited) understanding the Angular supports es2015 import statements, so this update should remove need for a wrapper library.

[ameinhardt]

PR https://github.com/eclipse/paho.mqtt.javascript/pull/158 suggests webpack build with

library: "Paho",
libraryTarget: "umd"

[powerpete]

I'm using the paho client with an AMD loader. Its working fine with one exception: I had to rename the the lines llike new Paho.MQTT.Message(...) to new Message(...). The reason is that my AMD loader doesn't make the Message and Client available in the namespace Paho.MQTT.