🧩 EichJs

Appearance

Grammar Base ​

Eich has xhtml-like syntax.

Root Tag ​

All the content of Eich is wrapped ina a root tag <eich>.

html
<eich></eich>

You can set the width and height of the root tag.

html
<eich width="800" height="600"></eich>

Components ​

Eich provides a lot of components for you to use, for toturial, we will introduce the tag <container> first.

In normal, the <container> tag is used to wrap the content of the page. You can setup the padding and the margin of the container:

html
<eich>
  <container padding="10px" margin="10px">
    Hello, Eich!
  </container>
</eich>

Eich support you insert JavaScript expression in the properties of the tag. In the common case, you can let the value is a expression via set the dollar ($) sign before the key.

html
<eich>
  <container $padding="Math.sin(10) * 2000" $margin="Math.cos(10) * 2000">
    Hello, Eich!
  </container>
</eich>

Variables ​

You can define a variable with tag <var> or a reactive variable with tag <let>. <let> will be introduced in the next section.

The syntax of the variable is:

html
<var key="name" $value="'Hello' + 'Intractive World'" />

And then you can use the double brace to insert the variable as text content:

html
<eich>
  <var key="name" $value="'Hello' + 'Intractive World'" />
  <container $padding="Math.sin(10) * 2000" $margin="Math.cos(10) * 2000">
    {{ name }}
  </container>
</eich>

For Loop ​

You can use the <for> tag to loop through a list of data.

html
<eich>
  <for key="item" $in="Array(10).keys()">
    <container padding="100">{{ item }}</container>
  </for>
</eich>

Condition Statement ​

You can use the <if> tag to conditionally render content based on a boolean expression.

html
<eich>
  <if $condition="true">
    <container padding="100">True</container>
  </if>
</eich>

<else> and <elif> are also supported:

html
<eich>
  <if $condition="true">
    <container padding="100">True</container>
  </if>
  <else>
    <container padding="100">False</container>
  </else>
</eich>

Reactive Variable ​

You can define a reactive variable with tag <let>.

html
<let :list="['a', 'b', 'c']" />
<for key="i" $in="list">
  <container>{{ i }}</container>
</for>

TIP

When you setup the reactive variable with <let>, please use the : prefix to setup the variable, not the $ prefix.

And then you can add a event on a <button> tag.

html
<button @click="list.push('d')">Add one</button>

Memo ​

You can use <memo> to memory the children tags. It receive a property $value to setup a array with fixed length.

When reactive variable changed, if the values of the array is not changed, the children tags will not be re-rendered.

html
<memo $value="['a', 'b', 'c']">
  <container>{{ i }}</container>
</memo>

Events ​

You can add a event on a tag with the @ prefix.

html
<button @click="list.push('d')">Add one</button>

It supports the events of the DOM.

Animation ​

You can use the animate: prefix to setup the animation when event arised.

html
<button animate:click="fade-out,1000">Click me</button>

Mean while, if you want to execute them parallel, just use spaces to split them.

html
<button animate:click="fade-out,1000 zoom-in,1000">Click me</button>

Some animation is with parameters for example move, you can use bracket to setup the parameters.

html
<button animate:click="move(100,100),1000">Click me</button>

If you want to execute a animation automatically, you can just set animate property.

html
<button animate="fade-out,1000">Click me</button>

The animation will be executed when the page is loaded.

Animate Reactive Variable ​

For example, you define a reactive variable x is 0, you want to animate the x to 100 when the button is clicked.

html
<let :x="0" />
<button animate:click="x(100),1000">Click me</button>
<container>{{ x }}</container>

The x(100) means the x will be set to 100 in 1000ms.