banno / polymer-webpack-loader

WebPack Loader for Polymer Web Components

polymer-webpack-loader

Polymer component loader for webpack.

The loader processes Polymer 3 template elements to minify the html and add images, fonts and imported stylesheets to the webpack dependency graph.

Looking for the Polymer 2 version? See the Polymer 2 branch

Configuring the Loader

{
  test: /\.js$/,
  options: {
    htmlLoader: Object (optional)
  },
  loader: 'polymer-webpack-loader'
},

Options

htmlLoader: Object

Options to pass to the html-loader. See html-loader.

Use with Babel (or other JS transpilers)

If you'd like to transpile the contents of your element you can chain an additional loader.

module: {
  loaders: [
    {
      test: /\.html$/,
      use: [
        // Chained loaders are applied last to first
        { loader: 'babel-loader' },
        { loader: 'polymer-webpack-loader' }
      ]
    }
  ]
}

// alternative syntax

module: {
  loaders: [
    {
      test: /\.html$/,
      // Chained loaders are applied right to left
      loader: 'babel-loader!polymer-webpack-loader'
    }
  ]
}

Boostrapping Your Application

The webcomponent polyfills must be added in a specific order. If you do not delay loading the main bundle with your components, you will see the following exceptions in the browser console:

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Reference the demo html file for the proper loading sequence.

Maintainers

Bryan Coulter

Chad Killingsworth

Rob Dodson

polymer-webpack-loader's Issues

Unable to install polymer2 branch via npm

Hello
I'm trying to install this tool via npm using a command npm install --save-dev git://github.com/webpack-contrib/polymer-webpack-loader.git#polymer2 and it gets installed into node_modules but without dist and src folders which makes it impossible to use.

I believe this happens because dist folder is present in .gitignore file and while file from this folder is listed as main file in package.json

And src folder is not downloaded because it is not present among the entries in files section in project.json.

Thank you in advance.

Polymer 3?

So....is this repo dead now that Polymer 3.0 was announced?

Javascript variables from html imports are inaccessible after becoming module imports (polymer redux example)

I'm trying to follow Rob's Redux Polycast while using this loader.

Maybe this is WAI but the javascript variables exposed from within html-imports are not accessible after they are made into module-imports.

This will fail with 'PolymerRedux' is undefined:

<link rel="import" href="../bower_components/polymer-redux/polymer-redux.html">

<script type="text/javascript">
  const Redux = require('redux');

  const initial = {message: 'Hello, World!'};
  const reducer = state => state;
  const store = Redux.createStore(reducer, initial);

  const ReduxMixin = PolymerRedux(store);
</script>

And this would fail with 'ReduxMixin' is undefined:

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="redux-store.html">

<dom-module id="app-main">
  <template>...</template>

  <script>
    class AppMain extends ReduxMixin(Polymer.Element) {

      static get is() { return 'app-main'; }

      static get properties() {
        return {};
      }
    }

    window.customElements.define(AppMain.is, AppMain);
  </script>
</dom-module>

My example project with a few quick attempts to make this work:
https://github.com/zszafran/polymer-redux-webpack/blob/master/src/redux-store.html

I was able to make part of this work by doing this:

<link rel="import" href="../bower_components/polymer-redux/polymer-redux.html">

<script type="text/javascript">
  const Redux = require('redux');
  const initial = {message: 'Hello, World!'};
  const reducer = state => state;
  const store = Redux.createStore(reducer, initial);

  export const ReduxMixin = (Parent) => Parent;  // <--- added 'export'
</script>

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="redux-store.html" imports="ReduxMixin">  <!-- added 'imports' attribute -->

<dom-module id="app-main">
  <template>...</template>

  <script>
    class AppMain extends ReduxMixin(Polymer.Element) {
      ...
    }

    window.customElements.define(AppMain.is, AppMain);
  </script>
</dom-module>

After I modified the loader:

          if (ignoreLinks.indexOf(href) < 0 && ignoredFromPartial.length === 0) {
            var imports = (0, _dom.getAttribute)(linkNode, 'imports');
            var importStr = imports ? `{${imports}} from ` : '';
            source += `\nimport ${importStr}'${path.replace(/\\/g, '\\\\')}';\n`;
            lineCount += 2;
          }

But this hack only got me so far since I still need to modify polymer-redux to export the 'PolymerRedux' function. Maybe there is a FR in all this, but it seems like my best bet will be to load this all with <script> tags and somehow compile the polymer-redux source lib into it.

