🔧 🎙️We have implemented new features in HMPL to help developers make web apps smaller in size🔥

Today, we have prepared some cool features that can really help developers make web applications much smaller in size. These features themselves qualitatively complement the already good template language with additional and interesting functionality.

They have been in development for several months now and are also quite expandable, making the future much more promising and clear.

⚙️ Automatic body generation for RequestInit

One of the innovations is the generation of the body of the request to the server. This functionality is very convenient when working with forms, because you do not have to manually specify FormData.

import { compile } from "hmpl-js";

const templateFn = compile(
  `<div>
  <table>
    <caption>
      List of products in the store
    </caption>
    <thead>
      <tr>
        <th scope="col">Product name</th>
        <th scope="col">Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Coca Cola</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Lays</td>
        <td>4</td>
      </tr>
      {
        {
          "src":"/api/products",
          "after":"submit:#form",
          "autoBody":true,
          "indicators": [
            {
              "trigger": "pending",
              "content": "<tr><td>Loading...</td><td>Loading...</td></tr>"
            }
          ]
        }
      }
    </tbody>
  </table>
  <form id="form">
    <div class="form-example">
      <label>Product name: </label>
      <input type="text" name="product" id="product" required /><br/>
      <label>Quantity: </label>
      <input type="number" name="quantity" id="quantity" required />
    </div>
    <div class="form-example">
      <input type="submit" value="Add product" />
    </div>
  </form>
</div>
  `
);
const obj = templateFn({ credentials: "same-origin" });
const wrapper = document.getElementById("wrapper");
wrapper.appendChild(obj.response);

Here, we send a request to add a product to the table. If it weren't for this functionality, we would have to manually set the parameters via new FormData().set(), but this is done automatically.

// Detect dark theme var iframe = document.getElementById('tweet-1896132750966706564-355'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1896132750966706564&theme=dark" }

Also, it would be great if you supported the project with your star! Thanks ❤️!

💎 Star HMPL ★

🔄 Indicators

Indicators are HTML components that are displayed depending on the status of a server request.

{
  {
    "src": "http://localhost:5000/api/test",
    "indicators": [
       {
         "trigger": "pending",
         "content": "<p>Loading...</p>"
       },
       {
         "trigger": "rejected",
         "content": "<p>Error</p><button>reload</button>"
       }
    ]
  }
}

With their help, you can create custom loaders that will indicate to the user that the server has not yet returned a response.

🔧 Fully tested

The test coverage of the entire application is 100%, so this functionality will work with a minimum number of bugs.

You can view the report with tests on Codecov, and the tests themselves are in the test folder.

👀 Ready to make your web app smaller?

• Node Package Manager: You can download it via npm using the command npm i hmpl-js

• Content Delivery Network: You can include a file with a dependency via CDN using the following code:
  

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

• Locally: Or, there is a similar option with the second one, just download the file to your local machine.

• Starter project: There is also a starter project that can be deployed via the command npx degit hmpl-language/hello-hmpl-starter my-project

💬 Feedback

You can write your thoughts about the new features in the comments, it will be interesting to read! Or, there is a thematic discord channel for questions and suggestions, there I or someone else will try to answer!

✅ This project is Open Source

So you can take part in it too! This also means you can use it for commercial purposes:

Repo: https://github.com/hmpl-language/hmpl
Website: https://hmpl-lang.dev

Thank you for reading!