Values, state and functions

Variables

let x = 5;
let name = "Masque";
let accent = { r: 240, g: 96, b: 63, a: 255 };

let binds a value. Maps ({ key: value }) and arrays ([a, b]) are values like any other, which is how styles and colours are written.

State

state count = 0;

state declares a cell that survives re-renders. Its identity comes from the call path of the function that declares it, not from the order of declarations. So calling the same component from three places gives three independent cells, and a state inside a conditional is fine.

Functions

let greet = fn (name: string): string {
  "Hello, " + name
};

let add = fn (a: int, b: int): int {
  a + b
};

The last expression without a trailing semicolon is the return value, as in Rust. A function that returns a widget is a component: there is no separate component syntax.

Control flow

if (x > 0) { "positive" } else { "non-positive" };

match selected {
  true => selected_bg,
  false => default_bg,
};

for (i in 0..items.length()) {
  render_item(items[i])
};

if, match and for are expressions, so they can sit directly inside a children list.

Imports

import "./button.masque";
import { Card } from "./components.masque";

A relative import resolves against the file that wrote it. The hot-reload watcher follows imports, so editing an imported file reloads the document.

Debugging

log expression;   // prints the value to stderr