Git Product home page Git Product logo

jsapi-info's Introduction

JSAPI.info

A JS library source inspector. Libraries are specified in libs.json, e.g.

{
	"jquery": {
		"url": "https://ajax.googleapis.com/ajax/libs/jquery/{VERSION}/jquery.js",
		"default_version": "1.6.4",
		"versions": ["1", "1.1", "1.2", "1.3", "1.3.2", "1.4", "1.5", "1.6", "1.6.2", "1.6.4"],
		"get_real_version": "v(\\d+\\.\\d+\\.\\d+)",
		"look_in": ["jQuery.fn", "jQuery"],
		"mutate_names": [
			["^\\$(?=\\.)", "jQuery"],
			["^jQuery\\.prototype", "jQuery.fn"]
		]
	} // ,...
}

Given the above configuration, we can now access /jquery/[VERSION/]METHOD_NAME in our browser. JSAPI.info will only source the jQuery source file remotely (from googleapis) if it hasn't already cached it locally.

THIS IS STILL UNDER DEVELOPMENT: Live @ jsapi.info.

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.

Installation / Running it

  1. cd jsapi-info/app
  2. npm install .
  3. node server 8001
  4. Server should be running on :8001

Changelog

  • 1.0.0 - Gotta start somewhere
  • 1.1.0 - Add package.json to manage dependencies. Linkifies this.methodName calls with new LINK_MARKER syntax (incl. name of item, e.g. this.css, and the full name, e.g. jQuery.fn.css). Sorts methods in sidebar by similarity to current method name (done with similarity.js).
  • 1.1.1 - Fixed ?expand option so it doesn't go beyond the end of the source file. Fixed issue where names present in global scope, even if not functions, take precedence in resolver, e.g. window.outerHeight when querying /jquery/outerHeight. Fixed this by including a typeof v == 'function' check in the embedded resolver function. Also fixed error being thrown when a method can't be found.
  • 1.1.2 - Added jQueryUI to libs and added a require option in the JSON config (currently only used with jQuery UI). Also generalised SHLoader.

jsapi-info's People

Contributors

mathiasbynens avatar padolsey avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

jsapi-info's Issues

Resolving of extension classes causes bad source links

This one will be hard to reproduce. OpenLayers has definitions that look like this:

OpenLayers.Layer.OSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
  name: "OpenStreetMap",
  attribution: "Data CC-By-SA by <a href='http://openstreetmap.org/'>OpenStreetMap</a>",
  sphericalMercator: true,
  url: 'http://tile.openstreetmap.org/${z}/${x}/${y}.png',
  ...
}

When you view OpenLayers.Layer.OSM, you get this:

function(){ P.apply(this, arguments); };

The definition of OpenLayers.Class looks like so:

OpenLayers.Class = function() {
    var len = arguments.length;
    var P = arguments[0];
    var F = arguments[len-1];

    var C = typeof F.initialize == "function" ?
        F.initialize :
        function(){ P.prototype.initialize.apply(this, arguments); };

    if (len > 1) {
        var newArgs = [C, P].concat(
            Array.prototype.slice.call(arguments).slice(1, len-1), F);
        OpenLayers.inherit.apply(null, newArgs);
    } else {
        C.prototype = F;
    }
    return C;
};

It seems OSM is being resolved to via OpenLayers.Class and pointing to the closure they used to extend the object. Any ideas on how to un-foobar this?

Runtime analysis doesn't work well for modular or sandboxed libs like YUI

Awesome project! I love the idea of making different JS lib APIs easily explorable on a single site.

Providing good support for modular or sandboxed libraries like YUI is going to be difficult (maybe even impossible) using runtime analysis, though. For instance, right now, jsapi only lists static members of the YUI global object, but virtually all of YUI's useful core APIs exist inside an instance-specific function sandbox, so they aren't visible by default. In addition, YUI's core is actually very small; most of the library's functionality exists in modules that are loaded on demand. Getting those modules' APIs into jsapi using runtime analysis would require loading and inspecting each one.

If you're open to considering alternative discovery mechanisms in addition to runtime analysis, the YUI website exposes a JSON API that provides names, parameter lists, summaries, and source locations for all classes and class members of all official YUI modules (warning: there are tons of them!). jsapi could consume this API if you're interested.

The following API endpoint will return all the info you'd need except the source files themselves (warning: the response is over 300KB gzipped; there's a lot of info there): http://yuilibrary.com/api/v1/classes

The source files can be found on the Yahoo! CDN at http://yui.yahooapis.com/{{version}}/build/{{file}}, where {{file}} is the file path returned from the API. The Google CDN, which jsapi currently uses, will not host YUI versions after 3.3.0 (the current version is 3.4.1).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.