UNMAINTAINED
meteor add mwc:synthesis-blaze
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.
Define your elements in the client folder.
you can add js in separate file or you can add it inside the element html file using script tag.
<!-- imports/test-element.sy.html -->
<dom-module id="test-element">
<template>
<link rel="stylesheet" href="test-element.css"> <!--converted to style tag-->
<paper-button on-click="showNickName">
Show nickname
</paper-button>
<p>
Name : {{name}}
</p>
<div id="nnDiv" hidden="{{nndHidden}}">
Nickname: {{ nickname }}
</div>
</template>
</dom-module>/*imports/test-element.css*/
paper-button{
color:red;
}// imports/test-element.js
import './test-element.sy.html';
Polymer({
is:"test-element",
properties:{
name:{
type:String,
value:"Arun Kumar"
},
nickname:{
type:String,
value:"tkay"
},
nndHidden:{
type:Boolean,
value:true
}
},
showNickName: function () {
this.nndHidden = false;
}
})
<!-- client/index.html (you can use any filename) -->
<head>
<title>Synthesis</title>
<!-- include the webcomponents js file -->
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- import web components -->
<link rel="import" href="/bower_components/polymer/polymer.html"/>
<link rel="import" href="/bower_components/paper-button/paper-button.html"/>
</head>
<body class="fullbleed">
<h1>Synthesis is Meteor + Polymer!</h1>
<test-element></test-element>
</body>// client/index.js
import '../imports/test-element.js';Add your bower_components inside public folder.
A sample bower.json (public/bower.json)
{
"dependencies": {
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"neon-elements": "PolymerElements/neon-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.5",
"polymer": "Polymer/polymer#^1.0.0"
},
"name": "mwc-synthesis",
"version": "0.0.1"
}Check out the Synthesis Demo
Kickstart a Meteor/Polymer project with Synthesis.
- Work in cordova.Solve Polymer is not defined error.(wait for link imports to complete)
- Ability to use remote scripts inside. Scripts inside link imports are automatically added currently.
- Add scripts inside html tags to app.js . (currenlty only scripts outside html tags is added(unless the tag is a body tag))
- html link imports inside html files should be vulcanized.
<link rel="import" - Css inside html inlined.
-
<link rel="stylesheet" href="component.css"support. gets converted to<style>contents</style> - Client side renderer for html files added.
- import 'my-components.html'; support.
Gitter - meteorwebcomponents
Meteor forum - https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536
You can use differential:vulcanize to vulcanize polymer elements instead of adding them in the head directly.