@depla/reka-parser

Parser for Reka AST.

This package is mainly intended to provide an easy way to create Reka AST Nodes from code.

Syntax

The Parser expects code to be written in a custom Reka-syntax.

Apart from some syntactical differences in defining stateful variables and components, most of the syntax are identical to JSX (with some Vue/Svelte influence).

Program

The entire Program Node can be parsed based on the following syntax:

val globalVariable1 = "hi";

component ComponentName(prop1="default value") {
    val stateVariable1 = 0;
    val stateWithBinaryExpression = 1+1;
    val stateWithBooleanExpression = false;
} => (
    <div></div>
)

component AnotherComponentName() {

} => (
    <ComponentName1 prop1="overriden value" />
)

Templates

Component templates are similar to templates in JSX with some differences:

Text values

Text values must be written in a <text /> tag:

component ComponentName() {} => (
    <text value="Hello World!" />
)

Conditionals

To conditionally render an element, specify the @if directive:

component ComponentName(prop1) {
    val showCounter = false;
} => (
    <div @if={showCounter}>

    </div>
)

Foreach

To render an element for each item in a list, specify the @each directive:

val items = ["a", "b", "c"];

component ComponentName(prop1) {

} => (
    <div @each={item in items}>
        <text value={item} />
    </div>
)

Specifying index variable:

<div @each={(item, i) in items}>
    <text value={i + " " + item} />
</div>

Children

A component can accept children elements by rendering the <slot /> element:

component Button() {} => (
    <button>
        <slot />
    </button>
)

component App() {} => (
    <div>
        <Button>
            <text value="Click me!" />
        </Button>
    </div>
)