vite-plugin-fenom

v1.0.8

Published

5 days ago

Simple and fast template engine

0High
0Medium
0Low

alekseevich_psk

template engine html

⚙️ 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

🖥️ Или подключи напрямую в браузер:

<script type="module">
  import { FenomJs } from './path/to/fenom-js/index.js';
</script>

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

В шаблонах .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 context = {
  name: 'Анна',
  isAdmin: true
};

// Рендерим
const html = FenomJs(templateHTML, context);

// Вставляем обратно
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