我們在HMPL.js中為開發(fā)者準備了許多新東西!
从版本 3 发布后的一个半月里,模板语言已经扩展并新增了多种功能和生态系统组件。
这对网页应用开发来说真是太好了,因为有时候人们添加的新功能,你可能根本用不上。虽然这么说不完全准确,但想象一下你有一部手机,他们给你增加了一个功能,你根本不会用,也懒得把它放在主屏幕上。这里却不是这样。
这里的一切都是根据最简单的需要简单准备的。
好了,我们来看看现在有什么吧。
略
🔗 使用 Vite.js 集成 与 Vite.js 的集成(Note: Given the constraints of a single heading format, the most fluid translation would be "## 🔗 使用 Vite.js 集成". However, considering the output needs to be maintained as per the expert suggestion to add a space after the "#" symbol for common formatting practices in Chinese documentation, the translation is presented with a minor adjustment for clarity, though it slightly deviates from the original format due to space constraints and readability.)
Final translation after balancing all suggestions:
🔗 使用 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环境和Rollup、Vue.js主要支持ESM。
……
星号
星号
星号
嵌套区块终于,在版本3发布了一个半月以后,我们终于实现了所谓的模板引擎“块助手”功能。我们为此语法的实现努力了一年,现在它已经非常完美,并且在未来多年内都将是相关的。
<div>
<button class="getHTML">获取HTML内容!</button>
{{#request class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/api/test" after="click:.getHTML" repeat=false }}
{{#indicator trigger="pending"}}
<p>加载中,请稍候...</p>
{{/indicator}}
{{/request}}
</div>
进入全屏 退出全屏
最实用的东西竟然如此显而易见,这真是让人惊讶。简单点说,比如说,如果我们有一个带有标签的DOM树,那么它的结构应该和标签的布局相似。这是一个非常重要的变化,因为现在看起来非常舒服。
👉看看新功能,在这里
代码着色 🖍️
另一个不错的改变是,现在 VS Code 的插件会在 .hmpl
和 .html
文件中突出显示查询块语法。
这样的修改让代码更易读,更易理解。
👀 还有一些其他改动
这些更改包括添加对 HTTP TRACE
和 OPTION
方法的支持,修复了 bug,改进了文档,更新了示例和启动应用的代码,并增加了其他改进。
🔧 经过全面测试
由于模块实现的100%测试覆盖率,新功能应该会几乎不会出现错误。
你可以查看测试报告,该报告在 Codecov,而测试本身位于 test 文件夹里。
意见
你可以写下你对新功能的想法在评论区,看看别人的评论也会很有趣!或者,还有一个专门的Discord频道供大家提问和提建议,我会或者其他人会尽量回答大家的问题!
✅ 这个项目是开源的
所以你也可以一起参与!也就是说,你可以将其用于商业用途,
代码库:https://github.com/hmpl-language/hmpl
官网:https://hmpl-lang.dev
感谢您的阅读 ❤️!祝您有美好的一天!
说明:此图显示的是“谢谢”。
共同學習,寫下你的評論
評論加載中...
作者其他優(yōu)質文章