Polymer WebComponents in ember-cli >= 0.0.41

bower.json

// Add these dependencies

"dependencies": {
  "polymer": "Polymer/polymer#~0.5.1",
  "core-elements": "Polymer/core-elements#~0.5.1",
  "paper-elements": "Polymer/paper-elements#~0.5.1"
}
  

Brocfile.js

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles   = require('broccoli-static-compiler');
var mergeTrees  = require('broccoli-merge-trees');
var vulcanize = require('broccoli-vulcanize');

var app = new EmberApp();

var polymerVulcanize = vulcanize('app', {
  input: 'elements.html',
  output: 'assets/vulcanized.html',
  csp: true,
  inline: true,
  strip: false,
  excludes: {
    imports: ["(^data:)|(^http[s]?:)|(^\/)"],
    scripts: ["(^data:)|(^http[s]?:)|(^\/)"],
    styles: ["(^data:)|(^http[s]?:)|(^\/)"]
  }
});

var polymer = pickFiles('bower_components/', {
  srcDir: '',
  files: [
    'webcomponentsjs/webcomponents.js',
    'polymer/polymer.js',
    'polymer/polymer.html'
  ],
  destDir: '/assets'
});

module.exports = mergeTrees([
  polymerVulcanize,
  polymer,
  app.toTree()
]);

elements.html

<!--
This file belongs at app/elements.html. Loads the polymer elements as a single file, rather than a bunch of individual link requests.

You can customize the elements loaded here if you don't need certain things or want to add your own custom elements.
-->

<link rel="import" href="../bower_components/core-elements/core-elements.html">
<link rel="import" href="../bower_components/paper-elements/paper-elements.html">
<link rel="import" href="../bower_components/paper-dialog/paper-action-dialog.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog-transition.html">
<link rel="import" href="../bower_components/font-roboto/roboto.html">
<link rel="import" href="../bower_components/core-icons/av-icons.html">
<link rel="import" href="../bower_components/core-icons/communication-icons.html">
<link rel="import" href="../bower_components/core-icons/device-icons.html">
<link rel="import" href="../bower_components/core-icons/editor-icons.html">
<link rel="import" href="../bower_components/core-icons/hardware-icons.html">
<link rel="import" href="../bower_components/core-icons/maps-icons.html">
<link rel="import" href="../bower_components/core-icons/notification-icons.html">
<link rel="import" href="../bower_components/core-icons/social-icons.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/cascade-transition.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/core-transition-pages.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/list-cascade.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/scale-up.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-from-bottom.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/tile-cascade.html">

index.html

<!--
These go right below {{content-for 'head'}} in your app/index.html file

Polymer really doesn't like having other scripts loaded first (especially jQuery).
-->
<script src="assets/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="assets/vulcanized.html">

package.json

// Add these dev dependencies

"devDependencies": {
  "broccoli-static-compiler": "^0.1.4",
  "broccoli-merge-trees": "^0.2.0",
  "broccoli-vulcanize": "^1.0.4"
}

Awesome work on setting up an addon @Samsinite! I've been too busy lately to do anything beyond throwing the examples up here.

Also, this other gist may come in handy if anyone starts seeing weird errors in browsers other than chrome when mixing Polymer and Ember.