Polymer 3 Support

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.

[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).

[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)