Examples

The best example of usage of these bindings are the tests.
These exercise the public bindings directly. Reusable Web API bindings and conversion helpers belong in the library rather than in individual examples.

AddEventListener__test

ReScript

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

switch (button, h2) {
| (Some(button), Some(h2)) =>
  button->Element.addEventListener(EventType.Click, (e: UiEventsTypes.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 Stdlib_Int from "@rescript/runtime/lib/es6/Stdlib_Int.mjs";
import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.mjs";

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 = Stdlib_Int.fromString(text);
    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 */

AudioDestinationNode__.test

ReScript

let ctx = AudioContext.make()

let destinationNode = ctx.destination->AudioDestinationNode.asAudioNode
let context = AudioContext.asBaseAudioContext(ctx)

let osc = OscillatorNode.make(
  ~context,
  ~options={
    type_: WebAudioTypes.Sine,
    frequency: 440.0,
  },
)
let gain = GainNode.make(
  ~context,
  ~options={
    gain: 0.3,
  },
)
let _ = gain->GainNode.connect(~destinationNode)
let _ =
  osc
  ->OscillatorNode.asAudioScheduledSourceNode
  ->AudioScheduledSourceNode.connect(~destinationNode=gain->GainNode.asAudioNode)

osc->OscillatorNode.start

JS Output

let ctx = new AudioContext();

let destinationNode = ctx.destination;

let osc = new OscillatorNode(ctx, {
  type: "sine",
  frequency: 440.0
});

let gain = new GainNode(ctx, {
  gain: 0.3
});

gain.connect(destinationNode);

osc.connect(gain);

osc.start();

let context = ctx;

export {
  ctx,
  destinationNode,
  context,
  osc,
  gain,
}
/* ctx Not a pure module */

BindingAbsence__test

ReScript

let requestWithNullBody: Request.requestInit = {body: Nullable.null}

let requestWithUndefinedBody: Request.requestInit = {body: Nullable.undefined}

let intersectionWithNullRoot: IntersectionObserverTypes.intersectionObserverInit = {
  root: Nullable.null,
}

let waveShaperWithCurve: WebAudioTypes.waveShaperOptions = {curve: [0., 1.]}

let decodingConfiguration = (
  info: MediaCapabilities.Types.mediaCapabilitiesDecodingInfo,
): MediaCapabilities.Types.mediaDecodingConfiguration => info.configuration

let decodingKeySystemAccess = (info: MediaCapabilities.Types.mediaCapabilitiesDecodingInfo): Null.t<
  BaseEncryptedMediaExtensions.mediaKeySystemAccess,
> => info.keySystemAccess

let encodingConfiguration = (
  info: MediaCapabilities.Types.mediaCapabilitiesEncodingInfo,
): MediaCapabilities.Types.mediaEncodingConfiguration => info.configuration

let sharedWorkerName = (scope: SharedWorkerScope.t): string => scope.name

let imagePattern = (context: DOM.canvasRenderingContext2D, image: HTMLImageElement.t): Null.t<
  CanvasTypes.canvasPattern,
> => context->CanvasRenderingContext2D.createPattern(~image, ~repetition="repeat")

JS Output

import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.mjs";

let requestWithNullBody = {
  body: null
};

let requestWithUndefinedBody = {
  body: Primitive_option.some(undefined)
};

let intersectionWithNullRoot = {
  root: null
};

let waveShaperWithCurve = {
  curve: [
    0,
    1
  ]
};

function decodingConfiguration(info) {
  return info.configuration;
}

function decodingKeySystemAccess(info) {
  return info.keySystemAccess;
}

function encodingConfiguration(info) {
  return info.configuration;
}

function sharedWorkerName(scope) {
  return scope.name;
}

function imagePattern(context, image) {
  return context.createPattern(image, "repeat");
}

export {
  requestWithNullBody,
  requestWithUndefinedBody,
  intersectionWithNullRoot,
  waveShaperWithCurve,
  decodingConfiguration,
  decodingKeySystemAccess,
  encodingConfiguration,
  sharedWorkerName,
  imagePattern,
}
/* No side effect */

Classify__test

ReScript

%%raw(`
globalThis.Element = class Element {}
globalThis.Document = class Document {}
globalThis.HTMLElement = class HTMLElement extends globalThis.Element {}
globalThis.HTMLCanvasElement = class HTMLCanvasElement extends globalThis.HTMLElement {}
globalThis.HTMLImageElement = class HTMLImageElement extends globalThis.HTMLElement {}
globalThis.HTMLInputElement = class HTMLInputElement extends globalThis.HTMLElement {
  checkValidity() {
    return true
  }
}
`)

let element: unknown = %raw(`new globalThis.Element()`)
let document: unknown = %raw(`new globalThis.Document()`)
let htmlElement: unknown = %raw(`new globalThis.HTMLElement()`)
let canvas: unknown = %raw(`new globalThis.HTMLCanvasElement()`)
let image: unknown = %raw(`new globalThis.HTMLImageElement()`)
let input: unknown = %raw(`new globalThis.HTMLInputElement()`)

assert(element->Element.classify->Option.isSome)
assert(document->Document.classify->Option.isSome)
assert(htmlElement->HTMLElement.classify->Option.isSome)
assert(canvas->HTMLCanvasElement.classify->Option.isSome)
assert(image->HTMLImageElement.classify->Option.isSome)
assert(input->HTMLInputElement.classify->Option.isSome)

assert(input->Element.classify->Option.isSome)
assert(input->HTMLElement.classify->Option.isSome)
assert(document->Element.classify->Option.isNone)
assert(image->HTMLCanvasElement.classify->Option.isNone)
assert(htmlElement->HTMLInputElement.classify->Option.isNone)

input
->HTMLInputElement.classify
->Option.forEach(input => assert(input->HTMLInputElement.checkValidity))

%%raw(`
delete globalThis.HTMLCanvasElement
delete globalThis.HTMLImageElement
delete globalThis.HTMLInputElement
`)

assert(canvas->HTMLCanvasElement.classify->Option.isNone)
assert(image->HTMLImageElement.classify->Option.isNone)
assert(input->HTMLInputElement.classify->Option.isNone)

JS Output

import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.mjs";
import * as Element$WebAPI from "../../src/dom-nodes/Element.js";
import * as Document$WebAPI from "../../src/window/Document.js";
import * as HTMLElement$WebAPI from "../../src/html/HTMLElement.js";
import * as HTMLImageElement$WebAPI from "../../src/html/HTMLImageElement.js";
import * as HTMLInputElement$WebAPI from "../../src/html/HTMLInputElement.js";
import * as HTMLCanvasElement$WebAPI from "../../src/canvas/HTMLCanvasElement.js";

globalThis.Element = class Element {}
globalThis.Document = class Document {}
globalThis.HTMLElement = class HTMLElement extends globalThis.Element {}
globalThis.HTMLCanvasElement = class HTMLCanvasElement extends globalThis.HTMLElement {}
globalThis.HTMLImageElement = class HTMLImageElement extends globalThis.HTMLElement {}
globalThis.HTMLInputElement = class HTMLInputElement extends globalThis.HTMLElement {
  checkValidity() {
    return true
  }
}
;

let element = (new globalThis.Element());

let document = (new globalThis.Document());

let htmlElement = (new globalThis.HTMLElement());

let canvas = (new globalThis.HTMLCanvasElement());

let image = (new globalThis.HTMLImageElement());

let input = (new globalThis.HTMLInputElement());

if (!Stdlib_Option.isSome(Element$WebAPI.classify(element))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      21,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isSome(Document$WebAPI.classify(document))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      22,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isSome(HTMLElement$WebAPI.classify(htmlElement))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      23,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isSome(HTMLCanvasElement$WebAPI.classify(canvas))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      24,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isSome(HTMLImageElement$WebAPI.classify(image))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      25,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isSome(HTMLInputElement$WebAPI.classify(input))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      26,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isSome(Element$WebAPI.classify(input))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      28,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isSome(HTMLElement$WebAPI.classify(input))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      29,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isNone(Element$WebAPI.classify(document))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      30,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isNone(HTMLCanvasElement$WebAPI.classify(image))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      31,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isNone(HTMLInputElement$WebAPI.classify(htmlElement))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      32,
      0
    ],
    Error: new Error()
  };
}

Stdlib_Option.forEach(HTMLInputElement$WebAPI.classify(input), input => {
  if (input.checkValidity()) {
    return;
  }
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      36,
      26
    ],
    Error: new Error()
  };
});

