Hello everyone Today is a big day for the project and for me as a whole - a full-fledged launch of the project on Product Hunt is underway!

We've been working on the project for several months, and now I think it's possible to really show the world what we've created (with contributors)!

My main goal is to simply make a cool and high-quality template language that will make people's lives easier when working with server-side components.

By the way, the link itself is here:

HMPL - Server-oriented customizable templating for javascript | Product Hunt

🐜 Small template language for displaying UI from server to client. It is based on customizable requests sent to the server via fetch and processed into ready-made HTML. Reduce the size of js files and create interface like on a framework!

producthunt.com

What kind of project

By itself, the project is a template language that will allow you to mount components in the DOM from the server. This approach can reduce the size of the application bundle, while the user will see the same interface.

Vue App:

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `<div>
        <button @click="count++">Click!</button>
        <div>Clicks: {{ count }}</div>
    </div>`,
}).mount("#app");

document.querySelector("#app").append(
  hmpl.compile(
    `<div>
        <button>Click!</button>
        <div>Clicks: {{ "src": "/api/clicks", "after": "click:button" }}</div>
    </div>`
  )().response
);

Unlike other modules that provide similar functionality, HMPL seems to implement a golden mean when you are not working with HTML markup, not with JavaScript. Thanks to this, you can customize requests to the server, they themselves are sent by fetch, which is also cool, because today a lot of interesting functionality has been added for the new standard.

The project code itself, let's say it will be a small clicker, looks something like this:

import hmpl from "hmpl-js";

const templateFn = hmpl.compile(
  `<div>
      <button data-action="increment" id="btn">Click!</button>
      <div>Clicks: {{ "src": "/api/clicks", "after": "click:#btn" }}</div>
  </div>`
);

const clicker = templateFn(({ request: { event } }) => ({
  body: event.target.getAttribute("data-action"),
})).response;

document.querySelector("#app").append(clicker);

Here, in order to specify exactly what the server needs to do, I took the data-action attribute and configured RequestInit as I need it. The clicker itself will be displayed on the site in a block with a id app.

We sort of store components, no matter which site. This is cool because you can transfer components across different sites and not depend on the client at all. The code can be on a Vue site, as well as on WordPress and other platforms. There is no limitation in this, since the module can be downloaded both through npm and through importing a file from a CDN.

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

You can also include it as a file with the extension .hmpl:

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

That's how it works, I think it's a really useful module that can make people's lives easier when creating websites.

Creating a website :)

Impressions

I think it's cool when something like this is done. Having the opportunity to show the world what you did on a convenient platform is always interesting.

By the way, I liked the shotout system, when you can send respect to those platforms that helped create something cool. Now, some of the active ones are OpenAI (ChatGPT), Figma, GitHub, of course, and others.

Of course, i have to respect dev.to, how else?

In general, when I first saw the Product Hunt service, of course I was a little shocked that everything works like that. I saw that what I use every day is there. It really motivates me to do something!

Conclusion

I don't know what else to say, I'll just put this gif here.