investigate Custom Object Formatters in Chrome Dev Tools

[bobzhang]

https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/preview#heading=h.xuvxhsd2bp05

[bobzhang]

note that we have almost all the meta data for a custom formatter (even the field names of submodules)

[bobzhang]

Below is a simple snippet to recognize ocaml exception and print it in a reasonable way

window.devtoolsFormatters = []
window.devtoolsFormatters.push({
    header : function (x){
        if (x.tag === 248){
            return ["span", {"style": "background-color: #fcc"}, "exn/open variant", x[0]];
        }else {
            return null
        }
    },
    hasBody : function(x){
        return false 
    },
    body: function(x){
        return null
    }
})

[jaredly]

so we could wipe out custom object formatters, pretty printing, and json conversion all in the same manner, by generating a x__bs_to_json function for each type x declaration.

for example

type person = {name: string, age: int, friends: list string, airplane: PlaneLibrary.plane}
/* generated function: */
let person__magic__to_json person => {
  { /* I'm pretending that a js object is a Js.Json.Object */
     "name": string__bs_to_json person.name,
     "age": int__bs_to_json person.age,
     /* note a type w/ a parameter takes as the first function "a => Js.Json.t" */
     "friends": list__bs_to_json string__bs_to_json person.friends,
     "airplane": PlaneLibrary.plane__bs_to_json person.airplane,
  }
}

I use json as an example, but we could just as easily produce a js object like
{$bs_type: 'record', $bs_name: 'person', $bs_attributes: {name: 'julia', ...}} for chrome devtools consumption

[chenglou]

Shipped!