Global styles ordering incorrect

registerHtmlTemplate.toBody() inserts styles before the body's first child. (https://github.com/webpack-contrib/polymer-webpack-loader/blob/master/register-html-template.js#L42) This causes global styles to be inserted in the opposite order than they would be when produced by regular HTML imports and/or the polymer build.

We are moving our app to use webpack, and override some of the global styles of the paper elements. We rely on the style ordering for this.

prpl-server-node build support by default

I'm wondering if the build process or docs around this loader might also supply directions on building for prpl-server-node
https://github.com/Polymer/prpl-server-node

I realize that configuring webpack is a little out of scope from a polymer loader module, however in interest in supporting developers new to Polymer and PRPL to achieve faster best-practices and super high lighthouse scores.

I'm making the ask here based on this team's polymer + webpack expertise.

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.

Reconsider baked-in <link> path resolution

The loader turns <link> hrefs into absolute paths, here:

path = osPath.join(osPath.dirname(this.currentFilePath), href);

This is contrary to the README's claim:

The loader transforms your components:

• <link rel="import" href="./my-other-element.html"> -> import './my-other-element.html';

The example <link> is actually transformed into something like the following:

import '/absolute/path/to/component/my-other-element.html';

I think the implementation should be changed, not the README. Transforming hrefs into imports with absolute paths breaks Webpack module resolution features. For example, I can't do this:

<link rel="import" href="some-other-loader!./my-other-element.html">

And instead of being able to do this:

<link rel="import" href="@npm-polymer/paper-button/paper-button.html">

...I have to do this:

<link rel="import" href="../../node_modules/@npm-polymer/paper-button/paper-button.html">

It also makes it impossible to use module.alias, so I can't do this:

alias: {
  'paper-button': path.resolve(__dirname, 'node_modules/@npm-polymer/paper-button'),
},

...which would allow me to do this:

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

I don't think polymer-webpack-loader should monkey with paths at all. It should do like the README says and do a direct mapping of <link rel="import" href="%anything%"> to import '%anything%';.

If I get a chance I'll work up a PR for this.

Allow for multiple dom-modules

Currently the loader looks for a single dom-module in the incoming source. The loader need to be able to process multiple dom-modules.

File paths not resolving properly on Windows

Using Windows 7, node 64bit v.6.11.1

It's not receiving file paths correctly.

Gets error message in terminal when running npm start:

Project is running at http://localhost:9000/
webpack output is served from /
Content not from webpack is served from C:\Users\giggs\Documents\robpack\demo\dist
webpack: wait until bundle finished: /
Hash: 53cdf8733c669c76be58
Version: webpack 3.3.0
Time: 4749ms
                                                          Asset     Size  Chunks
          Chunk Names
                                                      bundle.js   355 kB       0  [emitted
]  [big]  main
                                                     index.html     2 kB          [emitted
]
bower_components/webcomponentsjs/custom-elements-es5-adapter.js  1.62 kB          [emitted
]
        bower_components/webcomponentsjs/webcomponents-hi-ce.js  23.6 kB          [emitted
]
                   bower_components/webcomponentsjs/gulpfile.js  5.09 kB          [emitted
]
     bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js  72.6 kB          [emitted
]
           bower_components/webcomponentsjs/webcomponents-hi.js  9.72 kB          [emitted
]
       bower_components/webcomponentsjs/webcomponents-loader.js  3.15 kB          [emitted
]
         bower_components/webcomponentsjs/webcomponents-lite.js  83.5 kB          [emitted
]
        bower_components/webcomponentsjs/webcomponents-sd-ce.js  64.3 kB          [emitted
]
  [39] multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js 40 bytes {0}
 [built]
  [40] (webpack)-dev-server/client?http://localhost:9000 5.59 kB {0} [built]
  [41] ./node_modules/url/url.js 23.3 kB {0} [built]
  [43] ./node_modules/url/util.js 314 bytes {0} [built]
  [47] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [48] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [49] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
  [50] ./node_modules/sockjs-client/lib/entry.js 244 bytes {0} [built]
  [81] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
  [86] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [87] ./node_modules/events/events.js 8.33 kB {0} [built]
  [88] ./src/index.js 44 bytes {0} [built]
  [89] ./src/my-element.html 2.78 kB {0} [built]
  [90] ./node_modules/date-fns/format/index.js 10.1 kB {0} [built]
 [103] ./node_modules/polymer-webpack-loader/register-html-template.js 1.92 kB {0} [built]

    + 89 hidden modules

