Synthesis helps you use polymer inside meteor.
Synthesis uses parse5 which parses HTML the way the latest version of your browser does. Does not use any regex to parse html. :)
A version that uses cheerio instead of parse ⇒ synthesis-using-cheerio.
#####Main functions
- Handles html link imports which polymer uses to add dependency files.
- Handles external script files (script src)
- Handles external css files (link rel stylesheet)
- Handles template tags.
- Removes comments and unecessary whitespaces.
- Handles loading order of html and js inside the polymer files
- Adds components to document during runtime.
Remove blaze-html-templates (or remove the html compiler you are using).
meteor remove blaze-html-templates
If you want to use blaze along with synthesis use mwc:blaze-html-templating . demo - blaze+polymer
Install synthesis
meteor add mwc:synthesis #compiles html files
# synthesis-assets is optional. If you want to handle relative asset paths.
meteor add mwc:synthesis-assets #compiles assets for <img src="image.png"> to work.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.
Create client/lib/settings.js
Why lib directory ? Settings code should run before anything else.
/* client/lib/settings.js */
window.Polymer = {
//dom: 'shadow',
lazyRegister: true
};Refer http://guide.meteor.com
Application Structure http://guide.meteor.com/structure.html.
Keep all your components in imports folder
You can import html using
-
import './component.html';from js files -
<link rel="import" href="./component.html">from html files
Please note that
import 'package/package.html;'imports from node_modules directory while<link rel="import" href="package/package.html">is the same asimport "./package/package.html";. This is kept like this to go through polymer components in which dependency files inside the same folder are imported as<link rel="import" href="dependency.html">.
If you want to import scripts/stylesheets/html from public use
src="/path/to/my/file".src="path/to/my/file"is interpreted asimport "./path/to/my/file".
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.html -->
<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"></script>
<dom-module id="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}
</style>
<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/ui/component/test-element.css*/
paper-button{
color:red;
}// imports/ui/component/test-element.js
import './test-element.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>
</head>
<body class="fullbleed">
<h1>Synthesis is Meteor + Polymer!</h1>
<test-element></test-element>
</body>// client/index.js
import '../imports/ui/components/test-element.html';
// include the webcomponents js file
import "../imports/ui/bower_components/webcomponentsjs/webcomponents-lite.min.js";
//Remember to include a polymer component or polymer.html itself in any file
import "../imports/ui/bower_components/polymer/polymer.html";Best practice is to reduce the number of files in the imports directory. Avoid adding unecessary components, helps in lowering the build time. Refer the FAQ
A sample bower.json (imports/ui/bower.json)
{
"dependencies": {
"iron-pages": "PolymerElements/iron-pages#^1.0.0",
"neon-animations": "PolymerElements/neon-animations#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.5",
"polymer": "Polymer/polymer#^1.0.0"
},
"name": "mwc-synthesis",
"version": "0.0.1"
}Here is a working demo of using npm polymer package instead of bower.
https://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo
npm install --save @polymer/paper-button
Before everything else load webcomponents and polymer
import "webcomponents.js/webcomponents-lite.min.js";
import "@polymer/polymer/polymer.html";Use it from js files as
import "@polymer/paper-button/paper-button.html";Please note that the @polymer packages are still in testing stage. And the polymer version is an older one.
works inside html.
<!-- imports/ui/path/to/element.html -->
<img src="sample-image.png"> <!--Works!!-->
<iron-image src="sample-image.png"><iron-image> <!--Works!!-->
<any-element src="sample-image.png"><any-element> <!--Works!! src = imports/ui/path/to/sample-image.png -->
<any-element src="../sample-image.png"><any-element> <!--Works!! src = imports/ui/path/sample-image.png-->
<any-element src="[[image]]"><any-element> <!--Does not work!! if you want this to work use image = path/from/root/to/image.png -->
<any-element src="{{image}}"><any-element> <!--Does not work!! if you want this to work use image = path/from/root/to/image.png -->
<!-- assets in public/ folder -->
<any-element src="/sample-image.png"><any-element> <!--Works!! asset should be in public folder src = /sample-image.png -->works inside css also.
/*imports/ui/path/to/element.html inside style tag or imports/ui/path/to/element.css */
background: url(path/to/image.png); /* Works!!. */
property: url(relative/path/to/image.png); /* Works!!. */
property: url(var(--url-var)); /* Does not work unless --url-var = absolute path imports/ui/path/to/image.png */
/* if you want to use variables use
--url-var = url(path/to/url);
property: var(--url-var);
*/
property: url(/path/to/image.png); /* Works!!. if asset is in public folder */File types we supports https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-assets/plugin/synthesis-assets.js#L19.
Feel free to add pr's if you want to supports more file types.
Relevant code https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-compiler/synthesis-compiler.js#L166-L176 .
#####Using Bower
Check out the Synthesis Demo
#####Using npm
Check out the synthesis-meteor-polymer-npm-demo
Kickstart a Meteor/Polymer project - FlowRouter with Synthesis.
KickStart Meteor/Polymer Project - Polymer App Route
⭐ this repo
Raise an issue!
Gitter - meteorwebcomponents
Meteor forum - https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536
NO NEED to use any VULCANIZING tools. Synthesis handles everything
Q: When I tried to set window.Polymer = {lazyRegister:true,dom:"shadow"} it resulted in error.
Ans : Refer polymer settings
Q: When I added (a) bower component(s) build time became painstakingly high.
Ans : The component(s) you've added might have many js files. meteor ecmascripts gets frozen/takes a long time when the number of js files are very high. Refer the issue meteor/meteor#6859. In my testings with 300 html files synthesis ran pretty fast. Its the meteor js handlers which create this issue.
In console (pwd = /imports/ui)
find bower_components -name \*.js | wc -lTry to find out which package contains large number of js files. Delete unecessary files and keep a local copy.
bower-installer can be used instead of bower to bring in just the files that you need for your project. Significantly lowers the build time.
Q: Is it possible to use npm instead of bower for loading polymer and components
Ans : Yes there is. Refer using npm instead of bower
Q: Can I use Polymer and blaze together?
Ans: You can. If you want to use blaze along with synthesis use mwc:blaze-html-templating . demo - blaze+polymer
Use blaze.html extension for blaze files.
But there are some compatibility issues https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536/30?u=aruntk
Q: I love blaze's template level subscriptions and spacebars. I dont want to lose these features when I port my app to polymer. Any help?
Ans : In my experience I find nothing that polymer cannot do which blaze can. Polymer is very easy to learn and while porting your app you'll find yourself copy pasting most of your code. For every blaze function they have solutions in polymer. We have got you covered when it comes to meteor data and subscriptions (including template level subs) Refer mixin .