delete globalThis.HTMLCanvasElement
delete globalThis.HTMLImageElement
delete globalThis.HTMLInputElement
;

if (!Stdlib_Option.isNone(HTMLCanvasElement$WebAPI.classify(canvas))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      44,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isNone(HTMLImageElement$WebAPI.classify(image))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      45,
      0
    ],
    Error: new Error()
  };
}

if (!Stdlib_Option.isNone(HTMLInputElement$WebAPI.classify(input))) {
  throw {
    RE_EXN_ID: "Assert_failure",
    _1: [
      "Classify__test.res",
      46,
      0
    ],
    Error: new Error()
  };
}

export {
  element,
  document,
  htmlElement,
  canvas,
  image,
  input,
}
/*  Not a pure module */

Document__test

ReScript

let createSvgElement = (document: DOM.document) =>
  document->Document.createElementNS(~namespace="http://www.w3.org/2000/svg", ~qualifiedName="svg")

let makeAnimation = (timeline: Animation.animationTimeline) => Animation.make(~timeline)

let asAnimationTimeline = (timeline: DOM.documentTimeline): Animation.animationTimeline =>
  timeline->DocumentTimeline.asAnimationTimeline

JS Output

function createSvgElement(document) {
  return document.createElementNS("http://www.w3.org/2000/svg", "svg");
}

function makeAnimation(timeline) {
  return new Animation(undefined, timeline);
}

function asAnimationTimeline(timeline) {
  return timeline;
}

export {
  createSvgElement,
  makeAnimation,
  asAnimationTimeline,
}
/* No side effect */

DOMMatrix__test

ReScript

let _make = DOMMatrix.make()
let _fromString = DOMMatrix.fromString("matrix(1, 0, 0, 1, 0, 0)")
let _fromArray = DOMMatrix.fromArray([1., 0., 0., 1., 0., 0.])

JS Output

let _make = new DOMMatrix();

let _fromString = new DOMMatrix("matrix(1, 0, 0, 1, 0, 0)");

let _fromArray = new DOMMatrix([
  1,
  0,
  0,
  1,
  0,
  0
]);

export {
  _make,
  _fromString,
  _fromArray,
}
/* _make Not a pure module */

DOMMatrixReadOnly__test

ReScript

let _make = DOMMatrixReadOnly.make()

let _fromString = DOMMatrixReadOnly.fromString("matrix(1, 0, 0, 1, 0, 0)")

let _fromArray = DOMMatrixReadOnly.fromArray([1., 0., 0., 1., 0., 0.])

JS Output

let _make = new DOMMatrixReadOnly();

let _fromString = new DOMMatrixReadOnly("matrix(1, 0, 0, 1, 0, 0)");

let _fromArray = new DOMMatrixReadOnly([
  1,
  0,
  0,
  1,
  0,
  0
]);

export {
  _make,
  _fromString,
  _fromArray,
}
/* _make Not a pure module */

Element__test

ReScript

external myElement: DOMTree.element = "myElement"

switch myElement->Element.getAttribute("foo") {
| Null.Value(value) => value->Console.log
| Null => "nothing"->Console.log
}

JS Output

let value = myElement.getAttribute("foo");

if (value === null) {
  console.log("nothing");
} else {
  console.log(value);
}

/* value Not a pure module */

Event__test

ReScript

let acceptsDOMEvent = (_event: DOM.event) => ()
let acceptsDOMExtendableEvent = (_event: DOM.extendableEvent) => ()

let _ = (event: PushEvent.t) => {
  acceptsDOMEvent(event->PushEvent.asEvent)
  acceptsDOMExtendableEvent(event->PushEvent.asExtendableEvent)
}

let handleClick = (event: DOM.event) => {
  event->Event.preventDefault
  switch event->Event.target {
  | Value(target) => Console.log(target)
  | Null => Console.log("No target found")
  }
}

let target: DOM.eventTarget = {}

let fn = (target: DOM.eventTarget) =>
  target->EventTarget.addEventListener(Click, () => Console.log("Click 1"))

let x = fn(target)

// Testing out global event listeners
DOM.window->Window.addEventListener(Click, () => Console.log("Click 2"))

JS Output

function acceptsDOMEvent(_event) {

}

