{"id":17512019,"url":"https://github.com/hmpl-lang/hmpl","last_synced_at":"2025-03-05T17:32:14.616Z","repository":{"id":241613799,"uuid":"805899873","full_name":"hmpl-lang/hmpl","owner":"hmpl-lang","description":"Template language for displaying UI from server to client","archived":false,"fork":false,"pushed_at":"2024-10-16T20:51:17.000Z","size":202,"stargazers_count":56,"open_issues_count":5,"forks_count":11,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-10-17T06:08:34.990Z","etag":null,"topics":["fetch","fetch-api","hacktoberfest","hacktoberfest2024","javascript","language","rest","rest-api","templates"],"latest_commit_sha":null,"homepage":"https://hmpl-lang.github.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hmpl-lang.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-25T19:38:18.000Z","updated_at":"2024-10-16T21:11:00.000Z","dependencies_parsed_at":"2024-06-16T20:44:36.602Z","dependency_job_id":"4c4fbf55-9a54-4afe-81b2-3c2079d68a0e","html_url":"https://github.com/hmpl-lang/hmpl","commit_stats":null,"previous_names":["hmpljs/hmpl","hmpl-lang/hmpl"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmpl-lang%2Fhmpl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmpl-lang%2Fhmpl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmpl-lang%2Fhmpl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmpl-lang%2Fhmpl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hmpl-lang","download_url":"https://codeload.github.com/hmpl-lang/hmpl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":220038212,"owners_count":16586867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fetch","fetch-api","hacktoberfest","hacktoberfest2024","javascript","language","rest","rest-api","templates"],"created_at":"2024-10-20T06:00:35.655Z","updated_at":"2024-10-20T06:01:19.981Z","avatar_url":"https://github.com/hmpl-lang.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","JavaScript"],"sub_categories":["[Oct 20, 2024](/content/2024/10/20/README.md)"],"readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/hmpl-js\"\u003e\n        \u003cimg width=\"200\" height=\"200\" src=\"https://github.com/hmpl-lang/media/blob/main/logo_transparent.png\" alt=\"hmpl\" \u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003ehmpl - template language for displaying UI from server to client\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n\n[![npm-version](https://img.shields.io/npm/v/hmpl-js?logo=npm\u0026color=0183ff\u0026style=for-the-badge)](https://www.npmjs.com/package/hmpl-js)\n[![minzipped size](https://img.shields.io/bundlephobia/minzip/hmpl-js?logo=npm\u0026color=0183ff\u0026style=for-the-badge)](https://bundlephobia.com/package/hmpl-js) \n[![issues](https://img.shields.io/github/issues/hmpl-lang/hmpl?logo=github\u0026color=0183ff\u0026style=for-the-badge)](https://github.com/hmpl-lang/hmpl/issues) \n[![downloads](https://img.shields.io/npm/dm/hmpl-js?logo=npm\u0026color=0183ff\u0026style=for-the-badge)](https://www.npmjs.com/package/hmpl-js)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\u003ca href=\"https://hmpl-lang.github.io\"\u003eWebsite\u003c/a\u003e • \u003ca href=\"https://hmpl-lang.github.io/introduction.html\"\u003eDocumentation\u003c/a\u003e • \u003ca href=\"https://codesandbox.io/p/sandbox/basic-hmpl-example-dxlgfg\"\u003eDemo Sandbox\u003c/a\u003e • \u003ca href=\"https://hmpl-lang.github.io/examples.html\"\u003eExamples\u003c/a\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\u003cem\u003eBest alternative to htmx and alpine.js\u003c/em\u003e\u003c/div\u003e\n\n## About\n\n🌐 hmpl is a small template language for displaying UI from server to client. It is based on requests sent to the server via [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 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.\n\n## Example #1\n\n### HTML before\n\n```html\n\u003cdiv id=\"wrapper\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://unpkg.com/hmpl-js/dist/hmpl.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const templateFn = hmpl.compile(\n    `\u003cdiv\u003e\n       { \n         {\n           \"src\": \"http://localhost:8000/api/test\" \n         } \n       }\n    \u003c/div\u003e`\n  );\n\n  const wrapper = document.getElementById(\"wrapper\");\n\n  const obj = templateFn();\n\n  /**\n   * obj = {\n   *  response: div,\n   *  status: 200\n   * }\n   */\n\n  wrapper.appendChild(obj.response);\n\u003c/script\u003e\n```\n\n### API route - /api/test\n\n```html\n\u003cspan\u003e123\u003c/span\u003e\n```\n\n### HTML after\n\n```html\n\u003cdiv id=\"wrapper\"\u003e\n  \u003cdiv\u003e\u003cspan\u003e123\u003c/span\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Example #2\n\n```typescript\nimport { compile } from \"hmpl-js\";\n\nconst templateFn = compile(\n  `{ \n     {\n       \"src\": \"/api/test\",\n       \"indicators\": [\n           {\n             \"trigger\": \"pending\",\n             \"content\": \"\u003cdiv\u003eLoading...\u003c/div\u003e\"\n           },\n           {\n             \"trigger\": \"rejected\",\n             \"content\": \"\u003cdiv\u003eError\u003c/div\u003e\"\n           }\n       ] \n     } \n   }`\n);\n\nconst wrapper = document.getElementById(\"wrapper\");\n\nconst elementObj = templateFn({\n  credentials: \"same-origin\",\n  get: (prop, value) =\u003e {\n    if (prop === \"response\") {\n      if (value) {\n        wrapper.appendChild(value.content);\n      }\n    }\n  },\n});\n```\n\n## Why hmpl?\n\nThe HMPL template language extends the capabilities of regular HTML by adding query objects to the markup to reduce the code on the client. When creating modern web applications, frameworks and libraries are used, which entail the need to write a bunch of boilerplate code, as well as connecting additional modules, which again make JavaScript files very large. If you recall the same SPA, then there js files can reach several hundred megabytes, which makes the first site load speed quite long. All this can be avoided by generating the markup on the server and then loading it on the client. Example of comparing the file size of a web application on Vue and HMPL.js:\n\n```javascript\ncreateApp({\n  setup() {\n    const count = ref(0);\n    return {\n      count,\n    };\n  },\n  template: `\u003cdiv\u003e\n        \u003cbutton @click=\"count++\"\u003eClick!\u003c/button\u003e\n        \u003cdiv\u003eClicks: {{ count }}\u003c/div\u003e\n    \u003c/div\u003e`,\n}).mount(\"#app\");\n```\n\u003e Size: **226** bytes (4KB on disk)\n\n```javascript\ndocument.querySelector(\"#app\").append(\n  hmpl.compile(\n    `\u003cdiv\u003e\n        \u003cbutton\u003eClick!\u003c/button\u003e\n        \u003cdiv\u003eClicks: {{ \"src\": \"/api/clicks\", \"after\": \"click:button\" }}\u003c/div\u003e\n    \u003c/div\u003e`\n  )().response\n);\n```\n\u003e Size: **206** bytes (4KB on disk)\n\nIf we do not take into account that in one case we store the state on the client, and in the other on the server, as well as the response speed from the server, then we can see that with different file sizes we get the same interface. And this is only a small example. If we take large web applications, then the file sizes there can be several times smaller.\n\n## Installation\n\nhmpl 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.\n\n### Package Manager\n\nThis method involves downloading through npm or other package managers.\n\n```bash\nnpm i hmpl-js\n```\n\n\u003e [Node.js](https://nodejs.org) is required for npm.\n\nAlong the path node-modules/hmpl/dist you can find two files that contain a regular js file and a minified one.\n\n### Manual download\n\nYou 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.\n\n```html\n\u003cscript src=\"./hmpl.min.js\"\u003e\u003c/script\u003e\n```\n\nIf, 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).\n\n```html\n\u003cscript src=\"./hmpl.js\"\u003e\u003c/script\u003e\n```\n\nThe non-minified file is larger in size, but it is there as it is with all the formatting.\n\n### CDN\n\nThis method involves connecting the file through a third-party resource, which provides the ability to obtain a javascript file from npm via a link.\n\n```html\n\u003cscript src=\"https://unpkg.com/hmpl-js/dist/hmpl.min.js\"\u003e\u003c/script\u003e\n\u003c!--\n  integrity=\"sha384-...\"\n  crossorigin=\"anonymous\"\n--\u003e\n```\n\nThis 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.\n\n## Getting started\n\nAfter installation using any convenient method described in [Installation](https://hmpl-lang.github.io/installation.html), you can start working with the server in the following way:\n\n```html\n\u003cscript src=\"https://unpkg.com/hmpl-js/dist/hmpl.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const templateFn = compile(\n    `{ \n       {\n         \"src\": \"/api/test\" \n       } \n     }`\n  );\n  const elementObj = templateFn();\n\u003c/script\u003e\n```\n\nOr, if you need to work with hmpl as a module, there is a list of imported functions, such as `compile`:\n\n```typescript\nimport { compile } from \"hmpl-js\";\nconst templateFn = compile(\n  `{ \n     {\n       \"src\": \"/api/test\" \n     } \n   }`\n);\nconst elementObj = templateFn();\n```\n\nThese will be the two main ways to interact with the server. In future versions, the functionality will be expanded, but the methods themselves will not change.\n\n## Webpack\n\nModule has its own loader for files with the `.hmpl` extension. You can include [hmpl-loader](https://www.npmjs.com/package/hmpl-loader) and use the template language syntax in separate files:\n\n### main.hmpl\n\n```hmpl\n\u003cdiv\u003e\n  {\n    {\n      \"src\": \"/api/test\"\n    }\n  }\n\u003c/div\u003e\n```\n\n### main.js\n\n```javascript\nconst templateFn = require(\"./main.hmpl\");\n\nconst elementObj = templateFn();\n```\n\nFor the loader to work, it is better to use versions `0.0.2` or higher.\n\n## Changelog\n\n[Changelog](https://hmpl-lang.github.io/changelog.html)\n\n## Inspiration\n\nIf you like hmpl, it will be very cool if you rate the repository with a star ★\n\n## Contact\n\nEmail - camplejs@gmail.com\n\n## License\n\n[Licensed under MIT](https://github.com/hmpl-lang/hmpl/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmpl-lang%2Fhmpl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhmpl-lang%2Fhmpl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmpl-lang%2Fhmpl/lists"}