![Gitter](https://badges.gitter.im/Join Chat.svg) Polymer 1.x users refer https://github.com/meteorwebcomponents/mixin/tree/1.x
MwcMixin is a reactive meteor data source for polymer elements. Objective is to use use the reactive meteor collections/variables inside polymer elements.
Add mwc:mixin
package to your Meteor App.
meteor add mwc:mixin@2.0.0
bower install mwc-mixin#2.0.0 --save
import mwc-mixin.html file.
Use MwcMixin
to extend your class
import { MwcMixin } from 'meteor/mwc:mixin' // disable if mixin is added using bower
class MyElement extends MwcMixin(Polymer.Element){
constructor() {
super(); // important
}
static get is() { return "my-element" }
connectedCallback() {
super.connectedCallback(); // important
}
...
}
If you have hybrid components as well use mixin version 1.x and use as
Note that in mixin 1.x behavior name is mwcMixin. In 2.x I've changed it to MwcMixin (since its a class name).
// for polymer v2 elements
class MyElement extends Polymer.mixinBehaviors([MyBehavior, mwcMixin], Polymer.Element) {
...
// hybrid elements
Polymer({
is: 'my-element',
behaviors: [MyBehavior, mwcMixin],
...
});
Trackers are polymer observers with meteor's reactivity. observers defined in trackers array get rerun when
- Observing properties change.
- Reactive data inside function change.
import { MwcMixin } from 'meteor/mwc:mixin' // disable if mixin is added using bower
class MyElement extends MwcMixin(Polymer.Element){
constructor() {
super(); // important
}
static get is() { return "my-element" }
connectedCallback() {
super.connectedCallback(); // important
this.propA = "Meteor Status is "
}
static get properties() {
return { propA:String };
}
get trackers() {
{ return ["changeStatus(propA)"] };
}
changeStatus:function(p){
console.log(p,Meteor.status().status); // runs every time propA/meteor status changes.
}
};
window.customElements.define(MyElement.is, MyElement);
mwcMixin tracker runs first while attaching element and gets destroyed when the element gets detatched. Its just like executing something inside a Meteor tracker. You can set this.anyProperty reactively.
import { MwcMixin } from 'meteor/mwc:mixin' // disable if mixin is added using bower
class MyElement extends MwcMixin(Polymer.Element){
constructor() {
super(); // important
}
static get is() { return "my-element" }
connectedCallback() {
super.connectedCallback(); // important
this.propA = "Meteor Status is "
}
static get properties() {
return { status: String };
}
tracker(){
this.status = Meteor.status().status; //runs every time status changes.
}
};
...
<template>
status : [[status]]
</template>
...
Simple tracker autorun with computations stored in __computation property. Use this to use Meteor reactivity outside tracker method(tracker method runs first when attached).
this.autorun(function(){console.log(FlowRouter.getParam('param'))});
Guard limits reactivity. It triggers the enclosing computation only if the return variable changes.
In the following example tracker gets triggered only if return object changes. Which mean if p == false then tracker method will not be triggered even if qp changes. So no unwanted subscription calls in the example.
...
tracker(){
const data = this.guard( params => {
const p = FlowRouter.getParam('p');
const qp = FlowRouter.getQueryParam('qp');
return p ? { p: p, qp: qp } : {} ;
}); // data changes only if p changes. thus limits reactivity.
this.subscribe('sd_data', data);
}
...
This is similar to Blaze's template level subscriptions. All subscription handles can be find in __handles property until they are ready. When they are ready handles are pushed to __mwcBin property. All subscriptions are stopped when the components gets detatched If you want to subscribe a collection from a polymer components use
this.subscribe("collectionName");
waiting for subscriptions to complete
this.subsReady
changes to true
when your subscription is complete.
...
<template is="dom-if" if="{{!subsReady}}">
Loading Subscriptions..
</template>
...
getMeteorData is tracker with one additional functionality. return value of the getMeteorData function gets set as mwcData.
this.mwcData
contains collections which are reactive. Use it as
{{mwcData.collectionName}}
import { MwcMixin } from 'meteor/mwc:mixin' // disable if mixin is added using bower
class MyElement extends MwcMixin(Polymer.Element){
constructor() {
super(); // important
}
static get is() { return "my-element" }
connectedCallback() {
super.connectedCallback(); // important
}
getMeteorData(){
return {status : Meteor.status().status}; //runs every time status changes.
}
};
...
<template>
status : [[mwcData.status]]
</template>
...
MWC App Route Demo - mwc demo with polymer app route as the default router.
⭐ this repo
Raise an issue!
MWC Synthesis - Compiler for polymer/webcomponents in meteor.
MWC Router - Reactive routing for polymer/webcomponents in meteor.
MWC Layout - polymer layout renderer
MWC Flowrouter Demo - mwc demo with flowrouter as the default router