Using wirejs with jQuery plugins

I have a jQuery plugin, say 'myPlugin' that I use as follow:

If my DOM contains:

<div id="some-element">Nothing special here</div>

I will call my plugin on the div:
```
$('#some-element').myPlugin();
```
It will make the plugin do its things which will result in (for instance):
```
<div id="some-element">Something happened here</div>
```

I'm trying to figure out if this plugin can be used somehow as a component in a wirejs spec, like in the example below (except there is no such thing as the onDom I'm using):

define({
    myPluginComponent: {
        create: {
            module: 'myPlugin',
            onDom: '#some-element'
        }
    }
});

I would imagine some folks already tried to use wirejs with jQuery plugins. Can someone please share an example or some documentation on it?

Solution

If your plugin follows a similar pattern to jQuery UI widgets, then you could use the 'wire/jquery/ui' plugin. This plugin accounts for the unique way that jQuery plugins "construct" instances and set/get properties.

From the docs, I came up with this:

define({
    myPluginComponent: {
        widget: {
            type: 'myPlugin',
            node: { $ref: 'dom!some-element' }
        }
    },
    $plugins: ['wire/jquery/ui', 'wire/jquery/dom']
});

"myPlugin" is the name of your plugin property on $.fn. If your plugin takes configuration options, you can provide them as an options property alongside the node property.