⚙️ fenom-js

JavaScript-шаблонизатор, разрабатывался как максимально близкий аналог шаблонизатора Fenom для PHP, используемого в CMS MODX Revolution, чтобы верстальщики и разработчики могли работать локально без запуска сервера.

🔧 Асинхронный, без зависимости от сборщиков, работает в браузере и локально — идеален для верстки и прототипирования.

📌 В бета-версии. Пригоден для тестирования и локального использования.

---

💬 Особенности

- Синтаксис, близкий к fenom.php (MODX Revo)
- Поддерживает:
- - Переменные: {$var}
- - Условия: {if}
- - Поддержка: ==, !=, >, <, >=, <=, ===, !==, !, &&, ||, in (для массивов).
- - Тернарные и логические операторы: {$age >= 18 ? 'Да' : 'Нет'}
- - Циклы {foreach} + Поддержка вложенных циклов.
- - Фильтры: Применяются через | (как в оригинальном Fenom):
- - Исключение: {ignore}
- - Комментарии: { _ комментарий _ }
- Работает в браузере и в Node.js
- В браузере: без include и extends (ограничение среды)
- Легко внедряется в HTML-страницы для локальной верстки

---

🖥️ Установка

``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'}
``

Статус

🟡 Бета-версия — API может меняться.
Приветствуются предложения, PR!

Сообщить об ошибке

Ссылки

🐱 GitHub