fenom-js

v1.0.1

Published

14 days ago

Simple and fast template engine

Downloads

180

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

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

<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 и vituum

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

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

import { defineConfig } from 'vite';
import { viteFenomPlugin } from 'fenom-js/plugins/vite';

export default defineConfig(({ mode }) => {
  const isBuild = mode === 'production';

  return {
    plugins: [
      viteFenomPlugin({
        root: './src/demo',        // Корень шаблонов
        dataDir: './src/demo/data', // Папка с JSON-данными (контекст)
        pagesDir: 'pages',         // Подпапка с основными шаблонами (например, pages/index.tpl)
        scanAll: true,             // Если true — все include тоже станут отдельными страницами
        minify: isBuild            // Минификация HTML только при сборке
      })
    ],
    // Опционально: настройка сервера
    server: {
      open: '/dist/index.html'
    }
  };
});

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

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

📦 Что делает scanAll: true?

При scanAll: false — рендерятся только файлы из pagesDir. При scanAll: true — все .tpl файлы, даже в подпапках и подключаемые через {include}, становятся отдельными HTML-страницами.

Пример: blocks/header.tpl → /blocks/header.html

Статус

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

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

Ссылки

🐱 GitHub