{"id":3507,"date":"2015-02-20T16:30:47","date_gmt":"2015-02-20T22:30:47","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3507"},"modified":"2015-02-20T16:30:47","modified_gmt":"2015-02-20T22:30:47","slug":"new-jquery-plugins-repo-and-getscripts","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2015\/02\/20\/new-jquery-plugins-repo-and-getscripts\/","title":{"rendered":"New jQuery plugins, $.repo<\/code> and $.getScripts<\/code>"},"content":{"rendered":"

See the code<\/a>.<\/p>\n

\n<\/span><\/a>jQuery plugin to allow using cdn.rawgit.com to get the latest commit of a github repo<\/h4>\n

github won't let you hotlink to their site directly; raw.githubusercontent.com sends its content with a X-Content-Type-Options:nosniff<\/code> header, so modern browsers won't accept it as javascript.<\/p>\n

http:\/\/rawgit.com<\/a> gets around that by pulling the raw file and re-serving it with more lenient headers, but the rate is throttled so you can't use it on public sites. http:\/\/cdn.rawgit.com<\/a> isn't throttled but is cached, permanently. Once a given URL is fetched, it stays in the cache and if the file is updated on github, it won't be on cdn.rawgit.com . So having a script tag <script src=\"http:\/\/cdn.rawgit.com\/user\/repo\/master\/file.js\"><\/code> lets you get the script from github, but even when the master branch is updated, the script retrieved will remain the same.<\/p>\n

The answer is to use a specific tag or commit in the script tag: <script src=\"http:\/\/cdn.rawgit.com\/user\/repo\/abc1234\/file.js\"><\/code> and change that when the underlying repo is updated. But that is terribly inconvenient.<\/p>\n

For stable libraries, that's not a problem, since they should be tagged with version numbers: http:\/\/cdn.rawgit.com\/user\/repo\/v1.0\/file.js<\/code> and that's probably what you want. However, if you always want the latest version, that won't work.<\/p>\n

$.repo<\/code> uses the github API to get the SHA for the latest commit to the master, and returns a $.Deferred that resolved to the appropriate URL (with no trailing slash):<\/p>\n

$.repo('user\/repo').then(function (repo){\r\n\t$.getScript(repo+'\/file.js');\r\n});<\/code><\/pre>\n
The github api is also rate-limited (to 60 requests an hour from a given IP address), so the repo address is cached for fixed period of time (default 1 hour), with the value saved in localStorage.<\/p>\n
$.repo('user\/repo', time); \/\/ if the cached value is more than time msec old, get a new one\r\n$.repo('user\/repo', 0); \/\/ force a refresh from github's server<\/code><\/pre>\n
\n<\/span><\/a>$.getScripts<\/code>
\n<\/h4>\n
$.getScript<\/code> is useful, but it is asynchronous, which means that you can't load scripts that depend on one another with:<\/p>\n
$.getScript('first.js');\r\n$.getScript('second.js');\r\n$.getScript('third.js');<\/code><\/pre>\n
You have to do:<\/p>\n
$.getScript('first.js').then(function(){\r\n\treturn $.getScript('second.js');\r\n}).then(function(){\r\n\treturn $.getScript('third.js');\r\n}).then(function(){\r\n\t\/\/ use the scripts\r\n});<\/code><\/pre>\n
$.getScripts(Array)<\/code> abstracts this out, so you can do:<\/p>\n
$.getScripts(['first.js', 'second.js', 'third.js']).then(function(){\r\n\t\/\/ use the scripts\r\n});<\/code><\/pre>\n
It's basically a very simple script loader.<\/p>\n","protected":false},"excerpt":{"rendered":"
See the code. jQuery plugin to allow using cdn.rawgit.com to get the latest commit of a github repo github won't let you hotlink to their site directly; raw.githubusercontent.com sends its content with a X-Content-Type-Options:nosniff header, so modern browsers won't accept it as javascript. http:\/\/rawgit.com gets around that by pulling the raw file and re-serving it […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3507"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=3507"}],"version-history":[{"count":3,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3507\/revisions"}],"predecessor-version":[{"id":3510,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3507\/revisions\/3510"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}