function acceptsDOMExtendableEvent(_event) {

}

function handleClick(event) {
  event.preventDefault();
  let target = event.target;
  if (target === null) {
    console.log("No target found");
    return;
  }
  console.log(target);
}

let target = {};

function fn(target) {
  target.addEventListener("click", () => {
    console.log("Click 1");
  });
}

let x = fn(target);

window.addEventListener("click", () => {
  console.log("Click 2");
});

export {
  acceptsDOMEvent,
  acceptsDOMExtendableEvent,
  handleClick,
  target,
  fn,
  x,
}
/* x Not a pure module */

EventTarget__test

ReScript

let acceptsDOMEventTarget = (_target: DOM.eventTarget) => ()
let acceptsEventTargetLeaf = (_target: DOM.eventTarget) => ()

let _ = (target: DOM.eventTarget) => {
  acceptsEventTargetLeaf(target)
}

let _ = (target: DOM.eventTarget) => {
  acceptsDOMEventTarget(target)
}

let el = switch Document.make()->Document.getElementById("foo") {
| Null => ()
| Value(el) => el->Element.addEventListener(Click, () => ())
}

JS Output

function acceptsDOMEventTarget(_target) {

}

function acceptsEventTargetLeaf(_target) {

}

let el = new Document().getElementById("foo");

let el$1;

if (el === null) {
  el$1 = undefined;
} else {
  el.addEventListener("click", () => {});
  el$1 = undefined;
}

export {
  acceptsDOMEventTarget,
  acceptsEventTargetLeaf,
  el$1 as el,
}
/* el Not a pure module */

EventType__test

ReScript

let click: EventType.t = Click

let custom: EventType.t = Custom("custom-event")

let _ = (click, custom)

JS Output

let click = "click";

let custom = "custom-event";

export {
  click,
  custom,
}
/* No side effect */

Fetch__test

ReScript

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

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

let response3 = await Fetch.fetchWithRequest(
  Request.fromURL("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`)->Nullable.make,
  },
)

DOM.window->Window.removeEventListener(
  EventType.Mousedown,
  MouseEvent.preventDefault,
  ~options={capture: false},
)

let registrationResult = await Window.current
->Window.navigator
->Navigator.serviceWorker
->ServiceWorkerContainer.register("/sw.js")
let subscription = await registrationResult.pushManager->PushManager.subscribe(
  ~options={
    userVisibleOnly: true,
    applicationServerKey: ApplicationServerKey.fromString("MyPublicKey")->Nullable.make,
  },
)

let pushSubscriptionJSON = subscription->PushSubscription.toJSON
let (auth, p256dh) = switch pushSubscriptionJSON.keys {
| None => ("?", "?")
| Some(keys) => (keys.auth, keys.p256dh)
}
Console.log(`For subscription ${subscription.endpoint}, auth is ${auth} and p256dh is ${p256dh}`)

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

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

let registrationResult = await window.navigator.serviceWorker.register("/sw.js");

let subscription = await registrationResult.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: "MyPublicKey"
});

let pushSubscriptionJSON = subscription.toJSON();

let keys = pushSubscriptionJSON.keys;

let match = keys !== undefined ? [
    keys.auth,
    keys.p256dh
  ] : [
    "?",
    "?"
  ];

let p256dh = match[1];

let auth = match[0];

console.log(`For subscription ` + subscription.endpoint + `, auth is ` + auth + ` and p256dh is ` + p256dh);

export {
  response,
  response2,
  response3,
  registrationResult,
  subscription,
  pushSubscriptionJSON,
  auth,
  p256dh,
}

FontFace__test

ReScript

let dataView: DataView.t = Obj.magic()
let arrayBuffer: ArrayBuffer.t = Obj.magic()

let _fromString = FontFace.fromString(~family="Inter", ~source="url(/fonts/inter.woff2)")

let _fromDataView = FontFace.fromDataView(~family="Inter", ~source=dataView)

let _fromArrayBuffer = FontFace.fromArrayBuffer(~family="Inter", ~source=arrayBuffer)

JS Output

let _fromString = new FontFace("Inter", "url(/fonts/inter.woff2)");

let _fromDataView = new FontFace("Inter", undefined);

let _fromArrayBuffer = new FontFace("Inter", undefined);

let dataView;

let arrayBuffer;

export {
  dataView,
  arrayBuffer,
  _fromString,
  _fromDataView,
  _fromArrayBuffer,
}
/* _fromString Not a pure module */

FormData__test

ReScript

/* This works when your form has an id of "myForm" */
@scope(("document", "forms"))
external myForm: DOMTree.htmlFormElement = "myForm"

module EntryValue = FormDataEntryValue

open EntryValue

let logEntry = (~stringPrefix: string, ~filePrefix: string, entry: EntryValue.t) =>
  switch entry {
  | String(value) => Console.log(`${stringPrefix}${value}`)
  | File(file) => Console.log(`${filePrefix}${file.name}`)
  }

let formData: FormData.t = FormData.make(~form=myForm)

// Get a form field - returns formDataEntryValue which could be string or WebApiFile
let phoneEntry: null<EntryValue.t> = formData->FormData.get("phone")

// Decode the entry to handle both string and WebApiFile cases
let _ = switch phoneEntry->Null.toOption {
| None => Console.log("No phone field")
| Some(entry) => logEntry(~stringPrefix="Phone: ", ~filePrefix="Unexpected file: ", entry)
}

// Get all values for a field (useful for multi-select or multiple file inputs)
let allImages: array<EntryValue.t> = formData->FormData.getAll("images")
let _ =
  allImages->Array.forEach(entry =>
    logEntry(~stringPrefix="String value: ", ~filePrefix="WebApiFile: ", entry)
  )

// Create formDataEntryValue from string or file
let stringEntry = EntryValue.String("test value")
let blob: Blob.t = Blob.make(~blobParts=[])
let file: File.t = File.make(~fileBits=[], ~fileName="test.txt")
let fileEntry = EntryValue.File(file)

formData->FormData.appendBlob(~name="avatar", ~blobValue=blob)

logEntry(~stringPrefix="String entry: ", ~filePrefix="Unexpected file entry: ", stringEntry)

logEntry(~stringPrefix="Unexpected string entry: ", ~filePrefix="File entry: ", fileEntry)

