Оффлайн
- Регистрация
- 9 Май 2015
- Сообщения
- 1,486
- Баллы
- 155
Within a month and a half since version 3, the template language has been expanded with new functionality and ecosystem modules.
All of this is great for web app development because sometimes people make new features and you never need them. It's not entirely correct, but imagine you have a phone and they add a widget or something that you would never put on your home screen. That's not the case here.
Here everything was prepared simply by the most obvious needs.
Well, let's see what's there now!
? Integration with Vite.js
One of the main innovations is the integration of HMPL with Vite.js. Now, you can include a that processes files with the .hmpl extension in your projects.
vite.config.mjs
import { defineConfig } from "vite";
import hmplPlugin from "vite-plugin-hmpl";
export default defineConfig({
plugins: [
hmplPlugin({
memo: true,
sanitize: true,
}),
],
});
It is worth noting that the module is written for esm, since the entire Vite environment, as well as Rolldown and Vue.js, mainly support this.
Nested Blocks
Finally, a month and a half after version 3, we have a full implementation of what is called block-helpers in template engines. We have been working towards this syntax for a year, but now it is simply perfect and will be relevant for many years to come.
<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>
It's surprising that the most practical things are the most obvious. Simply, if we have a DOM tree with tags, then the structure should be similar to the tags. A very important change, because now the eye is simply pleased with how it looks in the markup.
?️ Syntax highlighting
Another nice change that concerns the extension for VS Code is that now the syntax of query blocks is highlighted in .hmpl and .html files.
This is more of a useful change to make the code easier to navigate.
? And a few other changes
These changes include adding support for HTTP TRACE and OPTION methods, bug fixes, improved documentation, updated examples and starter app, and more.
? Fully tested
The test coverage of the entire module is 100%, so this functionality will work with a minimum number of bugs.
You can view the report with tests on , and the tests themselves are in the folder.
? Feedback
You can write your thoughts about the new features in the comments, it will be interesting to read! Or, there is a thematic for questions and suggestions, there I or someone else will try to answer!
This project is Open Source
So you can take part in it too! This also means you can use it for commercial purposes:
Repo:
Website:
Thank you for reading
!
All of this is great for web app development because sometimes people make new features and you never need them. It's not entirely correct, but imagine you have a phone and they add a widget or something that you would never put on your home screen. That's not the case here.
Here everything was prepared simply by the most obvious needs.
Well, let's see what's there now!
? Integration with Vite.js
One of the main innovations is the integration of HMPL with Vite.js. Now, you can include a that processes files with the .hmpl extension in your projects.
vite.config.mjs
import { defineConfig } from "vite";
import hmplPlugin from "vite-plugin-hmpl";
export default defineConfig({
plugins: [
hmplPlugin({
memo: true,
sanitize: true,
}),
],
});
It is worth noting that the module is written for esm, since the entire Vite environment, as well as Rolldown and Vue.js, mainly support this.
Nested BlocksFinally, a month and a half after version 3, we have a full implementation of what is called block-helpers in template engines. We have been working towards this syntax for a year, but now it is simply perfect and will be relevant for many years to come.
<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>
It's surprising that the most practical things are the most obvious. Simply, if we have a DOM tree with tags, then the structure should be similar to the tags. A very important change, because now the eye is simply pleased with how it looks in the markup.
?️ Syntax highlighting
Another nice change that concerns the extension for VS Code is that now the syntax of query blocks is highlighted in .hmpl and .html files.
This is more of a useful change to make the code easier to navigate.
? And a few other changes
These changes include adding support for HTTP TRACE and OPTION methods, bug fixes, improved documentation, updated examples and starter app, and more.
? Fully tested
The test coverage of the entire module is 100%, so this functionality will work with a minimum number of bugs.
You can view the report with tests on , and the tests themselves are in the folder.
? Feedback
You can write your thoughts about the new features in the comments, it will be interesting to read! Or, there is a thematic for questions and suggestions, there I or someone else will try to answer!
This project is Open SourceSo you can take part in it too! This also means you can use it for commercial purposes:
Repo:
Website:
Thank you for reading
!