Merge multiple bower.json dependencies in automated way

Question

I've got a complex architectural problem with bower. I'm building an online platform where user create pages using dynamic widgets which contain JS-code. Those widget have predefined format, description, icons etc., they will packaged into archive (like apk's, war's, jar's, ear's but with front-end code). Users will be able to dynamically add widgets when website is already deployed.

We're using bower and the problem is the following: widgets should also be able to specify their bower dependencies.

Simplified directory layout is the following:

• bower.json
• gulpfile.js (used for website building)
• bower_components # our own deps + deps from all the widgets
• widgets
  • widget1 # any name is possible here
  • widget2
  • widget-random
  • another-widget # for each of the widgets above the layout is the same
    • bower.json (or simplified version like dependencies.json which contains only dependencies list).
    • many other files

After widget is uploaded bower.json should be merged with all the deps from other widgets, gulp build will run and rebuild the whole thing.

How do I merge all the bower.json's into a single one? Especially when there is the same dependency twice e.g. one widget depends on "jquery": "<=2.1.0" and another widget depends on "jquery": "^2.1.0". They are both compatible but what string do I write in bower.json? If I write both bower uses only the second and will install the latest jquery - 2.1.1 which is already not compatible with the first widget. And that's a simpler use case.

We can actually assume that there will be not every possible semver spec variation, like <= for example. I can also force widget-writers use my own dependency specification but I can't think how to design it.

Any help is appreciated!

Other approached for widget dependency solution are accepted but note: they cannot have they're own versions of libs because in runtime multiple widgets are loaded. I can't have two jqueries at once, for example, just because two widgets use specs like in the example above.

UPD: I know about RequireJS and I'm actually using it. But, first, I need to download the dependency itself so I could use it with RequreJS later on.

Answer 1

The solution was the following:

each widget itself is a bower package with it's bower.json; The project's bower.json is renamed to bower-base.json and bower.json is generated from bower-base.json with all the widgets added to dependencies property. Then bower automatically handles widget's dependencies.

Answer 2

Is there a reason this has to be done with bower? Bower isn't really intended for runtime dependencies. For that you want to use something like RequireJS.