Dart JS interop for library using jQuery - dart

Question

I am attempting to use Dart's package:js to create an interop library for JScrollPane, which is wrapped with jQuery.
Here's what I have so far:
#JS()
library jscrollpane;
import 'dart:html';
import 'package:js/js.dart';
#JS()
#anonymous
abstract class JScrollPaneSettings {
external factory JScrollPaneSettings({bool showArrows});
external bool get showArrows;
external set showArrows(bool value);
}
#JS()
class JScrollPane {
external JScrollPane(Element element, JScrollPaneSettings settings);
}
And here's the error:
Not a valid JS object
STACKTRACE:
#0 JsNative.callConstructor (dart:js:1461)
#1 JScrollPane.JScrollPane (package:portal/base/views/scrollbar/jscrollpane.dart_js_interop_patch.dart:13:30)
And here's the JS library - http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

Answer 1

Element is from dart:html and is not annoted with #anonymous, you should use the dynamic keyword instead.
#JS()
class JScrollPane {
external JScrollPane(dynamic element, JScrollPaneSettings settings);
}
UPDATE
Since it is a jQuery plugin, I don't think you can directly access to the JScrollPane, I have never wrap a jQuery plugin, but if you take the example code of the plugin:
$('.scroll-pane').jScrollPane();
You can try to wrap the $ function
#JS('\$')
external jQuery(query);
#JS()
#anonymous
class JScrollPaneElement {
external jScrollPane();
}
void main() {
JScrollPaneElement scrollPane = jQuery('.scroll-pane') as JScrollPaneElement;
scrollPane.jScrollPane();
}