JQuery-Types: Type-checking jQuery Client Code

JQuery's APIs allow programmers to select a set of nodes in a document, navigate to new nodes (relative to previously-selected ones), and manipulate selected nodes. This API is flexible, powerful, and sufficiently different from low-level DOM programming that it might as well be its own language — and can and should be analyzed as such.

We have built a type checker to detect query errors, where queries return too many, too few, or just unexpected results. This type checker needs to keep track of the sizes of query results in addition to their types. This in turn requires developing a sufficiently expressive yet still decidable representation of sizes, a representation of “local structures” within the markup, and a sufficient encoding of CSS selectors to connect local structures to query types.

Code

Our type-checker is implemented using our open-source TeJaS framework, and is available on Github. To use, edit src/main.ml on line 9 to set module Actions = JQI.Actions, then build and run as normal.