ERROR in ./src/my-element.html
obpackdemower_componentspolymerpolymer-element.html' in 'C:\Users\giggs\Documents\robpack\
demo\src'
 @ ./src/my-element.html 5:0-88
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/index.js
Child html-webpack-plugin for "index.html":
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 2.49 kB {0} [b
uilt]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.

and in the console

Uncaught Error: Cannot find module "C:UsersgiggsDocuments
obpackdemo�ower_componentspolymerpolymer-element.html"
    at webpackMissingModule (bundle.js:9646)
    at Object.<anonymous> (bundle.js:9646)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:9635)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:4097)
    at __webpack_require__ (bundle.js:20)
    at module.exports.ctor.super_ (bundle.js:63)
    at bundle.js:66

Split into multiple loaders

According to https://webpack.js.org/development/how-to-write-a-loader/#guidelines,

• Loaders should do only a single task
• Loaders can be chained. Create loaders for every step, instead of a loader that does everything at once.

For example, I'm very interested in the HTML Imports -> ES6 import transform for a specific project, but not the other pieces. Ideally, that piece would be isolated as html-imports-webpack-loader (html-imports-loader is taken and seems to be a different thing entirely).

Changing the repo name "component-loader" to "polymer-loader" breaks the loader.

I am working now to fix the loader references of "component-loader" to "polymer-loader" in the index.js file.

Polymer2 DomModule.prototype.modules is Empty

I have a business requirement to leverage lit NPM packages in a Polymer 2 application, we are purchasing an upgrade to Polymer 3 on the repo however, we have an immediate need to consume our lit npm packages in the current Polymer version.

I am attempting to leverage v2.0.3 in our current repo, have been successful in replicating the demo using ate-fns/format but unfortunately, as soon as I import my custom NPM package DomModule.prototype.modules is empty and I receive the following.

Uncaught DOMException: CustomElementRegistry.define: 'dom-module' has already been defined as a custom element dom-module.html:199

I apologize in advance for posting a support type item as an issue; this being the Polymer 2 version and the time-sensitive situation I am in, I was hoping someone here would be able to either point me in the right direction and or confirm that what I am attempting to accomplish may not be possible.

Thank you in advance for any help.

Using rel=lazy-import not working ...

We are using the https://github.com/Polymer/lazy-imports in our application. We also would like to use webpack for our build. How would you suggest using these two together?

Load bundle earlier while waiting for WebComponentsReady event

First of all, thanks for this! Could not be more timely as the official solution leaves a lot of gaps.

Right now, the demo of polymer-webpack-loader seems to wait for "WebComponentsReady" event before attemping to load the bundle:
https://github.com/webpack-contrib/polymer-webpack-loader/blob/master/demo/src/index.ejs#L37

Can we do better? This affects time to first paint/render (performance). There is a slight pause before the bundle even starts to load:

HTML Loader Intregration

👋 I'm currently applying webpack-defaults to html-loader and since this will be a major release anyways, it's possible to change certain behaviours if required 😛 . The current html-loader always exports a module and therefore can't be chained as a 'previous' loader, which makes it unusable with polymer-webpack-loader atm. html-loader takes care of template literals and assets resolving (<img src="${require('./image.png')}">). So the question is if this is needed here :). If I can update the loader to export a {String} instead in case it isn't the last loader in the loaders chain

src/index.js

if (this.loaderIndex !== 0) {
  return `${html}` // {String}
}

return `export default ${html}` // {Module}

Usage

webpack.confg.js

...
{
   test: /\.html$/,
   use: [
      'polymer-webpack-loader',
      'html-loader'
   ]
}
...

Using "PolymerElements/font-roboto-local" leads to an ERROR during build process

Hi there,

I've added the Polymer component "font-roboto-local" to the demo project inside this repository and I receive errors during the build. Seems that the loader tries to resolve the local TTF fonts as modules. When I switch to the Polymer component "font-roboto" everything works fine, because of the external link inside the "font-roboto" component.

Here how you can reproduce the behavior.
In the demo folder do the following steps:

Add the following dependency to your bower.json
"font-roboto": "PolymerElements/font-roboto-local"

