polymer-html-loader v0.0.2

polymer-html-loader

A loader for webpack that lets you "just import" the HTML into your JavaScript, and automatically create the Polymer Template for you. This is intended for Polymer 3.

Install:

npm install save-dev polymer-html-loader extract-loader

Or

yarn add polymer-html-loader extract-loader -D

Requirements

• Polymer 3+ only!
• Webpack 5

How this works:

1. Include it in your Webpack Config. Include it "last" or after all the loaders. You will need to use extract-loader if you're using html-loader.

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
     {
        test: /\.(html)$/,
        use: [{
          loader: 'polymer-html-loader',
          options: {
            minify: true, // defaults to false
          },
        }, 'extract-loader', 'html-loader'],
      },
    ],
  },
};

2. Include your .html file in your JavaScript:

import { PolymerElement } from '@polymer/polymer/polymer-element.js';

import template from './my-element.html';


class MyElement extends PolymerElement {

  static get template() {
    return template;
  }

  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'polymer3-app',
      },
    };
  }
}

window.customElements.define('my-element', MyElement);

Options

Files Parameters

These are appended at the end of the HTML imports in your JavaScript file (Where the component is declared); E.g:

import htmlString from './my-element.html?skip';

Need an example?

Navigate to test-app, and execute: npm start. It will launch an express server @ localhost:3000. Then, run webpack. (Remember to have installed webpack-cli)

Why this loader

Writing HTML inside a JavaScript file is cumbersome and we lose autocomplete, and static analysis from our Text Editors and IDEs. Why not have an automatic way that creates these Polymer Templates for us?

Also, as of Polymer v3.5, using the 'html' template function as a regular javascript function (e.g html(htmlString)) is prohibited. This is due to v3.5's support for Trusted Types, which help prevent XSS attacks.

With this, you just include your .html template in your Polymer component, and you're set! The loader takes care for creating the file for you!

Ideas? Feedback?

Open a Github issue now! 😊