npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

lite-pattern

v1.0.7

Published

Данный проект является шаблонизатором для систем. За аналог был взят шаблонизатор twig, но с поправкой на использование кириллической раскладке клавиатуры.

Downloads

7

Readme

О проекте

Данный проект является шаблонизатором для систем. За аналог был взят шаблонизатор twig, но с поправкой на использование кириллической раскладке клавиатуры.

Так определители шаблона twig в виде {{ }} был заменен на [[ ]], а {% %} на [% %] Также была добавлена поддержка кириллицы в командах

UPD (2023-10-08):

Добавлена возможность вставки произвольного js кода, через команду [? ?]

UPD (2023-10-08):

BugFix: при использовании символа ` исправлена ошибка форирования некорректного кода.

Также добавлена возможность добавлять команды шаблонизатора и дополнительные функции

Установка:

npm install lite-pattern --save

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

Пример Шаблона:

<div>Начало шаблона</div>

<!-- Поддержка условий "if" -->
[%if (param1===param2)%]

<!-- Поддержка функций расширения по аналогии с twig используя "|" --> 
[[param1|uppercase|split("")|join("_")]] 
[%endif%]

<!-- Поддержка определения переменных и JS функций -->
[%let json = JSON.stringify(paramArray,null,4)%]

<!-- Аналог простого "echo" --> 
<div>[[json]]</div>

[?
let dateEnd = new Date();
dateEnd = dateEnd.toISOString().slice(0, 10);
?]
<div>
    [[dateEnd]]
</div>

<div>TEST LET</div>
[% let test = param %]

<div>TEST IF</div>
[%if (test==="test param")%]
    <div>TEST FOR</div>
    <!-- Поддержка циклов "for ... of" --> 
    [%for (element of paramArray)%]
        <div>TEST ECHO</div>
        <p>[[element]]</p>
    [%endfor%]
    <div>TEST ENDIF</div>
[%endif%]
<div>Конец шаблона</div>

Вызов шаблонизатора:

//Подключаем шаблонизатор
const {renderCallback} = require("lite-pattern");

//Присваиваем шаблон в переменную
let template = `...шаблон...`

//Подготавливаем переменные для шаблона
let tempalteParams = {
    param1: "hello world",
    param2: "hello world",
    param: "test param",
    paramArray: ["1", "2", "3", "4"]
};

//Определяем callback функцию которая будет вызвана после генерации шаблона 
const callback = (resolve = undefined, error = undefined) => {
    const exit = {
        result: resolve,
        error: error
    };
    console.log(exit.result);
}

//Вызываем рендер функции, передав шаблон, его переменные, и callback функцию
renderCallback(template, tempalteParams, callback)

//ЛИБО ЧЕРЕЗ PROMISE
render(template, tempalteParams)
    .then(result => {
        //    
    })
    .catch(error => {
        //
    });

//КАК АЛЬТЕРНАТИВА
try {
    let result = await render(template, tempalteParams);
}
catch (error) {
    //
}

Результат работы шаблонизатора (exit.result):

<div>Начало шаблона</div>

<!-- Поддержка условий "if" -->

<!-- Поддержка функций расширения по аналогии с twig используя "|" --> 
H_E_L_L_O_ _W_O_R_L_D 

<!-- Поддержка определения переменных и JS функций -->

<!-- Аналог простого "echo" --> 
<div>[
    "1",
    "2",
    "3",
    "4"
]</div>

<div>
    2023-10-08
</div>

<div>TEST LET</div>

<div>TEST IF</div>
    <div>TEST FOR</div>
    <!-- Поддержка циклов "for ... of" --> 
            <div>TEST ECHO</div>
        <p>1</p>
            <div>TEST ECHO</div>
        <p>2</p>
            <div>TEST ECHO</div>
        <p>3</p>
            <div>TEST ECHO</div>
        <p>4</p>
        <div>TEST ENDIF</div>
<div>Конец шаблона</div>

Промежуточный код

В информационных целях, во что трансформируется шаблон перед выполнением js кода

result = async () => {const stdOut=[];
stdOut.push(`<div>Начало шаблона</div>

<!-- Поддержка условий "if" -->
`);
if (param1===param2) {
stdOut.push(`
<!-- Поддержка функций расширения по аналогии с twig используя "|" --> 
${functions.join(functions.split(await functions.uppercase(param1),""),"_")} 
`);
}
stdOut.push(`
<!-- Поддержка определения переменных и JS функций -->
`);
let json = JSON.stringify(paramArray,null,4);
stdOut.push(`
<!-- Аналог простого "echo" --> 
<div>`);stdOut.push(`${json}`);stdOut.push(`</div>`)

<div>TEST LET</div>
`);
let test = param;
stdOut.push(`
<div>TEST IF</div>
`);
if (test==="test param") {
stdOut.push(`    <div>TEST FOR</div>
    <!-- Поддержка циклов "for ... of" --> 
    `);
for (const element of paramArray) {
stdOut.push(`        <div>TEST ECHO</div>
        <p>`);stdOut.push(`${element}`);stdOut.push(`</p>
    `);
}
stdOut.push(`    <div>TEST ENDIF</div>
`);
}
stdOut.push(`<div>Конец шаблона</div>
`);