Add the following import to the my-element.html
<link rel="import" href="../bower_components/font-roboto/roboto.html">

Then run

bower install
npm install
npm run build

You will receive some errors like that

ERROR in ./bower_components/font-roboto/fonts/robotomono/RobotoMono-Bold.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./bower_components/font-roboto/roboto.html 5:3216-3265
 @ ./src/my-element.html
 @ ./src/index.js

I have added a git patch file which you can apply to the repository to reproduce the error.
issue-font-local.patch.txt

Would be nice to see a fix for that problem, because I don't want to use the external version of the font.

Regards
Simon

Loading from node_modules

Nice work! I'm wondering if I could load web-components that I've published to NPM from the node_modules directory.

I've modified your my-element.html in the demo directory so it starts like this:

<link rel="import" href="../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="../node_modules/my-npmelement/my-npmelement.html"> 
...
<my-npmelement></my-npmelement>
...

And according to your documentation I should be able to modify my webpack.config.js to this:
...

module: {
    rules: [
      {
        // If you see a file that ends in .html, send it to these loaders.
        test: /\.html$/,
        // cant i just do this?????
        include: ['bower_components','node_modules'],
        // This is an example of chained loaders in Webpack.
        // Chained loaders run last to first. So it will run
        // polymer-webpack-loader, and hand the output to
        // babel-loader. This let's us transpile JS in our `<script>` elements.
        use: [
          { loader: 'babel-loader' },
          { loader: 'polymer-webpack-loader' }
        ]
      },
      {
        // If you see a file that ends in .js, just send it to the babel-loader.
        test: /\.js$/,
        use: 'babel-loader',
        // This line tells Webpack not to transpile .js files coming out of
        // node_modules.
        exclude: /node_modules/
      }
    ]
  },

...

Seem ok? Or am I missing something here? When I load the page with this modification I get a syntax error: invalid-token. I've also tried it like this:

use: [
          { loader: 'babel-loader' },
          { 
            loader: 'polymer-webpack-loader',
            include: ['bower_components','node_modules']
          }
        ]

And then I get an invalid schema error.

Reorder ProcessHtml class for better readability

Structure ProcessHtml class in the index.js to follow pattern below.

ProcessHtml
- constructor
- process
- links
- domModule
- scripts

Failed to construct 'HTMLElement' new DomModule

So I've updated to the latest version 1.2.6 but I now seem to be getting some errors in console. Now I am on windows 7 and it was working before I updated. I ran a npm run build to compile the files and im loading the bundle.js script on an html page and trying to view on there as well. The error message below is all im seeing now.

bundle.js:3075 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at new DomModule (bundle.js:3075) at Function.register (bundle.js:109) at Object.<anonymous> (bundle.js:916) at __webpack_require__ (bundle.js:20) at Object.<anonymous> (bundle.js:890) at __webpack_require__ (bundle.js:20) at bundle.js:63 at bundle.js:66 DomModule @ bundle.js:3075 register @ bundle.js:109 (anonymous) @ bundle.js:916 __webpack_require__ @ bundle.js:20 (anonymous) @ bundle.js:890 __webpack_require__ @ bundle.js:20 (anonymous) @ bundle.js:63 (anonymous) @ bundle.js:66 bundle.js:6483 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at MyElement.PropertyAccessors (bundle.js:6483) at MyElement.TemplateStamp (bundle.js:7393) at MyElement.PropertyEffects (bundle.js:4291) at MyElement.PolymerElement (bundle.js:2346) at new MyElement (bundle.js:926) at Object.<anonymous> (bundle.js:951) at __webpack_require__ (bundle.js:20) at Object.<anonymous> (bundle.js:890) at __webpack_require__ (bundle.js:20) at bundle.js:63

"polymer-webpack-loader" -> "polymer-loader" ?

Owner of polymer-loader here. I wrote polymer-loader over 2 years ago when this project didn't exist. As of now, I don't use polymer nor maintain that repo.

If you guys want to rename this project webpack-contrib/polymer-loader to maintain consistency with all the other webpack contrib libraries I'll gladly relinquish the npm polymer-loader space.

Unable to build using polymer-webpack-loader

Hello

I am unable to build a clean dist using polymer-webpack-loader. Please see github link for sample project - https://github.com/simpleharshit/demo-pwa

Launching the app after passing it through polymer-webpack-loader shows this on the page -

