Using component with jQuery plugins

[Dom Luna]

1)

I know, I know jQuery is code smell but project I'm currently working at the moment we're doing things based on jQuery plugins. I was wondering what the best to way to use component with jQuery plugins. For example:

Say I have a plugin defined

;(function( $, window, document, undefined ) {

  // Plugin here

})( jQuery, window, document );

I would like to have it so I can do this, say I'm using component-emitter.

;(function( $, window, document, undefined ) {

  var Emitter = require('emitter');

  // Plugin here

})( jQuery, window, document );

I would like to be able to use the jQuery plugin it the normal fashion of $(selector).plugin(options). We're also concatenating our js with grunt so I'm currently adding the build file to that concat. At the moment the error I'm getting is the plugin is undefined, so maybe component is doing something with the build file.

2)

I also had a question about the dependencies and the file sizes, how does component prevent file sizes from getting out of control?

Say I have:

ComponentA

  depends on emitter, ....

ComponentB

  depends on emitter, ....

ComponentC

  depends on emitter, ....

ComponentD

  depends on emitter, ....

If I'm using these components on the same page will the emitter code be written 4 times?

Thanks, Dom

[William Casarin]

> 1)
> I know, I know jQuery is code smell but project I'm currently working at the moment we're doing things based on jQuery plugins. I was wondering what the best to way to use component with jQuery plugins.

My only guess is that you're not calling the root require() which extends jQuery with your plugin. Anything written in a component context is wrapped in a function that defines the module. This module is only executed when the require is called.

Obviously this is not behaviour that most consumers of jQuery plugins expect, so you might want to think about calling the require automatically with a script concatenated at the end of the build.js one.

Alternatively you could simply write your plugin concated after the build.js and leverage `require`d components that way, if you are simply interested in using some functionality from the component ecosystem.

jQuery plugins and any global-mutating mixins are the anti-thesis of component which is why this seems a bit awkward.

>
> 2)
> I also had a question about the dependencies and the file sizes, how does component prevent file sizes from getting out of control?
>
> Say I have:
>
> ComponentA
> depends on emitter, ....
> ComponentB
> depends on emitter, ....
> ComponentC
> depends on emitter, ....
> ComponentD
> depends on emitter, ....
>
> If I'm using these components on the same page will the emitter code be written 4 times?

It will only be written once and all require's referencing emitter will simply return the same export from that module.

>
> Thanks, Dom

Cheers,
William

[Dom Luna]

Thanks William! I think concatenating the plugin after build.js is probably the best bet since at this point I'm only trying to leverage component not write any components myself.

Dom