Polymer 3 Support

[ChadKillingsworth]

Basic Support

For basic polymer 3 support - the relationship between JS and HTML will probably be reversed. Instead of HTML importing JS, the JS file will import HTML:

// processed by html-loader
// what to do with styles?
import myElementTemplate from './my-element.html';

class MyElement extends Polymer.Element {
  static get is() { return 'my-element'; }
  static get template() { return myElementTemplate; }
}
customElements.define(MyElement.is, MyElement);

This relationship should not require a specialized loader and should just work with WebPack.

LitHtml in Separate File

For better static analysis and renaming support (especially with Closure-compiler), can a standard Polymer template be converted to Lit syntax by a loader?

This would continue to allow HTML authoring, but completely remove the need for projects like polymer-rename.

One of the shortcomings would be the apparent loss of the path-based change notification. This merits further investigation.

[ed-ilyin]

I have created an minimalistic repo where I try to use Polymer 3.0 paper-button (https://github.com/ed-ilyin/elmish-polymer). After webpack I'm getting an error iron-a11y-keys-behavior.js:258 Uncaught ReferenceError: Polymer is not defined. If I'll add polymer-webpack-loader to my config, will it help?

BTW there is an example of compiled js: https://raw.githubusercontent.com/ed-ilyin/elmish-polymer/master/public/bundle.js

[ChadKillingsworth]

@ed-ilyin Looks like something is bringing in the wrong version of iron-a11y-keys-behavior. I know not all of the polymer elements are fully working in 3.0 yet.

[ed-ilyin]

Actualy this is through all the file. Everywhere where Polymer is referenced.
Looks like it should be replaced by webpack with something like __WEBPACK_IMPORTED_MODULE_0__polymer_polymer_js__ but it is not, I don't know why.

[ed-ilyin]

I have created even smaller example: https://github.com/ed-ilyin/polymer3-webpack

[ernsheong]

I've tried using this loader with LitElement (https://github.com/PolymerLabs/lit-element) importing Polymer "...html" files into the ES6 class file, but often getting complaints that something was already defined.

So perhaps what needs to be addressed for Polymer 3 is to avoid defining custom elements multiple times especially as many components import a bunch of shared legacy components.

Right now falling back to defining each required component on the global top level via HTML import in order to use in the Polymer 3 class works.

[peterchappell]

It would be great to know where this project is at regarding Polymer 3.0

There's a good chance that people using Polymer with Webpack will end up in this repo because of this article (which was very helpful for getting us started with Polymer 2.0 - thank you).
http://robdodson.me/how-to-use-polymer-with-webpack/

Depending on your current thinking, it might be worth putting a statement on the Readme about how this is currently for Polymer 2.0 and if you are using Polymer 3.0 try such and such etc (I'm still looking into it but it seems like we don't need a loader so much for Polymer 3.0).

[aletorrado]

+1, is this project still being maintained? It's a must doing some postprocessing separating HTML, CSS, and JS.

[ChadKillingsworth]

With Polymer 3, you don't need a loader. If you want to post-process HTML, then you're code will look like:

import fooTemplate from './foo-element.html';
class FooElement extends Polymer.Element {
  static get template() {
    return fooTemplate;
  }
}

[aletorrado]

I know but that's not a valid file that can be published to the webcomponents repo, and would like to postprocess library files as well.

[ChadKillingsworth]

Polymer 3 support added in #96

[slkennedy]

Not sure what I'm missing but I installed the latest version from NPM and when I use the config from the docs the build breaks. It only works when I have the test set to .html.

package.json
"devDependencies": {
    "polymer-webpack-loader": "^2.0.3",
}

webpack.config.js
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'polymer-webpack-loader'
            },
        ]
    }

ERROR in ./src/index.js
Module build failed (from ./node_modules/polymer-webpack-loader/dist/cjs.js):
Error: Cannot find module 'webpack/lib/RuleSet'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (C:\Ethix360\policytrac\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\Ethix360\policytrac\node_modules\polymer-webpack-loader\dist\index.js:21:16)
    at Module._compile (C:\Ethix360\policytrac\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)