const RegisterHtmlTemplate = require('polymer-webpack-loader/register-html-template'); RegisterHtmlTemplate.toBody(" ");

Can you please help locate the problem?

https://stackoverflow.com/questions/46283273/building-with-webpack3-6-0-polymer-webcomponents-and-angular-4-fails

Error in Edge ( 14 ) on WIN10 when you use iron-icons

I found a problem that only occurs in Edge ( 14 ) for Windows 10. When I include iron-icon I get the following errors:

SCRIPT438: Object doesn't support property or method 'call'
localhost:9000 (65,315)
SCRIPT438: Object doesn't support property or method 'byKey'
bundle.js (18185,9)

This problem is not in IE11, FF, CH and even not on Edge mobile.
I've used the demo code and only added iron-icon like this:

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-icons/communication-icons.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">

<dom-module id="my-element">
  <template>
    <iron-icon icon="communication:business"></iron-icon>
    <h1>Hello, World! It's [[today]].</h1>
  </template>
  <script>
    // Heyyyy, we're pulling in a Node module!
    import format from 'date-fns/format';

    class MyElement extends Polymer.Element {
      static get is() { return 'my-element'; }
      static get properties() {
        return {
          today: {
            type: String,
            value: function() {
              return format(new Date(), 'MM/DD/YYYY');
            }
          }
        }
      }
    }

    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

What I understand of this error is the loading order of iron-meta that gives this problem. So it looks like polymer-webpack-loader is breaking the required loading order what is needed for iron-icon

Create Source Maps

The loader does some pretty drastic transformations on the HTML scripts. We need to add source map support.

The vue loader does something similar so we should look at how it does it.

Polymer-bundler has source map support for inline script tags in HTML files. That can also be used as a reference.

Order of html imports?

I'm writing an application where I get:

Uncaught ReferenceError: PolymerRedux is not defined
    at Object.<anonymous> (app.bundle.js:17846)
    at __webpack_require__ (app.bundle.js:20)
    at Object.<anonymous> (app.bundle.js:9037)
    at __webpack_require__ (app.bundle.js:20)
    at Object.<anonymous> (app.bundle.js:9018)
    at __webpack_require__ (app.bundle.js:20)
    at app.bundle.js:63
    at app.bundle.js:66

My bundled js file contains:

...
/***/ }),
/* 75 */
/*!******************************!*\
  !*** ./app/redux-mixin.html ***!
  \******************************/
/*! no static exports found */
/*! all exports used */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(/*! ../bower_components/polymer-redux/polymer-redux.html */ 76);

...

/***/ }),
/* 76 */
/*!***********************************************************!*\
  !*** ./bower_components/polymer-redux/polymer-redux.html ***!
  \***********************************************************/
/*! no static exports found */
/*! all exports used */
...

The order is wrong, even though my redux-mixin.html starts with an import of polymer-redux.html.

Webpack 4 support

The loader seems to work OK with webpack 4, but doesn't allow it in its peerDependencies

Safari shim in app-storage/app-indexeddb-mirror doesn't work with default loader

TypeError: null is not an object (evaluating 'HTMLImports.importForElement(
/** @type {!HTMLScriptElement} */document.currentScript).baseURI')

HTMLImports.importForElement returns null for bundle script inserted to index.ejs.

var BASE_URI = function () {
    // Polymer 2 baseURI polyfill for IE and Safari
    if (Polymer.Element && window.HTMLImports && HTMLImports.importForElement) {
      return HTMLImports.importForElement(
      /** @type {!HTMLScriptElement} */document.currentScript).baseURI;
    }
    // Polymer 1 or no HTML Imports
    currentScript = document._currentScript ? document._currentScript : document.currentScript;
    return currentScript.ownerDocument.baseURI;
  }();

How to reproduce:

• Start with this project's demo.
• bower install --save PolymerElements/app-storage
• modify my-element.html

Index: demo/src/my-element.html
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- demo/src/my-element.html	(revision c439581d890cb889d0818e4d6f4e1d113383d885)
+++ demo/src/my-element.html	(revision )
@@ -1,24 +1,35 @@
 <link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/app-storage/app-indexeddb-mirror/app-indexeddb-mirror.html">
 
 <dom-module id="my-element">
   <template>
