Окончательная сборка функции представления

func   ="name"            присвоение имени сгенерированной функции представления
param  ="v,k"              параметры функции представления: см. пример
if     ="cond"            рендеринг условий и переменных меток: см. ниже
let    ="a=expr,b=1"      локальные переменные: let a=expr, b=1;
do     ="code"            выполнение кода: code;
text   ="expr"            установка текста: this.text(expr);
html   ="expr"            установка HTML: this.html(expr);
end                       сохранение текущего узла, завершение рендеринга: return this.end();
end    ="cond"           сохранение текущего узла, условие завершения: if (cond) return this.end();
skip                     пропуск рендеринга дочернего уровня: this.skip();
skip   ="cond"           условие рендеринга дочерних уровней: if (cond) this.skip();
break                    пропуск рендеринга родственных уровней: this.break();
break  ="cond"           условия рендеринга для родственных уровней: if (cond) this.break();
render ="args,argsN"     рендеринг дочерних уровней: this.render(args, argsN);
each   ="expr,args,argsN" цикл рендеринга по дочерним уровням: this.each(expr, args, argsN).

Порядок инструкций

Во-первых, инструкции в качестве атрибутов узлов не повторяются, это предусмотрено спецификацией HTML DOM.

Порядок выполнения инструкций:

1. Создание узла, включая инструкции if, которые создают код.
2. Установка статических свойств без интерполяции.
3. Выполнение функции представления, порядок кода и инструкций или интерполированных свойств совпадает.

Пример PowJS показывает, что структура шаблона и функция представления полностью соответствуют друг другу:

<tag func="name" param="data" if="Array.isArray(data)"
  id="{{data[0]}}" each="data" break class="static">
  <!-- ... -->
</tag>

Эквивалентный псевдокод:

function name(data) {
  if (Array.isArray(data))
    this.create('tag', {class:'static'});
  else
    return;
  this.attr('id', data[0]);
  this.each(data);
  this.break();
}

Инструкция skip не должна записываться после each, render, html, text, так как дочерний уровень уже отрендерен. Аналогично, если сначала написать end, последующие инструкции не будут выполнены.

Возможно, потребуется записать инструкцию do после each и render для последующей обработки.

PowJS проверяет наличие явных конфликтов в порядке инструкций во время компиляции, поэтому важно выработать хорошие привычки в написании порядка инструкций. Например, инструкции func, param, if следует записывать в первую очередь для облегчения чтения.

Интерполяция

Интерполяция может использоваться в текстовых узлах или неинструктивных свойствах, но не в инструкциях, где можно использовать только ECMAScript.

Интерполированные значения преобразуются в строки шаблонов ECMAScript, PowJS просто заменяет {{ на ${, а }} на }.

abc {{exp}} def  ===> `abc ${exp} def`

func

Инструкция func присваивает имя сгенерированной функции представления для последующего вызова.

<b func="name"><i>{{@name}}</i></b>
<b func="name"><i if="something && '@name';"></i></b>
<b func="name"><i do="if(something) return this.call('name',arg)"></i></b>

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

• В текстовом узле через выражение {{@, }}, заключённое в скобки.
• В инструкции if возвращается строка @ с именем представления, узел ещё не создан, поведение — передача управления.
• С помощью this.call передаётся имя представления и другие аргументы, узел уже создан, поведение — создание дочернего узла.

Вызов представления аналогичен вызову подфункции, что может привести к рекурсии или даже бесконечному циклу, поэтому его следует использовать с осторожностью.

Пример:

{{@name}}<span func="name">yes</span>
<!-- render().html() output: -->
<span>yes</span><span>yes</span>

Пример:

<i if="'@name';">never</i><span func="name">yes</span>
<!-- render().html() output: -->
<span>yes</span><span>yes</span>

Пример:

<b><i if="'@name';">never</i></b><span func="name">yes</span>
<!-- render().html() output: -->
<b><span>yes</span></b><span>yes</span>

Пример:

<i do="return this.call('name')">never</i><span func="name">yes</span>
<!-- render().html() output: -->
<i><span>yes</span></i><span>yes</span>

Пример:

<b><i do="return this.call('name')">never</i></b><span func="name">yes</span>
<!-- render().html() output: -->
<b><i><span>yes</span></i></b><span>yes</span>

param

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

each-render

Инструкции render рендерят дочерние уровни, а each перебирает первый аргумент и вызывает render с добавлением аргументов.

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

• Начинается со знака : в значении (параметре), извлекает имя параметра param из последующих фактических параметров.
• Используется xxx- в each для пользовательских имён параметров, в противном случае используется имя по умолчанию.

Инструкция each всегда добавляет четыре аргумента в фиксированном порядке после пользовательских аргументов.

1. Перебираемое значение, которое можно настроить с помощью val-, по умолчанию v.
2. Ключ перебора, который можно настроить с помощью key-, по умолчанию k.
3. Общее количество элементов, которое можно настроить с помощью len-, по умолчанию $l.
4. Текущий индекс, начиная с 1, который можно настроить с помощью num-, по умолчанию $n.

Поведение:

• Вывод параметров действует только на дочерние уровни.
• Не выполняет синтаксический анализ, просто обрабатывает простые строки.
• Инструкция each добавляет аргументы в фиксированном порядке после пользовательских аргументов, и порядок фиксирован.
• Дочерний уровень всегда может использовать param для переопределения имён параметров.

Пример: параметр render не начинается с :, вывод параметров не выполняется.

<ul render="k,v"><li>{{k}}{{v}}</li></ul>
<!-- pow.render(1,2).html() output: -->
<ul><li>12</li></ul>

Пример: параметр render начинается с :, выполняется вывод параметров.

<ul render=":k,v"><li>{{k}}{{v}}</li></ul>
<!-- pow.render(1,2).html() output: -->
<ul><li>21</li></ul>

Пример: инструкция each всегда добавляет аргументы после.

<dl param="array, id" each=":array,id">
  <dd>{{id}}:{{item}}</dd> <!-- function(id,item,v,k,$l,$n) -->
</dl>

<dl param="array, id" each="array,id,val-item">
  <dd>{{id}}:{{item}}</dd> <!-- function(id,item,k,$l,$n) -->
</dl>

<dl param="array, id" each=":array,id,val-item,num-row">
  <dd>{{id}}:{{item}}</dd> <!-- function(id,item,key,$l,row) --> Этот текст представляет собой фрагмент технической документации, связанной с разработкой и использованием библиотеки PowJS.

В тексте описывается структура объектов в библиотеке, процесс рендеринга, а также особенности работы с плагинами и псевдоэлементами. Также упоминается возможность расширения прототипа PowJS и ограничения, связанные с использованием shadowRoot.

Текст содержит примеры кода на языке JavaScript, который используется для демонстрации различных аспектов работы библиотеки.

Основная часть текста посвящена описанию принципов работы библиотеки PowJS, её возможностей и ограничений. В тексте также упоминаются способы поддержки проекта и лицензия MIT, под которой он распространяется.