hmpl

The global hmpl object serves as the primary interface for template compilation and request serialization. This object is automatically available in the global scope without requiring explicit import (if connected via script).

Methods	Type	Description
compile	HMPLCompile	Transforms template strings into executable template functions
stringify	(info: HMPLRequestInfo) => string	Serializes request configuration objects to component string

import hmpl from "hmpl-js";
const { compile, stringify } = hmpl;

compile

The compile method processes HMPL template strings into executable template function.

Argument	Type	Description	Required
template	string	HMPL template string containing HTML and requests	Yes
options	HMPLCompileOptions	Compilation configuration parameters	No

const templateFn = hmpl.compile(`{{#request src="/api/test"}}{{/request}}`, {
  memo: true,
  autoBody: { formData: true },
  allowedContentTypes: ["text/html"],
  disallowedTags: ["script"],
  sanitize: false
});

template

The template is a string with HMPL markup (HTML + block helpers).

const template = `<div>{{#request src="/api/test"}}{{/request}}</div>`;
const templateFn = hmpl.compile(template);

options

The options argument establishes default behaviors for all requests generated by the compiled template function (except sanitizeConfig).

Property	Type	Default	Description
memo	boolean	false	Enables response caching for identical requests.
autoBody	boolean | HMPLAutoBodyOptions	false	Configures automatic request body generation.
allowedContentTypes	HMPLContentTypes	[“text/html”]	Permitted response Content-Type headers.
sanitize	HMPLSanitize	false	Enables HTML sanitization of server responses.
sanitizeConfig	Config (from DOMPurify)	undefined	Configuration object for the sanitize function from DOMPurify.
disallowedTags	HMPLDisallowedTags	[]	HTML elements to remove from responses.

const options = {
  memo: true,
  autoBody: {
    formData: true
  },
  allowedContentTypes: ["text/html"],
  sanitize: true,
  sanitizeConfig: { USE_PROFILES: { html: true } },
  disallowedTags: ["iframe"]
};
const templateFn = hmpl.compile(template, options);

Note

Some properties in options are also found in block helper attributes. If you use a property in options and then use it in attributes, the one in the attribute will overwrite the one in the options.

sanitizeConfig

The sanitizeConfig property specifies configuration settings for the sanitize function of DOMPurify.

compile(`...`, {
  sanitize: true,
  sanitizeConfig: { USE_PROFILES: { html: true } }
});

stringify

Converts an HMPLRequestInfo object to a string containing the request.

Argument	Type	Description	Required
options	HMPLRequestInfo	Request configuration interface	Yes

const info = hmpl.stringify({ src: "/api/test" });
// `{{#request src="/api/test"}}{{/request}}`
const templateFn = hmpl.compile(`${info}`);