Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hmpl-language/hmpl
Server-oriented customizable templating for JavaScript
https://github.com/hmpl-language/hmpl
fetch hmpl rest-api server-side template-language templates templating
Last synced: about 2 months ago
JSON representation
Server-oriented customizable templating for JavaScript
- Host: GitHub
- URL: https://github.com/hmpl-language/hmpl
- Owner: hmpl-language
- License: mit
- Created: 2024-11-04T22:13:15.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-19T22:03:38.000Z (about 2 months ago)
- Last Synced: 2024-11-19T22:27:42.030Z (about 2 months ago)
- Topics: fetch, hmpl, rest-api, server-side, template-language, templates, templating
- Language: TypeScript
- Homepage: https://hmpl-lang.dev
- Size: 495 KB
- Stars: 9
- Watchers: 1
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-for-beginners - HMPL - oriented customizable templating for JavaScript. (JavaScript)
- trackawesomelist - HMPL (⭐8) - oriented customizable templating for JavaScript. (Recently Updated / [Nov 17, 2024](/content/2024/11/17/README.md))
- fucking-awesome-for-beginners - HMPL - oriented customizable templating for JavaScript. (JavaScript)
README
[](https://www.npmjs.com/package/hmpl-js)
[](https://bundlephobia.com/package/hmpl-js)
[](https://codecov.io/github/hmpl-language/hmpl)
[](https://github.com/hmpl-language/hmpl/issues)
[](https://x.com/hmpljs)
hmpl is a 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 your javascript files and display the same UI as if it was written in a modern framework.
## Usage
```javascript
import hmpl from "hmpl-js";
const templateFn = hmpl.compile(
`
Click!
Clicks: {{ "src": "/api/clicks", "after": "click:#btn" }}
`
);
const clicker = templateFn(({ request: { event } }) => ({
body: event.target.getAttribute("data-action"),
})).response;
document.querySelector("#app").append(clicker);
```
## Why HMPL?
Using HMPL, you can multiply reduce the size of the application bundle. Full customization of the request based on the modern `fetch` standard, as well as support for all the functionality necessary for modern work in applications (request indicator, sending by event, automatic generation of `body` for the `form`, caching) and the syntax of the object in the markup, which requires a minimum number of characters, will help to build interaction with the server and client as efficiently as possible.
## Features
- **Customizable**: Send a custom request to the server when receiving the UI
- **Memory Preserving**: Reduce file sizes on the client by several times
- **Based on Fetch API**: Use a modern standard instead of `XMLHTTPRequest`
- **Server-oriented**: Work with the server directly through markup and with a little js
- **Generate thousands of DOM nodes from a single template**: Work with large components not only on the server but also on the client
- **Simple**: Get ready-made UI from the server by writing a couple of lines of familiar object syntax
- **Flexible**: Can be used in almost any project due to not only working through a script, but also working in files with the `.hmpl` extension
- **No dependencies**: Can connect from one js file
- **Small bundle size**: Lots of functionality in a couple of kilobytes
## Installation
hmpl can be installed in several ways, which are described in this article. This tool is a simple javascript file that is connected in the usual way through a `script`, or using the `import` construct in an environment that supports this (webpack build, parcel build etc.). The first and easiest way is to install using a CDN.
### Package Manager
This method involves downloading through npm or other package managers.
```bash
npm i hmpl-js
```
> [Node.js](https://nodejs.org) is required for npm.
Along the path node-modules/hmpl/dist you can find two files that contain a regular js file and a minified one.
### Manual download
You can install the package by simply [downloading](https://unpkg.com/hmpl-js/dist/hmpl.min.js) it as a file and moving it to the project folder.
```html
```
If, for some reason, you do not need the minified file, then you can download the full file from this [link](https://unpkg.com/hmpl-js/dist/hmpl.js).
```html
```
The non-minified file is larger in size, but it is there as it is with all the formatting.
### CDN
This method involves connecting the file through a third-party resource, which provides the ability to obtain a javascript file from npm via a link.
```html
```
This resource could be unpkg, skypack or other resources. The examples include unpkg simply because it is one of the most popular and its url by characters is not so long.
## Ecosystem
## Community support
The [documentation](https://hmpl-lang.dev/introduction.html) contains main information on how the HMPL template language works. If you have any questions about how HMPL works, you can use the following resources:
- [Github](https://github.com/hmpl-language/hmpl) - In the discussion and issues sections you can ask any question you are interested in.
- [𝕏 (Twitter)](https://x.com/hmpljs) - There is a lot of interesting stuff there, concerning the template language and not only :)
You can also ask your question on [Stack Overflow](https://stackoverflow.com/) and address it in the resources described above.
## Contribution
We have a [Contributing Guide](https://github.com/hmpl-language/hmpl/blob/main/CONTRIBUTING.md) that describes the main steps for contributing to the project.
Thank you to all the people who have already contributed to HMPL, or related projects!
## Fossa status
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fhmpl-language%2Fhmpl?ref=badge_large&issueType=license)