Examples

The best example of usage of these bindings are the tests.
These typically contain tweaks made to the generated bindings to make them more ergonomic.

AddEventListener__test.res

ReScript

open WebAPI
open WebAPI.Global

let button = document->Document.querySelector("button")->Null.toOption
let h2 = document->Document.querySelector("h2")->Null.toOption

switch (button, h2) {
| (Some(button), Some(h2)) =>
  button->Element.addEventListener(EventAPI.Click, (e: UIEventsAPI.mouseEvent) => {
    Console.log(`Button clicked, ${Int.toString(e.button)}`)
    switch h2.textContent {
    | Null => h2.textContent = Value("1")
    | Value(text) =>
      switch Int.fromString(text) {
      | None => h2.textContent = Value("1")
      | Some(number) => h2.textContent = Value(Int.toString(number + 1))
      }
    }
  })
| _ => Console.log("Stuff not found")
}

JS Output

import * as Int from "rescript/lib/es6/Int.js";
import * as Primitive_option from "rescript/lib/es6/Primitive_option.js";

let button = document.querySelector("button");

let h2 = document.querySelector("h2");

if ((button == null) || (h2 == null)) {
  console.log("Stuff not found");
} else {
  button.addEventListener("click", e => {
    console.log("Button clicked, " + e.button.toString());
    let text = h2.textContent;
    if (text === null) {
      h2.textContent = "1";
      return;
    }
    let number = Int.fromString(text, undefined);
    if (number !== undefined) {
      h2.textContent = (number + 1 | 0).toString();
    } else {
      h2.textContent = "1";
    }
  });
}

let button$1 = (button == null) ? undefined : Primitive_option.some(button);

let h2$1 = (h2 == null) ? undefined : Primitive_option.some(h2);

export {
  button$1 as button,
  h2$1 as h2,
}
/* button Not a pure module */

Global__test.res

ReScript

open WebAPI.Global

let response = await fetch("https://rescript-lang.org/")

let response2 = await fetch(
  "https://rescript-lang.org/",
  ~init={
    headers: HeadersInit.fromDict(
      dict{
        "Content-Type": "application/json",
        "Authorization": "Bearer token",
      },
    ),
    body: BodyInit.fromString(`secret=foo&response=bar`),
  },
)

JS Output

let response = await fetch("https://rescript-lang.org/");

let response2 = await fetch("https://rescript-lang.org/", {
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer token"
  },
  body: "secret=foo&response=bar"
});

export {
  response,
  response2,
}

HTMLCanvasElement__test.res

ReScript

open WebAPI.Global

let myCanvas: DOMAPI.htmlCanvasElement =
  document->Document.getElementById("myCanvas")->Prelude.unsafeConversation
let ctx = myCanvas->HTMLCanvasElement.getContext_2D

ctx.fillStyle = FillStyle.fromString("red")
ctx->CanvasRenderingContext2D.fillRect(~x=50., ~y=50., ~w=200., ~h=200.)

ctx.fillStyle = FillStyle.fromString("black")
ctx.font = "2px Tahoma"
ctx.textBaseline = CanvasAPI.Top
ctx->CanvasRenderingContext2D.fillText(~text="MY TEXT", ~x=60., ~y=60.)

switch ctx.fillStyle->FillStyle.decode {
| FillStyle.String(color) => Console.log(`Color: ${color}`)
| FillStyle.CanvasGradient(_) => Console.log("CanvasGradient")
| FillStyle.CanvasPattern(_) => Console.log("CanvasPattern")
}

JS Output

import * as FillStyle$WebAPI from "../../src/DOMAPI/FillStyle.js";

let myCanvas = document.getElementById("myCanvas");

let ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";

ctx.fillRect(50, 50, 200, 200);

ctx.fillStyle = "black";

ctx.font = "2px Tahoma";

ctx.textBaseline = "top";

ctx.fillText("MY TEXT", 60, 60);

let color = FillStyle$WebAPI.decode(ctx.fillStyle);

switch (color.TAG) {
  case "String" :
    console.log("Color: " + color._0);
    break;
  case "CanvasGradient" :
    console.log("CanvasGradient");
    break;
  case "CanvasPattern" :
    console.log("CanvasPattern");
    break;
}

export {
  myCanvas,
  ctx,
}
/* myCanvas Not a pure module */

HTMLElement__test.res

ReScript

open WebAPI
open WebAPI.Global

document
->Document.querySelector("form")
->Null.toOption
->Option.forEach(form => {
  form->Element.scrollIntoView_withOptions({behavior: DOMAPI.Smooth})
})

JS Output

import * as Option from "rescript/lib/es6/Option.js";
import * as Primitive_option from "rescript/lib/es6/Primitive_option.js";

Option.forEach(Primitive_option.fromNullable(document.querySelector("form")), form => {
  form.scrollIntoView({
    behavior: "smooth"
  });
});

/*  Not a pure module */

HTMLInputElement__test.res

ReScript

open Global

let input: DOMAPI.htmlInputElement =
  document->Document.createElement(~localName="input")->Prelude.unsafeConversation
let value = input.value

JS Output

let input = document.createElement("input");

let value = input.value;

export {
  input,
  value,
}
/* input Not a pure module */

Location__test.res

ReScript

open Global

// Note that this only works when you added the `-open Global` bsc flag.
let location = window.location

// Access properties using `.`
let href = location.href

// Invoke methods using the `->TypeModule`
location->Location.reload

let a = 0

JS Output

let location = window.location;

let href = location.href;

location.reload();

let a = 0;

export {
  location,
  href,
  a,
}
/* location Not a pure module */