🎙️We have prepared a lot of new things in HMPL.js for developers!

#webdev #javascript #programming #opensource

Within a month and a half since version 3, the template language has been expanded with new functionality and ecosystem modules.

All of this is great for web app development because sometimes people make new features and you never need them. It's not entirely correct, but imagine you have a phone and they add a widget or something that you would never put on your home screen. That's not the case here.

Here everything was prepared simply by the most obvious needs.

Well, let's see what's there now!

🔗 Integration with Vite.js

One of the main innovations is the integration of HMPL with Vite.js. Now, you can include a plugin that processes files with the .hmpl extension in your projects.

vite.config.mjs

import { defineConfig } from "vite";
import hmplPlugin from "vite-plugin-hmpl";

export default defineConfig({
  plugins: [
    hmplPlugin({
      memo: true,
      sanitize: true,
    }),
  ],
});

It is worth noting that the module is written for esm, since the entire Vite environment, as well as Rolldown and Vue.js, mainly support this.

↪ Nested Blocks

Finally, a month and a half after version 3, we have a full implementation of what is called block-helpers in template engines. We have been working towards this syntax for a year, but now it is simply perfect and will be relevant for many years to come.

<div>
  <button class="getHTML">Get HTML!</button>
  {{#request src="/api/test" after="click:.getHTML" repeat=false }} 
    {{#indicator trigger="pending"}}
      <p>Loading...</p>
    {{/indicator}} 
  {{/request}}
</div>

It's surprising that the most practical things are the most obvious. Simply, if we have a DOM tree with tags, then the structure should be similar to the tags. A very important change, because now the eye is simply pleased with how it looks in the markup.

💎 Check out the new functionality

🖍️ Syntax highlighting

Another nice change that concerns the extension for VS Code is that now the syntax of query blocks is highlighted in .hmpl and .html files.

This is more of a useful change to make the code easier to navigate.

👀 And a few other changes

These changes include adding support for HTTP TRACE and OPTION methods, bug fixes, improved documentation, updated examples and starter app, and more.

🔧 Fully tested

Thanks to 100% test coverage across the module, the new functionality is expected to work with minimal errors.

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

💬 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 ❤️!

Top comments (9)

Comment deleted

Anthony Max HMPL.js • May 21

Thanks!

Dotallio • May 21

Loving the Vite integration and the new block syntax - it's so much cleaner now. Have you seen any unexpected use cases pop up since adding these features?