Vulcanize built-in Polymer components

[ignacio...@gmail.com]

Hi

I want to reduce the amount of request for polymer components. So , I want to vulcanize the build-in polymer components.

My elements.html is

<link rel="import" href="../bower_components/paper-button/paper-button.html">

<link rel="import" href="../bower_components/paper-radio-button/paper-radio-button.html">

<link rel="import" href="../bower_components/paper-radio-group/paper-radio-group.html">

<link rel="import" href="../bower_components/paper-shadow/paper-shadow.html">

<link rel="import" href="../bower_components/paper-dialog/paper-dialog-transition.html">

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">

<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">

<link rel="import" href="../bower_components/paper-ripple/paper-ripple.html">

and my index.html

<!-- INITIALIZE POLYMER PLATFORM -->

<script src="bower_components/platform/platform.js"></script>

<!-- IMPORT POLYMER ELEMENTS -->

        <link rel="import" href="elements/elements.vulcanized.html">

The vulcanization works but the browser is not able to read the file properly.

When I use te vulcanized file I got this error.

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. polymer.js:3(anonymous function) polymer.js:3(anonymous function) polymer.js:3(anonymous function) polymer.js:3

Uncaught TypeError: object is not a function paper-focusable.html:1(anonymous function) paper-focusable.html:1

Uncaught TypeError: object is not a function paper-button-base.html:1(anonymous function) paper-button-base.html:1

Uncaught TypeError: object is not a function paper-ripple.html:1(anonymous function) paper-ripple.html:1(anonymous function) paper-ripple.html:1

Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.js:4o.loadStyles polymer.js:4d.loadResources polymer.js:4d.init polymer.js:4d.createdCallback polymer.js:4

Uncaught TypeError: object is not a function c-paper-icon-button.html:61(anonymous function) c-paper-icon-button.html:61

Uncaught TypeError: Cannot read property 'loadStyles' of undefined polymer.js:4o.loadStyles polymer.js:4d.loadResources polymer.js:4d.init polymer.js:4d.createdCallback polymer.js:4

Uncaught TypeError: object is not a function c-paper-item.html:70(anonymous function)

Im using polymer 0.4.2

Someone knows want Im doing wrong ?

Best

Ignacio

[ignacio...@gmail.com]

After research a little I think I found the problem.

If I have a component A that use a polymer-component like paper-button and and what to vulcanize A and paper-button two

<link rel="import" href="../bower_components/paper-button/paper-button.html">

<link rel="import" href="A-Custom.html">

The vulcanized file has the paper-button and the element A-Custom + paper-button import.

So polymer fails because it found two time paper-button defined, one in the vulcanized file and another in the import.

The rare is , it is happen only when i vulcanize the file, If I use the elements directly in my index.html it works without problem.

The issue is reproducible with custom component too. It is an issue with circular dependencies.

The only workaround is to be aware of dependencies and remove by hand, but it will make the component unusable alone. 

Best

Ignacio

[ignacio...@gmail.com]

Last note about it :D

I think the right way to fix it is specifying in the grunt-vulcacanize task not add import for the specific components.

In my example

 vulcanize: {

      default: {

          options: {

              excludes: {

                  imports: [ 'A-Custom', 'paper-button']
...

doing that, the vulcanize task will not add the <import> and will be avoid the double component registration.

so,to summarise ...there is no bug.. I should use the grunt vulcanize task with the right options :D

Best Regards,

Ignacio

[Rob Dodson]

are you creating multiple vulcanized bundles?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/11f72750-3738-400f-a2fe-a287c120d36a%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Ignacio Manzano]

Not in the demo file, but in our project I vulcanized all polymer and our components in just one file of 135kb aprox, doing that and other things we are loading a big website (we are using aprox 20components) with polymer in less than 2seg.

[Rob Dodson]

I responded to another one of your issues with the generator. It looks like if you are including additional imports outside of elements.html, and then running vulcanize, it ends up loading polymer.js twice. That's why I was asking if you're creating multiple vulcanized bundles. It's unclear from your example code if you have imports outside of elements.html