Polymer + Meteor Support With meteor webcomponents packages

announce
21

Meteor Polymer demo using synthesis and polymer npm packages.

1 Like
22

Meteor + Polymer(from npm) kickstarter app.

1 Like
23

You open up new horizons for me! :slight_smile: I was trying to reinvent the wheel past 5 months, and finally I found what I wanted. I’ll try to translate your code on the rails of old-school: CoffeeScript+Jade+SugarSS. Does you see any technical obstacles?

24

@comerc . To add jade support a precompiler is required to parse jade to html before handling it over to synthesis parser. Here is a basic implementation. https://github.com/meteorwebcomponents/synthesis/tree/master/packages/synthesis-jade.

demo : https://github.com/meteorwebcomponents/synthesis-demo/tree/jade

1 Like
25

The name “Barcelona” (the hosting city of MWC) could be better than “MWC”, but there are already packages with this name, in addition one may think that there is a competition with Cordova (which is another city in Spain), and finally - since a Meteorite hit Barcelona in the far past, Meteors are not popular in Barcelona…

:wink:

26

How to use Synthesis and Polymer npm packages with Blaze?

27

May be try to use reverse names, i.e. just .blaze.html - for Blaze Templates and .html for Polymer WebComponents.

1 Like
28

Yes. That is the best possible option here. But remember you’ll not be able to use atmosphere packages that use blaze. :slight_smile: . I’ve forked atmosphere useraccounts package to convert it into polymer. I didn’t get much time to focus on that since.

1 Like
29

@comerc Here is what you need

http://fastosphere.meteorapp.com/mwc%3Ablaze-html-templates?q=mwc%3Abl

1 Like
30

Here is a demo

There is room for improvement. I’ve noticed one issue while testing. Blaze could not handle <content select="*"></content> tags.

For eg

<!-- test-layout.html -->
<dom-module id="test-layout">
  <template>
      <div class="title">
        <content select="h1"></content>
      </div>
      <content select="*"></content>
  </template>
</dom-module>

<!-- main.blaze.html -->
...
<test-layout>
<h1>hai</h1>
<div>!!!</div>
</test-layout>
...

<!-- Expected Result in browser-->

<test-layout>
<div class="title"><h1>hai</h1></div>
<div>!!!</div>
</test-layout>

<!-- Actual Result -->
<test-layout>
<div class="title"></div>
<h1>hai</h1>
<div>!!!</div>
</test-layout>
1 Like
31

Here is a version of synthesis using cheerio instead of parse5 as the html parser. Try it out.

1 Like
32

We may use .html extension in both cases.
If the parser finds <dom-module> then file is Polymer WebComponent else file is Blaze Template.

33

or you may use agreement for diferent patches.

34

Still the issue of who handles other tags remains. From the example I gave above it is clear that some use cases cannot be handled by blaze and it creates unexpected results which might confuse the user. Use of curly braces is common for both blaze and polymer. For example It wont work if the user tries to use blaze global helpers inside polymer templates. And the question of why use two view layers while one is enough to create all the views is there. Polymer does everything that blaze can.
We have created some packages to solve some issues while using polymer in meteor.
mixin - reactive meteor data source for polymer elements.
layout - Polymer layout renderer. Analogous to Blaze.render
router - Connects FlowRouter and Polymer.

35

I want to use Polymer WebComponents as extension of Blaze. I love spacebars and template level subscriptions for example. I want to apply Polymer in my existing apps without having to completely rewrite them.

36

I study to code of mwc:mixin - I love this.subscribe() :slight_smile:

37

Template level subscriptions are possible with mixin. Use this.subscribe inside getMeteorData. In addition to that there is a helper {{subsReady}} which you can use to check if all the template subscriptions are complete or not and accordingly render different templates/do different actions.

1 Like
38

mwc mixin 1.0.25 is released with guard method to limit reactivity inside mixin tracker.

39

Check out meteor polymer demo using app-route element as the default router. https://github.com/aruntk/kickstart-meteor-polymer-with-app-route

40

Mixin v1.0.27 is out with a new feature - Trackers. Trackers is observers with meteor’s reactivity. observers defined in trackers array gets rerun when

  1. Observing properties change.
  2. Reactive data inside function change.
Polymer({
  is:"custom-element",
  behaviors:[mwcMixin],
  properties{
    propA:String
  },
  trackers:["changeStatus(propA)"],
  ready(){
   this.propA = "Meteor Status is ";
  },
  changeStatus:function(p){
    console.log(p,Meteor.status().status); //runs every time propA/meteor status changes.
  }

});

Refer mixin readme https://github.com/meteorwebcomponents/mixin
For Trackers demo - https://github.com/aruntk/kickstart-meteor-polymer-with-app-route