CODEWITHSUNDEEP
htmlpolymerpolymer-1.0
André Kuhlmann
André Kuhlmann

Reputation: 4668

Polymer 1.0 import all elements at once

I have started locking at Googles new Polymer SDK, now that I started learning I asked my self if it's possible to include all elements of the paper group at once? Otherwise my header gets bigger as my actual body code...

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

Upvotes: 4

Views: 2590

Answers (3)

Dragan Marjanovic
Dragan Marjanovic

Reputation: 1287

I had the same problem and as others have pointed out you can make a single import file. I made a script that automates this process and you may be interested aswell as any others who encounter the same problem. It automatically generates an import file from the elements in the working directory. =)

https://gist.github.com/draganmarjanovic/0bef6c298da767bf38b1

Upvotes: 0

Adaline Simonian
Adaline Simonian

Reputation: 4808

There are several ways that you can achieve this, which can be used in combination with one another.

Importing entire element collections

As several commenters have noted, this suggestion no longer works. There is currently a PR open on the iron-elements repository that would allow for this functionality. If it's something that you would find useful, then I'd suggest leaving some comment of support (+1).

If, during development and/or prototyping, you would like the convenience and flexibility of having access to all the different paper-elements and iron-elements at once, the element collection repositories provide a helpful HTML document with all the imports for each of the collections. You can import them like this:

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

Note that this is typically not something you would want to do in a production environment, because it would load many unnecessary imports and waste bandwidth. However, for development, it's convenient as you can easily experiment with new elements without having to add imports for them every time you use one.

Externalizing your import code

Because of the fluid nature of HTML imports, you can easily define a second HTML document, just as the Polymer element authors did in the element collections, but for yourself. This file can have a list of all the elements you plan on using. Simply create a document that looks like this:

<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/iron-a11y-keys/iron-a11y-keys.html">
<link rel="import" href="bower_components/some-other-component/some-other-component.html">

Then, import it into the pages where you need the elements you've selected:

<link rel="import" href="common_elements.html">

Vulcanizing

Google provides vulcanize, a tool which will parse through your imports and their dependencies and compact them into a single file. Unlike the lists of imports above, this file will actually have the contents of the imports, not just a reference to them. This is something you may want to consider when deploying your application to production.

Documentation for vulcanize, as well as the tool itself, is available at https://github.com/polymer/vulcanize

Upvotes: 5

blissfulyoshi
blissfulyoshi

Reputation: 87

You can use Google's Vulcanize tool to combine all the elements. https://github.com/polymer/vulcanize

Upvotes: 0

Related Questions