npm package: @npm-polymer/npm-polymer
Description: > NOTE: This is an aggregation project for polymer 2.0 components, each element belongs and was developed by polymer team and/or other developers.
Latest version: 0.0.4
Deprecated: Please use @polymer packages instead


# 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](https://github.com/aruntk/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](https://github.com/juliostanley/websdk-custom-elements))

**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": "*"
```