-    <h1>Hello, World! It's [[today]].</h1>
+    <h1>Hello, World! It's [[persistedData]].</h1>
+    <app-indexeddb-mirror
+        log
+        session="a-unique-session-key-413"
+        key="cats"
+        data="{{today}}"
+        persisted-data="{{persistedData}}"></app-indexeddb-mirror>
   </template>
   <script>
     // Heyyyy, we're pulling in a Node module!
     import format from 'date-fns/format';
-    
+
     class MyElement extends Polymer.Element {
-      static get is() { return 'my-element'; }
+      static get is() {
+        return 'my-element';
+      }
+
       static get properties() {
         return {
           today: {
             type: String,
             value: function() {
               return format(new Date(), 'MM/DD/YYYY');
-            }
-          }
-        }
+            },
+          },
+          persistedData: String,
+        };
       }
     }

Add Tests

A good library has tests. We need to figure out the proper way to test webpack loaders and implement them.

Polymer v1 support

Hello. Is it possible to add support of Polymer v1? I tried to bundle our Polymer v1 project with a loader for v2. It almost works, it seems like only template registration doesn't work properly.

How compress polymer component in bower_components ?

i am working with React+polymer+webpack , i can able to include react,reactDOM min js during my production build via webpack.

While checking webpack Visualizer .i see bower_components contribute 78% of total size.
it is possible to compress ??

components available in bower_components:-
total 76
4 drwxrwxr-x. 5 name name 4096 Oct 25 18:27 iron-scroll-target-behavior
4 drwxrwxr-x. 5 name name 4096 Oct 25 18:27 iron-flex-layout
4 drwxrwxr-x. 5 name name 4096 Oct 25 18:27 iron-media-query
4 drwxrwxr-x. 5 name name 4096 Oct 25 18:27 iron-resizable-behavior
4 drwxrwxr-x. 6 name name 4096 Oct 25 18:27 shadycss
4 drwxrwxr-x. 5 name name 4096 Oct 25 18:27 polymer
4 drwxrwxr-x. 6 name name 4096 Oct 25 18:27 webcomponentsjs
4 drwxrwxr-x. 17 name name 4096 Oct 25 18:27 app-layout
4 drwxrwxr-x. 2 name name 4096 Oct 25 22:26 font-roboto
4 drwxrwxr-x. 5 name name 4096 Oct 25 22:26 paper-ripple
4 drwxrwxr-x. 5 name name 4096 Oct 25 22:26 paper-button
4 drwxrwxr-x. 5 name name 4096 Oct 25 22:26 iron-checked-element-behavior
4 drwxrwxr-x. 5 name name 4096 Oct 25 22:26 iron-a11y-keys-behavior
4 drwxrwxr-x. 5 name name 4096 Oct 25 22:26 iron-behaviors
4 drwxrwxr-x. 5 name name 4096 Oct 25 22:26 iron-form-element-behavior
4 drwxrwxr-x. 5 name name 4096 Oct 25 22:26 iron-meta
4 drwxrwxr-x. 5 name name 4096 Oct 25 22:26 iron-validatable-behavior
4 drwxrwxr-x. 5 name name 4096 Oct 25 22:26 paper-behaviors
4 drwxrwxr-x. 5 name name 4096 Oct 25 22:26 paper-styles

Auto convert to Polymer 3 on Build

Add an option to attach the HTML template to the class and target Polymer 3. This will let us test Polymer 3 without committing a change to our existing elements yet.

:host selector does not work when polyfilled

The :host selector does not function on browsers requiring a shadow dom polyfill, when using polymer-webpack-loader.

This affects polymer elements and vanilla custom elements.

Edit: It appears to work with Edge, but not Firefox.

Edit: Issue may not be related to polymer-webpack-loader.

Polymer AppLocalizeBehavior fails to load

Reproduction:

1. bower install --save PolymerElements/app-localize-behavior
2. Add <link rel="import" href="../../../bower_components/app-localize-behavior/app-localize-behavior.html"> to my-element.html in demo

Run time error: Uncaught TypeError: Cannot set property 'IntlMessageFormat' of undefined

Update:

Current workaround is to exclude the script and load it outside the bundle similar to webcomponentsjs

Shimming Recipe for Web Component Tester?

Trying to test components with WCT. Got the bundle loading in the test suite but none of the custom elements are available. Is there a shimming recipe to get WCT to see the elements defined in the bundle?

Resolve <link rel="import" href=...> as module import?

Sorry if i'm overlooking something but I've been trying to get my head around this for 2 days.
So i got the basic Polymer+Webpack setup working for the Starter kit.

