今天，我們準備了一些很酷的功能，它們可以真正幫助開發人員大大縮小 Web 應用程式的體積。這些特性本身從品質上補充了原本就很好的模板語言，增加了一些有趣的功能。
它們已經開發了幾個月，並且具有相當強的可擴展性，使得未來更加光明和清晰。
⚙️ 自動產生RequestInit的body
其中一項創新是產生向伺服器發出的請求body 。此功能在使用表單時非常方便，因為您不必手動指定FormData 。
import { compile } from "hmpl-js";
const templateFn = compile(
`<div>
<table>
<caption>
List of products in the store
</caption>
<thead>
<tr>
<th scope="col">Product name</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Coca Cola</td>
<td>10</td>
</tr>
<tr>
<td>Lays</td>
<td>4</td>
</tr>
{
{
"src":"/api/products",
"after":"submit:#form",
"autoBody":true,
"indicators": [
{
"trigger": "pending",
"content": "<tr><td>Loading...</td><td>Loading...</td></tr>"
}
]
}
}
</tbody>
</table>
<form id="form">
<div class="form-example">
<label>Product name: </label>
<input type="text" name="product" id="product" required /><br/>
<label>Quantity: </label>
<input type="number" name="quantity" id="quantity" required />
</div>
<div class="form-example">
<input type="submit" value="Add product" />
</div>
</form>
</div>
`
);
const obj = templateFn({ credentials: "same-origin" });
const wrapper = document.getElementById("wrapper");
wrapper.appendChild(obj.response);在這裡，我們發送一個請求來將產品加入到表中。如果沒有這個功能，我們就必須透過new FormData().set()手動設定參數，但這是自動完成的。
{% 嵌入 https://x.com/aanthonymax/status/1896132750966706564 %}
此外，如果您能用自己的明星來支持該專案那就太好了！謝謝❤️！
{% cta https://github.com/hmpl-language/hmpl %} 💎 星級 HMPL ★{% endcta %}
🔄 指標
指示器是根據伺服器請求的狀態顯示的 HTML 元件。
{
{
"src": "http://localhost:5000/api/test",
"indicators": [
{
"trigger": "pending",
"content": "<p>Loading...</p>"
},
{
"trigger": "rejected",
"content": "<p>Error</p><button>reload</button>"
}
]
}
}在它們的幫助下，您可以建立自訂載入器，向使用者指示伺服器尚未回傳回應。
🔧 經過全面測試
整個應用程式的測試覆蓋率為 100%，因此此功能將以最少的錯誤數量執行。
您可以在Codecov上查看包含測試的報告，測試本身位於測試資料夾中。
👀 準備好讓你的 Web 應用變得更小了嗎？
-
Node 套件管理器：你可以使用指令
npm i hmpl-js透過 npm 下載它 -
內容傳遞網路：您可以使用以下程式碼透過 CDN 包含具有依賴關係的檔案：
<script src="https://unpkg.com/json5/dist/index.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>-
本地：或者，有一個與第二個類似的選項，只需將檔案下載到本機。
-
啟動
npx degit hmpl-language/hello-hmpl-starter my-projectproject來部署
💬 回饋
您可以在評論中寫下您對新功能的想法，閱讀起來會很有趣！或者，有一個用於提問和建議的主題不和諧頻道，我或其他人會嘗試回答！
✅ 該專案是開源的
所以你也可以參加！這也意味著您可以將其用於商業目的：
倉庫：https: //github.com/hmpl-language/hmpl
感謝您的閱讀！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式