# 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

    <!-- UNGIC:PAGE -->
    <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>