# cutejs

> Template engine compatible with Google Closure Compiler.

Latest version **2.0.0** (published 2019-06-03) · 0 weekly downloads

## Install

```sh
npm install cutejs
pnpm add cutejs
yarn add cutejs
bun add cutejs
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2019-06-03 |
| First published | 2014-09-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 58 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Interfaced |
| Maintainers | htmlhero, l1bbcsg, lacki |

## Links

- npm: https://www.npmjs.com/package/cutejs
- npm.io page: https://npm.io/package/cutejs

## Recent versions

- 2.0.0 (latest) — 2019-06-03
- 2.0.0-alpha.1 (dev) — 2019-02-13
- 1.1.7 — 2016-12-26
- 1.1.6 — 2016-10-12
- 1.1.5 — 2015-03-20
- 1.1.4 — 2014-12-08
- 1.1.3 — 2014-12-07
- 1.1.2 — 2014-09-15
- 1.1.1 — 2014-09-05

## README

cute.js
========================

*Template engine compatible with Google Closure Compiler.*  
«cute.js» компилирует шаблоны в JavaScript функции, которые могут быть вызваны для обработки этого шаблона. Полученные функции во время обработки данных могут интерполировать переменные, производить произвольные вычисления, экспортировать dom-ноды и создавать компоненты. Так же скомпилированные шаблоны можно сжимать при помощи агрессивной компиляции google closure compiler.

Функционал
------------------------

	:::javascript
	cuteJS.Engine.register(имя_шаблона, тело_шаблона, пространство_имен);

Создает шаблонную функцию по *телу_шаблона* и помещает ее в *пространство_имен.имя_шаблона*.

	:::javascript
	cuteJS.Engine.compile(имя_шаблона, тело_шаблона, пространство_имен);

Вернет аннотированный JavaScript код шаблонной функции, при исполнении которого шаблонная функция будет находиться в *пространство_имен.имя_шаблона*.

	:::javascript
	cuteJS.ComponentInterface;
Интерфейс, который должны реализовывать компоненты создаваемые в шаблоне. Содержит один единственный метод *HTMLElement getContainer()*. Этот метод должен вернуть ссылку на дом ноду, которой будет заменено место подключения компоненты в шаблоне.

### Шаблонная функция
В зависимости от шаблона cute.js генерирует шаблонные функции с разными сигнатурами. Если шаблон использует входные переменные, то будет сгенерирована функция с двумя параметрами:

	:::javascript
	templateFunction(входные_данные, опции)
*входные_данные* — переменная, к которой можно обратиться в шаблоне через ключевое слово `this`;  
*опции* — не обязательный параметр, через который можно установить обратные вызовы. Принимает объект вида:

  	:::javascript
  	{beforeAppendComponent: Function, afterAppendComponent: Function}
Где:  
*beforeAppendComponent* — будет вызван перед тем как очередной компонент будет прикреплен к исходному дом дереву;  
*afterAppendComponent* — будет вызван после того как очередной компонент будет прикреплен к исходному дом дереву.  
Если шаблон не использует входные переменные, то сгенерированная функция будет иметь только один необязательный параметр опции.  
Шаблонная функция возвращает объект, всегда содержащий в себе *root* типа *DocumentFragment*, который указывает на корень шаблона, и все экспортированные данные. Экспортировать можно дом ноды, вложенные шаблоны и компоненты подключенные внутри шаблона, при условии если указано имя для экспорта. Таким образом получиться объект например:

	:::javascript
	{
		root:  DocumentFragment, // корень шаблона
		export: HtmlDivElement, // экспортированная нода
		component: MyComponent // экспортированная компонента
		include: // root вложенного шаблона
	}


Шаблон
------------------------
Приложение передает переменные в шаблон, где вы можете их использовать. Обратиться к переменной можно через `this`.

### Интерполирование переменных
Чтобы вывести какую либо переменную достаточно поместить ее в следующую конструкцию `{{= переменная}}`. В этом случае при обработке шаблона предыдущая конструкция будет заменена на значение переменной.

### Экранирование переменных
Чтобы вывести экранированное значение переменной достаточно поместить её в следующую конструкцию `{{- переменная}}`.

### Экспортирование dom-нод
Для того чтобы экспортировать ссылку на произвольную ноду, нужно добавить к ней атрибут `data-export-id="{{@имя_экспорта}}"`, где
`имя_экспорта` — имя по которому можно будет обратиться экспортируемой ноде. Может состоять из латинских символов произвольного регистра и цифр, не может начинаться с цифры.

### Вложения шаблонов
Внутри шаблона можно использовать другие шаблоны. Для этого используется следующая конструкция `{{# шаблонная_функция, входные_данные, имя_экспорта }}`, где
шаблонная_функция — это имя, с пространством имен, зарегистрированного или скомпилированного шаблона;
`входные_данные` — данные приходящие на вход вложенного шаблона;
`имя_экспорта` — имя по которому можно будет обратиться ко всем данным, экспортируемым во влагаемом шаблоне. Может состоять из латинских символов произвольного регистра и цифр, не может начинаться с цифры.

### Импорт компонент
Для импорта компонент предусмотрен тег `{{+ импорт }}`. `импорт` – полное объявление импорта в синтаксисе ECMASCRIPT6.

### Создание компонент
Внутри шаблона, при помощи следующей конструкции можно создавать компоненты
`{{% класс_компоненты, входные_данные, имя_экспорта }}`, где
`класс_компоненты` — это имя класса, реализующего интерфейс `cuteJS.ComponentInterface`;
`входные_данные` — данные приходящие на вход компоненты;
`имя_экспорта` — имя по которому можно будет обратиться к компоненте. Может состоять из латинских символов произвольного регистра и цифр, не может начинаться с цифры. Все компоненты необходимо явно импортировать.

### Определение типов входных параметров
Если планируется использовать шаблонную функцию в агрессивной компиляции  google closure compiler, то необходимо определить типы входных параметров. Для этого предусмотрена следующая конструкция:
`{{* имя тип }}`, где
`имя` — это имя переменной например `this.title` и так далее. Так же можно полностью определить тип входного параметра, указав в качестве имени `this`;
`тип` — это тип переменной

### Произвольные вычисления
Любой код помещенный в конструкцию `{{ произвольный_код }}` будет интерпретирован без изменений. Например, цикл можно реализовать так:

	:::javascript
	{{ for (var i = 0; i < array.length; i++) { }}
		{{- array[i] }}
	{{ } }}





## Getting Started
Download the [production version][min] or the [development version][max].

[min]: https://bitbucket.org/interfaced/cutejs/raw/tip/dist/cute.min.js
[max]: https://bitbucket.org/interfaced/cutejs/raw/tip/dist/cute.js


## Documentation
Execute arbitrary JavaScript code:
```
{{ for (var i = 0; i < 10; i++) { }}
<div>some content</div>
{{ } }}
```

## License
Copyright (c) 2011-2016 Interfaced  
Licensed under the MIT license.

---
_Source: https://npm.io/package/cutejs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._