HMPL - new template language for fetching HTML from API

In this article I will talk about a new template language called HMPL. It allows you to easily load HTML from the API, eliminating a ton of unnecessary code.

The main goal of hmpl.js is to simplify working with the server by integrating small request structures into HTML. This can be compared to how, in files with a php extension, you could work with the response from the server received through a php request, but at the same time work with it directly through javascript. Using the example of simply getting the title from a button, you can understand how this template language can simplify your work

This template language allows you to repeat the string template that was specified. That is, in code it looks like this:

import { compile } from "hmpl-js";

const templateFn = compile(
  `<div>
    <request src="/api/test"></request>
  </div>`
);

const wrapper = document.getElementById("wrapper");

const obj1 = templateFn();

const obj2 = templateFn();

wrapper.appendChild(obj1.response);
wrapper.appendChild(obj2.response);

The module is based on fetch api, which allows you to work with the server using modern JS tools.

To interact with the fetch API, a settings object was also created, which is based on the RequestInit type. Example code:

const elementObj = templateFn({
  method: "POST",
  mode: "cors",
  cache: "no-cache",
  credentials: "same-origin",
  headers: {
    "Content-Type": "text/html",
  },
  redirect: "follow",
  get: (prop, value) => {},
  referrerPolicy: "no-referrer",
  body: JSON.stringify(data),
  signal: new AbortController().signal,
  integrity: "...",
  window: null,
  refferer: "about:client",
});

The syntax of the template language itself makes it possible to use files with the .hmpl extension to create practical and understandable project file structures, as well as to separate regular HTML from “modular” ones.

The module is very small in size (version 1.0.9). It weighs less than 100 kilobytes in npm. The minified file itself weighs even less.

The module has several connection options for maximum ease of use in tasks:

<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>

or

{
   "dependencies": {
    "hmpl-js": "latest",
   }
}

or

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.hmpl$/i,
        use: ["hmpl-loader"],
      }
    ]
  }
}

Examples of simple projects on the module:

https://github.com/hmpljs/examples

Other useful links:

https://hmpljs.github.io
https://github.com/hmpljs/hmpl-loader
https://github.com/hmpljs/hmpl
https://www.youtube.com/@antonmak1

If you are interested in this module, it would be cool if you write your opinion about it in the comments :). Thanks for reading the article!