Hello,

Currently we using the following jQuery UI libraries on our websites:

• jQuery UI - v1.11.1
• jQuery UI - v1.11.4

The Google Chrome browser Audits tool detects them as vulnerable. Please find these links for more details:

• ​https://snyk.io/vuln/npm:jquery-ui?lh@1.11.1
• ​https://snyk.io/vuln/npm:jquery-ui?lh@1.11.4

Can you please confirm if this is a legit issue? If so, then would you please advise hot to fix it?

Thank you, Rustam.

currently (JUI-1.12), "instance invocation" still does not have same luxury on return types compared with "plugin invocation" (​http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/#return-types).

"Most methods invoked through the widget's plugin will return a jQuery object so the method call can be chained with additional jQuery methods. This is even true of methods that return undefined when invoked on the instance."

Instance invocation produce verbose statement. The more additional statements added, the more ugly they look. For me, this is the main barrier why i decided not to use instance invocation. Beside this weakness, i recognize the potential advantage on using instance invocation: a better IDE recognition and error inspection.

This inconsistency (instance and plugin return type) is caused by how we declare return statement inside the method. If we declare it as jQuery object, we get same condition as before: we still can't do method chaining with "instance invocation". If we declare it as instance object, we can do method chaining on "instance invocation" but it breaks method chaining on "plugin invocation".

Another determining factor is if ( methodValue !== instance && methodValue !== undefined ) statement inside $.widget.bridge body. It is the source of magical chaining on "plugin invocation". We expect the same magic for "instance invocation".

What we expect is if the method returns instance object (return statement declaration), the bridge automatically converts it as jQuery object so the chaining can be applied on both kind.

The implication of this are:

1. We can't obtain instance object anymore using "plugin invocation" other than "instance" keyword.

$.widget("ns.mywidget", {
    myMethod: function(){
        return this;
    },
    otherMethod: function(){
        // nothing to return
    }
});

// now, these statement is magically returning jQuery:
$elm.mywidget("myMethod");
$elm.mywidget("otherMethod"); // nothing new on this one

// this method is still returning instance:
$elm.mywidget("instance");

2. The consummer of "plugin invocation" must explicitly call "instance" method if it really want to obtain instance object.

// before
$elm.mywidget("method1") // method1 returns jQuery
    .mywidget("method2") // method2 returns instance
    .method3()           // see the style switching

// after
$elm.mywidget("method1")
    .mywidget("method2")  // now, method2 returns jQuery
    .mywidget("instance") // explicitly
    .method3()

3. The only problem (if any) is on the custom user widget, whether it is modified/derived version of standard JUI or brand new. If user declare the public method returns instance than this will breaks the widget.

As far as i know, most of (if not all) public instance methods on the standard JUI widget are not returns instance. This mean the consumer of that widget is always get anything other than instance object. I thing this is save to add the missing return statement (which is returning instance).

I've been working lately on a framework of common jQuery widgets, built through the Widget Factory, for use in a larger application, and I've got a lot of widget inheritance going on. I've found myself wishing for a way to have a particular widget define private members that can't accidentally be overridden by another widget, because that implementer didn't realize he defined a field or method with the same name as an existing one on the base widget. In other words, I need a solution for namespace conflicts.

I've got one that works by adding some additional new functions to $.Widget.prototype, and using a custom wrapper functions for $.widget(), but it's rather cumbersome to use, as it requires widgets to call these additional functions at the beginning of almost every regular function call.

I took a shot at integrating the "tacked-on" code into the widget component itself, and it's a lot nicer to use. I'm ready to submit a pull request with the code, if there's interest.

Conceptually, the solution is as follows:

First, each widget prototype can define a field named "_privates", in the same fashion as the "options" field. When prototypes are merged, however, any "_privates" fields are not simply merged together, but are re-organized into an object structure of the following form:

_privates: {
    Namespace1: {
        Widget1: {},
        Widget2: {}
    },
    Namespace2: {
        Widget1: {},
        Widget2: {}
    }
}

Second, the proxy methods that define "_super" and "_superApply" for every method call on the widget instance now also define a "_myPrivates" field, which extracts the appropriate sub-object from the "_privates" object, based on the namespace and name of the prototype that is being proxied.

Finally, when a new instance of the widget is created, the "_privates" object on the merged prototype is cloned anew for the new instance, similar to the "options" object.

I also added the step of searching for any functions in the cloned "_privates" object and binding them to the widget instance, so they can access other fields and methods of the widget. Requiring the widget to do this manually seems like pointless boilerplate, but I'm open to discussion.

Ultimately, you get a system that looks like this:

​https://jsfiddle.net/pz0bk85r/10/