Web Components (npm/yarn)

NOTE: This is an aggregation project for polymer 2.0 components, each element belongs and was developed by polymer team and/or other developers.

Polymer web components, have a dependency on HTML imports and Bower, which is not ideal for a webpack/npm/yarn setup, this attempts to solve the issue in the meantime.

This project publishes the available components into npm registry under the scope @npm-polymer (including some other libraries the elements were dependant on).

NOTE: Event though @polymer/polymer and @webcomponents/webcomponentsjs exist in npm and are up to date, @webcomponents/shadycss dependency from core polymer is causing issues when using webpack and wc-loader (reference not found due to scope)

Webpack

It is possible to load html files (as if they were html imports) using wc-loader

How to use with webpack

• Instead of bower install paper-button do npm install @npm-polymer/paper-button, or install this entire package with npm install @npm-polymer/npm-polymer
• After installing, setup your project as follows (you can make a more sophisticated setup see Samples)

some/entryfile.js (if using babel to transpile make sure to add the custom-elements-es5-adapter on your index.html or equivalent)

import 'file-loader?name=custom-elements-es5-adapter.js!@npm-polymer/webcomponentsjs/custom-elements-es5-adapter';
import 'imports-loader?require=>false!@npm-polymer/webcomponentsjs/webcomponents-lite';
import '@npm-polymer/polymer';

// Load whichever component desired
import '@npm-polymer/paper-checkbox/paper-checkbox.html';

index.html (body content)

<!-- Sample usage -->
<paper-checkbox></paper-checkbox>

<div id="ce-es5-shim">
  <script>
    if (!window.customElements) {
      var ceShimContainer = document.querySelector('#ce-es5-shim');
      // This prevents custom-elements-es5-adapter.js from parsing or running.
      ceShimContainer.parentElement.removeChild(ceShimContainer);
    }
  </script>
  <script src="artifacts/custom-elements-es5-adapter.js"></script>
</div>

<script src="webpackartifacts/entryfile.js"></script>

---

How to update this package

• Get the latest versions using the following URL // https://api.github.com/users/PolymerElements/repos?since=2017-05-01&page=2&per_page=100 (update the since parameter as needed)
• Paste the github list of repositories into repos/polymer-elements.json
• Run npm run deps
• Use the output of the previous command to udpate bower.json dependencies (usually -elements dependencyies are out of date so remove those)
• Run bower install and resolve dependencies (make sure you have the latest bower deps installed)
• Run npm start
• This will create web_modules these will be the same components, but with a package.json scoped to @npm-polymer
• Run npm run publisher
• This will go through each web_modules and publish it to npm registry

Published elements