// Iterate over all entries in the FormData
let entries: iterable<(string, EntryValue.t)> = formData->FormData.entries
let _ =
  entries
  ->Array.fromIterable
  ->Array.forEach(((key, value)) => {
    switch value {
    | String(s) => Console.log(`${key}: ${s}`)
    | File(f) => Console.log(`${key}: [WebApiFile] ${f.name}`)
    }
  })

JS Output

function logEntry(stringPrefix, filePrefix, entry) {
  if (typeof entry === "string") {
    console.log(stringPrefix + entry);
    return;
  }
  console.log(filePrefix + entry.name);
}

let formData = new FormData(document.forms.myForm);

let phoneEntry = formData.get("phone");

if (phoneEntry !== null) {
  logEntry("Phone: ", "Unexpected file: ", phoneEntry);
} else {
  console.log("No phone field");
}

let allImages = formData.getAll("images");

allImages.forEach(entry => logEntry("String value: ", "WebApiFile: ", entry));

let stringEntry = "test value";

let blob = new Blob([]);

let file = new File([], "test.txt");

let fileEntry = file;

formData.append("avatar", blob);

logEntry("String entry: ", "Unexpected file entry: ", stringEntry);

logEntry("Unexpected string entry: ", "File entry: ", fileEntry);

let entries = formData.entries();

Array.from(entries).forEach(param => {
  let value = param[1];
  let key = param[0];
  if (typeof value === "string") {
    console.log(key + `: ` + value);
    return;
  }
  console.log(key + `: [WebApiFile] ` + value.name);
});

let EntryValue;

export {
  EntryValue,
  logEntry,
  formData,
  phoneEntry,
  allImages,
  stringEntry,
  blob,
  file,
  fileEntry,
  entries,
}
/* formData Not a pure module */

Headers__test

ReScript

let h = Headers.make()

h->Headers.set(~name="X-Test", ~value="1")

let h2 = Headers.fromDict(dict{"X-Vegetable": "Carrot"})

let h3 = Headers.fromKeyValueArray([("X-Fruit", "Apple"), ("X-Vegetable", "Carrot")])

Console.log(h3->Headers.get("X-Fruit"))

JS Output

let h = new Headers();

h.set("X-Test", "1");

let h2 = new Headers({
  "X-Vegetable": "Carrot"
});

let h3 = new Headers([
  [
    "X-Fruit",
    "Apple"
  ],
  [
    "X-Vegetable",
    "Carrot"
  ]
]);

console.log(h3.get("X-Fruit"));

export {
  h,
  h2,
  h3,
}
/* h Not a pure module */

HTMLCanvasElement__test

ReScript

let draw = (ctx: DOM.canvasRenderingContext2D) => {
  ctx->CanvasRenderingContext2D.setFillStyle(FillStyle.fromString("red"))
  ctx->CanvasRenderingContext2D.fillRect(~x=50., ~y=50., ~w=200., ~h=200.)

  ctx->CanvasRenderingContext2D.setFillStyle(FillStyle.fromString("black"))
  ctx->CanvasRenderingContext2D.setFont("2px Tahoma")
  ctx->CanvasRenderingContext2D.setTextBaseline(CanvasTypes.Top)
  ctx->CanvasRenderingContext2D.fillText(~text="MY TEXT", ~x=60., ~y=60.)

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

  DomGlobal.document
  ->Document.createElement("img")
  ->HTMLImageElement.classify
  ->Option.forEach(image =>
    ctx->CanvasRenderingContext2D.drawImageWithDimensions(
      ~image,
      ~dx=0.,
      ~dy=0.,
      ~dw=200.,
      ~dh=200.,
    )
  )
}

DomGlobal.document
->Document.getElementById("myCanvas")
->Null.toOption
->Option.flatMap(element => element->HTMLCanvasElement.classify)
->Option.forEach(canvas =>
  canvas->HTMLCanvasElement.getContext2D->Null.toOption->Option.forEach(draw)
)

JS Output

import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.mjs";
import * as FillStyle$WebAPI from "../../src/canvas/FillStyle.js";
import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.mjs";
import * as HTMLImageElement$WebAPI from "../../src/html/HTMLImageElement.js";
import * as HTMLCanvasElement$WebAPI from "../../src/canvas/HTMLCanvasElement.js";

function draw(ctx) {
  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;
  }
  Stdlib_Option.forEach(HTMLImageElement$WebAPI.classify(document.createElement("img")), image => {
    ctx.drawImage(image, 0, 0, 200, 200);
  });
}

Stdlib_Option.forEach(Stdlib_Option.flatMap(Primitive_option.fromNull(document.getElementById("myCanvas")), HTMLCanvasElement$WebAPI.classify), canvas => Stdlib_Option.forEach(Primitive_option.fromNull(canvas.getContext("2d")), draw));

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

HTMLElement__test

ReScript

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

let asNode = (element: Element.t): Node.t => element->Element.asNode

let asElement = (element: HTMLElement.t): Element.t => element->HTMLElement.asElement

let setNamespacedAttribute = (element: HTMLElement.t) =>
  element->HTMLElement.setAttributeNS(
    ~namespace="http://www.w3.org/1999/xhtml",
    ~qualifiedName="data-follow-up",
    ~value="complete",
  )

JS Output

import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.mjs";
import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.mjs";

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

function asNode(element) {
  return element;
}

function asElement(element) {
  return element;
}

function setNamespacedAttribute(element) {
  element.setAttributeNS("http://www.w3.org/1999/xhtml", "data-follow-up", "complete");
}

export {
  asNode,
  asElement,
  setNamespacedAttribute,
}
/*  Not a pure module */

HTMLElementHidden__test

ReScript

let describeHidden = (element: HTMLElement.t) =>
  switch element->HTMLElement.hidden {
  | HTMLElement.Visible => "visible"
  | HTMLElement.Hidden => "hidden"
  | HTMLElement.HiddenUntilFound => "hidden until found"
  }

let setHiddenStates = (element: HTMLElement.t) => {
  element->HTMLElement.setHidden(HTMLElement.Hidden)
  element->HTMLElement.setHidden(HTMLElement.HiddenUntilFound)
  element->HTMLElement.setHidden(HTMLElement.Visible)
}

let formHidden = (element: HTMLFormElement.t): HTMLElement.hiddenState =>
  element->HTMLFormElement.hidden

let setFormHidden = (element: HTMLFormElement.t) =>
  element->HTMLFormElement.setHidden(HTMLElement.Hidden)

