hmpl - work with server-side HTML with ease

About

🌐 hmpl is a small library for working with server-side html. It is based on requests sent to the server via fetch and processed into ready-made HTML. The word hmpl is a combination of the old name cample-html into one word. h-html, mpl-cample.

Example #1

HTML before

<div>
  <template
    data-hmpl
    data-src="/api/test"
    data-method="get"
  ></template>
</div>

<script src="https://unpkg.com/hmpl-js@0.0.4"></script>

Server route - /api/test

<div>123</div>

HTML after

<div>
  <div>123</div>
</div>

<script src="https://unpkg.com/hmpl-js@0.0.4"></script>

Example #2

const templateFn = hmpl.createTemplate(
  `<template data-hmpl data-src="/api/test" data-method="get"></template>`
);

// (After the response arrives from the server) { element = template (HTMLTemplateElement type), status = 200 }
const elementObj = templateFn({
  credentials: "same-origin",
  get: (prop, value) => {
    if (prop === "element") {
      console.log(value);
    }
  },
});

Why hmpl?

hmpl is easy to use and effective in practice. You can literally download reusable HTML from the server in just a couple of clicks, which will reduce a huge amount of code and also simplify the creation of the user interface. Also, this product is open-source under the MIT license, which allows it to be used for commercial purposes.

Here are a few small advantages that the module has:

Light weight
Ability to work with template mounting directly via js
Request Status Update
Fairly safe HTML processing without outerHTML and similar functions, which minimizes the likelihood of errors
Fully documented

And other advantages that will be visible when working with the module.

Installation

hmpl can be installed in several ways, which are described in this article. This tool is a simple javascript file that is connected in the usual way through a script, or using the import construct in an environment that supports this (webpack build, parcel build etc.). The first and easiest way is to install using a CDN.

Package Manager

This method involves downloading through npm or other package managers.

npm i hmpl

Node.js is required for npm.

Along the path node-modules/hmpl/dist you can find two files that contain a regular js file and a minified one.

Manual download

You can install the package by simply downloading it as a file and moving it to the project folder.

<script src="./hmpl.min.js"></script>

If, for some reason, you do not need the minified file, then you can download the full file from this link.

<script src="./hmpl.js"></script>

The non-minified file is larger in size, but it is there as it is with all the formatting.

CDN

This method involves connecting the file through a third-party resource, which provides the ability to obtain a javascript file from npm via a link.

<script
  src="https://unpkg.com/hmpl-js@0.0.4"
></script>
<!--
  integrity="sha384-..."
  crossorigin="anonymous"
-->

This resource could be unpkg, skypack or other resources. The examples include unpkg simply because it is one of the most popular and its url by characters is not so long.

Getting started

After installation using any convenient method described in Installation, you can start working with the server in the following way:

<div>
  <template data-hmpl data-src="/api/test" data-method="get"></template>
</div>

Or, if the html method is not suitable, then in hmpl there is a hmpl object that provides a list of functions and methods that allow you to conveniently work with the server. Usage example:

const templateFn = hmpl.createTemplate(
  `<template data-hmpl data-src="/api/test" data-method="get"></template>`
);

// (After the response arrives from the server) { element = template (HTMLTemplateElement type), status = 200 }
const elementObj = templateFn({
  credentials: "same-origin",
  get: (prop, value) => {
    if (prop === "element") {
      console.log(value);
    }
  },
});

These will be the two main ways to interact with the server. In future versions, the functionality will be expanded, but the methods themselves will not change.

Changelog

Inspiration

If you like hmpl, it will be very cool if you rate the repository with a star ★

Contact

Email - camplejs@gmail.com

License

Licensed under MIT