How do i make it work in Safari?

[frozeman]

The platform.js doesn't seem to do its job

[ecwyne]

I will be able to take a look at this tonight. Can you describe what errors you see in your tests so that I will be able to reproduce them?

[frozeman]

actually i add the polymer package as you describe, but the custom elements won't work in safari. In chrome everything works as expected.

I use it with iron router and sometimes there are errors like "you can't define that template again", or so.

Does it work with a plain meteor project in safari?

[ecwyne]

http://www.polymer-project.org/resources/compatibility.html

Polymer currently has 'limited' compatibility on Safari 6+. On my personal machine I'm still running OSX 10.6.8 and have Safari 5.1.10. For my safari I'm getting an error saying that there is no 'Window' object (which is true).

An error message of "you can't define that template again" sounds to me like you've multiple identically named templates <template name=""></template>

@frozeman Can you share any source code to see if the bugs your'e seeing are reproducible?

[frozeman]

You should update your system :)

I will try again and post the error when i find the time (currently removed polymer)

[helloworld]

@frozeman how did you get it to work in Chrome (I can't even get that much down).

[frozeman]

Actually, just follow the instructions:

• Clone or download + unzip the project into the /packages subdirectory of your project.
• Rename the folder from meteor-polymer to polymer
• $meteor add polymer
• Copy the elements folder from the package folder into the /public subdirectory of your project
• Update import.html inside the /public/elements to include any web components you are using in your project

[chees]

I was just digging into this some more. Safari can run polymer itself, but the main problem seems to be the load order of platform.js. In my Safari console I get messages like this:

[Warning] platform.js is not the first script on the page. See http://www.polymer-project.org/docs/start/platform.html#setup for details.

I think it's cause Safari doesn't support shadow dom natively, the polyfill needs to run before things like jQuery. I've been messing with execution order, but I haven't figured out how to load platform.js before all the other meteor files. I think if somebody can figure that out it should be possible.

[frozeman]

we could use something like the inject-initial package. Could you try this? http://atmospherejs.com/package/inject-initial

[chees]

I just managed to inject platform.js as the first thing in the head of the page using a trick from meteor-fast-render: https://github.com/arunoda/meteor-fast-render/blob/master/lib/server/inject.js

The warning message is gone now, but unfortunately the web components still render incorrectly in Safari :(

[chees]

@frozeman Sorry, missed your comment, but it looks that's pretty much what I did. Too bad it didn't work.

[frozeman]

to bad. i guess the problems come, when new elements get add to the page, that the polyfll won't "fill" them. (like when rendering the templates) The polyfill is probably more made for HTML which gets rendered on the server side.

[ecwyne]

I've just updated to the most recent platform.js

Will you guys let me know if this changes anything for you?

[jnkien]

Hi, It seems there is still the problem: [Warning] platform.js is not the first script on the page. on Firefox and Safari (working on Chrome by the way).

meteor create testPolymer
cd testPolymer/
meteor add ecwyne:polymer
meteor add ecwyne:polymer-elements
meteor

Click counter increases on Chrome but is stuck to 0 on Firefox/Safari. I guess it's link to the same error of platform.js not loaded first.

I also tried to find a way to load platform.js first without success (haven't tried the fast-render trick yet but it seems it's just a lost of time... :( ).

If anyone succeed, I'm strongly interested in a solution.

Cheers

[bangonkali]

In order to load custom html before any meteor related code use this pattern on your server:

var http = Npm.require('http');

var originalWrite = http.OutgoingMessage.prototype.write;
http.OutgoingMessage.prototype.write = function(chunk, encoding) {

  if (typeof chunk == 'string' || chunk instanceof String) {

    // Add web components & polymer on top of the website.
    var polymer = '\t<script type="text/javascript" src="/bower_components/webcomponentsjs/webcomponents.js"></script>\n';
    polymer += '\t<link rel="import" href="/bower_components/polymer/polymer.html">\n';
    chunk = chunk.replace('<head>', '<head>\n' + polymer);

    // Add single tag attributes to body. this returns an error if done within meteor.
    chunk = chunk.replace('<body>', '<body unresolved fullbleed vertical layout>');

    this._injected = true;
  }

  originalWrite.call(this, chunk, encoding);
};

Code above is patterned from meteor-inject and inject-data.

However, on my end, template events (such as button clicks) are still not working on Firefox and Internet Explorer 11. I have not tested on Safari yet though. My prototype only works on chrome.

Example Output:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html">

  <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/803bb4492c8925241a4102fb3f728128b4a86052.css?meteor_css_resource=true">

<script type="text/javascript">__meteor_runtime_config__ = {"meteorRelease":"METEOR@1.0.2.1","ROOT_URL":"https://www.acomsys.net","ROOT_URL_PATH_PREFIX":"","autoupdateVersion":"0d62270c4a8fa1e8c462fc658d5131304992c36c","autoupdateVersionRefreshable":"384cdfbb32e9b0a895c921905ac6c7e15e2d2652","autoupdateVersionCordova":"none","accountsConfigCalled":true};</script>

  <script type="text/javascript" src="/0d6182be8fa846a0b6be77466e94746d465a5f72.js"></script>

<link rel="import" href="bower_components/core-scroll-header-panel/core-scroll-header-panel.html">
  <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
  <link rel="import" href="bower_components/core-menu/core-menu.html">
  <link rel="import" href="bower_components/core-menu/core-submenu.html">
  <link rel="import" href="bower_components/core-item/core-item.html">
  <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
  <link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
  <link rel="import" href="bower_components/core-icons/core-icons.html">
  <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="bower_components/core-icon-button/core-icon-button.html">
  <link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
  <link rel="import" href="bower_components/paper-input/paper-input.html">
  <link rel="import" href="bower_components/paper-input/paper-input-decorator.html">
  <link rel="import" href="bower_components/paper-button/paper-button.html">

  <!--Turned out that commenting this out will only be difficult for mobile, even if jQuery forced tags are included.-->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body unresolved fullbleed vertical layout>

</body>
</html>

[bangonkali]

Ok, with regards to the 'events' not triggering, this one solved my problems.