let slotHidden = (element: HTMLSlotElement.t): HTMLElement.hiddenState =>
  element->HTMLSlotElement.hidden

let setSlotHidden = (element: HTMLSlotElement.t) =>
  element->HTMLSlotElement.setHidden(HTMLElement.HiddenUntilFound)

let anchorHidden = (element: HTMLAnchorElement.t): HTMLElement.hiddenState =>
  element->HTMLAnchorElement.hidden

let setAnchorHidden = (element: HTMLAnchorElement.t) =>
  element->HTMLAnchorElement.setHidden(HTMLElement.Visible)

JS Output

function describeHidden(element) {
  let match = element.hidden;
  switch (match) {
    case false :
      return "visible";
    case true :
      return "hidden";
    case "until-found" :
      return "hidden until found";
  }
}

function setHiddenStates(element) {
  element.hidden = true;
  element.hidden = "until-found";
  element.hidden = false;
}

function formHidden(element) {
  return element.hidden;
}

function setFormHidden(element) {
  element.hidden = true;
}

function slotHidden(element) {
  return element.hidden;
}

function setSlotHidden(element) {
  element.hidden = "until-found";
}

function anchorHidden(element) {
  return element.hidden;
}

function setAnchorHidden(element) {
  element.hidden = false;
}

export {
  describeHidden,
  setHiddenStates,
  formHidden,
  setFormHidden,
  slotHidden,
  setSlotHidden,
  anchorHidden,
  setAnchorHidden,
}
/* No side effect */

HTMLInputElement__test

ReScript

let value = switch DomGlobal.document->Document.createElement("input")->HTMLInputElement.classify {
| Some(input) => Some(input.value)
| None => None
}

JS Output

import * as HTMLInputElement$WebAPI from "../../src/html/HTMLInputElement.js";

let input = HTMLInputElement$WebAPI.classify(document.createElement("input"));

let value = input !== undefined ? input.value : undefined;

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

HTMLSlotElement__test

ReScript

let assignedNodesForElement = (element: DOMTree.element) =>
  switch element.assignedSlot {
  | Value(slot) =>
    slot.name = "content"
    slot->HTMLSlotElement.assignedNodes
  | Null => []
  }

let assignedNodesForText = (text: Text.t) =>
  switch text.assignedSlot {
  | Value(slot) =>
    slot.name = "content"
    slot->HTMLSlotElement.assignedNodes
  | Null => []
  }

JS Output

function assignedNodesForElement(element) {
  let slot = element.assignedSlot;
  if (slot === null) {
    return [];
  }
  slot.name = "content";
  return slot.assignedNodes();
}

function assignedNodesForText(text) {
  let slot = text.assignedSlot;
  if (slot === null) {
    return [];
  }
  slot.name = "content";
  return slot.assignedNodes();
}

export {
  assignedNodesForElement,
  assignedNodesForText,
}
/* No side effect */

ImageData__test

ReScript

let imageData = ImageData.makeWithData(~data=Uint8ClampedArray.fromArray([]), ~sw=100, ~sh=100)

imageData.data->TypedArray.length->Console.log

JS Output

let imageData = new ImageData(new Uint8ClampedArray([]), 100, 100);

console.log(imageData.data.length);

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

IntersectionObserver__test

ReScript

module IObserver = IntersectionObserver
module IRoot = IntersectionObserverRoot

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

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

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

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

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

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

observer2->IObserver.disconnect

JS Output

import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.mjs";
import * as IntersectionObserverRoot$WebAPI from "../../src/observers/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 root$1 = observer2.root;

if (root$1 !== null) {
  let match = IntersectionObserverRoot$WebAPI.decode(root$1);
  if (typeof match !== "object") {
    console.log("Null");
  } else if (match.TAG === "Element") {
    console.log("Element");
  } else {
    console.log("Document");
  }
} else {
  console.log("Null");
}

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 IObserver;

let IRoot;

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

export {
  IObserver,
  IRoot,
  observer,
  root,
  observer2,
  rootMargin2,
  targetElement$1 as targetElement,
  entries2,
}
/* observer Not a pure module */

Location__test

ReScript

let window = DOM.window
let location = window->Window.location

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

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

let a = 0

// testing out editor autocomplete
let fn = (l: Location.t) => l->Location.reload

JS Output

let window = globalThis.window;

let location = window.location;

let href = location.href;

location.reload();

function fn(l) {
  l.reload();
}

let a = 0;

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

MediaStream__test

ReScript

let mediaStream: MediaCaptureAndStreamsTypes.mediaStream = Obj.magic()
let mediaStreamTrack: MediaCaptureAndStreamsTypes.mediaStreamTrack = Obj.magic()

let _make = MediaStream.make()

let _fromMediaStream = MediaStream.fromMediaStream(mediaStream)

let _fromTracks = MediaStream.fromTracks([mediaStreamTrack])

JS Output

let _make = new MediaStream();

let _fromMediaStream = new MediaStream(undefined);

let _fromTracks = new MediaStream([undefined]);

let mediaStream;

let mediaStreamTrack;

export {
  mediaStream,
  mediaStreamTrack,
  _make,
  _fromMediaStream,
  _fromTracks,
}
/* _make Not a pure module */

MutationObserver__test

ReScript

module MObserver = MutationObserver

let observer = MObserver.make((mutations, obs) => {
  let button = DomGlobal.document->Document.querySelector("button")
  switch button->Null.toOption {
  | Some(button) => {
      Console.log(button)
      obs->MObserver.disconnect
    }
  | None => ()
  }
  Console.log(mutations)
})

observer->MObserver.observe(
  ~target=DomGlobal.document->Document.asNode,
  ~options={childList: true, subtree: true},
)

let records = observer->MObserver.takeRecords
Console.log(records->Array.length)

observer->MObserver.disconnect

JS Output

let observer = new MutationObserver((mutations, obs) => {
  let button = document.querySelector("button");
  if (button !== null) {
    console.log(button);
    obs.disconnect();
  }
  console.log(mutations);
});

observer.observe(document, {
  childList: true,
  subtree: true
});

let records = observer.takeRecords();

console.log(records.length);

observer.disconnect();

let MObserver;

export {
  MObserver,
  observer,
  records,
}
/* observer Not a pure module */

Notification__test

ReScript

let current = Notification.permission

