ReScript language preview

1. Types and pattern matching

variants, records, and switch

horizon-dark

type shape =
  | Circle(float)
  | Rectangle(float, float)

let area = shape =>
  switch shape {
  | Circle(r) => 3.14 *. r *. r
  | Rectangle(w, h) => w *. h
  }

atom-one-dark

type shape =
  | Circle(float)
  | Rectangle(float, float)

let area = shape =>
  switch shape {
  | Circle(r) => 3.14 *. r *. r
  | Rectangle(w, h) => w *. h
  }

github-dark

type shape =
  | Circle(float)
  | Rectangle(float, float)

let area = shape =>
  switch shape {
  | Circle(r) => 3.14 *. r *. r
  | Rectangle(w, h) => w *. h
  }

dracula

type shape =
  | Circle(float)
  | Rectangle(float, float)

let area = shape =>
  switch shape {
  | Circle(r) => 3.14 *. r *. r
  | Rectangle(w, h) => w *. h
  }

nord

type shape =
  | Circle(float)
  | Rectangle(float, float)

let area = shape =>
  switch shape {
  | Circle(r) => 3.14 *. r *. r
  | Rectangle(w, h) => w *. h
  }

github

type shape =
  | Circle(float)
  | Rectangle(float, float)

let area = shape =>
  switch shape {
  | Circle(r) => 3.14 *. r *. r
  | Rectangle(w, h) => w *. h
  }

2. Bindings and polymorphic variants

let bindings, decorators, and JSX-friendly syntax

horizon-dark

@react.component
let make = (~name) => {
  let color = #Blue
  let greeting = "Hello, " ++ name
  <div className="greeting"> {React.string(greeting)} </div>
}

atom-one-dark

@react.component
let make = (~name) => {
  let color = #Blue
  let greeting = "Hello, " ++ name
  <div className="greeting"> {React.string(greeting)} </div>
}

github-dark

@react.component
let make = (~name) => {
  let color = #Blue
  let greeting = "Hello, " ++ name
  <div className="greeting"> {React.string(greeting)} </div>
}

dracula

@react.component
let make = (~name) => {
  let color = #Blue
  let greeting = "Hello, " ++ name
  <div className="greeting"> {React.string(greeting)} </div>
}

nord

@react.component
let make = (~name) => {
  let color = #Blue
  let greeting = "Hello, " ++ name
  <div className="greeting"> {React.string(greeting)} </div>
}

github

@react.component
let make = (~name) => {
  let color = #Blue
  let greeting = "Hello, " ++ name
  <div className="greeting"> {React.string(greeting)} </div>
}

3. Recursive let bindings

let rec correctly titles the function, not "rec"

horizon-dark

let rec factorial = n =>
  switch n {
  | 0 => 1
  | n => n * factorial(n - 1)
  }

atom-one-dark

let rec factorial = n =>
  switch n {
  | 0 => 1
  | n => n * factorial(n - 1)
  }

github-dark

let rec factorial = n =>
  switch n {
  | 0 => 1
  | n => n * factorial(n - 1)
  }

dracula

let rec factorial = n =>
  switch n {
  | 0 => 1
  | n => n * factorial(n - 1)
  }

nord

let rec factorial = n =>
  switch n {
  | 0 => 1
  | n => n * factorial(n - 1)
  }

github

let rec factorial = n =>
  switch n {
  | 0 => 1
  | n => n * factorial(n - 1)
  }