CSS Painting API (Houdini) bindings

Hello friends! I wanted to share/solicit comments on my bindings for loading a paint worklet:

type s
@send external hasOwnProperty: (s, string) => bool = "hasOwnProperty"
@val external css: s = "CSS"

type pw = {addModule: (. ~moduleURL: string) => Js.Promise.t<unit>}
@val @scope("CSS")
external paintWorklet: pw = "paintWorklet"

switch hasOwnProperty(css, "paintWorklet") {
| true => paintWorklet.addModule(. ~moduleURL="paint.js")->Js.Promise.catch(err => {
    Js.log2("Error loading worklet:", err)
  }, _)->ignore
| false => Js.log("I am Firefox or Safari")

compiles to

if (CSS.hasOwnProperty("paintWorklet")) {
  var __x = CSS.paintWorklet.addModule("paint.js");
  __x.catch(function (err) {
        console.log("Error loading worklet:", err);
        return Promise.resolve(undefined);
} else {
  console.log("I am Firefox or Safari");

and is loading my worklet in a Chromium-based browser (Iridium) as expected. When I put a bogus worklet name, the error is caught and console-logged.

1 Like