Report the use of different versions of jQuery

[macbre]

Inspired by @gmetais YellowLabTools.

[gmetais]

This is a very useful metric. But it would be even better if we could detect when the same version of jQuery is loaded twice, because it also hurts performances.

The problem is, there are some widgets that load their own jQuery version then immediately restore the previous version using jQuery.noconflict(). The __defineSetter__ way to detect jQuery is not able to distinguish if it's a version swap or a reloading.

A quick idea: maybe it could be accomplished by flagging jQuery once it has been detected by Phantomas. Like this :

jQuery.fn.phantomasFlag = true;

[macbre]

Offenders for jQueryVersionsLoaded (3):
 * jQuery v2.1.1 loaded from <http://localhost:8888/static/jquery-2.1.1.min.js>
 * jQuery v2.1.1 loaded from <http://code.jquery.com/jquery-2.1.1.js>
 * jQuery v1.11.1 loaded from <http://code.jquery.com/jquery-1.11.1.js>

$.noConflict seems to be handled correctly - take a look at jquery-multiple.html test page.

[gmetais]

Hi @macbre,

I tested your devs and found two problems.

1) The loaded from <file> is sometimes very strange. For example on the page http://www.conrad.fr :

Offenders for jQueryVersionsLoaded (8):
 * jQuery v1.7.2 loaded from <http://www.conrad.fr/libs/js/conrad.js>
 * jQuery v1.7.1 loaded from <http://www.conrad.fr/medias/sys_master/cms/promotional_content/home/8542034041447856.gif>
 * jQuery v1.7.2 loaded from <http://www.conrad.fr/medias/sys_master/cms/promotional_content/home/8542034041447856.gif>
 * jQuery v1.7.1 loaded from <http://www.conrad.fr/medias/sys_master/cms/promotional_content/home/8542034041447856.gif>
 * jQuery v1.9.1 loaded from <http://www.conrad.fr/medias/sys_master/8542237467137040.jpg>
 * jQuery v1.7.1 loaded from <http://www.conrad.fr/medias/sys_master/8542237467137040.jpg>
 * jQuery v1.8.3 loaded from <http://eptica.vivocha.com/a/conradfr/api/jquery.vvc.js?_=110>
 * jQuery v1.7.1 loaded from <http://eptica.vivocha.com/a/conradfr/api/jquery.vvc.js?_=110>

Some of the urls are real images. It's unusual :)

2) No conflicts is not always correctly handled. Take a look at this page: http://pluzz.francetv.fr/france4 There are only two versions of jQuery loaded, the second one with noConflict.

Offenders for jQueryVersionsLoaded (3):
 * jQuery v2.1.1 loaded from <http://pluzz.francetv.fr/js/jquery-2.1.1.min.js>
 * jQuery v1.8.3+1 loaded from <http://static.francetv.fr/player/jquery.player.7-d42ce7a1ba944c9159c8500ba84eab7d.js>
 * jQuery v2.1.1 loaded from <http://static.francetv.fr/player/jquery.player.7-d42ce7a1ba944c9159c8500ba84eab7d.js>

[macbre]

Hi @gmetais,

1) URL reporting is just a wild guess. The URL of the most recently received asset is reported here. I probably should document it a bit better :)

2) Looks like a bug, will take a look

Thanks!

[gmetais]

Tell me if you'd like to have a look at the unminified version of http://static.francetv.fr/player/jquery.player.7-d42ce7a1ba944c9159c8500ba84eab7d.js

[gmetais]

1) What about using phantomas.getCaller() to report URLs?

[macbre]

Unfortunately, backtrace is not available in __defineSetter__ in PhantomJS, hence the workaround with the recent asset URL.

[macbre]

2) It's probably caused by jQuery.noConflict called with deep arguments set to true.- this causes jQuery be set to the previous version of the library -__defineSetter__ callback is called and we have a third offender :)

[macbre]

450 improves the detection of multiple jQuery versions being loaded and later on restored via jQuery.noConflict(true).

Images in 1) were reported because noConflict calls were being "detected" as jQuery library loading, instead of just restoring via noConflict.

@gmetais, please verify that #450 improves the situation on URLs that you've mentioned. And thanks for the reports :)

[gmetais]

Yes it looks like it works perfectly with noConflict(true) now!

There are still some wrong files in the offenders, though. Maybe you'd better not indicate the filename, rather than an uncertain value?

[macbre]

@gmetais, can you provide URLs were filenames are wrongly reported (AFAIR the two you've mentioned before worked fine for me after the fix)? It would be great if these can be correctly reported as it provides great help when debugging such issues.

[gmetais]

I sometime have the issue on this URL: http://www.conrad.fr . Not every time, you might need to rerun the test a few times!

Offenders for jQueryVersionsLoaded (4):
 * jQuery v1.7.2 loaded from <http://www.conrad.fr/libs/js/conrad.js>
 * jQuery v1.7.1 loaded from <http://d1447tq2m68ekg.cloudfront.net/e1a37d63b02c5c9e3fd3b2914572915c.js>
 * jQuery v1.9.1 loaded from <http://nxtck.com/act.php?zid=40701&pid=&tc=1> <== THIS ONE IS BAD
 * jQuery v1.8.3 loaded from <http://eptica.vivocha.com/a/conradfr/api/jquery.vvc.js?_=110>

[macbre]

I managed to get the following (after a number of tries):

Offenders for jQueryVersionsLoaded (4):
 * jQuery v1.7.2 loaded from <http://www.conrad.fr/libs/js/conrad.js>
 * jQuery v1.7.1 loaded from <http://static.criteo.net/js/ld/ld.js>
 * jQuery v1.8.3 loaded from <http://conrad.epticahosting.com/devconradEADS/resources/js/eptica-essm-widgets/lib/eptica-jquery-1.9.1.js>
 * jQuery v1.9.1 loaded from <http://conrad.epticahosting.com/devconradEADS/resources/js/eptica-essm-widgets/lib/eptica-jquery-1.9.1.js>

17:45:44.645 jQuery: recv <http://eptica.vivocha.com/a/conradfr/api/jquery.vvc.js?_=110>
17:45:44.648 Event recv emitted
17:45:44.648 jQuery: recv <http://conrad.epticahosting.com/devconradEADS/resources/js/eptica-essm-widgets/lib/eptica-jquery-1.9.1.js>
17:45:44.676 spy: jQuery global variable has been defined
17:45:44.676 Event jQueryLoaded emitted
17:45:44.676 jQuery: loaded v1.8.3
17:45:44.710 spy: jQuery global variable has been defined
17:45:44.710 Event jQueryLoaded emitted
17:45:44.710 jQuery: loaded v1.9.1

Two different jQuery versions reported from the same URL. I'll keep the URL logged in verbose mode with "probably" word used ;) and remove it from the offenders.