2.0 preview

.babelrc

@@ -0,0 +1,3 @@
+{
+  "ignore": "imports/ui"
+}

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 packages
 public/bower_components
 imports/ui/bower_components
+npm-debug.log

.meteor/versions

@@ -45,7 +45,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-mwc:mixin@1.0.35
+mwc:mixin@2.0.0
 mwc:[email protected]
 mwc:[email protected]
 mwc:[email protected]

README.md

@@ -1,3 +1,8 @@
+
+> Demo using meteor dynamic import https://github.com/aruntk/kickstart-meteor-polymer-with-app-route/tree/dynamic-import
+
+> Checkout this branch for meteor + polymer 2.0 kickstarter app. https://github.com/aruntk/kickstart-meteor-polymer-with-app-route/tree/2.0-preview
+
 # Synthesis is meteor + polymer
 
 ![synthesis1](https://cloud.githubusercontent.com/assets/6007432/14216652/9da7131a-f867-11e5-9f84-6dd75d60dd45.gif)
@@ -33,6 +38,7 @@ cleanup bower_components script is also there in build.sh
 ```sh
 meteor
 ```
+
 ### Polymer Settings
 
 Create client/lib/settings.js
@@ -46,6 +52,7 @@ window.Polymer = {
   lazyRegister: true
 };
 ```
+
 ### Polymer Weight
 
 ```sh
@@ -135,45 +142,47 @@ body{
 ```js
 //imports/ui/layouts/test-layout.js
 
-import './test-layout.html';
+import { MwcMixin } from 'meteor/mwc:mixin';
 
-Polymer({
-  is:"test-layout",
-  behaviors:[mwcMixin],
-  tracker:function(){
-    this.changeStatus();
-  },
-  changeStatus(){
-    this.set("appState",`Page : ${this.routeData.page || 'home'} , Status : ${Meteor.status().status}`);
+class TestLayout extends MwcMixin(Polymer.Element) {
+  static get is() {
+    return 'test-layout';
+  }
+  static get properties() {
+    return {
+      route: Object,
+      routeData: {
+        type: Object,
+        value: function() {
+          return {
+            page: '',
+          };
+        },
+      },
+      appState: {
+        type: String,
+      },
+      notCordova: Boolean,
+    };
+  }
+  get trackers() {
+    return ['changeStatus(routeData.page)'];
+  }
+  changeStatus(page){
+    this.set("appState",`Page : ${page || 'home'} , Status : ${Meteor.status().status}`);
     if(!Meteor.isCordova){
       this.notCordova = true;
     }
-  },
-  properties:{
-    route:Object,
-    routeData:{
-      type: Object,
-      value: function() {
-        return {
-          page: ''
-        };
-      }
-    },
-    appState:{
-      type:String
-    },
-    notCordova:Boolean
-
-  },
-  trackers:["changeStatus(routeData.page)"],
-  second:function(){
+  }
+  second(){
     this.set("routeData.page", "second"); 
-  },
-  home:function(){
-
+  }
+  home(){
     this.set("routeData.page", ""); 
   }
-});
+};
+
+window.customElements.define(TestLayout.is, TestLayout);
 
 
 ```
@@ -185,17 +194,21 @@ bower.json
 ```json
 {
   "dependencies": {
-    "paper-elements": "PolymerElements/paper-elements#^1.0.5",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
-    "iron-pages": "PolymerElements/iron-pages#^1.0.0",
-    "polymer": "Polymer/polymer#^1.0.0",
-    "app-route": "PolymerElements/app-route#^0.9.2"
+    "app-route": "PolymerElements/app-route#2.0-preview",
+    "app-layout": "PolymerElements/app-layout#2.0-preview",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
+    "iron-pages": "PolymerElements/iron-pages#2.0-preview",
+    "polymer": "Polymer/polymer#2.0.0-rc.2",
+    "paper-button": "PolymerElements/paper-button#2.0-preview",
+    "paper-card": "PolymerElements/paper-card#2.0-preview",
+    "paper-styles": "PolymerElements/paper-styles#2.0-preview"
   },
   "name": "synthesis-demo",
-  "version": "0.0.1"
+  "version": "2.0-preview"
 }
 ```
 
+
 ### Docs
 
 Use meteor data reactively inside polymer components - https://github.com/meteorwebcomponents/mixin/blob/master/README.md
@@ -211,3 +224,5 @@ https://forums.meteor.com/t/polymer-meteor-with-meteor-webcomponents-packages/20
 [mwc:synthesis](https://github.com/meteorwebcomponents/synthesis) -  Synthesis is meteor + polymer.
 
 [mwc:mixin](https://github.com/meteorwebcomponents/mixin) -  Polymer data package
+
+

bower.json

@@ -1,11 +1,14 @@
 {
   "dependencies": {
-    "paper-elements": "PolymerElements/paper-elements#^1.0.5",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
-    "iron-pages": "PolymerElements/iron-pages#^1.0.0",
-    "polymer": "Polymer/polymer#^1.0.0",
-    "app-route": "PolymerElements/app-route#^0.9.2"
+    "app-route": "PolymerElements/app-route#2.0-preview",
+    "app-layout": "PolymerElements/app-layout#2.0-preview",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
+    "iron-pages": "PolymerElements/iron-pages#2.0-preview",
+    "polymer": "Polymer/polymer#2.0.0-rc.2",
+    "paper-button": "PolymerElements/paper-button#2.0-preview",
+    "paper-card": "PolymerElements/paper-card#2.0-preview",
+    "paper-styles": "PolymerElements/paper-styles#2.0-preview"
   },
   "name": "synthesis-demo",
-  "version": "0.0.1"
+  "version": "2.0-preview"
 }

client/main.html

@@ -4,6 +4,7 @@
     <!--cannot use the name manifest.json. reserved by meteor-->
     <link rel="manifest" href="/web.manifest.json">
     <link rel="shortcut icon" href="/mwc.ico">
+    <script src="/webcomponentsjs/webcomponents-es5-loader.js"></script>
     <style>
 body{
   padding:0px;

imports/ui/components/test-element.html

@@ -21,4 +21,3 @@
     <paper-button raised on-click="showNickName">{{show}} nickname</paper-button>
   </template>
 </dom-module>
-

imports/ui/components/test-element.js

@@ -1,29 +1,31 @@
-Polymer({
-  is:"test-element",
-  properties:{
-    name:{
-      type:String,
-      value:"Arun Kumar"
-    },
-    nickname:{
-      type:String,
-      value:"tkay"
-    },
-    show:{
-      type:String,
-      value:"show"
-    },
-    nndHidden:{
-      type:Boolean,
-      value:true
-    }
-  },
-  behaviors:[mwcMixin],
-  showNickName:function(){
+class TestElement extends Polymer.Element {
+  static get is() {
+    return 'test-element';
+  }
+  static get properties() {
+    return {
+      name: {
+        type: String,
+        value: 'Arun Kumar',
+      },
+      nickname: {
+        type: String,
+        value: 'tkay',
+      },
+      show: {
+        type:String,
+        value: 'show',
+      },
+      nndHidden: {
+        type: Boolean,
+        value: true,
+      },
+    };
+  }
+  showNickName(){
     this.nndHidden = !this.nndHidden;
     this.show = this.nndHidden ? "show" : "hide";
   }
-
-})
-
+};
+window.customElements.define(TestElement.is, TestElement);
 

imports/ui/imports.html

@@ -1,13 +1,19 @@
 <!--<link rel="import" href="bower_components/mwc-layout/mwc-layout.html"> //if you are using bower for mwc-layout-->
-<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+
+<!-- <script src="bower_components/webcomponentsjs/webcomponents-ce-es5.js"></script> -->
+<link rel="import" href="bower_components/polymer/polymer.html">
+
+<!-- components -->
+
+<link rel="import" href="bower_components/app-layout/app-layout.html">
 <link rel="import" href="bower_components/app-route/app-location.html">
 <link rel="import" href="bower_components/app-route/app-route-converter.html">
 <link rel="import" href="bower_components/app-route/app-route.html">
-<link rel="import" href="bower_components/polymer/polymer.html">
+
 <link rel="import" href="bower_components/iron-pages/iron-pages.html">
 <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="bower_components/paper-button/paper-button.html">
-<link rel="import" href="bower_components/paper-elements/paper-elements.html">
+<link rel="import" href="bower_components/paper-card/paper-card.html">
 <link rel="import" href="bower_components/paper-styles/paper-styles.html">
 
 

imports/ui/layouts/test-layout.html

@@ -1,12 +1,20 @@
 <link rel="import" href="../components/test-element.html">
 <dom-module id="test-layout">
-  <style>
+  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
 .main{
   @apply(--layout-horizontal);
   @apply(--layout-center-center);
 }
-  </style>
-  <template>
+    app-header {
+      background-color: var(--primary-color);
+      color: #fff;
+    }
+    app-header paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+    </style>
 
     <!--================== <Router> ================-->
 
@@ -16,21 +24,23 @@
 
     <!--================= </Router> ================-->
 
-    <paper-header-panel class="fit layout">
-
-      <paper-toolbar>
+    <app-header-layout class="fit layout vertical">
+      <app-header fixed condenses>
+        <app-toolbar>
 
-        <div class="flex"><h1>Synthesis
-            <template is="dom-if" if="[[notCordova]]">
-              is Meteor + Polymer!
-            </template>
-          </h1></div>
+          <div class="flex">
+            <h1>Synthesis
+              <template is="dom-if" if="[[notCordova]]">
+                is Meteor + Polymer!
+              </template>
+            </h1>
+          </div>
 
           <div class="">
             {{appState}}
           </div>
-      </paper-toolbar>
-
+        </app-toolbar>
+      </app-header>
       <iron-pages class="flex main" id="mainView" selected="{{routeData.page}}" attr-for-selected="name">
 
         <paper-card heading="ROUTE:1" id="region1" name="">
@@ -57,7 +67,7 @@
 
       </iron-pages>
 
-    </paper-header-panel>
+    </app-header-layout>
 
   </template>
 </dom-module>