Polymer Elements in a Meteor App

Question

Has anyone successfully added Polymer elements to a Meteor project? I'm struggling to make it work.

I've tried using bower to install the Polymer package under public:

├── public
│   ├── bower_components
│   │   ├── platform
│   │   └── polymer
│   ├── elements
│   │   └── my-element.html

I then included the element like this:

<head>
  <title>test</title>
  <script src="bower_components/platform/platform.js"></script>
  <link rel="import" href="elements/my-element.html">
</head>
<body>
  ...
  <my-element></my-element>
  ...
</body>

That's resulting in an endless loop of XHR requests for platform.js and my-element.html.

I've also tried the meteor-polymer package, that doesn't include polymer.html and I couldn't get it to recognize the package anyway:

=> Errors prevented startup:

While building the application:
error: no such package: 'polymer'

I'm hoping someone has been able to get Polymer working with Meteor as I'd really like to use my components in this app.

It's really cool that you're experimenting with Polymer. However, in my humble opinion, "the Meteor way" is very much dependent on the templates – with a little patience, both Meteor and Angular (and others) will come to look more like Polymer. — dalgard, Feb 13 '14 at 22:46
Agreed with @dalgard, Meteor's Blaze UI has some exciting features coming up that will make it usable as a powerful component system. Meteor does a lot of tricky stuff to make its reactive HTML templates work, so I'm not sure when/if compatibility with Polymer would/could be possible like this. I would suspect your best bet would be to bypass Meteor's templating engine entirely and hook it up yourself, in whatever way Polymer supports it. One note however: are you using Meteorite or trying to install the package with vanilla Meteor? Read: https://atmosphere.meteor.com/wtf/app — sbking, Feb 14 '14 at 01:13
@dalgard, I guess I'm experimenting with Meteor more, and hoping I could reuse some Polymer elements. — jamstooks, Feb 14 '14 at 01:48
@Cuberto, Thanks for your response. I'll take a look at Blaze, but feeling like I may use Meteor for a simpler project where I'm not combining two emerging technologies. I installed it using Meteorite, as described in the [Readme](https://github.com/andrewreedy/meteor-polymer/blob/master/README.md). — jamstooks, Feb 14 '14 at 01:50
@jamstooks Blaze is just Meteor's new, official templating system. It's just a rewrite of the templating engine that provides several benefits over the current system. It's currently WIP but will be included in the Meteor core by Meteor 1.0. You can read about it here: https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview — sbking, Feb 14 '14 at 09:55
@jamstooks out of curiosity, does my-element.html have an import for polymer.html? — robdodson, Feb 14 '14 at 21:13
Actually polymer works perfectly with Meteor's blaze render engine! Even all the reactivity works. Try this package: http://github.com/ecwyne/meteor-polymer — Fabian Vogelsteller, Jul 24 '14 at 21:20
I cannot get it to work. It says: Template has no 'name' attribute. And if I add a name it still breaks. — DATEx2, Oct 05 '14 at 02:06

ECWyne · Answer 1 · 2014-10-07T16:55:47.593

15

I have created a package to add Polymer functionality to Meteor.

Here is the github.

http://github.com/ecwyne/meteor-polymer

Update: It can also be added using meteor add ecwyne:polymer-elements

edited Oct 07 '14 at 16:55

answered Jul 21 '14 at 16:52

ECWyne

423
3
8

Does this work with Meteor 0.9.0.1? I followed the steps, but I am getting "Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'." in the browser. – babbata Sep 01 '14 at 15:40
@babbata the package has since been updated and now works with the new meteor packaging system! – ECWyne Oct 07 '14 at 16:54
@ECWyne: Sorry for tagging you here.. Please checkout this question http://stackoverflow.com/q/28877940/1560616 – Ramesh Murugesan Mar 05 '15 at 12:39

score 10 · Answer 2 · edited Mar 10 '15 at 05:02

In case you still have issues with adding and using Polymer in Meteor, here's an approach that will work.

We are going to add Polymer to the Meteor project using Bower.

After creating your Meteor app, navigate to your app's directory and follow the steps below:

$ bower init => This will take you through the steps you require to create your bower.json file through the terminal

Now lets add the Polymer components:

$ bower install --save Polymer/polymer
bower install --save Polymer/webcomponentsjs
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

Now we'll have a bower_components directory inside the app's root folder which contains the Polymer componets. Create another folder called public and move the bower_components into the public folder so that we have public/bower_components.

Here's a simple piece of code you can replace the contents of yourappname.html with.

<head>
<title>Athman's Polymer Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">

<style>
    html, body {
        height: 100%;
        margin: 0;
    }
    body {
        font-family: sans-serif;
    }
    core-scaffold {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
    }
    #core_card {
        width: 96%;
        height: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        margin: 2%;
        background-color: rgb(255, 255, 255);
        text-align: left;
    }
    paper-fab {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }
