Decoupled

[recordmob]

Is there a version of this decoupled from mootools core and mootools more?

[anutron]

Sorry, no. You could use the base functionality (Behavior) and write filters with jQuery or whatever, but you'd still need MooTools for it. Behavior just invokes functions for elements, and those an contain anything. But, at the moment, Behavior itself depends on MooTools.

[anutron]

I guess I'll close this. Feel free to comment more on it though.

[recordmob]

Sorry, I might not have used the best language in my question. Is there a version where Mootools More and Core js files are separated from behaviour-ui.js. I notice the individual behaviour js files have been separated, but they all seem to be collated into a single behaviour-ui.js file which is confusing for me. I can do this, but I'm wondering if there are any additional hacks to core or more that might be why this is all collated into a single file.

Great work. Using it

[anutron]

Oh. Sorry, totally misunderstood you.

I don't have a version pre-compiled, no. You can use grunt to do it pretty easily though. In my own work I include this and the other dependencies with bower and then have a grunt file that builds what I need. The grunt file here is a decent reference. This uses mootools-packager (https://github.com/ibolmo/grunt-mootools-packager). That packager doesn't allow you exclude things from the compiled library (it's on github, so feel free to add that option and send a pull request).

Here's an example from my non-published work:

"use strict";

module.exports = function(grunt) {

  require('load-grunt-tasks')(grunt);

      // where our js files are output
  var outputDir = 'app/assets/javascripts/',
      // where bower puts the packages it manages
      vendorDir = 'vendor/assets/bower_components/';


  // paths of ALL js files
  var sourceDirectories = [
    vendorDir +   'mootools-core/Source/**/*.js',
    vendorDir +   'mootools-more/Source/**/*.js',
    vendorDir +   'behavior/Source/**/*.js',
    vendorDir +   'behavior_ui/js/Source/**/*.js',
    vendorDir +   'behavior_ui/js/Source/*.js',
    vendorDir +   'js/myProject/Source/**/*.js',
    vendorDir +   'js/myProject/Source/*.js',
    vendorDir +   'js/cpojer-custom-event/Source/*.js',
    vendorDir +   'js/cpojer-mobile/Source/**/*.js',
    vendorDir +   'js/touch/Source/*.js'
  ];

  // the libraries we wish to output
  // and the requirement for that library
  var outputScripts = {
    'admin': {
      only: ['myProject/myProject.Admin']
    },
    'desktop': {
      only: ['myProject/myProject.Desktop']
    },
    'mobile': {
      only: ['myProject/myProject.Mobile']
    }
  };

  var packagerOptions = {
    options: {
      // the package names as declared in the package.yaml files in each library
      // and the location of that package.yaml file; this is used by the
      // grunt-mootools-packager
      name: {
        Core:           '<%= vendorDir %>mootools-core/',
        More:           '<%= vendorDir %>mootools-more/',
        Behavior:       '<%= vendorDir %>behavior/',
        'Behavior-UI':  '<%= vendorDir %>behavior_ui/js/',
        myPorject:          '<%= vendorDir %>js/',
        'Custom-Event': '<%= vendorDir %>js/cpojer-custom-event',
        'Mobile':       '<%= vendorDir %>js/cpojer-mobile',
        'Touch':        '<%= vendorDir %>js/touch'
      }
    }
  };

  /**************************************
   * NO CONFIGURATION BELOW THIS POINT
   **************************************/

  var cleanOptions = {}, taskNames = [], notifyOptions = {}, watchOptions = {};
  Object.keys(outputScripts).forEach(function(name){
    var options = outputScripts[name];
    taskNames.push(name);
    packagerOptions[name] = {
      src:  options.src || sourceDirectories,
      dest: options.output || '<%= outputDir %>' + name + '.js'
    };
    if (options.only) packagerOptions[name].only = options.only;
    cleanOptions[name] = {
      src: [ options.clean || (outputDir + name + '.js') ]
    };
    grunt.registerTask(name, function(){
      var tasks = [
        'clean:' + name,
        'packager:' + name
      ];
      if (!grunt.option('quiet')) tasks.push('notify:' + name);
      grunt.task.run(tasks);
    });

    notifyOptions[name] = {
      options: {
        title: 'Javascript compiled',  // optional
        message: name + '.js recompiled' //required
      }
    };
    watchOptions[name] = {
      files: sourceDirectories,
      tasks: [name]
    };
  });

  watchOptions['default'] = {
    files: sourceDirectories,
    tasks: taskNames
  };

  var karmaOptions = {
    options: require('./karma-config.js'),
    continuous: {
      browsers: ['PhantomJS']
    },
    dev: {
      singleRun: false,
      browsers: ['PhantomJS'],
      reporters: 'dots'
    }
  };

  grunt.initConfig({
    outputDir: outputDir,
    vendorDir: vendorDir,
    packager: packagerOptions,
    clean: cleanOptions,
    watch: watchOptions,
    notify: notifyOptions,
    karma: karmaOptions
  });

  grunt.registerTask('all', taskNames);

  grunt.task.registerTask('default', 'Command line instructions.', function() {
    grunt.log.writeln(' ');
    grunt.log.writeln(' Grunt commands:');
    grunt.log.writeln(' ');
    grunt.log.writeln('   Build all JS: ');
    grunt.log.writeln('   $ grunt all');
    grunt.log.writeln(' ');
    grunt.log.writeln('   Build a specific library: ');
    grunt.log.writeln(' ');
    grunt.log.writeln('   $ grunt ' + taskNames.join('|'));
    grunt.log.writeln(' ');
    grunt.log.writeln('   Watch for JS changes: ');
    grunt.log.writeln(' ');
    grunt.log.writeln('   $ grunt watch - rebuilds ALL libraries when any JS file is changed');
    grunt.log.writeln(' ');
    grunt.log.writeln('   Build a specific library when a JS file is changed: ');
    grunt.log.writeln(' ');
    grunt.log.writeln('   $ grunt watch ' + taskNames.join('|'));
    grunt.log.writeln(' ');
    grunt.log.writeln('   available flags: ');
    grunt.log.writeln('   --quiet - suppress OS notifications');
    grunt.log.writeln('   --v     - verbose logging');
    grunt.log.writeln(' ');
    grunt.log.writeln('   Run: ');
    grunt.log.writeln('   $ grunt -h');
    grunt.log.writeln('   to see additional tasks (including tests)');
  });

  grunt.registerTask('test', [ 'specs', 'karma:continuous' ]);
  grunt.registerTask('debug', [ 'specs', 'karma:dev' ]);
};

[anutron]

There's a bunch of stuff in there you probably don't need (karma for example) but you get the gist.

[recordmob]

It would be great to have a decouple version so those that are using more extensive MooTools More libraries have a bit more control over their project, especially for those not using grunt. Sort of the way jQuery Bootstrap is compiled for download. Just a suggestion.

[anutron]

Tell you what, I'll re-open this issue. If you have the time to put in the work to de-couple them that's cool, and if not I or one of the other contributors will try and get around to it. If you like the library and you use it, and you have a use case for this particular feature, there's no time like the present to get involved and contribute directly!

[recordmob]

I am working on that as we speak. You'll have to forgive me, I'm not the best developer, nor all that great with git, but I'll work through this as best I can and update you when I fail miserably.

[anutron]

Ah, don't be so rough on yourself. This is how you get better. If you need help or pointers on where to start, don't hesitate to ask. You can email me directly if you want - anutron at gmail.

[thril]

Just to show there are others interested in this, I would love the ability to decouple the various pieces. E.g., I just want the behaviors. I can hack up the builder, but was hoping for a more widely available solution.

Thanks for continuing to awesome work, Aaron.

[anutron]

Here's where you guys can make this be what you want it to be. I don't need this functionality, and on my giant list of things to do, the stuff that falls into the bucket of "stuff other people want" is near the bottom somewhere after the pony my 3 year old wants.

If you want to be able to easily compile this library without all of it's required dependencies you'll need to update the packager. I've created an issue on that project (ibolmo/grunt-mootools-packager#8) and I encourage you to submit a pull request over there for that. Then you can author your own grunt build script and exclude whatever you want.

Here's the file you care about: https://github.com/ibolmo/grunt-mootools-packager/blob/master/tasks/packager.js

It's not that complicated. Take a crack at it.

[SergioCrisostomo]

This functionality is already present on the MooTools website builder. We could use that version of packager here also. I'll give a look at it under next week if no one beats me to it. Basically this change in the packager should do it.

[anutron]

Well, not that exact change; you'd want to be able to configure it...

[rolfnl]

Sorry, I don't understand what is requested? ;) Do you want (to be able to make) custom builds of core and more based on the dependencies in behaviour filters and/or delegators?

[anutron]

The request here is to be able to build all of behavior-ui.js without Core/* or More/*. The packager currently takes whatever you want to build (Behavior-UI/*) and includes everything required for it. But if you want to include core.js from, say, the google CDN, you can't exclude it from the build.

Note that @SergioCrisostomo has a pull open for the packager. I expect this feature to be available in the next day or so.

[anutron]

Many thanks to @SergioCrisostomo for his work on the packager. This commit (#8a71c41) closes this ticket and adds a stand-alone version of the library that excludes core and more (still includes behavior.js).