# HTML plugin API

# un-pipe

Type: Custom html tag
Attributes:
- force-all-icons - boolean, rebuild the page always when the icons change, regardless of whether they are used on the page or not (required if the icons are used, for example, via js)
- sass - sass component names separated by commas
- main - Application name. Used with the component name inheritance method
- dir Default: "" - may be ltr or rtl, sets the dir suffix to name of include .css files

Usage:

This tag must be between head tag. It serves to associate documents with sass components, is required

to automatically include generated CSS files to the HTML page in development mode
to associate documents with sass components in order to generate a joint release
to track changes in component styles

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Will connect all the necessary css files and provide tracking of their change -->
    <un-pipe sass="app, grid, normalize" main="app"></un-pipe>
</head>
<body>
    <!-- will be replaced to app -->
    <div class="@">
    </div>
</body>
</html>

# include

Type: Handlebars helper
Parameters:
- data Optional - PATH, Object, queryString
- icons Optional - Boolean or the name of the direct key of the object - include data from the plugin icons
- sass Optional - ID of sass option
- move Optional - Object, TRUE - transfer data to template

Usage:

Used to include supported file types

using the date argument, you can pass data to the include file:

relative path to .JSON / .YAML files

{{includes "template.hbs" data="data/data.json"}}

query string

{{includes "template.hbs" data="name=Artem&nickname=Unbywyd"}}

data object (you can pass data from template to template)

{{includes "template2.hbs" icons=true}}

// template2
{{includes "template3.hbs" data=icons.fonts}}

icons - to include icon data from the icons plugin

{{includes "icons.hbs" icons=true}} 

// or
{{includes "icons.hbs" icons="fonts"}} 

// or (deprecated)
{{includes "icons.hbs" data="icons"}}

using the sass argument, you can pass exported data from sass components to templates

// pass all exported sass data
{{{include "templates/test.hbs" sass=""}}}  

// templates/test.hbs    

{{{debug "sass"}}}

Exporting data from the app component

// components/app/once.scss

$export: this.export('author', (nickname: "Unbywyd"));

using:

{{{include "templates/person.hbs" sass="app__author" single=true}}}  

// templates/person.hbs

{{{sass.nickname}}}

move

This argument is in addition to the data, allows you to pass input data to the included template, examples:

// page.html
// passing data to the first template
{{{include "template.hbs" data="./data/data.json"}}}

// the first template has access to the passed data
// template.hbs

{{{debug "icons"}}}

// In order to transfer all data to the second template, 
// you must set the move parameter

// Pass all current input data to next template
{{{include "template2.hbs" move=true}}}

// You can pass a specific object
{{{include "template2.hbs" move=person.info}}}

// data + move
{{{include "template2.hbs" data=icons move=person.info}}}

# icon

Type: Handlebars helper
Parameters:
- Icon id Required
- presentation Optional Boolean - hide from screen reader (required for accessibility)
- title Optional - title of icon (required for accessibility)
- class Optional - add additional class
- href Optional URL make an icon a link
Usage:

To generate html icon markup relative to the active icon generation mod and the type of icon
```
{{{icon "ok" title="Submit"}}}
```

# debug

Type: Handlebars helper
Parameters:
- value to debug Optional

Usage:

serves to debug input data in templates

output all available data
{{debug}}

output a specific value
{{debug ungic}}

# src

Type: Handlebars helper
Parameters:
- rel Optional Boolean - return path relative to dist directory

Usage:

get path to existing file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="{{{src "img/image.png"}}}" alt="">
</body>
</html>

# log

Type: Handlebars helper
Parameters:
- value to output to the console Optional

Usage:

outputs data to the console

// log all available data
{{log}}

// log a specific value
{{log ungic.project}}

# raw

Type: Handlebars helper

Usage:

to skip handlebars processing

{{{{raw}}}}
    {{{src "img/sprites/sprite.png" rel=true}}} 
{{{{/raw}}}}

# amount

Type: Handlebars helper
Parameters:
- Array / Object Required
Usage:

returns the number of elements for an array and an object
```
{{amount ungic.page.pipe.css}}
```

# UNGIC:PART, UNGIC:PAGE

Type: Comments
Usage:

Explicitly assign the type of html file to include
```

<body>
    
</body>
```

# @ - Сomponent name inheritance method

Usage:

This method serves to simplify writing html markup of components. This method allows you to inherit the values of the parent attributes or the name of the application or component.

methods:

cid Required - Custom element attribute with component name
@ - replaced with the name of the nearest component or the name of the application
@\d+ - replace with the specific value of the attribute (when the values are separated by a space, as in the class attribute) of the nearest parent element. Number - starts with one, this is the ordinal number of the value
@@ - is replaced with the name of the applique or will have behavior like - @1 (Returns the first value of the same type of closest parent attribute)
@{2,} - After two @ characters, addition begins according to the formula: (Sum of @ - 2 = @n), n is the ordinal number of the attribute value, for example: @@@ is the same as @1, @@@@ = @2

Supported attributes

class
id
for
cid
style[sass]

TIP

Use a backslash to escape, example:

<div cid="app" class="@\@"></div>
<!-- the result will be as follows -->
<div class="appapp"></div>

<!-- or -->
<div cid="app" class="@\1"></div>
<!-- the result will be as follows -->
<div class="app1"></div>

Examples:

<div class="@" cid="app">
    <div class="@-btns"> 
        <button class="@-btn"> 
            Send
            <i class="@1-icon" aria-hidden="true"></i>
        </button>
    </div>
</div>

The result will be as follows:

<div class="app">
    <div class="app-btns">
        <button class="app-btn">
            Send
            <i class="app-btn-icon" aria-hidden="true"></i>
        </button>
    </div>
</div>

another example:

<div cid="component">
    <div class="@-header"></div>
    <button class="@-btn @-control @-desktop" cid="btns">
        <i class="@2-icon"></i>
    </button>   

    <!-- Escape -->
    <div class="@\2"></div>
    <!-- or -->
    <div class="@\@"></div>
</div>

and result:

<div>
    <div class="component-header"></div>
    <button class="btns-btn btns-control btns-desktop">
        <i class="btns-control-icon"></i>
    </button>
    <div class="component2"></div>
    <div class="componentcomponent"></div>
</div>

<div id="@" cid="app">
    <div id="box">
        <div class="@-box" id="@1-cell"></div>
        <div class="@-box" id="@-cell"></div>
    </div>
</div>

result:

<div id="app">
    <div id="box">
        <div class="app-box" id="box-cell"></div>
        <div class="app-box" id="app-cell"></div>
    </div>
</div>