{"id":24098160,"url":"https://github.com/meteorwebcomponents/mixin","last_synced_at":"2025-08-12T09:09:50.580Z","repository":{"id":58223773,"uuid":"50521673","full_name":"meteorwebcomponents/mixin","owner":"meteorwebcomponents","description":":twisted_rightwards_arrows: Mixin for polymer/webcomponents in meteor.","archived":false,"fork":false,"pushed_at":"2017-05-04T05:47:05.000Z","size":73,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-07T21:24:41.154Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meteorwebcomponents.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-27T16:42:06.000Z","updated_at":"2020-08-22T15:24:23.000Z","dependencies_parsed_at":"2022-08-31T03:01:26.888Z","dependency_job_id":null,"html_url":"https://github.com/meteorwebcomponents/mixin","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/meteorwebcomponents/mixin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorwebcomponents%2Fmixin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorwebcomponents%2Fmixin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorwebcomponents%2Fmixin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorwebcomponents%2Fmixin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meteorwebcomponents","download_url":"https://codeload.github.com/meteorwebcomponents/mixin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorwebcomponents%2Fmixin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270033243,"owners_count":24515456,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-10T14:33:37.298Z","updated_at":"2025-08-12T09:09:50.558Z","avatar_url":"https://github.com/meteorwebcomponents.png","language":"JavaScript","readme":"\u003c!--\n  Title: Meteor Webcomponents Mixin, for Meteor Polymer integration\n  Description: Mixin for polymer/webcomponents in meteor.\n  --\u003e\n# Mixin\n\n[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/aruntk/meteorwebcomponents?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\nPolymer 1.x users refer https://github.com/meteorwebcomponents/mixin/tree/1.x\n\n## What is mwc mixin?\n\nMwcMixin is a reactive meteor data source for polymer elements. Objective is to use use the reactive meteor collections/variables inside polymer elements.\n\n## Installation\n\n### Method 1 - Meteor Package\nAdd `mwc:mixin` package to your Meteor App.\n\n```sh\nmeteor add mwc:mixin@2.0.0\n\n```\n### Method 2 - Using bower\n\n```sh\nbower install mwc-mixin#2.0.0 --save\n```\nimport mwc-mixin.html file.\n\n\n\n## How to use it ?\n\nUse `MwcMixin` to extend your class\n```js\n\nimport { MwcMixin } from 'meteor/mwc:mixin' // disable if mixin is added using bower\nclass MyElement extends MwcMixin(Polymer.Element){\n  constructor() {\n    super(); // important\n  }\n  static get is() { return \"my-element\" }\n  connectedCallback() {\n    super.connectedCallback(); // important\n  }\n...\n}\n```\n\nIf you have hybrid components as well use mixin version 1.x and use as \n\n\u003e Note that in mixin 1.x behavior name is mwcMixin. In 2.x I've changed it to MwcMixin (since its a class name).\n\n```js\n// for polymer v2 elements\n\nclass MyElement extends Polymer.mixinBehaviors([MyBehavior, mwcMixin], Polymer.Element) {\n...\n```\n\n\n```js\n// hybrid elements\n\nPolymer({\n  is: 'my-element',\n  behaviors: [MyBehavior, mwcMixin],\n...\n});\n\n\n```\n### Trackers\n\nTrackers are polymer observers with meteor's reactivity.\nobservers defined in trackers array get rerun when\n1. Observing properties change.\n2. Reactive data inside function change.\n\n```js\nimport { MwcMixin } from 'meteor/mwc:mixin' // disable if mixin is added using bower\nclass MyElement extends MwcMixin(Polymer.Element){\n  constructor() {\n    super(); // important\n  }\n  static get is() { return \"my-element\" }\n  connectedCallback() {\n    super.connectedCallback(); // important\n    this.propA = \"Meteor Status is \"\n  }\n  static get properties() {\n    return { propA:String };\n  }\n  get trackers() {\n    { return [\"changeStatus(propA)\"] };\n  }\n  changeStatus:function(p){\n    console.log(p,Meteor.status().status); // runs every time propA/meteor status changes.\n  }\n};\nwindow.customElements.define(MyElement.is, MyElement);\n```\n\n### Methods\n\n#### tracker\n\nmwcMixin 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.\n\n```js\nimport { MwcMixin } from 'meteor/mwc:mixin' // disable if mixin is added using bower\n\nclass MyElement extends MwcMixin(Polymer.Element){\n  constructor() {\n    super(); // important\n  }\n  static get is() { return \"my-element\" }\n  connectedCallback() {\n    super.connectedCallback(); // important\n    this.propA = \"Meteor Status is \"\n  }\n  static get properties() {\n    return { status: String };\n  }\n  tracker(){\n    this.status = Meteor.status().status; //runs every time status changes.\n  }\n};\n```\n```html\n...\n\u003ctemplate\u003e\n  status : [[status]]\n\u003c/template\u003e\n...\n```\n\n\n\n#### autorun\n\nSimple tracker autorun with computations stored in __computation property. Use this to use Meteor reactivity outside tracker method(tracker method runs first when attached).\n\n```js\nthis.autorun(function(){console.log(FlowRouter.getParam('param'))});\n```\n\n#### guard\n\nGuard limits reactivity. It triggers the enclosing computation only if the return variable changes.\n\nIn 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.\n  \n```js\n  ...\n  tracker(){\n    const data = this.guard( params =\u003e {\n      const p = FlowRouter.getParam('p');\n      const qp = FlowRouter.getQueryParam('qp');\n      return p ? { p: p, qp: qp } : {} ;\n    }); // data changes only if p changes. thus limits reactivity.\n    this.subscribe('sd_data', data);\n  }\n  ...\n```\n\n\n#### subscribe\n\nThis is similar to Blaze's template level subscriptions.\nAll subscription handles can be find in __handles property until they are ready. When they are ready handles are pushed to __mwcBin property.\nAll subscriptions are stopped when the components gets detatched\nIf you want to subscribe a collection from a polymer components use\n```js\n  this.subscribe(\"collectionName\"); \n```\n\nwaiting for subscriptions to complete\n\n`this.subsReady` changes to `true` when your subscription is complete.\n\n```html\n\n...\n\n\u003ctemplate is=\"dom-if\" if=\"{{!subsReady}}\"\u003e\nLoading Subscriptions..\n\u003c/template\u003e\n\n...\n\n```\n\n\n\n#### getMeteorData\n\ngetMeteorData is tracker with one additional functionality. return value of the getMeteorData function gets set as mwcData. \n\n`this.mwcData` contains collections which are reactive. Use it as\n`{{mwcData.collectionName}}`\n\n```js\nimport { MwcMixin } from 'meteor/mwc:mixin' // disable if mixin is added using bower\n\nclass MyElement extends MwcMixin(Polymer.Element){\n  constructor() {\n    super(); // important\n  }\n  static get is() { return \"my-element\" }\n  connectedCallback() {\n    super.connectedCallback(); // important\n  }\n  getMeteorData(){\n    return {status :  Meteor.status().status}; //runs every time status changes.\n  }\n};\n\n```\n```html\n...\n\u003ctemplate\u003e\n  status : [[mwcData.status]]\n\u003c/template\u003e\n...\n```\n\n\n\n### Examples\n\n[MWC App Route Demo](https://github.com/aruntk/kickstart-meteor-polymer-with-app-route/tree/2.0-preview) - mwc demo with polymer app route as the default router.\n\n### Like it?\n\n:star: this repo\n\n### Found a bug?\n\nRaise an issue!\n\n### Related Projects\n\n[MWC Synthesis](https://github.com/meteorwebcomponents/synthesis) - Compiler for polymer/webcomponents in meteor.\n\n[MWC Router](https://github.com/meteorwebcomponents/router) - Reactive routing for polymer/webcomponents in meteor.\n\n[MWC Layout](https://github.com/meteorwebcomponents/layout) - polymer layout renderer\n\n[MWC Flowrouter Demo](https://github.com/aruntk/kickstart-meteor-polymer) - mwc demo with flowrouter as the default router\n\n\n\n","funding_links":[],"categories":["Behaviors"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteorwebcomponents%2Fmixin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeteorwebcomponents%2Fmixin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteorwebcomponents%2Fmixin/lists"}