https://github.com/hmpl-language/vite-plugin-hmpl
Plugin for files with .hmpl extension for Vite
https://github.com/hmpl-language/vite-plugin-hmpl
hmpl hmpl-js vite vite-plugin vite-plugin-hmpl vitejs
Last synced: 5 months ago
JSON representation
Plugin for files with .hmpl extension for Vite
- Host: GitHub
- URL: https://github.com/hmpl-language/vite-plugin-hmpl
- Owner: hmpl-language
- License: mit
- Created: 2025-05-08T20:03:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-11-15T22:07:04.000Z (8 months ago)
- Last Synced: 2026-02-27T16:34:44.154Z (5 months ago)
- Topics: hmpl, hmpl-js, vite, vite-plugin, vite-plugin-hmpl, vitejs
- Language: JavaScript
- Homepage: https://hmpl-lang.dev/vite-plugin
- Size: 17.6 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-hmpl
[](https://www.npmjs.com/package/vite-plugin-hmpl)
This Vite plugin is designed for compiling files with the `.hmpl` extension using the [hmpl-js](https://www.npmjs.com/package/hmpl-js) package. It allows you to use HMPL templates directly in your Vite-powered projects.
> The plugin works with `hmpl-js` version 1.0.4 or higher.
## Installation
```bash
npm install --save-dev vite-plugin-hmpl
```
## Usage
In your `vite.config.js` file, add the following configuration:
```javascript
import { defineConfig } from "vite";
import hmplPlugin from "vite-plugin-hmpl";
export default defineConfig({
plugins: [
hmplPlugin({
memo: true,
sanitize: true,
}),
],
});
```
### Example
With this plugin, you can import `.hmpl` files as templates in your JavaScript code.
#### template.hmpl
```html
{{#request src="/api/test"}} {{/request}}
```
#### main.js
```javascript
import templateFn from "./template.hmpl";
const elementObj = templateFn();
```
## Plugin Options
The plugin supports various configuration options. Here are the most commonly used ones:
```javascript
hmplPlugin({
memo: true,
sanitize: true,
autoBody: { formData: true },
allowedContentTypes: ["text/html"],
disallowedTags: ["script", "style"],
include: ["src/templates/**/*.hmpl"], // Glob pattern to include specific files
exclude: ["**/*.test.hmpl"], // Glob pattern to exclude specific files
});
```
### Option Descriptions:
- **include**: (string or array of strings) Glob pattern to specify which files to include. Defaults to `**/*.hmpl`.
- **exclude**: (string or array of strings) Glob pattern to specify which files to exclude. Defaults to `**/node_modules/**`.
The full list of options is described in the [HMPL language specification](https://spec.hmpl-lang.dev/#options).
## Changelog
You can view the changelog for this plugin on the [GitHub releases page](https://github.com/hmpl-language/vite-plugin-hmpl/releases).
## Contributors
This project was created in collaboration with [Saptarshi Mula](https://github.com/toyaAoi). Many thanks to him!
## License
This project is licensed under the [MIT License](https://github.com/hmpl-language/vite-plugin-hmpl/blob/main/LICENSE).