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) {
  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";
    }
  });
} else {
  console.log("Stuff not found");
}

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`),
  },
)

let response3 = await fetch_withRequest(
  Request.make2(~input="https://rescript-lang.org/"),
  ~init={
    method: "POST",
    headers: HeadersInit.fromDict(
      dict{
        "Content-Type": "application/x-www-form-urlencoded",
      },
    ),
    body: BodyInit.fromString(`secret=foo&response=bar`),
  },
)

removeEventListener(Mousedown, MouseEvent.preventDefault, ~options={capture: false})

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"
});

let response3 = await fetch(new Request("https://rescript-lang.org/"), {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "secret=foo&response=bar"
});

removeEventListener("mousedown", prim => {
  prim.preventDefault();
}, {
  capture: false
});

export {
  response,
  response2,
  response3,
}

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.fromNull(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 */

IntersectionObserver__test.res

ReScript

let observer = IntersectionObserver.make(~callback=(entry, observer) => {
  Console.log2(entry, observer)
})

let root = Global.document->Document.querySelector("#root")->Null.getUnsafe

let observer2 = IntersectionObserver.make(~callback=(entry, observer) => {
  Console.log2(entry, observer)
}, ~options={
  root: root->IntersectionObserverRoot.fromElement,
  rootMargin: "10px",
  threshold: [0.1],
})

switch observer2.root->IntersectionObserverRoot.decode {
| Element(_) => Console.log("Element")
| Document(_) => Console.log("Document")
| Null => Console.log("Null")
}
let rootMargin2 = observer2.rootMargin

let targetElement = Global.document->Document.querySelector("#targetElement")->Null.toOption
switch targetElement {
| Some(e) => {
    observer2->IntersectionObserver.observe(e)
    observer2->IntersectionObserver.unobserve(e)
  }
| _ => Console.log("Target element not found.")
}

let entries2 = observer2->IntersectionObserver.takeRecords
Console.log(entries2->Array.length)

observer2->IntersectionObserver.disconnect

JS Output

import * as Primitive_option from "rescript/lib/es6/Primitive_option.js";
import * as IntersectionObserverRoot$WebAPI from "../../src/IntersectionObserverAPI/IntersectionObserverRoot.js";

let observer = new IntersectionObserver((entry, observer) => {
  console.log(entry, observer);
});

let root = document.querySelector("#root");

let observer2 = new IntersectionObserver((entry, observer) => {
  console.log(entry, observer);
}, {
  root: Primitive_option.some(root),
  rootMargin: "10px",
  threshold: [0.1]
});

let match = IntersectionObserverRoot$WebAPI.decode(observer2.root);

if (typeof match !== "object") {
  console.log("Null");
} else if (match.TAG === "Element") {
  console.log("Element");
} else {
  console.log("Document");
}

let rootMargin2 = observer2.rootMargin;

let targetElement = document.querySelector("#targetElement");

if (targetElement !== null) {
  observer2.observe(targetElement);
  observer2.unobserve(targetElement);
} else {
  console.log("Target element not found.");
}

let entries2 = observer2.takeRecords();

console.log(entries2.length);

observer2.disconnect();

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

export {
  observer,
  root,
  observer2,
  rootMargin2,
  targetElement$1 as targetElement,
  entries2,
}
/* observer 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 */

Storage__test.res

ReScript

open WebAPI.Global
open WebAPI.Storage

for i in 0 to localStorage.length - 1 {
  localStorage->key(i)->Null.getOr("nothing")->Console.log
}

let item1 = localStorage->getItem("foo")->Null.getOr("nothing")

localStorage->setItem(~key="bar", ~value="...")

localStorage->removeItem("bar")

localStorage->clear

JS Output

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

for (let i = 0, i_finish = localStorage.length; i < i_finish; ++i) {
  console.log(Null.getOr(localStorage.key(i), "nothing"));
}

let item1 = Null.getOr(localStorage.getItem("foo"), "nothing");

localStorage.setItem("bar", "...");

localStorage.removeItem("bar");

localStorage.clear();

export {
  item1,
}
/*  Not a pure module */