A while ago I made the “jQuery source viewer“. It allows you to explore jQuery’s source and has a hackable URL pattern so you can get at what you need (e.g. /jquery/append).
I had been thinking about making a version 2 for sometime, and about two weeks ago I started work on JSAPI.info. It’s built using node.js, and is more flexible than version 1 in that it enables you to explore the source of whatever library you want (as long as it’s specified), not just jQuery.
Demos
- jQuery (e.g. /jquery/css)
- Mootools (e.g. /mootools/Array.prototype.flatten)
- Dojo (e.g. /dojo/1/Color)
- Underscore (e.g. /_/every)
- YUI (e.g. /yui/3/namespace)
As I said, the URLs are “hackable”, so you can specify the method and version you want. Each page has a link to the documentation for that method (if found), and a list of related links (methods under the same namespace) on the left hand side.
How does it work?
It works by loading the library you specify into an instance of jsdom, and then evaluating the method you specify (in fully qualified form, e.g. jQuery.fn.css) within that instance. It then matches the
toString()representation of that function (thanks V8!) against the source of the library, thus determining its location. It’s all operating under node.js, running via a beautiful configuration of nginx (primed to microcache!) on a linode box somewhere in London.
Yet to add…
I’ve yet to add the following features, and plan on doing so in the near future. The source is up on Github if anyone wants to help!
Links within source code leading to other parts of the API.(DONE) The jQuery source viewer already does this.- Thinking about adding beautify-js — this’ll change the format of the code though, so it won’t be consistent with the source code, and thus the line numbers won’t match up.
- I was experimenting with full documentation support so the documentation for a specific method could appear alongside the source code, but I’m not sure if it would be a sensible addition, especially considering that it can just link to the documentation instead.
- Any other features you can think of?
Why?
Have you ever tried to find the source of the jQuery.fn.height method? Try it now. It’s tricky.
If you’re anything like me, you’ll hit CTRL-F and type the most popular function/method declaration patterns, including function height..., height = funct..., height: function.... None of these work for jQuery.fn.height because it’s defined differently. It’s not easy to find.
I very often need to find the source behind a method I’m using and there aren’t many easy ways to do so, and that’s why I originally created the jQuery source viewer. JSAPI.info is a move in the right direction since it supports multiple libraries and, finally, has it’s own domain!
Please test it out and let me know if you catch any bugs.
Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!
Awesome! This should come in handy
As for the fn.height source – I tried the same and when I failed, I thought “Hm, I wonder if it’s somewhere near ‘innerHeight’ ” and bingo! 🙂
Bookmarked. That’s awesome.
♥♥♥
Thanks!
Nice project. I did something similar, works by mapping the object of any library. Link https://github.com/vladocar/AutoObjectDocumentation and the jQuery demo http://dl.dropbox.com/u/2111778/AutoObjectDocumentation/demos/autoDocs-jQuery.html
Bookmarked 😉
impresionante, gracias por el trabajo
Awesome… will use it forever…. Thanks !
Awesome ! Thanks for the work !
Now the jQuery demo is a nice starting resource I might say, a version 2.0 i think would be great for this.
This is pretty amazing. Great job and thank you. The only problem I see is that some libraries are out-of-date. Other than updating, I was actually wondering if you would consider doing something quite the opposite: adding support to go through older versions as well.
Good idea! Bookmarked! Thank you so much.