jQuery and Dart interop with call()

Issue

I’m trying to make basical jQuery interop with Dart in order to use jQuery plugins easily.

I’m trying to figure out a way of achieving both the classical $("#elementID") DOM query selection and the plugins getters of $.fn.pluginX.methodY()

So far I have developed this

@JS()
external JQuery jQuery(String query);

@JS("jQuery")
abstract class JQuery extends intlTelInput.JQuery {
  factory JQuery() {}
  external static Plugins get fn;
}

So I can achieve JS $("#elementID") with Dart jQuery("#elementID")
and JS $.fn.pluginX.methodY() with Dart JQuery.fn.pluginX.methodY()

But I would like to achieve JQuery("#elemID") with something in the class, having the final code sorta like:

@JS("jQuery")
abstract class JQuery extends intlTelInput.JQuery {
  factory JQuery() {}
  external static JQuery call(String query); // <- this replacing jQuery(..)
  external static Plugins get fn;
}

Solution

Add a static method named call to a Dart class won’t make JQuery callable.
Good news is you can achieve the same effect you should just make jQuery a getter that returns a JS interop object that is callable.

Try this instead:

    @JS("jQuery")
    external JQuery get jQuery;

    @JS() @anonymous
    abstract class JQuery extends intlTelInput.JQuery {
      external JQuery call(String query);
      external Plugins get fn;
    }

Answered By – Jacob Richman

Answer Checked By – Cary Denson (FlutterFixes Admin)