Notification.requestPermission()
->Promise.thenResolve(notificationPermission => {
  switch notificationPermission {
  | Granted => Console.log("Permission granted")
  | Denied => Console.log("Permission denied")
  | Default => Console.log("Permission default")
  }
})
->Promise.ignore

JS Output

let current = Notification.permission;

Notification.requestPermission().then(notificationPermission => {
  switch (notificationPermission) {
    case "default" :
      console.log("Permission default");
      return;
    case "denied" :
      console.log("Permission denied");
      return;
    case "granted" :
      console.log("Permission granted");
      return;
  }
});

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

OfflineAudioContext__test

ReScript

let offlineAudioContextOptions: WebAudioTypes.offlineAudioContextOptions = Obj.magic()

let _fromOptions = OfflineAudioContext.fromOptions(offlineAudioContextOptions)

let _fromChannelCountLengthAndSampleRate = OfflineAudioContext.fromChannelCountLengthAndSampleRate(
  ~numberOfChannels=2,
  ~length=1024,
  ~sampleRate=44_100.,
)

JS Output

let _fromOptions = new OfflineAudioContext(undefined);

let _fromChannelCountLengthAndSampleRate = new OfflineAudioContext(2, 1024, 44100);

let offlineAudioContextOptions;

export {
  offlineAudioContextOptions,
  _fromOptions,
  _fromChannelCountLengthAndSampleRate,
}
/* _fromOptions Not a pure module */

Path2D__test

ReScript

let path2D: CanvasTypes.path2D = Obj.magic()

let _make = Path2D.make()
let _fromPath2D = Path2D.fromPath2D(path2D)
let _fromString = Path2D.fromString("M0 0 L10 10")

JS Output

let _make = new Path2D();

let _fromPath2D = new Path2D(undefined);

let _fromString = new Path2D("M0 0 L10 10");

let path2D;

export {
  path2D,
  _make,
  _fromPath2D,
  _fromString,
}
/* _make Not a pure module */

ReadableStream__test

ReScript

let underlyingSource: FileTypes.underlyingSource<string> = Obj.magic()
let strategy: FileTypes.queuingStrategy<string> = Obj.magic()

let _make: ReadableStream.t<string> = ReadableStream.make()

let _fromUnderlyingSource = ReadableStream.fromUnderlyingSource(underlyingSource)

let _fromUnderlyingSourceWithStrategy = ReadableStream.fromUnderlyingSource(
  underlyingSource,
  ~strategy,
)

JS Output

let _make = new ReadableStream();

let _fromUnderlyingSource = new ReadableStream(undefined);

let _fromUnderlyingSourceWithStrategy = new ReadableStream(undefined, undefined);

let underlyingSource;

let strategy;

export {
  underlyingSource,
  strategy,
  _make,
  _fromUnderlyingSource,
  _fromUnderlyingSourceWithStrategy,
}
/* _make Not a pure module */

Request__test

ReScript

let req = Request.fromURL("https://example.com")

let blob = Blob.make(~blobParts=[])
let file = File.make(~fileBits=[], ~fileName="hello.txt")
let params = URLSearchParams.fromString("greeting=hello")
let formData = FormData.make()
let stream = ReadableStream.make()

let stringBody = BodyInit.fromString("hello")
let blobBody = BodyInit.fromBlob(blob)
let fileBody = BodyInit.fromFile(file)
let paramsBody = BodyInit.fromURLSearchParams(params)
let formDataBody = BodyInit.fromFormData(formData)
let streamBody = BodyInit.fromReadableStream(stream)

let req1 = Request.fromURL(
  "https://example.com/api",
  ~init={method: "POST", body: stringBody->Nullable.make},
)

let req2 = Request.fromRequest(req1)

let _blob: Blob.t = await req2->Request.clone->Request.blob

let formDataReq = Request.fromURL(
  "https://example.com/form",
  ~init={method: "POST", body: formDataBody->Nullable.make},
)
let _formData: FormData.t = await formDataReq->Request.formData

Console.log(await req2->Request.text)

JS Output

import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.mjs";

let req = new Request("https://example.com");

let blob = new Blob([]);

let file = new File([], "hello.txt");

let params = new URLSearchParams("greeting=hello");

let formData = new FormData();

let stream = new ReadableStream();

let stringBody = "hello";

let req1 = new Request("https://example.com/api", {
  method: "POST",
  body: Primitive_option.some(stringBody)
});

let req2 = new Request(req1);

let _blob = await req2.clone().blob();

let formDataReq = new Request("https://example.com/form", {
  method: "POST",
  body: Primitive_option.some(formData)
});

let _formData = await formDataReq.formData();

console.log(await req2.text());

let blobBody = blob;

let fileBody = file;

let paramsBody = params;

let formDataBody = formData;

let streamBody = stream;

export {
  req,
  blob,
  file,
  params,
  formData,
  stream,
  stringBody,
  blobBody,
  fileBody,
  paramsBody,
  formDataBody,
  streamBody,
  req1,
  req2,
  _blob,
  formDataReq,
  _formData,
}
/* req Not a pure module */

Response__test

ReScript

let headers = HeadersInit.fromDict(dict{"X-Fruit": "Peach"})
let blob = Blob.make(~blobParts=[])
let file = File.make(~fileBits=[], ~fileName="pong.txt")
let params = URLSearchParams.fromString("fruit=peach")
let formData = FormData.make()
let stream = ReadableStream.make()

let response = Response.fromNull(~init={status: 204, headers})

let response1 = Response.fromString("pong", ~init={status: 200, headers})

let response2 = Response.fromBlob(blob)
let response3 = Response.fromFile(file)
let response4 = Response.fromURLSearchParams(params)
let response5 = Response.fromFormData(formData)
let response6 = Response.fromReadableStream(stream)

let _blob: Blob.t = await response1
->Response.clone
->Response.blob
let _formData: FormData.t = await response5->Response.formData

JS Output

import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.mjs";

let headers = {
  "X-Fruit": "Peach"
};

let blob = new Blob([]);

let file = new File([], "pong.txt");

let params = new URLSearchParams("fruit=peach");

let formData = new FormData();

let stream = new ReadableStream();

let response = new Response(null, {
  status: 204,
  headers: Primitive_option.some(headers)
});

let response1 = new Response("pong", {
  status: 200,
  headers: Primitive_option.some(headers)
});

let response2 = new Response(blob);

