@genkaok/vite-plugin-fenom

v2026.5.0

Published

18 hours ago

Simple and fast template engine

0High
0Medium
0Low

genkaok

template engine html

fenom-js

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

Асинхронный, без зависимости от сборщиков, работает в браузере и в Node.js.

Возможности

Переменные: {$var}
Условия: {if}, {elseif}, {else}
Операторы: ==, !=, !==, >, <, >=, <=, ===, !, &&, ||, in
Тернарный оператор: {$age >= 18 ? 'Да' : 'Нет'}
Циклы: {foreach} с вложенностью, синтаксис $key => $item, {foreachelse}
{switch} / {case} / {default}
{set $var = value}, {$var++}, {$var--}, {$var += N}
Фильтры через |: {$name|upper}, {$date|date:"Y-m-d"}, {$var|default:"...")}
Комментарии: {* текст *}
Исключение блоков: {ignore}...{/ignore}
Наследование шаблонов: {extends}, {block}
Работает в браузере и Node.js
В браузере: без {include} и {extends} (ограничение среды)

Установка

npm install @genkaok/fenom-js

Vite-плагин

npm install @genkaok/vite-plugin-fenom --save-dev

Использование

В браузере

import { FenomJs } from "@genkaok/fenom-js";

const html = await FenomJs(templateHTML, {
    context: { name: "Анна", isAdmin: true },
});

В Node.js

import { FenomJs } from "@genkaok/fenom-js/node";

const html = await FenomJs(template, {
    context: { name: "Анна" },
    loader: async (path) => fs.readFile(path, "utf-8"),
});

Шаблон .tpl

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

    {foreach $items as $item}
    <li>{$item|upper}</li>
    {foreachelse}
    <li>Нет элементов</li>
    {/foreach}

    {switch $role}
    {case "admin"}Админ{/case}
    {case "user"}Пользователь{/case}
    {default}Гость{/default}
    {/switch}
</body>

vite-plugin-fenom

// vite.config.ts
import { defineConfig } from "vite";
import fenom from "@genkaok/vite-plugin-fenom";

export default defineConfig({
    plugins: [
        fenom({
            pages: "src/pages/",
            data: "src/data/**/*.json",
            root: "src/",
        }),
    ],
});

Структура проекта

src/
├── data/
│   ├── site.json           // {$site.title}
│   └── pages/
│       └── index.json      // контекст для index.tpl
├── pages/
│   └── index.tpl
├── blocks/
│   └── header.tpl
└── layouts/
    └── main.tpl            // {extends 'layouts/main.tpl'}

Разработка

pnpm install
pnpm build:all
pnpm test

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