{"id":24330748,"url":"https://github.com/meteorwebcomponents/synthesis","last_synced_at":"2025-10-06T13:50:26.733Z","repository":{"id":82274482,"uuid":"55228711","full_name":"meteorwebcomponents/synthesis","owner":"meteorwebcomponents","description":":fire: Synthesis is Meteor + Polymer","archived":false,"fork":false,"pushed_at":"2017-12-14T07:58:47.000Z","size":211,"stargazers_count":28,"open_issues_count":6,"forks_count":7,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-09-27T17:45:19.405Z","etag":null,"topics":["meteor","meteor-polymer","mwc","polymer","polymer-settings","synthesis"],"latest_commit_sha":null,"homepage":"https://atmospherejs.com/mwc/synthesis","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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-04-01T11:50:54.000Z","updated_at":"2020-08-22T15:22:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"0c82c47d-f7f8-4170-8353-f678491c613c","html_url":"https://github.com/meteorwebcomponents/synthesis","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/meteorwebcomponents/synthesis","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorwebcomponents%2Fsynthesis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorwebcomponents%2Fsynthesis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorwebcomponents%2Fsynthesis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorwebcomponents%2Fsynthesis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meteorwebcomponents","download_url":"https://codeload.github.com/meteorwebcomponents/synthesis/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meteorwebcomponents%2Fsynthesis/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278621837,"owners_count":26017253,"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-10-06T02:00:05.630Z","response_time":65,"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":["meteor","meteor-polymer","mwc","polymer","polymer-settings","synthesis"],"created_at":"2025-01-18T01:14:21.487Z","updated_at":"2025-10-06T13:50:26.716Z","avatar_url":"https://github.com/meteorwebcomponents.png","language":"JavaScript","readme":"# Synthesis is meteor + polymer\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)\n\n## About\n\nSynthesis helps you use polymer inside meteor.\n\n### Under the hood\n\nSynthesis uses [parse5](https://github.com/inikulin/parse5) which parses HTML the way the latest version of your browser does. \nDoes not use any regex to parse html. :)\n\n\u003e A version that uses cheerio instead of parse \t\u0026rArr; [synthesis-using-cheerio](https://github.com/meteorwebcomponents/synthesis/tree/cheerio).\n\n#####Main functions\n\n1. Handles html link imports which polymer uses to add dependency files.\n2. Handles external script files (script src)\n3. Handles external css files (link rel stylesheet)\n4. Handles template tags.\n5. Removes comments and unecessary whitespaces.\n5. Handles loading order of html and js inside the polymer files\n4. Adds components to document during runtime.\n\n## Installation\n\nRemove `blaze-html-templates` (or remove the html compiler you are using).\n\n`meteor remove blaze-html-templates`\n\n\u003e If you want to use blaze along with synthesis use **[mwc:blaze-html-templating](https://github.com/meteorwebcomponents/blaze-html-templates)** . demo - [blaze+polymer](https://github.com/meteorwebcomponents/synthesis-demo/tree/blaze-polymer) \n\nInstall synthesis\n\n```sh\nmeteor add mwc:synthesis #compiles html files\n# synthesis-assets is optional. If you want to handle relative asset paths.\nmeteor add mwc:synthesis-assets #compiles assets for \u003cimg src=\"image.png\"\u003e to work.\n```\n\nsynthesis is a meteor 1.3+ package. for 1.2 support use [mwc:compiler](https://github.com/meteorwebcomponents/compiler)\n\nYou can optionally use these packages from meteorwebcomponents\n\n* [mwc:mixin](https://github.com/meteorwebcomponents/mixin) -  Polymer data package.\n* [mwc:router](https://github.com/meteorwebcomponents/router) - Flowrouter with polymer.\n* [mwc:layout](https://github.com/meteorwebcomponents/layout) - Polymer layout renderer.\n\n\n## Usage\n\n### Polymer Settings\n\nCreate client/lib/settings.js\n\nWhy lib directory ? Settings code should run before anything else. \n\n```js\n/* client/lib/settings.js */\nwindow.Polymer = {\n  //dom: 'shadow',\n  lazyRegister: true\n};\n```\n### App Structure\n\nRefer http://guide.meteor.com\n\nApplication Structure http://guide.meteor.com/structure.html.\n\nKeep all your components in imports folder \n\nYou can import html using \n\n1. `import './component.html';` from js files\n\n2. `\u003clink rel=\"import\" href=\"./component.html\"\u003e `from html files\n\n\u003e Please note that `import 'package/package.html;'` imports from node_modules directory while `\u003clink rel=\"import\" href=\"package/package.html\"\u003e` is the same as `import \"./package/package.html\";`. This is kept like this to go through polymer components in which dependency files inside the same folder are imported as `\u003clink rel=\"import\" href=\"dependency.html\"\u003e`. \n\n\u003e If you want to import scripts/stylesheets/html from public use `src=\"/path/to/my/file\"`. `src=\"path/to/my/file\"` is interpreted as `import \"./path/to/my/file\"`.\n \nScript\n\n1. `\u003cscript\u003eyourscript goes here\u003c/script\u003e `\n\n2. `\u003cscript src=\"component.js\"\u003e\u003c/script\u003e`\n\nCss (its important follow these two methods to confine style inside the component.)\n\n1. `\u003cstyle\u003eYour style goes here\u003c/style\u003e`\n\n2. `\u003clink rel=\"stylesheet\" href=\"component.css\"\u003e`\n\nAdd bower_components to any folder inside imports directory. \n\nAssume bower directory is imports/ui/bower_components\n\n```html\n\u003c!-- imports/ui/component/test-element.html --\u003e\n\n\u003clink rel=\"import\" href=\"test-element2.html\"\u003e \u003c!-- imports/ui/component/test-element.html Gets imported --\u003e\n\u003clink rel=\"import\" href=\"../bower_components/paper-button/paper-button.html\"\u003e \n\u003cscript src=\"test-element.js\"\u003e\u003c/script\u003e\n\u003cdom-module id=\"test-element\"\u003e\n  \u003ctemplate\u003e\n  \u003clink rel=\"stylesheet\" href=\"test-element.css\"\u003e \u003c!--converted to style tag. this style is restricted to elements inside the element--\u003e\n  \u003cstyle\u003e \n  #nndiv{color:blue}\n  \u003c/style\u003e\n    \u003cpaper-button on-click=\"showNickName\"\u003e\n      Show nickname\n    \u003c/paper-button\u003e\n    \u003cp\u003e\n      Name : {{name}}\n    \u003c/p\u003e\n    \u003cdiv id=\"nnDiv\" hidden=\"{{nndHidden}}\"\u003e\n      Nickname: {{ nickname }}\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/dom-module\u003e\n\n```\n```css\n/*imports/ui/component/test-element.css*/\npaper-button{\ncolor:red;\n}\n```\n```js\n// imports/ui/component/test-element.js\nimport './test-element.html';\n\nPolymer({\n  is:\"test-element\",\n  properties:{\n    name:{\n      type:String,\n      value:\"Arun Kumar\"\n    },\n    nickname:{\n      type:String,\n      value:\"tkay\"\n    },\n    nndHidden:{\n      type:Boolean,\n      value:true\n    }\n  },\n  showNickName: function () {\n    this.nndHidden = false;\n  }\n})\n\n\n```\n\n```html\n\u003c!-- client/index.html (you can use any filename) --\u003e\n\u003chead\u003e\n  \u003ctitle\u003eSynthesis\u003c/title\u003e\n\n\u003c/head\u003e\n\n\u003cbody class=\"fullbleed\"\u003e\n  \u003ch1\u003eSynthesis is Meteor + Polymer!\u003c/h1\u003e\n  \u003ctest-element\u003e\u003c/test-element\u003e\n\u003c/body\u003e\n```\n```js\n// client/index.js\nimport '../imports/ui/components/test-element.html';\n  // include the webcomponents js file \nimport \"../imports/ui/bower_components/webcomponentsjs/webcomponents-lite.min.js\";\n\n//Remember to include a polymer component or polymer.html itself in any file\n\nimport \"../imports/ui/bower_components/polymer/polymer.html\";\n\n```\nBest 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](#faq)\n\nA sample bower.json (imports/ui/bower.json)\n\n```json\n{\n  \"dependencies\": {\n    \"iron-pages\": \"PolymerElements/iron-pages#^1.0.0\",\n    \"neon-animations\": \"PolymerElements/neon-animations#^1.0.0\",\n    \"paper-button\": \"PolymerElements/paper-button#^1.0.5\",\n    \"polymer\": \"Polymer/polymer#^1.0.0\"\n  },\n  \"name\": \"mwc-synthesis\",\n  \"version\": \"0.0.1\"\n}\n```\n\n### Using Polymer from npm instead of bower\n\nHere is a working demo of using npm polymer package instead of bower. \n\nhttps://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo\n\n`npm install --save @polymer/paper-button`\n\nBefore everything else load webcomponents and polymer\n\n```js\nimport \"webcomponents.js/webcomponents-lite.min.js\";\nimport \"@polymer/polymer/polymer.html\";\n```\n\nUse it from js files as \n```js\nimport \"@polymer/paper-button/paper-button.html\";\n```\n\u003ePlease note that the @polymer packages are still in testing stage. And the polymer version is an older one.\n\n### Assets\n\nworks inside html.\n\n```html\n\u003c!-- imports/ui/path/to/element.html --\u003e\n\u003cimg src=\"sample-image.png\"\u003e \u003c!--Works!!--\u003e\n\u003ciron-image src=\"sample-image.png\"\u003e\u003ciron-image\u003e \u003c!--Works!!--\u003e\n\u003cany-element src=\"sample-image.png\"\u003e\u003cany-element\u003e \u003c!--Works!! src = imports/ui/path/to/sample-image.png --\u003e\n\u003cany-element src=\"../sample-image.png\"\u003e\u003cany-element\u003e \u003c!--Works!! src = imports/ui/path/sample-image.png--\u003e\n\u003cany-element src=\"[[image]]\"\u003e\u003cany-element\u003e \u003c!--Does not work!! if you want this to work use image = path/from/root/to/image.png --\u003e\n\u003cany-element src=\"{{image}}\"\u003e\u003cany-element\u003e \u003c!--Does not work!! if you want this to work use image = path/from/root/to/image.png --\u003e\n\n\u003c!-- assets in public/ folder --\u003e\n\u003cany-element src=\"/sample-image.png\"\u003e\u003cany-element\u003e \u003c!--Works!! asset should be in public folder src = /sample-image.png --\u003e\n\n```\nworks inside css also.\n\n```css\n\n/*imports/ui/path/to/element.html inside style tag  or  imports/ui/path/to/element.css */\nbackground: url(path/to/image.png); /* Works!!. */\nproperty: url(relative/path/to/image.png); /* Works!!. */\nproperty: url(var(--url-var)); /* Does not work unless --url-var = absolute path imports/ui/path/to/image.png */\n/* if you want to use variables use \n--url-var = url(path/to/url);\nproperty: var(--url-var);\n*/\nproperty: url(/path/to/image.png); /* Works!!. if asset is in public folder */\n```\n\nFile types we supports https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-assets/plugin/synthesis-assets.js#L19. \n\nFeel free to add pr's if you want to supports more file types.\n\nRelevant code https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-compiler/synthesis-compiler.js#L166-L176 .\n\n### Demo\n\n#####Using Bower\n\nCheck out the [Synthesis Demo](https://github.com/meteorwebcomponents/synthesis-demo)\n\n#####Using npm \n\nCheck out the [synthesis-meteor-polymer-npm-demo](https://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo)\n\n### Kickstart Your Meteor Polymer projects\n[Kickstart a Meteor/Polymer project - FlowRouter](https://github.com/aruntk/kickstart-meteor-polymer) with Synthesis.\n\n[KickStart Meteor/Polymer Project - Polymer App Route](https://github.com/aruntk/kickstart-meteor-polymer-with-app-route)\n\n![synthesis1](https://cloud.githubusercontent.com/assets/6007432/14216652/9da7131a-f867-11e5-9f84-6dd75d60dd45.gif)\n\n### Like it?\n\n:star: this repo\n\n### Found a bug?\n\nRaise an issue!\n\n### TODO\n\n### Social\n\nGitter - [meteorwebcomponents](https://gitter.im/aruntk/meteorwebcomponents?utm_source=share-link\u0026utm_medium=link\u0026utm_campaign=share-link)\n\nMeteor forum - https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536\n\n\u003e NO NEED to use any VULCANIZING tools. Synthesis handles everything\n\n### FAQ\n\nQ:  When I tried to set `window.Polymer = {lazyRegister:true,dom:\"shadow\"}` it resulted in error. \n\nAns : Refer [polymer settings](#polymer-settings)\n\nQ:  When I added (a) bower component(s) build time became painstakingly high. \n\nAns : 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 https://github.com/meteor/meteor/issues/6859. In my testings with 300 html files synthesis ran pretty fast. Its the meteor js handlers which create this issue.\n\nIn console (pwd = /imports/ui)\n```sh\nfind bower_components -name \\*.js | wc -l\n```\nTry to find out which package contains large number of js files. Delete unecessary files and keep a local copy. \n\n[bower-installer](https://github.com/blittle/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.\n\nQ: Is it possible to use npm instead of bower for loading polymer and components\n\nAns : Yes there is. Refer [using npm instead of bower](#using-polymer-from-npm-instead-of-bower)\n\nQ: Can I use Polymer and blaze together?\n\nAns: You can. If you want to use blaze along with synthesis use **[mwc:blaze-html-templating](https://github.com/meteorwebcomponents/blaze-html-templates)** . demo - [blaze+polymer](https://github.com/meteorwebcomponents/synthesis-demo/tree/blaze-polymer) \n\nUse blaze.html extension for blaze files.\n\nBut there are some compatibility issues https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536/30?u=aruntk\n\nQ: 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?\n\nAns : 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](https://github.com/meteorwebcomponents/mixin) . \n","funding_links":[],"categories":["Tools"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteorwebcomponents%2Fsynthesis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeteorwebcomponents%2Fsynthesis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteorwebcomponents%2Fsynthesis/lists"}