rogain-core-helpers

Core helpers for Rogain templates.

Helpers

Frame

Alias and create inline variables.

<Frame friend={@attrs.name} intro="My friend's name is">
    <div>{intro} {friend}</div>
</Frame>

<Friend name="Buckle" />

<div>My friend's name is Buckle</div>

Children

Provides an outlet in a component that can be used to compose components.

<div class="card"><Children /></div>

Each

Returns a tree of the data mapped to children. Each child can access the current element with the @item (or as attribute) properties and the current index with @index.

<Each data={searchResults} as="@result">
    <h3>{@result.title}</h3>
    <p>{@result.excerpt}</p>
</Each>

Attributes

data

Variable. Array.

as

String. Defines the local variable for accessing each element in data. Defaults to @item.

Defined

Returns children if data is an non-empty Array or Object ([0, 1], {x:1,y:3}) or defined variable. If the <Else /> branch is defined, it will be returned when data is empty or undefined.

<Defined data={searchResults}><Results /></Defined>

Attributes

data

Variable or Expression.

Empty

Returns children if data is an empty Array or Object ([], {}) or undefined variable. If the <Else /> branch is defined, it will be returned when data is non-empty and defined.

<Empty data={searchResults}>No results.</Empty>

Attributes

data

Variable or Expression.

If

Returns it's children if data to value are equal. If the <Else /> branch is defined, it will be returned when data and value are not equal.

If value is not defined, If will have the same behavior as Defined.

<If data={loggedIn} value="true"><Dashboard /></If>

Attributes

data

Variable or Expression.

value

Variable or Expression. Optional.

Unless

Returns it's children if data to value are not equal. If the <Else /> branch is defined, it will be returned when data and value are equal.

If value is not defined, Unless will have the same behavior as Empty.

<Unless data={loggedIn} value="true"><LoginForm /></Unless>

Attributes

data

Variable or Expression.

value

Variable or Expression. Optional.

Range

Returns children if data is between min and max. If the <Else /> branch is defined, it will be returned when data is out of range.

Omitting min or max will default to -Infinity and Infinity respectively.

<Each data={searchResults}>
    <Range data={@index} min="0" max="2">
        <!-- Top 3 -->
        <h2>{@item.title}</h2>
        <p>{@item.excerpt}</p>
    <Else />
        <!-- The rest -->
        <h3>{@item.title}</h3>
    </Range>
</Each>

Attributes

data

Variable or expression.

min

Number. Optional.

max

Number. Optional.

Else

Implicit helper. Can be used with If, Unless, Defined, Empty, Range. Used to denote an inverse branch.

<If data={loggedIn} value="true">
    <!-- If Branch -->
<Else />
    <!-- Else Branch -->
</If>
 
<Unless data={loggedIn}><Else /></Unless>
<Defined data={loggedIn}><Else /></Defined>
<Empty data={loggedIn}><Else /></Empty>
<Range data={loggedIn}><Else /></Range>

Else helper is not meant to be called as a block, it's used to split trees inside other helpers.

Install

With npm do:

npm install rogain-core-helpers

License

MIT