Now i'm working on my own element.
My file structure is roughly as follows:

• bower_components
• public
• src
  • index.html
  • components
    • my-special-icon
      • my-special-icon.html

I have a simple index.html as the Webpack entrypoint. This includes my-special-icon component, which just displays a polymer icon.

public is my ouput folder.

my-special-icon.html has <link rel="import" href="../../../bower_components/iron-icons/maps-icons.html"> and then places the icon <iron-icon icon="maps:directions-bus"></iron-icon>.

My question, do i really need that 'ugly' <link> url?
Can i not have Webpack look up the 'iron-icons/maps-icons.html' like i can with my javascript imports?

And can i have index.html just contain a <link rel="import" href="my-special-icon/my-special-icon.html"> and have Webpack lookup the correct url in my components folder?

It works fine like it is now, but i can see it becoming a hassle when i start linking to my own elements, or moving stuff around in development stage.

Warn the user if there is a duplicated dom-module at compile time

This would be nice as compared to a runtime error :)

BUG: embedded fonts in html component not working properly

Hi,

When trying to use vaadin-grid component the icons in the header for sorting don't render properly when using polymer-webpack-loader they do work with the default polymer cli tools.

Steps to reproduce:

• Checkout webpack-polymer-loader
• cd demo
• update webpack-polymer-loader to 1.2.5 in package.json
• npm i && bower install
• bower install --save iron-ajax
• bower install --save vaadin-grid
• In demo/src/my-element.html add

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-sorter.html">

at the top and

<iron-ajax auto url="https://demo.vaadin.com/demo-data/1.0/people?count=10" handle-as="json" last-response="{{users}}"></iron-ajax>

<vaadin-grid items="[[users.result]]" style="width: 300px;">
  <vaadin-grid-column>
    <template class="header">
      <vaadin-grid-sorter path="firstName">First Name</vaadin-grid-sorter>
    </template>
    <template>[[item.firstName]]</template>
  </vaadin-grid-column>
  <vaadin-grid-column>
    <template class="header">
      <vaadin-grid-sorter path="lastName">Last Name</vaadin-grid-sorter>
    </template>
    <template>[[item.lastName]]</template>
  </vaadin-grid-column>
</vaadin-grid>

below the h1 in the template

• run npm start

Now the icons next to the first and lastname columns in the datagrid don't show up properly.

The font is embedded in the webcomponent here at line 29:
https://github.com/vaadin/vaadin-grid/blob/master/vaadin-grid-sorter.html

For a working example click here and select the sorting and filtering demo:
https://vaadin.com/elements/-/element/vaadin-grid#demos

Anything i can do to get the font icons to show up properly? (Without locally hacking the vaadin-grid component)

Consider supporting vanilla web component

First, thank you for starting this project.
I was thinking about how to build a web component web pack loader for a while.

Sure, I like Polymer and I already have done one project with it, but now I want to start a project with Vanilla Web Components.
I have tested the code below with the polymer-webpack-loader, and I think it's enough for Vanilla Web Components.

Here's a short code I started.

<link rel="import" href="./your-element.html">

<template id='my-element'>
  <h1>Hello, World! It's today.</h1>
  <your-element></your-element>
</template>
<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();

      const shadowRoot = this.attachShadow({mode: 'open'});
      const template = document.querySelector('#my-element');
      shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }

  window.customElements.define('my-element', MyElement);
</script>

The problem is that the above code can not get the template used in MyElement's constructor.
Transforming the above code will cause the template to be executed on the DOMContentLoaded event by RegisterHtmlTemplate.toBody, but the JavaScript inside the script will be executed immediately.
Of course, if you defer attribute on a transfiled script file, you can use it without problems, but if possible, I think polymer-webpack-loader should solve it.

I wonder if you guys are going to support the vanilla web component. If I so, I would be happy to send PR.

Use Travis for CI

Once #3 has been implemented, we should use Travis to automatically run tests for all PRs. In addition, Travis can automatically handle npm publishing for us.

Module not found: Error: Can't resolve polymer-element.html

I'm just trying to get your demo project up and running. I followed the steps, npm i, bower i, and npm start. It seems to fail saying "Module not found: Error: Can't resolve pathtopolymer-element.html" removes the '/''s in the path. I havent changed anything, just pulled down the demo and tried to run it and I am getting this error. Any help would be greatly appreciated! Thanks!

