Unnecessary initialization in docs for RequireJS + Masonry

[Redsandro]

I don't understand how exactly this bridget works, but the Masonry documentation explains this is how you use it:

// if you are using masonry.pkgd.js,
// provide path to jquery.bridget as masonry.pkgd.js path
requirejs.config({
  paths: {
    'jquery-bridget/jquery.bridget': 'path/to/masonry.pkgd.js'
  }
});

requirejs( [
  'path/to/masonry.pkgd.js',
  'jquery-bridget/jquery.bridget'
], function( Masonry, bridget ) {
  // make Masonry a jQuery plugin
  bridget( 'masonry', Masonry );
  $('#container').masonry();
});

However, for me, this works just fine in RequireJS when jquery was already require'd:

var bridget = require(['path/to/jquery-bridget.js']);
var masonry = require(['path/to/masonry.pkgd.js']);
$('#container').masonry();

Nothing else. It works.
Is this acceptable usage, or does this only work by freak accident?

E.g. full script:

require(['require', 'path/to/jquery.js'], function(require, $) {
    var bridget = require(['path/to/jquery-bridget.js']);
    var masonry = require(['path/to/masonry.pkgd.js']);
    $('#container').masonry();
}

[desandro]

Hi! Thanks for bringing this up.

The reason why I call out bridget( 'masonry', Masonry ); has to do with how RequireJS loads modules asynchronously. jQuery Bridget is a weird module as it requires jQuery to work, but doesn't specify jQuery as a dependency (this is to keep masonry.pkgd.js from explicitly requiring jQuery).

I found I was running into a problem where jQuery Bridget was being required, but it wasn't being triggered as jQuery hadn't been loaded yet. To resolve this, I explicitly request that you require jQuery, and then trigger bridget( 'masonry', Masonry );.

So -- yes, your script can work. But I'm unsure if it always will work for all users.

---

RequireJS is still a bit of a black art to me. If your or anyone has better insight on how to best resolve this, I'm happy to hear your suggestions.

[Redsandro]

RequireJS is a neat way of separating code from content. I haven't been using it for a long time so I only know the basics and maybe a little bit more, but I am pretty sure my last example code is correct as far as RequireJS is concerned. See, the first require() requires jquery, and the callback isn't launched until the requires are loaded.

I'm just not sure how exactly bridget works, and more specifically how it works without actually pointing it to Masonry as you do in your example. But if this behavior is normal, then the RequireJS code is correct.

The asynchronous 'problem' for which your example would be necessary is when you use define in stead of require. When using define, code isn't loaded immediately.

[Redsandro]

@desandro I'm having random hit-or-miss problems with bridget, both when loading the above way, or the way documented here, or something in between, when trying to load multiple things that require jQuery. But only after optimizing using RequireJS r.js. The other plugins have the same problem sometimes, but 9 out of 10 times it's the bridget script that is not attached to jQuery. Maybe because it's a small script and loaded the fastest.

Could you glance over this snippet and see if you have any thoughts on the problem, any thoughts at all?