,"@npm-polymer/app-layout-templates": "*"
,"@npm-polymer/app-layout": "*"
,"@npm-polymer/app-localize-behavior": "*"
,"@npm-polymer/app-media": "*"
,"@npm-polymer/app-pouchdb": "*"
,"@npm-polymer/app-route": "*"
,"@npm-polymer/app-storage": "*"
,"@npm-polymer/chart.js": "*"
,"@npm-polymer/font-roboto": "*"
,"@npm-polymer/gold-cc-expiration-input": "*"
,"@npm-polymer/gold-cc-input": "*"
,"@npm-polymer/gold-email-input": "*"
,"@npm-polymer/gold-phone-input": "*"
,"@npm-polymer/gold-zip-input": "*"
,"@npm-polymer/hydrolysis": "*"
,"@npm-polymer/iron-a11y-announcer": "*"
,"@npm-polymer/iron-a11y-keys-behavior": "*"
,"@npm-polymer/iron-a11y-keys": "*"
,"@npm-polymer/iron-ajax": "*"
,"@npm-polymer/iron-autogrow-textarea": "*"
,"@npm-polymer/iron-behaviors": "*"
,"@npm-polymer/iron-checked-element-behavior": "*"
,"@npm-polymer/iron-collapse": "*"
,"@npm-polymer/iron-component-page": "*"
,"@npm-polymer/iron-demo-helpers": "*"
,"@npm-polymer/iron-doc-viewer": "*"
,"@npm-polymer/iron-dropdown": "*"
,"@npm-polymer/iron-fit-behavior": "*"
,"@npm-polymer/iron-flex-layout": "*"
,"@npm-polymer/iron-form-element-behavior": "*"
,"@npm-polymer/iron-form": "*"
,"@npm-polymer/iron-icon": "*"
,"@npm-polymer/iron-icons": "*"
,"@npm-polymer/iron-iconset-svg": "*"
,"@npm-polymer/iron-iconset": "*"
,"@npm-polymer/iron-image": "*"
,"@npm-polymer/iron-input": "*"
,"@npm-polymer/iron-jsonp-library": "*"
,"@npm-polymer/iron-label": "*"
,"@npm-polymer/iron-list": "*"
,"@npm-polymer/iron-localstorage": "*"
,"@npm-polymer/iron-location": "*"
,"@npm-polymer/iron-media-query": "*"
,"@npm-polymer/iron-menu-behavior": "*"
,"@npm-polymer/iron-meta": "*"
,"@npm-polymer/iron-overlay-behavior": "*"
,"@npm-polymer/iron-pages": "*"
,"@npm-polymer/iron-range-behavior": "*"
,"@npm-polymer/iron-resizable-behavior": "*"
,"@npm-polymer/iron-scroll-target-behavior": "*"
,"@npm-polymer/iron-scroll-threshold": "*"
,"@npm-polymer/iron-selector": "*"
,"@npm-polymer/iron-signals": "*"
,"@npm-polymer/iron-swipeable-container": "*"
,"@npm-polymer/iron-test-helpers": "*"
,"@npm-polymer/iron-validatable-behavior": "*"
,"@npm-polymer/iron-validator-behavior": "*"
,"@npm-polymer/marked-element": "*"
,"@npm-polymer/marked": "*"
,"@npm-polymer/molecules": "*"
,"@npm-polymer/neon-animation": "*"
,"@npm-polymer/paper-badge": "*"
,"@npm-polymer/paper-behaviors": "*"
,"@npm-polymer/paper-button": "*"
,"@npm-polymer/paper-card": "*"
,"@npm-polymer/paper-checkbox": "*"
,"@npm-polymer/paper-dialog-behavior": "*"
,"@npm-polymer/paper-dialog-scrollable": "*"
,"@npm-polymer/paper-dialog": "*"
,"@npm-polymer/paper-drawer-panel": "*"
,"@npm-polymer/paper-dropdown-menu": "*"
,"@npm-polymer/paper-fab": "*"
,"@npm-polymer/paper-header-panel": "*"
,"@npm-polymer/paper-icon-button": "*"
,"@npm-polymer/paper-input": "*"
,"@npm-polymer/paper-item": "*"
,"@npm-polymer/paper-linear-progress": "*"
,"@npm-polymer/paper-listbox": "*"
,"@npm-polymer/paper-material": "*"
,"@npm-polymer/paper-menu-button": "*"
,"@npm-polymer/paper-menu": "*"
,"@npm-polymer/paper-progress": "*"
,"@npm-polymer/paper-radio-button": "*"
,"@npm-polymer/paper-radio-group": "*"
,"@npm-polymer/paper-ripple": "*"
,"@npm-polymer/paper-scroll-header-panel": "*"
,"@npm-polymer/paper-slider": "*"
,"@npm-polymer/paper-spinner": "*"
,"@npm-polymer/paper-styles": "*"
,"@npm-polymer/paper-swatch-picker": "*"
,"@npm-polymer/paper-tabs": "*"
,"@npm-polymer/paper-toast": "*"
,"@npm-polymer/paper-toggle-button": "*"
,"@npm-polymer/paper-toolbar": "*"
,"@npm-polymer/paper-tooltip": "*"
,"@npm-polymer/platinum-bluetooth": "*"
,"@npm-polymer/platinum-https-redirect": "*"
,"@npm-polymer/platinum-push-messaging": "*"
,"@npm-polymer/platinum-sw": "*"
,"@npm-polymer/polymer": "*"
,"@npm-polymer/pouchdb-find": "*"
,"@npm-polymer/pouchdb": "*"
,"@npm-polymer/prism-element": "*"
,"@npm-polymer/prism": "*"
,"@npm-polymer/promise-polyfill": "*"
,"@npm-polymer/seed-element": "*"
,"@npm-polymer/shadycss": "*"
,"@npm-polymer/sw-toolbox": "*"
,"@npm-polymer/web-animations-js": "*"
,"@npm-polymer/webcomponentsjs": "*"
,"@npm-polymer/intl-messageformat": "*"
,"@npm-polymer/prismjs": "*"

Elements without version

,"@npm-polymer/chartjs-element": "*"
,"@npm-polymer/web-animations-js": "2.2.5",

Packages with name conflict or ideally not published here

,"@npm-polymer/prism" should be "@npm-polymer/prismjs"

Packages that are not actually elements

,"@npm-polymer/generator-polymer-init-custom-build": "*"