return stdOut.join("");}

Особенности

Поддержка кириллицы

Пример шаблона выше можно написать на кириллице (пример):

<div>Начало шаблона</div>

<!-- Поддержка условий "if" -->
[%Если (перем1===перем2)%]

<!-- Поддержка функций расширения по аналогии с twig используя "|" --> 
[[перем1|ВРег|Разделить("")|Соединить("_")]] 
[%КонецЕсли%]

<!-- Поддержка определения переменных и JS функций -->
[%Перем джисон = JSON.stringify(массив,null,4)%]

<!-- Аналог простого "echo" --> 
<div>[[джисон]]</div>

<div>TEST LET</div>
[% Перем тестПР = параметр %]

<div>TEST IF</div>
[%Если (тестПР==="test param")%]
    <div>TEST FOR</div>
    <!-- Поддержка циклов "for ... of" --> 
    [%Цикл (элемент из массив)%]
        <div>TEST ECHO</div>
        <p>[[элемент]]</p>
    [%КонецЦикла%]
    <div>TEST ENDIF</div>
[%КонецЕсли%]
<div>Конец шаблона</div>

Вызов шаблонизатора:

const {renderCallback} = require("lite-pattern");

let template = `...шаблон...`

let tempalteParams = {
    перем1: "hello world",
    перем2: "hello world",
    параметр: "test param",
    массив: ["1", "2", "3", "4"]
};

const callback = (resolve = undefined, error = undefined) => {
    const exit = {
        result: resolve,
        error: error
    };
    console.log(exit.result);
}

renderCallback(template, tempalteParams, callback)

Расширение шаблонизатора:

Подключение собственных расширений для шаблонизатора

const {appendNewFunctions, appendNewCommands} = require("lite-pattern");

const newCommand = () => {
    //Пример смотрите ниже
    return [{
       input: "регулярное выражение",
       output: `end]]let :var = :value;\n[[start`,
       params: "функция параметров в команде"
    }]
}
appendNewCommands(newCommand);

const newFunction = () => {
    //Пример смотрите ниже
    return {
       name: ["имя", "представление"],
       func: "ссылка на функцию для рендера"
    }
}
appendNewFunctions(newFunction);

Пример создания команды

Файл: ./command/let.cmd.js

//Регулярное выражение для анализа в шаблоне
const reLet = /\[%\s*(let|перем)\s*(?<var>[а-яa-z]{1}[а-яa-z0-9.]+)\s*=\s*(?<value>[\.\S]+)\s*%\]\s?/giu;
//Регулярное выражение для определения параметров (необязательно, но очень полезно)
const param = /^(?<var>[_a-zа-я]{1}[a-zа-я0-9]*)(\.[a-zа-я0-9]*)?$/miug

//Функция анализа и возврата параметров шаблона (пишется индивидуально)
//protectParams - переменные которые инициализируются в самом шаблоне и не требуют внешнего определения
//params - переменные которые требуется передать шаблону
//
//Парамерт "match" - содержит совпадение которое определил шаблонизатор
const analyzeParams = (match) => {
    let protectParams = [match.groups.var];
    let value = match.groups.value;
    let findParams = [...value.matchAll(param)];
    let params = findParams.map(param => param.groups.var);
    return {protect: protectParams, params};
}

//Функция которая будет вызвана перед вставкой кода
// !!! Данный пример не является реальным, для информативности использования посмотрите команду (файл) command/echo.cmd.js !!! 
const parseFunc = (groups, context) => {
    const value = groups.value;
    groups.value = (""+value).toLowerCase();
    return groups; 
}

//Возвращается массив объектов
//input - регулярное выражение поиска в шаблоне
//output - JS выражение которое будет на которое будет заменено (используйте "end]] ...выражение... [[start" для экранизации кода js)
//prePut (необязательный) - функция вызывается перед вставкой сгенерированного кода js в шаблон, позволяет переопределить и расширить функционал команды
//params (необязательный) - функция возвращающая параметры шаблона  
module.exports = [{
    input: reLet,
    output: `end]]let :var = :value;\n[[start`,
    prePut: parseFunc,
    params: analyzeParams
}]

Пример создания функций

Файл: ./functions/uppercase.js

//Функция которая будет вызываться 
const func = async (innerData = "") => {
    return (''+innerData).toUpperCase();
}

//Возвращается объект 
//name - возможные именами функций в шаблоне
//func - функция которая будет вызвана при рендере
module.exports = {
    name: ["uppercase", "врег"],
    func: func
}

Получение используемых параметров в шаблоне:

Иногда для использования шаблонизатора в админпанелях или определения предварительных параметров и присвоения значений по умолчанию, требуется получить динамически параметры из шаблона.

Для этого используется функция getParams

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

//Подключаем шаблонизатор
const {getParams} = require("lite-pattern");

//Присваиваем шаблон в переменную
let template = `...шаблон...`

let params = getParams(template);
console.log(params);

Даст результат:

[ 'param1', 'paramArray', 'param2', 'param' ]

В результате будут только те переменные которые требуется передать в шаблон.

Переменные которые инициализируются в шаблоне и в нем используются выводиться не будут.