Making mimosa-bower work with polymerjs

[bhavinkamani]

I am currently experimenting with polymerjs. All of the polymerjs components do not declare main in bower.json. Hence I have set bower.copy.unknownMainFullCopy to true.

On mimosa build, js files are moved to public/javascripts/vendor and rest of the files are moved into public/stylesheets/vendor. Is there a way to keep all of the package files intact without these separations? I would prefer not to use mainOverrides as there are too many components for which override will have to be configured. Also is it possible to move all of them under a separate path without pre-processing them? In polymer, html files are typically imported using the new html-import. They internally refer to dependent javascript and css as a relative path. My mimosa-config.coffee file is as follows

exports.config = 
  modules: ["copy", "jshint", "csslint", "server", "require", "minify-js", "minify-css", "live-reload", "bower", "jade", "stylus", "coffeescript"]
  bower:
    copy:
      unknownMainFullCopy: true

[dbashford]

Well, one thing you can do with mainOverrides is provide folders. So if the assets you need are in a folder, and you want that whole folder copied over you can provide an object instead of an array inside the mainOverrides array.

Here's an example from here

I have a gist that explains all that.

  bower:
    copy:
      mainOverrides:
        "knockout.js":["knockout.js","knockout-2.3.0.debug.js"]
        "bootstrap": [
          "docs/assets/js/bootstrap.js"
          "docs/assets/css/bootstrap.css"
          "docs/assets/css/bootstrap-responsive.css"
        ]
        "font-awesome": [
          { font: "../../font" }
          "css/font-awesome.css"
          "css/font-awesome-ie7.css"
        ]
        "durandal": [
          {
            img: "../../images"
            js: "durandal"
            css: "durandal"
          }
        ]

So you could do something like this

 "somename": [
          { 
            src: "../../components/somename"
          }
        ]

or something like that.

Though, because the assets won't be in a vendor library or in a javascript library they may miss out on some special treatment the vendor libs get, like not being linted. In that case you'll just have to tell the linter to ignore those folders.

[bhavinkamani]

Yep I did come across that gist before. With polymerjs however, there are too many of the packages for which overriding needs to be done manually. They have a bower package for each of the custom-element and there are about 40+ core elements. These potentially will increase as project uses different custom elements. Currently polymer team has not come up with a viable solution for populating main property.

Is there an alternate way to bypass default behavior? Maybe another copy strategy!!

[dbashford]

Yeah, copy strat is probably best.

So I am clear, can you just show me the desired folder structure? Rather than talk me through it if you just wrote down the structure it would help a good deal.

[bhavinkamani]

Sure. Here' what is my desired structure. Its pretty much a straight forward copy for bower packages. It will be great if there is an option to include/exclude regexp/globb supported files.

FYI... polymer team has released vulcanize as build tool for intelligent polymer component concatenation for production purpose. This could however be supported through mimosa-vulcanize plugin

[dbashford]

That just keeps the components in the bower_components directory rather than putting them in the code?

Or do they go in elements?

[bhavinkamani]

yep.. They are imported in the template file through html-imports. After which they can be used as any other html elements. While for other bower packages we normally import js files, here we import html files.

In elements folder project specific custom elements are stored. While bower folder contains third party components