阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

63 個專案實戰,寫出作品集,讓面試官眼前一亮!

立即開始免費試讀!

自版本 3 發布以來的一個半月內,模板語言已經擴展了新的功能和生態系統模組。

所有這些對於 Web 應用程式開發都非常有用,因為有時人們會開發出新功能,而您永遠不需要它們。這並不完全正確,但想像一下你有一部手機,他們加入了一個小部件或一些你永遠不會放在主螢幕上的東西。但這裡的情況並非如此。

這裡的一切都是根據最明顯的需求而準備的。

好吧,讓我們看看現在有什麼!


🔗 與 Vite.js 集成

其中一個主要創新是 HMPL 與 Vite.js 的整合。現在,您可以在專案中包含一個處理帶有.hmpl副檔名的檔案的插件。

vite.config.mjs

import { defineConfig } from "vite";
import hmplPlugin from "vite-plugin-hmpl";

export default defineConfig({
  plugins: [
    hmplPlugin({
      memo: true,
      sanitize: true,
    }),
  ],
});

值得注意的是,該模組是為 esm 編寫的,因為整個 Vite 環境以及 Rolldown 和 Vue.js 主要支援這一點。


↪ 嵌套塊

最後,在第 3 版發布一個半月後,我們完全實作了模板引擎中所謂的區塊助手。我們已經為這個語法工作了一年,但現在它已經非常完美,並且在未來的許多年裡都將具有現實意義。

<div>
  <button class="getHTML">Get HTML!</button>
  {{#request src="/api/test" after="click:.getHTML" repeat=false }} 
    {{#indicator trigger="pending"}}
      <p>Loading...</p>
    {{/indicator}} 
  {{/request}}
</div>

令人驚訝的是,最實用的東西卻是最明顯的。簡單地說,如果我們有一個帶有標籤的 DOM 樹,那麼其結構應該與標籤類似。這是一個非常重要的變化,因為現在眼睛只是對標記的外觀感到滿意。

{% cta https://github.com/hmpl-language/hmpl %} 💎 查看新功能 {% endcta %}


🖍️ 語法高亮

與 VS Code 擴充功能有關的另一個不錯的變化是,現在查詢區塊的語法在.hmpl.html檔案中突出顯示。

句法

這是一個更有用的改變,使得程式碼更易於導航。


👀 還有一些其他變化

這些變更包括增加對 HTTP TRACEOPTION方法的支援、修復錯誤、改進文件、更新範例和啟動應用程式等。


🔧 經過全面測試

由於整個模組的測試覆蓋率達到 100%,新功能有望以最少的錯誤運作。

經過全面測試

您可以在Codecov上查看包含測試的報告,測試本身位於測試資料夾中。


💬 回饋

您可以在評論中寫下您對新功能的想法,閱讀起來會很有趣!或者,有一個主題Discord 頻道用於提問和建議,我或其他人會嘗試回答!


✅ 該專案是開源的

所以你也可以參加!這也意味著您可以將其用於商業目的:

倉庫:https: //github.com/hmpl-language/hmpl

網址: https://hmpl-lang.dev

感謝您的閱讀❤️!

謝謝


原文出處:https://dev.to/hmpljs/we-have-prepared-a-lot-of-new-things-in-hmpljs-for-developers-31dn


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

63 個專案實戰,寫出作品集,讓面試官眼前一亮!

立即開始免費試讀!