- TechDailyFeed - Your Daily Dose of Tech News, AI, Programming, and More

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( ` List of products in the store Product name Quantity Coca Cola 10 Lays 4 { { "src":"/api/products", "after":"submit:#form", "autoBody":true, "indicators": [ { "trigger": "pending", "content": "Loading...Loading..." } ] } } Product name: Quantity: ` ); 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 ❤️!

Mar 2, 2025 - 16:33

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(
  `
  
      {
        {
          "src":"/api/products",
          "after":"submit:#form",
          "autoBody":true,
          "indicators": [
            {
              "trigger": "pending",
              "content": ""
            }
          ]
        }
      }
    
    
      List of products in the store
    
    
      
        Product name
        Quantity
      
    
    
      
        Coca Cola
        10
      
      
        Lays
        4
      
Loading... Loading...
  
  
    
      Product name: 
      

      Quantity: 
      
    
    
      
    
  

  `
);
const obj = templateFn({ credentials: "same-origin" });
const wrapper = document.getElementById("wrapper");
wrapper.appendChild(obj.response);

List of products in the store
Product name	Quantity
Coca Cola	10
Lays	4
Loading...	Loading...

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