https://github.com/rrweb-io/rrweb bindings wip

rrweb.re

module Any = {
  // borrowed from https://github.com/cca-io/rescript-material-ui/blob/master/public/rescript-material-ui/src/Any.res
  type t;

  external make: 'a => t = "%identity";
  external fromString: string => t = "%identity";
  external fromInt: int => t = "%identity";
  external unsafeToString: 'a => string = "%identity";
  external unsafeToInt: 'a => int = "%identity";
  external unsafeGetValue: t => 'a = "%identity";
};
module Symbol = {
  type t = Js.t({.});

  [@bs.val] [@bs.scope "Object"]
  external _defineSymbol: ('a, t, 'b) => unit = "defineProperty";

  let create: string => t = [%raw
    {|
    function(key){ return Symbol(key) }
  |}
  ];

  let getValue = (obj, symbol: t) =>
    Js.Dict.unsafeGet(Obj.magic(obj), Obj.magic(symbol));
  let setValue = (obj, symbol, value) =>
    _defineSymbol(obj, symbol, {"value": value, "writable": false});

  [@bs.send] external toString: t => string = "toString";
};
type event =
  | DomContentLoadedEvent
  | LoadedEvent
  | FullSnapshotEvent
  | IncrementalSnapshotEvent
  | MetaEvent
  | CustomEvent
  | PluginEvent;

type eventWithTime = {
  event,
  timestamp: int,
  delay: option(int),
};

type playerProps;

[@obj]
external playerProps:
  (
    ~events: array(eventWithTime)=?,
    ~width: int=?,
    ~height: int=?,
    ~autoPlay: bool=?,
    ~speed: int=?,
    ~speedOption: array(int)=?,
    ~showController: bool=?,
    ~tags: (string, string)=?,
    unit
  ) =>
  playerProps;