</style>
</head>
<body >
<core-scaffold>
    <core-header-panel navigation flex mode="seamed">
        <core-toolbar id="core_toolbar">Navigation</core-toolbar>
        <core-menu theme="core-light-theme">
            <core-item icon="settings" label="item1"></core-item>
            <core-item icon="settings" label="item2"></core-item>
        </core-menu>
    </core-header-panel>
    <div tool>Test Project</div>
    <core-card id="core_card" vertical layout start>
        <div style="padding: 20px;">This is a sample project</div>
    </core-card>
    <paper-toast id="toast1" text="Created by Nic Raboy"></paper-toast>
</core-scaffold>
<paper-fab icon="add" onclick="document.querySelector('#toast1').show()"></paper-fab>
</body>

Now let's get our app running ...

$ meteor

Enjoy Polymer

Credits: Nic Raboy: Using Polymer With Apache Cordova

How to get bower in this case? Through NPM (the "default" way), or as a meteor package? Also, it would be a good idea to include the NPM/bower steps, or a reference link, at start so even a total beginner can follow the tut. — CosmicGiant, Oct 31 '15 at 14:41
This is not working for me. I get a bunch of errors, mostly repeated instances of the same problems: `Uncaught TypeError: Cannot read property 'helpers' of undefined` @ myproject.js:5 --- `Uncaught TypeError: prototype.registerCallback is not a function` @ polymer-micro.html:73 (multiple times) --- `Uncaught TypeError: Polymer.mixin is not a function` @ polymer-mixins.js:7 --- `Uncaught SyntaxError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'undefined'. The type name is invalid.` @ polymer-micro.html:64 — CosmicGiant, Oct 31 '15 at 23:52

score 4 · Answer 3 · answered Feb 16 '14 at 14:46

4

Sorry to hear you've been having trouble getting Meteor and Polymer to play well together. The comments above explain the situation with Meteor's templating system, but in case it's useful:

Over on the Polymer team we created a tool called Vulcanize which can flatten (concatenate) all of the styles, scripts and dependencies needed for Polymer elements into a single file. This removes the need for any XHR/Ajax calls unless an element is calling out to a remote server somewhere.

Here's a guide to using the Vulcanize tool, which may be able to help with the above.

answered Feb 16 '14 at 14:46

addyo

2,798
1
14
21

1

