Syntax

List of supported tags

Compile time tags

• !condition
• !include
• !property
• !ref

Run time tags

• !component
• !cx
• !expression
• !function
• !repeat
• !t

Deprecated tags

• !import use !include instead
• !variable use !property instead
• !boolean don’t use it more
• !number don’t use it more

---

!include _{compile time tag}

• this tag is used to import/include any type of file into this place of YAML
• tag supports properties, which is used as parameters of this file
• tag internally open any file as string, then it process by EJS (https://ejs.co) and then it put into place as string (for other types) or process it by compiler if it’s supported file type (YAML, MD, HTML, LESS)
• this mean you can use EJS for any kind modifing file depends on properties (for example generate some repeating parts of document or fill some properties)
• tag is always processed immediately when is used, except is used in components field in root of YAML file (see !ref)
• tag is used for include any type of file not only for YAML but also for LESS, CSS, MD, HTML, etc.
• when you try to include directory, Target builder will look if in this directory exists file index.yaml or index.yml and if so include this file (you can include components like !include ./components/button instead of !include ./components/button/index.yml)

Syntax:

Short version (without properties):

!include ./path/file.ext

Long version (with properties):

!include file: ./path/file.ext
property1: 'some'
property2: 123

Examples:

list:
  - !include ./info.md
  - !include file: ./more_info.yml
    title: 'Hello'
    withoutHeader: true

something: !include ./something.yml

---

!ref _{compile time tag}

• this tag is used to reference some component into this place
• source of this components is components field in root of YAML file
• tag can have properties same as !include tag and !ref tag properties have higher priority than !include properties in components field
• one component can be referenced as many times as you want, and with different properties for each

Syntax:

!ref components: component_name

Examples:

components:
  header: !include file: ./components/header.yml
    title: "Default title"
  bodyItem: !include ./components/body-item.yml
  footer: !include ./components/footer.yml

...

items:
  - !ref components: header
    title: 'Welcome'
  - !ref components: bodyItem
    name: 'First one'
  - !ref components: bodyItem
    name: 'Second one'
  - !ref components: footer

---

!property _{compile time tag}

• this tag is used to fill this place with value of some properties (when !include YAML file)
• you can use EJS in file for this, but EJS supports work with file only as string, so pass some array or object is impossible with EJS, this is reason of !property tag
• tag can have default value (only in long version) which can contain any valid YAML value (not only string or number, but also arrays or complex obejcts)
• tag can have required: true mark (only in long version) which throw error message while build target, when value is not filled (default value don’t have any impact if required: true is set)
• if property is not set, place is filled with undefined, and field will not exist in output JSON

Syntax:

Short version (without default):

!property some_prop

Long version (with default or required):

!property name: some_prop
default: 'Some default value'
required: true

Examples:

items:
  - !property prop1
  - !property name: prop2
    default: 'Prop2 is not here :-)'
  - !property name: prop3
    required: true

---

!condition _{compile time tag}

• this tag is used to remove or include some parts of YAML structure (when !include YAML file)
• first parameter (key) can be include or omit (include leave object in structure if expression is truly value, omit removes object from structure if expression have truly value)
• second parameter (expression) is expression in EJS format
• tag can be used only for object types and include/omit object in which is contained (canot condition for example string or number value, for this use EJS in file)

Syntax:

!condition include: typeof some_prop === "boolean" && some_prop === true

!condition omit: typeof some_prop === "string" && some_prop !== "foo"

Examples:

items:
  - name: 'this item is not here :-('
    !condition include: typeof some_falsy_prop === "boolean" && some_falsy_prop === true
  - name: 'this item is here :-)'
    !condition omit: typeof some_falsy_prop === "boolean" && some_falsy_prop === true

---

!component _{run time tag}

• this tag is used to create component in hub-client-core, which is in runtime converted into real React component in HTML DOM
• parameter is name of hub-client-core component or any React Element (like div, span, h1, etc.)
• for list of supported components and theirs properties look at documentation of hub-client-core project

Syntax:

!component as: some_component
property: 'foo'

Examples:

items:
  - !component as: div
    items:
      - !component as: h1
        items: 'Hello'
      - !component as: HubClientMagicComponent
        doMagic: true

---

!repeat _{run time tag}

• this tag is used to create repeat snippet in hub-client-core, which is in runtime evalved in React
• parameter is any array (static or from !expression), for more info about hub-client-core repeat snippet look at documentation of hub-client-core project

Syntax:

!repeat some_item:
  - name: 'Some 1'
  - name: 'Some 2'
  - name: 'Some 3'
component:
  !component as: span
  items: !expression some_item.name

Examples:

items:
  - !repeat car: !expression export.cars
    component:
      !component as: span
      items: !expression car.name
  - !repeat pair:
      - name: 'Some 1'
        value: 'Val 1'
      - name: 'Some 2'
        value: 'Val 2'
      - name: 'Some 3'
        value: 'Val 3'
    component:
      !component as: div
      items:
        - !component as: span
          items: !expression pair.name
        - !component as: span
          items: "!expression '(' + pair.value + ')'"

---

!expression _{run time tag}

• this tag is used to create expression in hub-client-core, which is in runtime evalved in React
• parameter is expression, for more info about hub-client-core expressions look at documentation of hub-client-core project

Syntax:

Short version (without parameters):

!expression 'some_expression'

Long version (with parameters):

!expression eval: 'some_expression'
parameter_one: 'Some parameter value'

Examples:

items:
  - !component as: span
    items:
      - !expression 'exports.someExportField'
  - !component as: span
    max:
      !expression eval: 'parseInt(param1) - param2'
      param1: !expression 'exports.someExportField'
      param2: !property test1

---

!function _{run time tag}

• this tag is used to create JS function in hub-client-core, which is in runtime evalved in React and can be used as paramaters to events of components
• parameter is function body, for more info about hub-client-core expressions look at documentation of hub-client-core project

Syntax:

Short version (without parameters):

!function 'some_expression'

Long version (with parameters):

!function eval: 'some_expression'
parameter_one: 'Some parameter value'

Examples:

items:
  - !component as: div
    onClick: !function 'setSomething(arg1 + "A")'
  - !component as: div
    onClick:
      !function eval: 'doSomething(parseInt(param1) - param2)'
      param1: !expression 'exports.someExportField'
      param2: !property test1
  - !component as: div
    onClick: !function |
      var a = "A";
      var b = "B";
      return a + b + " = done";

---

!t _{run time tag}

• this tag is used to create translated string in hub-client-core, which is in runtime evalved in React
• parameter is text which is translated
• tag supports also long version with parameters, which will be replaced in translate with theirs values

Syntax:

Short version (without params):

!t Some text

Long version (with params):

!t text: Some text with {paramOne} and {paramTwo}
paramOne: 'Zenoo'
paramTwo: !expression 'exports.someExportField'

Examples:

items:
  - !component as: span
    items:
      - !expression 'exports.someExportField'

---

!cx _{run time tag}

• this tag is shorcut for cx(...) method call in hub-client-core expressions
• parameter must be array of classnames (after args)

Syntax:

!cx args:
  - 'classOne'
  - 'classTwo'
  - !expression 'exports.someClassName'

Examples:

items:
  - !component as: span
    className:
      !cx args:
        - 'classOne'
        - 'classTwo'
        - !expression 'exports.someClassName'