Packaging can.Components For Reuse

Is there a set of instructions for the recommended way to take a can.Component that I have created and package it in a way that makes it simple for someone else to use?

bit-tabs is the example component we mostly talk about. I would use that as a guide for creating components. The Grunt task (you can use something else if you wish) will export the component into all of the popular formats (CommonJS, AMD, etc). Then you can simply import it:

<can-import from="bit-tabs"/>

I’d like for DoneJS if we built a generator that creates a skeleton for a plugin project. Something like:

donejs plugin my-tabs

But we don’t have that yet, add an issue on donejs/donejs if it’s something you’d like to see.

2 Likes

Yeah, I have been using bit-tabs as a concrete example. When exporting the component, will it package everything needed to use said component? For example, if the user of the component is not using CanJS, I’d like it to still work. Thanks for the reply.

bit-tabs uses Steal to build the component out. Since CanJS is set as a dependency in the package.json, Steal will bundle CanJS with it. Based on the bit-tabs’ Steal config, when you run grunt build, you will get three bundles:

  • global script
  • CommonJS bundle
  • AMD bundle

You can use whichever bundle best matches your project’s structure; each bundle includes CanJS.

Bit-tabs is also on NPM. So, you could also npm install bit-tabs --save and immediately use bit-tabs this way as well.

Thanks. Any examples of how bit-tabs would do this if were using RequireJS instead of Steal?

Thanks. Any examples of how bit-tabs would do this if were using RequireJS instead of Steal?

There isn’t because RequireJS isn’t made to transpile to every other format. Also, RequireJS doesn’t load from NPM automatically.

I’d seriously encourage you to use StealJS over RequireJS. It’s much much much better.