Thanks, @addyo. That sounded promising, but I've been working on this for a while and am beginning to think it's not worth the effort. With your technique, I'm getting errors like: `bower_components/polymer-selection/index.html:1: Can't set DOCTYPE here. (Meteor sets for you)` I'm thinking I'll either rewrite my elements in Meteor or try to combine with Angular for external data binding. – jamstooks Feb 27 '14 at 01:52
why do you want to combine with angular? blaze already handles databinding. – dcsan Oct 07 '14 at 20:53
I was thinking to add Polymer to _src directory because it is not "parsed" by Meteor – Viktor Matushevskyi Nov 20 '14 at 21:48
we've created a meteor build plugin to handle wrap the npm vulcanize tool. Check it out https://github.com/Differential/meteor-vulcanize – Greg Neiheisel Jan 15 '15 at 15:18
Checkout https://github.com/meteorwebcomponents/compiler which uses polymer as the view layer instead of blaze. Here is a simple demo with flow router https://github.com/meteorwebcomponents/demo-flowrouter – tkay Mar 05 '16 at 17:37

score 0 · Answer 4 · answered Mar 10 '14 at 16:29

I have aslo played with these both. Its not so pretty, but i get work them together.

<head> <title>my-app</title> <script src="/polymer/platform.js"></script> <link rel="import" href="/polymer/polymer.html"> </head>

so

in my public directory

/public/polymer/polymer.html
/public/polymer/other-polymer-files

the meteor-polymer package is out-date

score 0 · Answer 5 · answered Apr 29 '14 at 00:57

While there is a meteorite package for polymer (https://atmospherejs.com/package/polymer) which seems promising.

If you want to add javascript files yourself, you might want to try putting them under:

client/compatibility/

If you don't, you won't have access to polymer's global variables, since in normal javascript globals are just variables created as var myGlobal; outside of any function.

I am curios on how meteor is going to resolve polymers handlebars-like syntax for templates.

`

Jürgen Fink · Answer 6 · 2015-01-20T20:30:30.320

@jamstooks I have same folder structure like you and had same trouble.

Got it working finally -> Try:

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />

and then, leave the "my-element" tags out and just use the webcomponents. For example:

<core-scaffold id="core_scaffold">
  <core-header-panel mode="seamed" id="core_header_panel" navigation flex>
    <core-toolbar id="core_toolbar">
    </core-toolbar>
    <core-menu valueattr="label" id="core_menu" theme="core-light-theme">
      <core-item id="core_item" icon="settings" label="Item1" horizontal center layout active></core-item>
      <core-item id="core_item1" icon="settings" label="Item2" horizontal center layout></core-item>
    </core-menu>
  </core-header-panel>
  <div id="div" tool>Your App Title
  </div>
   <core-pages selected="0" selectedindex="0" notap id="core_pages">
    <section id="section" active>
    </section>
    <section id="section1">Page Two</section>
  </core-pages>

</core-scaffold>

With Meteor 1.0.2.1 and meteor add ecwyne:polymer-elements

@ecwyne Thanks for your package contribution - works like a charme :-)

score 0 · Answer 7 · answered Feb 09 '15 at 07:14

In Meteor, all folder/files inside /public directory requires you to import like this:

<link import="/bower_components..> and the same for your custom elements

<link import="/elements/my-elements.html>

Note:

No need to install Polymer with bower.

instead, try this:

$ meteor add ecwyne:polymer-elements

score 0 · Answer 8 · answered Feb 24 '15 at 17:37

0

Important

For polymer v0.5.5 use forked @ecwyne package updated to the latest polymer release:

meteor add boxxa:polymer-elements

answered Feb 24 '15 at 17:37

ZuzEL

12,768
8
47
68

score 0 · Answer 9 · answered Mar 05 '16 at 17:49

I've faced similar issues when working with polymer elements. A solution is a build plugin which vulcanizes all files listed in an import file.

Checkout https://github.com/meteorwebcomponents/compiler . It does exactly this. With this package you don't have to write polymer code in the public folder and then to import to the blaze template. With mwc:compiler you can use polymer as the default view layer instead of blaze. All you need to do is create a config file named compiler.mwc.json.

We've built a layout render package which can be used just like Blaze.render function. https://github.com/meteorwebcomponents/layout

A data mixin to use meteor data reactively from polymer components is also available https://github.com/meteorwebcomponents/mixin

Here is a demo app with flowrouter https://github.com/meteorwebcomponents/demo-flowrouter

Here is an app which uses all of the above stated packages https://github.com/HedCET/TorrentAlert

Polymer Elements in a Meteor App

9 Answers9

Important

Linked