@rekajs/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>
)

API Reference

Parser

Class

A singleton that exposes parsing utilities

tsx
import { Parser } from '@rekajs/parser';
Parser.stringify(...);
Parser.parse(...);

• parseProgram(source: string): Program

  Parse source into a Reka Program AST node

  tsx
  import * as t from '@rekajs/types';
  import { Parser } from '@rekajs/parser';
  const result = Parser.parseProgram(`
      val globalVariable = 0;
      component Button() {} => (
          <button>
            <text value="Click me" />
          </button>
      )
      component App(){} => (
          <div>
            <Button />
          </div>
      )
  `);
  console.log(result instanceof t.Program); // true
  console.log(result.components.length == 2); // true
  console.log(result.globals.length == 1); // true

• parseExpression<T extends ASTNode>(source: string, expectedType?: TypeConstructor<T>): T

  Parse an expression string into a Expression AST node

  tsx
  import * as t from '@rekajs/types';
  import { Parser } from '@rekajs/parser';
  const result = Parser.parseExpression('1+2');
  console.log(result instanceof t.BinaryExpression); // true
  console.log(result.left instanceof t.Literal); // true
  console.log(result.left.value == 1); // true;

  If you know the expected return type of the source string, you could pass the Type constructor as the second argument:

  tsx
  Parser.parseExpression('1+1', t.BinaryExpression);
  // ok
  Parser.parseExpression('10', t.BinaryExpression);
  // error, expected BinaryExpression but received Literal

• stringify(type: ASTNode): string

  Stringify an AST Node into code

  tsx
  import * as t from '@rekajs/types';
  import { Parser } from '@rekajs/parser';
  Parser.stringify(
    t.program({
      components: [
        t.rekaComponent({
          name: 'App',
          state: [t.val({ name: 'counter', init: t.literal({ value: 0 }) })],
          props: [],
          template: t.tagTemplate({
            tag: 'div',
            props: {},
            children: [
              t.tagTemplate({
                tag: 'text',
                props: { value: 'Hello!' },
                children: [],
              }),
            ],
          }),
        }),
      ],
    })
  );

  The above returns the following code:

  component App() {
      val counter = 0;
  } => (
      <div>
       <text value="Hello!" />
      </div>
  )