fenom-js

v1.0.13

Published

5 days ago

Simple and fast template engine

0High
0Medium
0Low

alekseevich_psk

template engine html fenom

⚙️ 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-страницы для локальной верстки

🖥️ Установка

npm install fenom-js

🖥️Пример использования

В шаблонах .tpl

<body>
    <h1>Привет, {$name}!</h1>
    {if $isAdmin}
    <p>Вы — администратор.</p>
    {/if}
</body>

Js context (В браузере)

import { FenomJs } from "fenom-js";

// Получаем HTML шаблона
const templateHTML = document.body.innerHTML;

// Данные
const data = {
    name: "Анна",
    isAdmin: true,
};

// Рендерим
const html = await FenomJs(templateHTML, {
    context: data,
});

// Вставляем обратно
document.body.innerHTML = html;

🧩 vite-plugin-fenom

📌 Это отдельный пакет, для работы с vite

npm install vite-plugin-fenom --save-dev

⚙️ Конфигурация (vite.config.ts или vite.config.js)

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"],
        },
    },
});

🗂️ Структура проекта (пример)

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