SpecAmd

Vision

Fancytree should support AMD (require.js) and ES6 modules.

Status

Please discuss here: https://github.com/mar10/fancytree/issues/603

Requirements

• TODO

Discussion

AMD(require.js) for single Fancytree extensions

See also issue 634.

For example Page1:

// just normal fancytree 
require([
  'jquery',
  'dist/modules/jquery.fancytree'
], function($) {
  //do something here
});

For example Page2:

//fancytree with menu plugin
require([
  'jquery',
  'dist/modules/jquery.fancytree',
  'dist/modules/jquery.fancytree.filter'
], function($) {
  //do something here
});

ES6 modules (or commonjs)

See also issue 603.

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

AMD Named Modules

require([
  'jquery',
  'dist/modules/jquery.fancytree'
], function($, fancytree) {
  // fancytree as named module return tree api
  var treeAPI = fancytree({
    element: $("#tree"), // or selector:  "#tree" may be ??
    source: {
      url: "ajax-tree-plain.json"
    }
  });
});

Include directly

Fancytree depends on jQuery and a small subset of jQuery UI. If jQuery UI is already part of the project, Fancytree will nicely integrate:

<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<script src="../src/jquery.fancytree-all.js"></script>

But we don't need to pull in jQuery UI explicitly, just for Fancytree. Use the complete build instead:

<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../lib/jquery.js"></script>
<script src="../src/jquery.fancytree-all-deps.js"></script>

<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.custom.js"></script>
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree-filter.js"></script>

Drop dependency on jQery UI

See also issue 694.

Resources

Problems

Proposal

Current Specification