HTML2JS loader for webpack
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib fixed broken document fragment Dec 14, 2018
test fixed broken document fragment Dec 14, 2018
.gitignore initial Nov 11, 2018
LICENSE LICENSE Dec 12, 2018
README.md Update README.md Dec 14, 2018
index.js commonjs Nov 11, 2018
jest.config.js initial Nov 11, 2018
package-lock.json various & imports to commonjs & loader options validation fix Nov 13, 2018
package.json fixed broken document fragment Dec 14, 2018

README.md

html2js-loader

Exports HTML to javascript instructions. Create javascript functions from HTML templates.

GitHub license GitHub issues Twitter

Install

npm i -D html2js-loader

Usage

Add the html2js-loader to your webpack.config.js.

{
  test: /\.html$/,
  use: {
    loader: 'html2js-loader',
    options: {}
  }
}

Now, simply import/require any html. For example:

<!-- templates/list.html -->
<ul role="list">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>
const createList = require('./templates/list.html');

document.body.appendChild(createList());

this will be converted to the following javascript:

function createNode() {
  var e_0 = document.createElement("ul");
  e_0.setAttribute("role", "list");
  var e_1 = document.createElement("li");
  e_1.appendChild(document.createTextNode("Item one"));
  e_0.appendChild(e_1);
  var e_2 = document.createElement("li");
  e_2.appendChild(document.createTextNode("Item two"));
  e_0.appendChild(e_2);
  var e_3 = document.createElement("li");
  e_3.appendChild(document.createTextNode("Item three"));
  e_0.appendChild(e_3);
  return e_0;
}

You can use this online tool: html2js.esstudio.site which will convert your html to javascript on the fly.

The loader will optimize this code by injecting the following base code into your bundle:

module.exports = {
    document_createDocumentFragment: () => {
        return document.createDocumentFragment();
    },
    document_createElement: name => {
        return document.createElement(name);
    },
    document_createTextNode: text => {
        return document.createTextNode(text);
    },
    appendChild: (parent, child) => {
        parent.appendChild(child);
    },
    setAttribute: (elem, key, value) => {
        elem.setAttribute(key, value);
    }
};

This will enable the compiler to name mangle these function calls. For example if we convert the following html:

<ul role="list">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

That will produce the following minified base code (this will only be included once):

var a=function(e){return document.createElement(e)},b=function(e){return document.createTextNode(e)},c=function(e,f,g){return e.setAttribute(f,g)},d=function(e,f){return e.appendChild(f)}

And the following minified javascript instructions for the html template:

var e=a("ul");c(e,"role","list");var f=a("li");d(f,b("Item one"));d(e,f);f=a("li");d(f,b("Item two"));d(e,f);f=a("li");d(f,b("Item three"));d(e,f);