let response3 = new Response(file);

let response4 = new Response(params);

let response5 = new Response(formData);

let response6 = new Response(stream);

let _blob = await response1.clone().blob();

let _formData = await response5.formData();

export {
  headers,
  blob,
  file,
  params,
  formData,
  stream,
  response,
  response1,
  response2,
  response3,
  response4,
  response5,
  response6,
  _blob,
  _formData,
}
/* blob Not a pure module */

ServiceWorker__test

ReScript

let self = ServiceWorkerScope.current

self->ServiceWorkerScope.addEventListener(EventType.Push, (event: PushEvent.t) => {
  Console.log("received push event")

  // Extract data
  let (title, body) = switch event.data->Null.toOption {
  | Some(data) =>
    switch data->PushMessageData.json {
    | JSON.Object(dict{"title": JSON.String(title), "body": JSON.String(body)}) => (title, body)
    | _ => ("???", "???")
    }
  | None => ("???", "???")
  }

  // Handle some data sync
  event->PushEvent.waitUntil(self->ServiceWorkerScope.fetch("https://rescript-lang.org"))

  // Show notification
  self.registration
  ->ServiceWorkerRegistration.showNotification(
    ~title,
    ~options={
      body,
      icon: "/icon.png",
      actions: [{action: "open", title: "Open"}, {action: "close", title: "Close"}],
      // For example the id of a new data entry
      data: JSON.Number(17.),
      vibrate: [200, 50, 200, 50, 400],
    },
  )
  ->Promise.ignore
})

self->ServiceWorkerScope.addEventListener(EventType.NotificationClick, (
  event: Notification.notificationEvent,
) => {
  Console.log(`notification clicked: ${event.action}`)
  // Close the notification
  event.notification->Notification.close

  // Open a new window if that is relevant
  event.notification.data
  ->Option.flatMap(data => {
    switch data {
    | JSON.Number(id) => Some(Float.toString(id))
    | _ => None
    }
  })
  ->Option.forEach(id => {
    self.clients
    ->Clients.openWindow(`https://mywebsite.com/mydata/${id}`)
    ->Promise.ignore
  })
})

JS Output

import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.mjs";

let self = globalThis.self;

self.addEventListener("push", event => {
  console.log("received push event");
  let data = event.data;
  let match;
  if (data !== null) {
    let match$1 = data.json();
    if (typeof match$1 === "object" && match$1 !== null && !Array.isArray(match$1)) {
      let title = match$1.title;
      if (typeof title === "string") {
        let body = match$1.body;
        match = typeof body === "string" ? [
            title,
            body
          ] : [
            "???",
            "???"
          ];
      } else {
        match = [
          "???",
          "???"
        ];
      }
    } else {
      match = [
        "???",
        "???"
      ];
    }
  } else {
    match = [
      "???",
      "???"
    ];
  }
  event.waitUntil(self.fetch("https://rescript-lang.org"));
  self.registration.showNotification(match[0], {
    body: match[1],
    icon: "/icon.png",
    data: 17,
    actions: [
      {
        action: "open",
        title: "Open"
      },
      {
        action: "close",
        title: "Close"
      }
    ],
    vibrate: [
      200,
      50,
      200,
      50,
      400
    ]
  });
});

self.addEventListener("notificationclick", event => {
  console.log(`notification clicked: ` + event.action);
  event.notification.close();
  Stdlib_Option.forEach(Stdlib_Option.flatMap(event.notification.data, data => {
    if (typeof data === "number") {
      return data.toString();
    }
  }), id => {
    self.clients.openWindow(`https://mywebsite.com/mydata/` + id);
  });
});

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

SharedWorker__test

ReScript

let shared1: SharedWorker.t = SharedWorker.make("sharedworker.js")

let shared2: SharedWorker.t = SharedWorker.makeWithName("sharedworker.js", "name")

let shared3: SharedWorker.t = SharedWorker.makeWithOptions(
  "sharedworker.js",
  {
    name: "workerName",
    type_: WebWorkersTypes.Module,
  },
)

let port: MessagePort.t = SharedWorker.port(shared1)

let self = SharedWorkerScope.current

self->SharedWorkerScope.close

JS Output

let shared1 = new SharedWorker("sharedworker.js");

let shared2 = new SharedWorker("sharedworker.js", "name");

let shared3 = new SharedWorker("sharedworker.js", {
  type: "module",
  name: "workerName"
});

let port = shared1.port;

let self = globalThis.self;

self.close();

export {
  shared1,
  shared2,
  shared3,
  port,
  self,
}
/* shared1 Not a pure module */

SharedWorkerScope__test

ReScript

let self = SharedWorkerScope.current

self->SharedWorkerScope.close

let workerLocation = Worker.current->Worker.location
let workerHref: string = workerLocation.href

let sharedWorkerLocation = self->SharedWorkerScope.location
let sharedWorkerHref: string = sharedWorkerLocation.href

JS Output

let self = globalThis.self;

self.close();

let workerLocation = globalThis.self.location;

let workerHref = workerLocation.href;

let sharedWorkerLocation = self.location;

let sharedWorkerHref = sharedWorkerLocation.href;

export {
  self,
  workerLocation,
  workerHref,
  sharedWorkerLocation,
  sharedWorkerHref,
}
/* self Not a pure module */

Storage__test

ReScript

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

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

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

DomGlobal.localStorage->Storage.removeItem("bar")

DomGlobal.localStorage->Storage.clear

JS Output

import * as Stdlib_Null from "@rescript/runtime/lib/es6/Stdlib_Null.mjs";

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

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

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

localStorage.removeItem("bar");

localStorage.clear();

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

SVGElement__test

ReScript

let getViewBox = (element: SVGElement.t) => element->SVGElement.getAttribute("viewBox")

let graphicsElementAsElement = (element: SVGElement.svgGraphicsElement): DOMTree.element =>
  element->SVGGraphicsElement.asSVGElement->SVGElement.asElement

let getGraphicsViewBox = (element: SVGElement.svgGraphicsElement) =>
  element->SVGGraphicsElement.getAttribute("viewBox")

JS Output

function getViewBox(element) {
  return element.getAttribute("viewBox");
}

function graphicsElementAsElement(element) {
  return element;
}

function getGraphicsViewBox(element) {
  return element.getAttribute("viewBox");
}

