Simple and fast template engine
npm install vite-plugin-fenomfenom.php (MODX Revo)
include и extends (ограничение среды)
bash
npm install fenom-js
`
🖥️Пример использования
$3
`html
Привет, {$name}!
{if $isAdmin}
Вы — администратор.
{/if}
`
$3
`javascript
import { FenomJs } from "fenom-js";
// Получаем HTML шаблона
const templateHTML = document.body.innerHTML;
// Данные
const data = {
name: "Анна",
isAdmin: true,
};
// Рендерим
const html = FenomJs(templateHTML, {
context: data,
});
// Вставляем обратно
document.body.innerHTML = html;
`
🧩 vite-plugin-fenom
📌 Это отдельный пакет, для работы с vite
`bash
npm install vite-plugin-fenom --save-dev
`
⚙️ Конфигурация (vite.config.ts или vite.config.js)
`ts
import { defineConfig } from "vite";
import fenom from "vite-plugin-fenom";
export default defineConfig({
plugins: [
fenom({
pages: "src/pages/",
data: "src/data/*/.json",
root: "src/",
}),
],
build: {
outDir: "dist",
emptyOutDir: true,
rollupOptions: {
input: ["src/scripts/main.ts", "src/styles/style.css"],
},
},
});
`
$3
`
src/demo/
├── data/
│ ├── site.json // Глобальные переменные: {$site.title}
│ └── pages/
│ ├── index.json // Контекст для index.tpl
│ └── catalog.json // Контекст для catalog.tpl
├── pages/
│ ├── index.tpl
│ └── catalog.tpl
├── blocks/
│ └── header.tpl // Может использоваться через {include 'blocks/header.tpl'}
└── layouts/
└── main.tpl // Шаблон через {extends 'layouts/main.tpl'}
``