Moving forward with ES6 modules (or commonjs)

[0cv]

Most web projects are now using modules bundler (such as Webpack, System.js, JSPM, etc.) for building assets. This would be good to make the use of Fancytree easier with these bundlers. This is how I managed to use Fancytree (in the most simple way) with Webpack, which feels quite awkward, even so it works:

const jQuery = require('jquery')

//minimal required jquery-ui modules 
require('jquery-ui/core')
require('jquery-ui/widget')
require('jquery-ui/effect-blind')

//import of fancytree by injecting jquery
require('imports?jQuery=jquery!jquery.fancytree/dist/jquery.fancytree.js')

//potential extensions (by injecting jquery as well)
require('imports?jQuery=jquery!jquery.fancytree/src/jquery.fancytree.childcounter.js')

//from here we can now use jQuery#fancytree

While jQuery does not play very well with any module bundler, an easy improvement idea would be to do something similar to jqueryUi, by requiring jquery automatically, instead of assuming jQuery as a global variable.

E.g. jquery-ui/core.js looks like that:

var jQuery = require('jquery');
(function( $, undefined ) {
  //...
})( jQuery );

[mar10]

Thanks, I am open to improvements here.
Will this be backwards compatible, and if not, are you aware of patterns that are?

[0cv]

Backwards compatibility is possible when checking whether a module wrapper exists. Here is a good blog post about it http://ifandelse.com/its-not-hard-making-your-library-support-amd-and-commonjs/

Now, I see an additional complexity in regards to what to load from jquery-ui. OOTB, the 3 jquery-ui modules I've listed above are enough (even so they load more by themselves), but I think that this plugin supports more than just the "blind" effect...

Apart from this, some assumptions could be done for simplifying. People downloading the dist file are for sure not interested in any module bundling and will put straight the minified file in a script tag. Others using browserify may not be interested either in module bundling while those using npm are very likely the ones who are interested in that. It looks like that's the approach that the folks at jquery-ui have been using (by putting straight var jQuery = require('jquery'); in the dist file).

[Cryde]

It is too bad that we can't include this lib easily via NPM in a process build via Brunch for instance.

[mar10]

It seems that jQuery UI 1.12 has changed the widget layout. Any suggestions anyone?
Since i am not using those loaders myself, it would be cool if someone could help with testing or even submit a PR...

[mafar]

IMO , fancytree is a nice plugin and it should be refactored to get rid of jquery UI widget system and could be easily a modular to support UMD.

[mafar]

is there any requirejs solution yet ?

[mafar]

Currently there is very little documentation to show how to work with requirejs with latest version.

Here is how made it work with jquery.fancytree-all and latest jquery-ui with AMD support, since working with individual extensions will require a lot of shimming

requirejs.config({
  paths: {
    'jquery': './js/vendor/jquery',
    'jquery-ui': './js/vendor/jquery-ui',
    'jquery.fancytree': './js/vendor/fancytree/jquery.fancytree-all'
  },
  shim: {
    'jquery.fancytree': {
      deps: ['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'],
      exports: 'jQuery.fn.fancytree'
    }
  },
  onBuildWrite: function (moduleName, path, contents) {
    'use strict';
    if (moduleName === 'jquery.fancytree') {
      contents = 'define( "jquery.fancytree", ["jquery", "jquery-ui/core", "jquery-ui/effect", "jquery-ui/effects/effect-blind", "jquery-ui/widgets/draggable", "jquery-ui/widgets/droppable"], function(jQuery) { ' + contents + '});';
    }
    return contents;
  }
});

// usage 
 define([
     'jquery',
     'jquery.fancytree',
     'css!./css/fancytree/skin-custom/ui.fancytree.css',
   ],
   function($) {
     'use strict';
     //
     $('#tree').fancytree({
       checkbox: true,
       source: [{title: 'Node 1'}, {title: 'Node 2',key: 'id2'}]
     });
     //
   });
// 

[mar10]

@djangosdk Thanks for giving an example.
(#694 is now an open issue, which - once implemented - should make this more easy.)

[mar10]

See https://github.com/mar10/fancytree/wiki#embed-fancytree-on-your-web-page for new module support