decoupling jquery, sizzle ?

Question

Does anyone have experience / insight re: decoupling jquery / sizzle?

this is for general interest, but here's the scenario that triggered my question:

..i already have jquery in the project. wanted to try out http://ecsstender.org/, which requires the Sizzle selector engine. I dont really want to include a 2nd copy of Sizzle - its already part of jquery ..

• would rather do something like this: http://forum.jquery.com/topic/further-decoupling-sizzle-and-jquery
• e.g. create a jquery build that depends on an external, rather than embedded, version of Sizzle - so the same Sizzle lib can be used by jquery, eccstender, or other scripts.

Seems a good idea. Although I guess it could hurt performace, and I would want to see benchmarking comparisons against the jQuery production release..

Does anyone know if this has been done ? (github fork?) Or is there a good reason against this approach? .

Answer 1

There's no need for Sizzle to be included in the jQuery build. It can be removed...the jQuery code all references Sizzle., you can just grab/compile jQuery yourself (including Sizzle beforehand) and have it exposed to any other library (not actually including it in the compiled version, just as an extern to the closure compiler).

---

Here's the option to leave it embedded, but expose Sizzle for outside use:

If you know jQuery will be used (dependency), just add this after jQuery:

​window.Sizzle = jQuery.find;

This will re-expose Sizzle as a property you can use.

---

Here's the manual version to remove Sizzle from being embedded:

In jQuery (version 1.4.3 link) you'll see this :

/*!
 * Sizzle CSS Selector Engine - v1.0
 *  Copyright 2009, The Dojo Foundation
 *  Released under the MIT, BSD, and GPL Licenses.
 *  More information: http://sizzlejs.com/
 */
(function(){
//...
//lots of code!
//...

// EXPOSE
jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;
jQuery.expr[":"] = jQuery.expr.filters;
jQuery.unique = Sizzle.uniqueSort;
jQuery.text = Sizzle.getText;
jQuery.isXMLDoc = Sizzle.isXML;
jQuery.contains = Sizzle.contains;

})();

Replace that section with only:

(function(){    
// EXPOSE
jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;
jQuery.expr[":"] = jQuery.expr.filters;
jQuery.unique = Sizzle.uniqueSort;
jQuery.text = Sizzle.getText;
jQuery.isXMLDoc = Sizzle.isXML;
jQuery.contains = Sizzle.contains;    
})();

Then all you need to do in include Sizzle before jQuery and it'll work fine.

Here's a fiddle showing it working, including Sizzle directly from github, not embedded in jQuery.

Answer 2

If you want to use the eCSStender CSS3 Selectors Module with the Sizzle bundled in jQuery, you can do that:

eCSStender.addMethod('findBySelector',function(selector){
  var els = [];
  jQuery(selector).each(function(){
    els.push(this);
  });
  return els;
});

There may be an easier way to directly get an actual element collection (rather than a fake one using an array), but it's early yet and my brain isn't working quite yet.