大家好！今天，我想分享一下我們的專案經過10個月的努力所取得的一個小成果！看看吧（如果喜歡的話請用星星支持我們- 謝謝！❤️）。我們將討論這個專案是什麼以及它如何幫助您。
🐜 這是什麼專案？
該專案是一種模板語言，它將幫助您建立現代 Web 應用程式，而無需使用框架，只包含一個 API 和語言編譯器。
讓我們以一個包含登入名稱和密碼等欄位的小型註冊form為例。類似的東西已被全世界數以百萬計的網站所使用。
import { compile } from "hmpl-js";
const templateFn = compile(
`<div>
<form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form">
<div class="form-example">
<label for="login">Login: </label>
<input type="text" name="login" id="login" required /><br/>
<label for="password">Password: </label>
<input type="password" name="password" id="password" required />
</div>
<div class="form-example">
<input type="submit" value="Register!" />
</div>
</form>
<p>
{
{
"src":"/api/register",
"after":"submit:#form",
"repeat":false,
"indicators": [
{
"trigger": "pending",
"content": "<p>Loading...</p>"
}
]
}
}
</p>
</div>`
);
const initFn = (ctx) => {
const event = ctx.request.event;
return {
body: new FormData(event.target, event.submitter),
credentials: "same-origin",
};
};
const obj = templateFn(initFn);
const wrapper = document.getElementById("wrapper");
wrapper.appendChild(obj.response);這裡，如果一切正常，我們將從伺服器收到一個回應，該回應以簡單的 HTML 程式碼的形式發送，其中包含一個p標籤和Text ，例如Hello, ${login}!
{% 嵌入 https://x.com/aanthonymax/status/1901382820049592495 %}
還值得注意的是，我們收到了經過動態處理的文本，也就是說，我們從後端收到了我們的登入資訊。
👀 該專案能為您提供什麼幫助？
首先，該專案將幫助開發人員使他們的 Web 應用程式比在現代框架上編寫的應用程式小得多。
此圖表基於此存儲庫。這個結果是透過面向伺服器的方法實現的，我們將整個頁面、元件等移動到伺服器，而在客戶端留下一個空框架。
與 Alpine.js 和類似的函式庫不同，HMPL 具有基於透過fetch自訂請求的物件的相當方便的語法。
🌱 貢獻者
我要向那些提供幫助並使專案變得更好的貢獻者表示衷心的感謝。如果沒有他們的幫助，這將會非常困難，因為根本不可能實現應有的工作。
📢 計畫推廣
這樣一來，事情對我來說就總是很糟糕(ᵕ—ᴗ—)。我只注重發展，根本沒有考慮需要以某種方式來推動它或諸如此類的事情。對我來說，主要目標是不同的——每天解決那些必要的問題，如果沒有這些問題，今天就根本不可能使用它。
但至少我在 dev.to 上建立了一個博客，有時我也會在推特上發布訊息，我還建立了一個博客來分享我們的想法。我有時也會寫一些關於它和其他的東西，所以你可以查看所有的資源。
此外，您還可以在 GitHub 上為我們的專案點讚來支持我們！謝謝🌊！
{% cta https://github.com/hmpl-language/hmpl %} 💎 星級 HMPL ★{% endcta %}
👽 下一步是什麼？
製作一個很酷的模板語言，還有什麼辦法？ ）事實上，最近制定了一個路線圖，描述了到 2025 年需要做什麼。
{% 嵌入 https://x.com/aanthonymax/status/1891829442575581660 %}
任務不是很多，但隨著開發會不斷增加。畢竟有「競爭對手」HTMX 和 Apine.js，所以模板語言必須具備更多的功能才能成為最好的工具，不過，這也需要努力！
✅ 該專案是開源的
所以你也可以參加！這也意味著您可以將其用於商業目的：
倉庫：https: //github.com/hmpl-language/hmpl
🖋️ 結論
我想向所有透過點讚、評論、貢獻和公正活動支持該計畫的人表示衷心的感謝。這對我們來說非常重要，我希望我們能夠繼續為模板語言做一些很酷很有趣的事情！再次感謝大家❤️！
原文出處：https://dev.to/hmpljs/our-project-got-100-second-stars-on-github-2cl0
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式