ml-in-barcelona / jsoo-react

js_of_ocaml bindings for ReactJS. Based on ReasonReact.
https://ml-in-barcelona.github.io/jsoo-react
MIT License
138 stars 19 forks source link

Improve error messaging on `InvalidProp` #94

Open davesnx opened 2 years ago

davesnx commented 2 years ago

Errors look like this

→ ~/C/g/r/jsoo-react on Type-safe-html-tags ✗ make

File "test.ml", lines 109-111, characters 2-10:
109 | ..((div ~cols:1 ~href:(("https://example.com")
110 |       [@reason.raw_literal "https://example.com"]) ~children:[foo] ())
111 |   [@JSX ])
Error: prop 'cols' isn't a valid prop for a 'div'

TypeScript version, from the current type-checked from TS

Type '{ children: Element[]; classId: string; }' is not assignable to type 'DetailedHTMLProps<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>'.
  Property 'classId' does not exist on type 'DetailedHTMLProps<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>'. Did you mean 'classID'?

We could aim to have a similar output as our type-checker but I believe is rather useless, the output on the labelled argument being miss-spelt or unknown looks like https://rescript-lang.org/try?code=DwIwrgLhD2B2AEAbaiCGBeAzAPngbwFsBnAcwFpsAlAU1QGMIA6IiAJwEtYSBfeYAenBQ42AFBA

Maybe we could aim for something more simple:

File "test.ml", lines 109-111, characters 2-10:
109 | ..((div ~cols:1 ~href:(("https://example.com")
110 |       [@reason.raw_literal "https://example.com"]) ~children:[foo] ())
111 |   [@JSX ])
Error: 'div' contains an invalid prop: 'cols'.
It only accepts 'Global attributes' defined in https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

and including a fancy Levenshtein distance with the rest of the props from the element: Maybe you mean xxxx.