Polymer Elements in a Meteor App

votes

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.

javascriptmeteorpolymer

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

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: atmosphere.meteor.com/wtf/app – sbking

@dalgard, I guess I'm experimenting with Meteor more, and hoping I could reuse some Polymer elements. – jamstooks

@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. – jamstooks

@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: github.com/meteor/meteor/wiki/New-Template-Engine-Preview – sbking

9 Answers

votes

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

votes

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

votes

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.

votes

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>

in my public directory

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

the meteor-polymer package is out-date

votes

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.

votes

@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 :-)

votes

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

votes

Important

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

meteor add boxxa:polymer-elements

votes

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