Skip to content

Latest commit

 

History

History
149 lines (112 loc) · 3.98 KB

README.md

File metadata and controls

149 lines (112 loc) · 3.98 KB
Raw

UNMAINTAINED

Synthesis-Blaze is Meteor + Polymer + Blaze

Installation

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

Usage

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.

Use .sy.html extension for synthesis components.

<!-- 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"
}

Demo

Check out the Synthesis Demo

Kickstart Your Meteor Polymer projects

Kickstart a Meteor/Polymer project with Synthesis.

synthesis1

TODO

  • 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.

Social

Gitter - meteorwebcomponents

Meteor forum - https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536

Note

You can use differential:vulcanize to vulcanize polymer elements instead of adding them in the head directly.