export {
  getViewBox,
  graphicsElementAsElement,
  getGraphicsViewBox,
}
/* No side effect */

URL__test

ReScript

let url = URL.make(~url="/foo", ~base="https://bar.com")

JS Output

let url = new URL("/foo", "https://bar.com");

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

URLSearchParams__test

ReScript

let params1 = URLSearchParams.fromString("foo=1&bar=2")
params1->URLSearchParams.keys->Array.fromIterable->Array.forEach(Console.log)

let params2 = URLSearchParams.fromKeyValueArray([("foo", "1"), ("bar", "b")])
params2->URLSearchParams.values->Array.fromIterable->Array.forEach(Console.log)

let params3 = URLSearchParams.fromDict(dict{"foo": "1", "bar": "b"})
params3
->URLSearchParams.entries
->Array.fromIterable
->Array.forEach(((key, value)) => Console.log2(key, value))

let paramStr = params3->URLSearchParams.toString

JS Output

let params1 = new URLSearchParams("foo=1&bar=2");

Array.from(params1.keys()).forEach(prim => {
  console.log(prim);
});

let params2 = new URLSearchParams([
  [
    "foo",
    "1"
  ],
  [
    "bar",
    "b"
  ]
]);

Array.from(params2.values()).forEach(prim => {
  console.log(prim);
});

let params3 = new URLSearchParams({
  foo: "1",
  bar: "b"
});

Array.from(params3.entries()).forEach(param => {
  console.log(param[0], param[1]);
});

let paramStr = params3.toString();

export {
  params1,
  params2,
  params3,
  paramStr,
}
/* params1 Not a pure module */

VideoFrame__test

ReScript

let htmlImageElement: HTMLImageElement.t = Obj.magic()
let svgImageElement: SVGElement.svgImageElement = Obj.magic()
let htmlVideoElement: HTMLVideoElement.t = Obj.magic()
let htmlCanvasElement: HTMLCanvasElement.t = Obj.magic()
let imageBitmap: CanvasTypes.imageBitmap = Obj.magic()
let offscreenCanvas: CanvasTypes.offscreenCanvas = Obj.magic()
let videoFrame: DOM.videoFrame = Obj.magic()
let arrayBuffer: ArrayBuffer.t = Obj.magic()
let typedArray: TypedArray.t<int> = Obj.magic()
let dataView: DataView.t = Obj.magic()
let videoFrameInit: DOM.videoFrameInit = Obj.magic()
let videoFrameBufferInit: DOM.videoFrameBufferInit = Obj.magic()

let _fromHTMLImageElement = VideoFrame.fromHTMLImageElement(
  ~image=htmlImageElement,
  ~init=videoFrameInit,
)

let _fromSVGImageElement = VideoFrame.fromSVGImageElement(
  ~image=svgImageElement,
  ~init=videoFrameInit,
)

let _fromHTMLVideoElement = VideoFrame.fromHTMLVideoElement(
  ~image=htmlVideoElement,
  ~init=videoFrameInit,
)

let _fromHTMLCanvasElement = VideoFrame.fromHTMLCanvasElement(
  ~image=htmlCanvasElement,
  ~init=videoFrameInit,
)

let _fromImageBitmap = VideoFrame.fromImageBitmap(~image=imageBitmap, ~init=videoFrameInit)

let _fromOffscreenCanvas = VideoFrame.fromOffscreenCanvas(
  ~image=offscreenCanvas,
  ~init=videoFrameInit,
)

let _fromVideoFrame = VideoFrame.fromVideoFrame(~image=videoFrame, ~init=videoFrameInit)

let _fromArrayBuffer = VideoFrame.fromArrayBuffer(~data=arrayBuffer, ~init=videoFrameBufferInit)

let _fromTypedArray = VideoFrame.fromTypedArray(~data=typedArray, ~init=videoFrameBufferInit)

let _fromDataView = VideoFrame.fromDataView(~data=dataView, ~init=videoFrameBufferInit)

JS Output

let _fromHTMLImageElement = new VideoFrame(undefined, undefined);

let _fromSVGImageElement = new VideoFrame(undefined, undefined);

let _fromHTMLVideoElement = new VideoFrame(undefined, undefined);

let _fromHTMLCanvasElement = new VideoFrame(undefined, undefined);

let _fromImageBitmap = new VideoFrame(undefined, undefined);

let _fromOffscreenCanvas = new VideoFrame(undefined, undefined);

let _fromVideoFrame = new VideoFrame(undefined, undefined);

let _fromArrayBuffer = new VideoFrame(undefined, undefined);

let _fromTypedArray = new VideoFrame(undefined, undefined);

let _fromDataView = new VideoFrame(undefined, undefined);

let htmlImageElement;

let svgImageElement;

let htmlVideoElement;

let htmlCanvasElement;

let imageBitmap;

let offscreenCanvas;

let videoFrame;

let arrayBuffer;

let typedArray;

let dataView;

let videoFrameInit;

let videoFrameBufferInit;

export {
  htmlImageElement,
  svgImageElement,
  htmlVideoElement,
  htmlCanvasElement,
  imageBitmap,
  offscreenCanvas,
  videoFrame,
  arrayBuffer,
  typedArray,
  dataView,
  videoFrameInit,
  videoFrameBufferInit,
  _fromHTMLImageElement,
  _fromSVGImageElement,
  _fromHTMLVideoElement,
  _fromHTMLCanvasElement,
  _fromImageBitmap,
  _fromOffscreenCanvas,
  _fromVideoFrame,
  _fromArrayBuffer,
  _fromTypedArray,
  _fromDataView,
}
/* _fromHTMLImageElement Not a pure module */

VisualViewport__test

ReScript

let maybeViewport: Null.t<VisualViewport.t> = DOM.window->Window.visualViewport

JS Output

let maybeViewport = window.visualViewport;

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

WebSocket__test

ReScript

let _fromURL = WebSocket.fromURL(~url="wss://example.com/socket")

let _fromURLWithProtocols = WebSocket.fromURLWithProtocols(
  ~url="wss://example.com/socket",
  ~protocols=["chat", "superchat"],
)

JS Output

let _fromURL = new WebSocket("wss://example.com/socket");

let _fromURLWithProtocols = new WebSocket("wss://example.com/socket", [
  "chat",
  "superchat"
]);

export {
  _fromURL,
  _fromURLWithProtocols,
}
/* _fromURL Not a pure module */