Synthesis is meteor + polymer

Installation

Remove blaze-html-templates (or remove the html compiler you are using).

meteor remove blaze-html-templates

Install synthesis

meteor add mwc:synthesis

synthesis is a meteor 1.3+ package. for 1.2 support use mwc:compiler

You can optionally use these packages from meteorwebcomponents

mwc:mixin - Polymer data package.
mwc:router - Flowrouter with polymer.
mwc:layout - Polymer layout renderer.

Usage

Refer http://guide.meteor.com

Application Structure http://guide.meteor.com/structure.html.

Keeps all your components in imports folder

You can import html using

Meteor's import './component.pug';
<link rel="import" href="./component.pug">

Script

<script>yourscript goes here</script>
<script src="component.js"></script>

Css (its important follow these two methods to confine style inside the component.)

<style>Your style goes here</style>
<link rel="stylesheet" href="component.css">

Add bower_components to any folder inside imports directory.

Assume bower directory is imports/ui/bower_components

<!-- imports/ui/component/test-element.pug -->

    link(rel='import', href='test-element2.html')
    // imports/ui/component/test-element.html Gets imported
    link(rel='import', href='../bower_components/paper-button/paper-button.html')
    script(src='test-element.js')
    dom-module#test-element
      template
        link(rel='stylesheet', href='test-element.css')
        // converted to style tag. this style is restricted to elements inside the element
        style.
          #nndiv{color:blue}
        paper-button(on-click='showNickName')
          | Show nickname
        p
          | Name : {{name}}
        #nnDiv(hidden='{{nndHidden}}')
          | Nickname: {{ nickname }}

1/*imports/ui/component/test-element.css*/
2paper-button{
3color:red;
4}

1// imports/ui/component/test-element.js
2import './test-element.pug';
3
4Polymer({
5  is:"test-element",
6  properties:{
7    name:{
8      type:String,
9      value:"Arun Kumar"
10    },
11    nickname:{
12      type:String,
13      value:"tkay"
14    },
15    nndHidden:{
16      type:Boolean,
17      value:true
18    }
19  },
20  showNickName: function () {
21    this.nndHidden = false;
22  }
23})
24
25

1<!-- client/index.pug (you can use any filename) -->
2  head
3    title Synthesis
4  body.fullbleed
5    h1 Synthesis is Meteor + Polymer!
6    test-element

1// client/index.js
2import '../imports/ui/components/test-element.html';
3  // include the webcomponents js file 
4import "../imports/ui/bower_components/webcomponentsjs/webcomponents-lite.min.js";
5
6//Remember to include a polymer component or polymer.html itself in any file
7
8import "../imports/ui/bower_components/polymer/polymer.html";
9

Best practice is to reduce the number of files in the imports directory. Avoid adding unecessary components, helps in lowering the build time

A sample bower.json (imports/ui/bower.json)

1{
2  "dependencies": {
3    "iron-pages": "PolymerElements/iron-pages#^1.0.0",
4    "neon-animations": "PolymerElements/neon-animations#^1.0.0",
5    "paper-button": "PolymerElements/paper-button#^1.0.5",
6    "polymer": "Polymer/polymer#^1.0.0"
7  },
8  "name": "mwc-synthesis",
9  "version": "0.0.1"
10}