module Player = {
  [@bs.module "rrweb-player"] [@new] [@react.component]
  //   ~ref: ReactDOM.domRef,
  external make:
    (~target: Js.Nullable.t('a), ~props: playerProps=?) => React.element =
    "default";
};
module Attributes: {
  type t;
  let string: string => t;
  let number: int => t;
  let bool: bool => t;
} = {
  [@unboxed]
  type t =
    | Any('a): t;
  let string = (v: string) => Any(v);
  let number = (v: int) => Any(v);
  let bool = (v: bool) => Any(v);
};
type attributes = Attributes.t;

type node =
  | Document({
      childNodes: array(node),
      compatMode: option(string),
    })
  | DocumentType({
      name: string,
      publicId: string,
      systemdId: string,
    })
  | Element({
      tagName: string,
      attributes,
      isSVG: option(bool),
      needBlock: option(bool),
    })
  | Text({
      textContent: string,
      isStyle: option(bool),
    })
  | CDATA({textContent: string})
  | Comment({textContent: string});

type serializedNode =
  | Document({
      childNodes: array(node),
      compatMode: option(string),
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
    })
  | DocumentType({
      name: string,
      publicId: string,
      systemdId: string,
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
    })
  | Element({
      tagName: string,
      attributes,
      isSVG: option(bool),
      needBlock: option(bool),
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
    })
  | Text({
      textContent: string,
      isStyle: option(bool),
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
    })
  | CDATA({
      textContent: string,
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
    })
  | Comment({
      textContent: string,
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
    });

type serializedNodeWithId =
  | Document({
      childNodes: array(node),
      compatMode: option(string),
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
      id: int,
    })
  | DocumentType({
      name: string,
      publicId: string,
      systemdId: string,
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
      id: int,
    })
  | Element({
      tagName: string,
      attributes,
      isSVG: option(bool),
      needBlock: option(bool),
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
      id: int,
    })
  | Text({
      textContent: string,
      isStyle: option(bool),
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
      id: int,
    })
  | CDATA({
      textContent: string,
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
      id: int,
    })
  | Comment({
      textContent: string,
      rootId: option(int),
      isShadowHost: option(bool),
      isShadow: option(bool),
      id: int,
    });

module Snapshot = {
  type slimDOMOptions = {
    script: bool,
    comment: bool,
    headFavicon: bool,
    headWhitespace: bool,
    headMetaDescKeywords: bool,
    headMetaSocial: bool,
    headMetaRobots: bool,
    headMetaHttpEquiv: bool,
    headMetaAuthorship: bool,
    headMetaVerification: bool,
  };
  type slimDOM = {
    bool,
    [@optional]
    slimDOMOptions,
  };
  type maskAllOptions = {
    color: bool,
    date: bool,
    [@as "datetime-local"]
    datetimeLocal: bool,
    email: bool,
    month: bool,
    number: bool,
    range: bool,
    search: bool,
    tel: bool,
    text: bool,
    time: bool,
    url: bool,
    week: bool,
    // unify textarea and select element with text input
    textarea: bool,
    select: bool,
    password: bool,
  };
  type maskAllInputs = {
    bool,
    [@optional]
    maskAllOptions,
  };
  type buildCache = {stylesWithHoverClass: (string, string)};
  type dataURLOptions = {
    [@as "type"]
    type_: string,
    quality: int,
  };
  type maskTextFn = (~text: string) => string;
  type maskInputFn = (~text: string) => string;
  type keepIframeSrcFn = (~src: string) => bool;
  [@unboxed]
  type unknown =
    | Any('a): unknown;

  type nodeType =
    | Document
    | DocumentType
    | Element
    | Text
    | CData
    | Comment
    | Unknown;

  type options;

  [@obj]
  external options:
    (
      ~blockClass: string=?,
      ~blockSelector: string=?,
      ~maskTextClass: string=?,
      ~maskTextSelector: string=?,
      ~inlineStylesheet: bool=?,
      ~maskAllInputs: maskAllInputs=?,
      ~maskTextFn: maskTextFn=?,
      ~maskInputFn: maskTextFn=?,
      ~slimDOM: slimDOM=?,
      ~dataURLOptions: dataURLOptions=?,
      ~inlineImages: bool=?,
      ~recordCanvas: bool=?,
      ~preserveWhiteSpace: bool=?,
      ~onSerialize: node => unknown=?,
      ~onIframeLoad: (~iframeINode: node, ~node: serializedNodeWithId) =>
                     unknown
                       =?,
      ~iframeLoadTimeout: int=?,
      ~keepIframeSrcFn: keepIframeSrcFn=?,
      unit
    ) =>
    options;

  type buildNodeOptions;

  [@obj]
  external buildNodeOptions:
    (
      ~doc: Dom.document=?,
      ~skipChild: bool=?,
      ~hackCss: bool,
      ~afterAppend: (~n: node) => unknown=?,
      ~cache: buildCache,
      unit
    ) =>
    buildNodeOptions;
  type rebuildOptions;

  [@obj]
  external rebuildOptions:
    (
      ~doc: Dom.document,
      ~onVisit: (~node: node) => unknown=?,
      ~hackCss: bool=?,
      ~afterAppend: (~n: node) => unknown=?,
      ~cache: buildCache,
      unit
    ) =>
    rebuildOptions;
  [@bs.module "rrweb-snapshot"]
  external snapshot: (~n: React.element, ~options: options=?) => unit =
    "snapshot";
  [@bs.module "rrweb-snapshot"]
  external serializedNodeWithId: (~n: node, ~options: options=?) => unit =
    "serializedNodeWithId";
  [@bs.module "rrweb-snapshot"]
  external rebuild:
    (~n: serializedNodeWithId, ~options: rebuildOptions) => unit =
    "rebuild";

  [@bs.module "rrweb-snapshot"]
  external buildNodeWithSN:
    (~n: serializedNodeWithId, ~options: buildNodeOptions) =>
    Js.Nullable.t(node) =
    "buildNodeWithSN";

  [@bs.module "rrweb-snapshot"]
  external addHoverClass: (~cssText: string, ~cache: buildCache) => string =
    "addHoverClass";

  [@bs.module "rrweb-snapshot"] external createCache: unit = "createCache";

  [@bs.module "rrweb-snapshot"]
  external transformAttribute:
    (
      ~doc: Dom.document,
      ~tagName: string=?,
      ~name: string=?,
      ~value: string=?
    ) =>
    unit =
    "transformAttribute";

  [@bs.module "rrweb-snapshot"]
  external visitSnapshot:
    (
      ~node: serializedNodeWithId,
      ~onVisit: (~node: serializedNodeWithId) => unknown
    ) =>
    unit =
    "visitSnapshot";

  [@bs.module "rrweb-snapshot"]
  external cleanupSnapshot: unit = "cleanupSnapshot";

  [@bs.module "rrweb-snapshot"]
  external needMaskingText:
    (~node: node=?, ~maskTextClass: string=?, ~maskTextSelector: string=?) =>
    unit =
    "needMaskingText";
};
type throttleOptions = {
  [@optional]
  leading: bool,
  [@optional]
  trailing: bool,
};
module PropertyKey: {
  type t;
  let string: string => t;
  let number: int => t;
  let symbol: Symbol.t => t;
} = {
  [@unboxed]
  type t =
    | Any('a): t;
  let string = (v: string) => Any(v);
  let number = (v: int) => Any(v);
  let symbol = (v: Symbol.t) => Any(v);
};

type propertyKey = PropertyKey.t;

type propertyDescriptor = {
  [@optional]
  configurable: bool,
  [@optional]
  enumerable: bool,
  [@optional]
  value: Any.t,
  [@optional]
  writable: bool,
  [@optional]
  get: unit => Any.t,
  [@optional]
  set: (~v: Any.t) => unit,
};

module BlockClass: {
  type t;
  let string: string => t;
  let regExp: Js.Re.t => t;
} = {
  [@unboxed]
  type t =
    | Any('a): t;
  let string = (v: string) => Any(v);
  let regExp = (v: Js.Re.t) => Any(v);
};

type blockClass = BlockClass.t;
type addedNodeMutation = {
  parentId: int,
  [@optional]
  previousId: int,
  [@optional]
  nextId: int,
  node: serializedNodeWithId,
};

type resolveTree = {
  value: addedNodeMutation,
  children: array(resolveTree),
  parent: Js.Nullable.t(resolveTree),
};

type documentDimension = {
  x: int,
  y: int,
  relativeScale: int,
  absoluteScale: int,
};

type mirror = {
  map: node,
  getId: (~n: node) => int,
  getNode: (~id: int) => Js.Nullable.t(node),
  removeNodeFromMap: (~n: node) => unit,
  has: (~id: int) => bool,
  reset: unit => unit,
};

type utils('t) = {
  on: (~type_: string, ~fn: Dom.event => unit, ~target: Dom.document) => unit,
  throttle: (~arg: 't, ~wait: int, ~options: throttleOptions=?) => unit,
  hookSetter:
    (
      ~target: 't,
      ~key: propertyKey,
      ~d: propertyDescriptor,
      ~isRevoked: bool=?
    ) =>
    unit,
  patch: (~source: string, ~name: string, ~replacement: 't => Any.t) => unit,
  getWindowHeight: unit => int,
  getWindowWidth: unit => int,
  isBlocked: (~node: node=?, ~blockClass: blockClass) => bool,
  isIgnored: (~node: node) => bool,
  isAncestorRemoved: (~target: node, ~mirror: mirror) => bool,
  isTouchEvent: (~event: 't) => bool,
  polyfill: (~win: Dom.window) => unit,
  queueToResolveTrees: (~queue: addedNodeMutation) => resolveTree,
  iterateResolveTree:
    (~tree: resolveTree, ~cb: (~mutation: addedNodeMutation) => unit) => unit,
  isIframeINode: (~node: node) => bool,
  getBaseDimension: (~node: node, ~rootIframe: node) => documentDimension,
  hasShadowRoot: (~n: 't) => bool,
};

[@module "rrweb"] external utils: utils('a) = "utils";

type emit('eventWithTime) = {emit: 'eventWithTime => unit};

[@module "rrweb"] [@new]
external record: emit('eventWithTime) => unit = "record";

[@module "rrweb"]
external addCustomEvent: (~tag: string, ~payload: 't) => unit =
  "addCustomEvent";

[@module "rrweb"] external freezePage: unit => unit = "freezePage";

[@module "rrweb"] [@new] external replayer: 'a => unit = "Replayer";

[@module "rrweb"] external mirror: mirror = "mirror";