HTTP URL's incorrectly handled as local resources

From @dulimarta issue

When trying to include an absolute HTTP link, such as a Google Font, this gets compiled as a local resource. An example is when using any paper-element that depends on font-roboto package.

Module not found: Error: 
Can't resolve '${PROJECT_PATH}/bower_components/font-roboto/https:/fonts.googleapis.com/css?family=Roboto....

Steps to reproduce error

1. Use webpack adapted Starter Kit: git clone https://github.com/Banno/polymer-2-starter-kit-webpack.git
2. Import some paper element bower install --save paper-item
3. Include dependency <link rel="import" href="../bower_components/paper-item/paper-item.html">
4. Run webpack

Module not found error with style url(/...)

Having an absolute url: background-image: url('/images/image1.jpg'); in dom-module style throws Module not found: Error: Can't resolve '/images/image1.jpg' in '{Project root}\{path to dom-module}'.

It appears to be treating it as a relative path. Adding ?url=false option doesn't help - do you know how to fix it without changing the url itself? Thanks.

Cannot uglify the bundle

Putting a plugins: [new webpack.optimize.UglifyJsPlugin()] breaks the build with the following message

ERROR in main.js from UglifyJs
    Unexpected token: name (dedupeId)

Because you cannot uglify ES2015.

Loading of external stylesheets not working

Hi,

When not using polymer-webpack-loader, we can do the following:

<dom-module id="test">
    <template>
        <link rel="stylesheet" href="node_modules/plottable/plottable.css">
        <div class="plottable">
        </div>
    </template>
</dom-module>

However, when using polymer-webpack-loader (together with css-loader) this no longer works. Ie. the styles show up in the bundle, but the div is not styled.

The problem (I think) is that all links are first parsed from the dom-module, no matter the rel or the position in the dom-module. Hence, in the bundle, all styles are required before the actual dom-module. Then shadow-dom kicks in on the browser, and the styles are no longer part of the component, so no styling.

One solution would be:

• If a rel="stylesheet" is found, the parser should yield another stylus component, with the styles from the stylesheet encapsulated in that component.
• In the component that initially linked to the stylesheet, the following should be added <style includes="hash-for-stylus-component-or-something">

Another would be to encapsulate the stylesheet into the <style></style> tag of the linking component. (Would include stylesheet multiple times if referenced multiple times)

Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

Hi Guys,
I am hoping to use this loader with my project and very impressed with the this loaded so far. Great work!
I am however, getting error when I am trying to include another element in the project in a different directory imported in main element( root element )..

Meaning ; when I have

< main-element > < link rel="import" href="./subDir/another-element.html" > < another-element >< /another-element > < /main-element >

I get following error. Can you guys please let me know, if this is possible? OR how do i configure the loader for it to work?

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
at CustomElementRegistry.value (http://localhost:9000/bower_components/webcomponentsjs/custom-elements-es5-adapter.js:4:902)
at Object. (http://localhost:9000/bundle.js:10209:23)
at webpack_require (http://localhost:9000/bundle.js:20:30)
at Object. (http://localhost:9000/bundle.js:10145:1)
at webpack_require (http://localhost:9000/bundle.js:20:30)
at Object. (http://localhost:9000/bundle.js:1447:18)
at webpack_require (http://localhost:9000/bundle.js:20:30)
at userPolymer (http://localhost:9000/bundle.js:63:18)
at http://localhost:9000/bundle.js:66:10

Polymer 2.4 Compatibility

Does the loader support 2.4? Trying to decide on upgrading a 2.3.1 project using the loader to 2.4 or to wait until 3.0 support lands.

Fix the demo to correctly transpile the template registration helper script

If i checkout the latest project and try to run webpack --optimize-minimize on the demo it crashes with ERROR in bundle.js from UglifyJs Unexpected token: name (RegisterHtmlTemplate) [bundle.js:72,6]

I did some digging and it looks like the the polymer-webpack-loader does a strait up const RegisterHtmlTemplate = require('polymer-webpack-loader/register-html-template'); and then drops it in the bundle.js bypassing all babel processing.

Therefore we get a class RegisterHtmlTemplate { defenition in the bundle.js even if we're trying to output ES5 code that goes to uglify. Since classes aren't ES5 we get a crash.

Maybe rewrite register-html-template as ES5? or make sure it gets passed trough babel?