Neato Polyester Material

    html2js-loader

    1.0.8 • Public • Published

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

    Install

    npm i html2js-loader

    DownloadsWeekly Downloads

    15

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    14.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • afirus