├── .gitignore
├── .jshintrc
├── .npmignore
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── bower.json
├── package.json
├── require1k.js
├── require1k.min.js
└── test
    ├── comment
        ├── index.js
        └── should-not-load.js
    ├── index.html
    ├── index.js
    ├── multi-require
        ├── a.js
        ├── b.js
        └── index.js
    ├── node_modules
        └── dep
        │   ├── index.js
        │   ├── index2.js
        │   └── node_modules
        │       └── dep2
        │           └── dep2.js
    ├── second.js
    └── three.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "unused": true,
 3 |     "evil": true,
 4 |     "undef": true,
 5 |     "globals": {
 6 |         "R": true,
 7 |         "XMLHttpRequest": false,
 8 |         "location": false,
 9 |         "btoa": false,
10 |         "window": false,
11 |         "document": false
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | spec
2 | .jshintrc
3 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | ## v2.0.0
 4 | 
 5 | * Ignore `require` calls in comments (#16)
 6 | * Ignore `$require` and `object.require` calls (#16)
 7 | 
 8 | ## v1.0.1
 9 | 
10 | * Initial release
11 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2013, Stuart Knightley
 2 | All rights reserved.
 3 | 
 4 | Redistribution and use in source and binary forms, with or without
 5 | modification, are permitted provided that the following conditions are met:
 6 | 
 7 |     * Redistributions of source code must retain the above copyright
 8 |       notice, this list of conditions and the following disclaimer.
 9 | 
10 |     * Redistributions in binary form must reproduce the above copyright
11 |       notice, this list of conditions and the following disclaimer in the
12 |       documentation and/or other materials provided with the distribution.
13 | 
14 |     * Neither the name of require1k nor the
15 |       names of its contributors may be used to endorse or promote products
16 |       derived from this software without specific prior written permission.
17 | 
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21 | DISCLAIMED. IN NO EVENT SHALL STUART KNIGHTLEY BE LIABLE FOR ANY
22 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # CommonJS `require` in 1k, with no build needed
  2 | 
  3 | This project implements a minimal, and yet practically useful, CommonJS/Node.js `require` module loader for the browser in under 1000 bytes.
  4 | 
  5 | ## Features
  6 | 
  7 | * Synchronous `require` in modules
  8 | * `exports` and `module.exports` object
  9 | * Loaded modules are debuggable as normal in Chrome, Opera 15+, Firefox 36+ and Safari with `debugger` statement. (IE to be tested.)
 10 | * Works with npm, by searching `node_modules` directories (see Limitations)
 11 | * Handles circular dependencies
 12 | * Just runs, no need to build your JavaScript
 13 | * A pretty rich API, considering:
 14 | * it's 1k!
 15 | 
 16 | ## Examples
 17 | 
 18 | * [Simple](http://stuk.github.io/require1k/examples/simple/)
 19 | * [Marked](http://stuk.github.io/require1k/examples/marked) markdown parser
 20 | * [React](http://stuk.github.io/require1k/examples/react) framework (!!)
 21 | 
 22 | ## Usage
 23 | 
 24 | In your modules you can use the `require` function, `exports` object and `module.exports` object as you would in Node. There are two ways to kick off the require system:
 25 | 
 26 | ### script `data-main` attribute
 27 | 
 28 | ```html
 29 | <script src="require1k.min.js" data-main="./index"></script>
 30 | ```
 31 | 
 32 | On start require1k will search for the first `<script>` tag with a `data-main` attribute. If found the named module will be resolved against the location of the html file, asynchronously loaded and then executed.
 33 | 
 34 | ### global `R(func, callback)`
 35 | 
 36 | ```html
 37 | <script>
 38 | R(function (require, module, exports) {
 39 |     var index = require("./index");
 40 |     exports.hello = "World!"
 41 | }, function (err, exports) {
 42 |     if (err) {
 43 |         console.error(err.statusText);
 44 |         return;
 45 |     }
 46 | 
 47 |     console.log(exports.hello)
 48 | });
 49 | </script>
 50 | ```
 51 | 
 52 | Require1k also adds a global function, `R`, that accepts either a function or a module ID and an optional `callback`. When given a function it will load all the dependencies of the function and then execute it. If there was an error the callback gets passed the XMLHttpRequest object that failed as the first argument. It also gets passed the `exports` of the function, which you may find useful.
 53 | 
 54 | ### global `R(moduleId, callback)`
 55 | 
 56 | ```html
 57 | <script>
 58 | R("./index", function (err, index) {
 59 |     if (err) {
 60 |         console.error(err.statusText);
 61 |         return;
 62 |     }
 63 |     // use the exports object as needed
 64 | });
 65 | </script>
 66 | ```
 67 | 
 68 | Alternatively you can provide a module ID and a optional `callback`. The named module is resolved against the location of the HTML file. If there was an error the callback gets passed the XMLHttpRequest object that failed as the first argument, otherwise the `exports` of the module are passed as the second argument. The callback may be called synchronously if the module is already in the internal module cache.
 69 | 
 70 | ## Limitations
 71 | 
 72 | * `package.json` files are not loaded, and so the `"main"` property is ignored. Modules inside packages must be requested by their full path, e.g. `var _ = require("underscore/underscore");`
 73 | * Cross-package dependencies are found by walking up the URL path until a successful request is returned. This means that
 74 |     * loading cross-package dependencies is slow because requests are made sequentially until the module is found
 75 |     * 404 errors appear in the console
 76 | * Missing cross-package dependencies will exceed the stack size and halt script execution.
 77 | * Callback functions are called synchronously if the data is already available. This releases [Zalgo](http://blog.izs.me/post/59142742143/designing-apis-for-asynchrony), but hey, it's 1k.
 78 | * Does not load `.json` files
 79 | 
 80 | 
 81 | ## The point
 82 | 
 83 | The short answer: because it's a fun hack.
 84 | 
 85 | The the long answer?
 86 | 
 87 | Using `<script>` tags to manage the dependencies of your "complex" web app makes for an unmaintainable mess.
 88 | 
 89 | Yet that's what most people are doing today, and even what a large number of articles currently being published *still* recommend. People are writing large and sophisticated apps and then wasting their time managing dependencies by hand! There's just no need for it.
 90 | 
 91 | Package management ensures you have a system for adding and updating libraries to your project. It means that you can easily check if your libraries are out of date, and see exactly what libraries your project depends on. It means that you don't have to go spelunking around the web to find the site where you can report an issue or download an update for this random file you have in your `js/` directory. But module management is even more important.
 92 | 
 93 | Module management is where you actually say "load this code for my app". And when you do this with a (multitude of) `<script>` tags on your page you can no longer isolate your code, and say "this is what this bit of code depends on". Every library you load is global. And what happens when you write some JavaScript that needs an extra library? You have to go back to this completely different file, and add something to the `HTML`. This is nonsense.
 94 | 
 95 | What each part of your app depends on should be explicit. It should not require editing an unrelated file just to depend on a third party module.
 96 | 
 97 | If you're writing a web app of any significant size today, you owe it to yourself to manage your dependencies correctly.
 98 | 
 99 | This is what I recommend:
100 | 
101 | * Use npm to manage your client side dependencies
102 | * Use [Browserify](http://browserify.org/) or [Webpack](http://webpack.github.io/) to bundle up your application
103 | 
104 | That's it.
105 | 
106 | (And yep, I've noticed the irony of saying this while telling people to embed require1k on a page. But this is just a joke. Kind of.)
107 | 
108 | ## Thanks
109 | 
110 | This project was largely inspired by working on [Mr](https://github.com/montagejs/mr), a CommonJS module loader and companion bundler that definitely isn't 1k.
111 | 
112 | Thanks to [Tom Robinson](https://twitter.com/tlrobinson) for writing the original version, and [Kris Kowal](https://twitter.com/kriskowal) for teaching me so much.
113 | 
114 | ## License
115 | 
116 | BSD
117 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "require1k",
 3 |   "main": "require1k.min.js",
 4 |   "version": "1.0.0",
 5 |   "homepage": "http://stuk.github.io/require1k/",
 6 |   "authors": [
 7 |     "Stuart Knightley <stuart@stuartk.com>"
 8 |   ],
 9 |   "description": "A minimal, and yet practically useful, CommonJS/Node.js `require` module loader for the browser in under 1000 bytes",
10 |   "moduleType": [
11 |     "globals"
12 |   ],
13 |   "license": "BSD",
14 |   "ignore": [
15 |     "**/.*",
16 |     "node_modules",
17 |     "bower_components",
18 |     "test",
19 |     "tests"
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "require1k",
 3 |   "version": "2.0.0",
 4 |   "description": "A minimal, and yet practically useful, CommonJS/Node.js `require` module loader for the browser in under 1000 bytes",
 5 |   "main": "require1k.min.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "uglifyjs require1k.js -c -m > require1k.min.js; ls -l require1k.min.js"
 9 |   },
10 |   "repository": "",
11 |   "author": "Stuart Knightley <stuart@stuartk.com>",
12 |   "license": "BSD",
13 |   "devDependencies": {
14 |     "jasminum": "0.0.4",
15 |     "uglify-js": "^2.4.15"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/require1k.js:
--------------------------------------------------------------------------------
  1 | /*jshint node:false, -W082, -W017 */
  2 | R = (function (document, undefined) {
  3 |     // Each module has the following properties (shorted to one letter to aid compression)
  4 |     // - g: booleany, loadinG, truthy if this module has been requested for loading
  5 |     //      before. Used to prevent the same module being loaded twice
  6 |     // - l: string, Location, the url location of this module
  7 |     // - t: string, Text, the text content of the module
  8 |     // - e: booleany, Error, truthy if there was an error (probably a 404) loading the module
  9 |     // - n: module object, Next, instead of using this module, use the object
 10 |     //      pointed to by this property. Used for dependencies in other packages
 11 |     // - f: function, Factory, a function to use instead of eval'ing module.t
 12 |     // - exports, object, the exports of the module!
 13 |     var MODULES = {};
 14 | 
 15 |     // By using a named "eval" most browsers will execute in the global scope.
 16 |     // http://www.davidflanagan.com/2010/12/global-eval-in.html
 17 |     var globalEval = eval;
 18 | 
 19 |     // this variable is reused for a number of things to reduce the repetition
 20 |     // of strings. In the end is becomes "exports"
 21 |     var tmp = "createElement",
 22 |         baseElement = document[tmp]("base"),
 23 |         relativeElement = document[tmp]("a");
 24 |     document.head.appendChild(baseElement);
 25 | 
 26 | 
 27 |     // Loads the given module and all of it dependencies, recursively
 28 |     // - module         The module object
 29 |     // - callback       Called when everything has been loaded
 30 |     // - parentLocation Location of the parent directory to look in. Only given
 31 |     // for non-relative dependencies
 32 |     // - id             The name of the dependency. Only used for non-relative
 33 |     // dependencies
 34 |     function deepLoad(module, callback, parentLocation, id) {
 35 |         // If this module is already loading then don't proceed.
 36 |         // This is a bug.
 37 |         // If a module is requested but not loaded then the module isn't ready,
 38 |         // but we callback as if it is. Oh well, 1k!
 39 |         if (module.g) {
 40 |             return callback(module.e, module);
 41 |         }
 42 | 
 43 |         var location = module.g = module.l;
 44 | 
 45 |         var request = new XMLHttpRequest();
 46 |         request.onload = function (deps, count) {
 47 |             if (request.status == 200 || module.t) {
 48 |                 // Should really use an object and then Object.keys to avoid
 49 |                 // duplicate dependencies. But that costs bytes.
 50 |                 deps = [];
 51 |                 (module.t = module.t || request.response).replace(/(\/\*[\w\W]*?\*\/|\/\/[^\n]*|[.$]r)|\brequire\s*\(\s*["']([^"']*)["']\s*\)/g, function (_, ignore, id) {
 52 |                     if (!ignore) deps.push(id);
 53 |                 });
 54 |                 count = deps.length;
 55 |                 function loaded() {
 56 |                     // We call loaded straight away below in case there
 57 |                     // are no dependencies. Putting this check first
 58 |                     // and the decrement after saves us an `if` for that
 59 |                     // special case
 60 |                     if (!count--) {
 61 |                         callback(undefined, module);
 62 |                     }
 63 |                 }
 64 |                 deps.map(function (dep) {
 65 |                     deepLoad(
 66 |                         resolveModuleOrGetExports(module.l, dep),
 67 |                         loaded,
 68 |                         // If it doesn't begin with a ".", then we're searching
 69 |                         // node_modules, so pass in the info to make this
 70 |                         // possible
 71 |                         dep[0] != "." ? location + "/../" : undefined,
 72 |                         dep
 73 |                     );
 74 |                 });
 75 |                 loaded();
 76 |             } else {
 77 |                 // parentLocation is only given if we're searching in node_modules
 78 |                 if (parentLocation) {
 79 |                     // Recurse up the tree trying to find the dependency
 80 |                     // (generating 404s on the way)
 81 |                     deepLoad(
 82 |                         module.n = resolveModuleOrGetExports(parentLocation += "../", id),
 83 |                         callback,
 84 |                         parentLocation,
 85 |                         id
 86 |                     );
 87 |                 } else {
 88 |                     module.e = request;
 89 |                     callback(request, module);
 90 |                 }
 91 |             }
 92 |         };
 93 | 
 94 |         // If the module already has text because we're using a factory
 95 |         // function, then there's no need to load the file!
 96 |         if (module.t) {
 97 |             request.onload();
 98 |         } else {
 99 |             request.open("GET", location, true);
100 |             request.send();
101 |         }
102 |     }
103 | 
104 |     // Save bytes by combining two functions
105 |     // - resolveModule which resolves a given relative path against the given
106 |     //   base, and returns an existing or new module object
107 |     // - getExports which returns the existing exports or runs the factory to
108 |     //   create the exports for a module
109 |     function resolveModuleOrGetExports(baseOrModule, relative, resolved) {
110 |         // This should really be after the relative check, but because we are
111 |         // `throw`ing, it messes up the optimizations. If we are being called
112 |         // as resolveModule then the string `base` won't have the `e` property,
113 |         // so we're fine.
114 |         if (baseOrModule.e) {
115 |             throw baseOrModule.e;
116 |         }
117 | 
118 |         // If 2 arguments are given, then we are resolving modules...
119 |         if (relative) {
120 |             baseElement.href = baseOrModule;
121 |             // If the relative url doesn't begin with a ".", then it's
122 |             // in node_modules
123 |             relativeElement.href = relative[0] != "." ? "./node_modules/" + relative : relative;
124 |             resolved = relativeElement.href + ".js";
125 |             baseElement.href = "";
126 |             return (MODULES[resolved] = MODULES[resolved] || {l: resolved});
127 |         }
128 | 
129 |         // ...otherwise we are getting the exports
130 | 
131 |         // Is this module a redirect to another one?
132 |         if (baseOrModule.n) {
133 |             return resolveModuleOrGetExports(baseOrModule.n);
134 |         }
135 | 
136 |         if (!baseOrModule[tmp]) {
137 |             (baseOrModule.f || globalEval("(function(require,"+tmp+",module){" + baseOrModule.t + "\n})//# sourceURL=" + baseOrModule.l))(
138 |                 function require (id) {
139 |                     return resolveModuleOrGetExports(resolveModuleOrGetExports(baseOrModule.l, id));
140 |                 }, // require
141 |                 baseOrModule[tmp] = {}, // exports
142 |                 baseOrModule // module
143 |             );
144 |         }
145 | 
146 |         return baseOrModule[tmp];
147 |     }
148 | 
149 |     function R(id, callback) {
150 |         // If id has a `call` property it is a function, so make a module with
151 |         // a factory
152 |         deepLoad(id.call ? {l: "", t: "" + id, f: id} : resolveModuleOrGetExports("", id), function (err, module) {
153 |             try {
154 |                 id = resolveModuleOrGetExports(module);
155 |             } catch (_err) {
156 |                 err = _err
157 |             }
158 |             if (callback) {
159 |                 callback(err, id);
160 |             }
161 |         });
162 |     }
163 | 
164 |     tmp = document.querySelector("script[data-main]");
165 |     if (tmp) {
166 |         R(tmp.dataset.main);
167 |     }
168 |     tmp = "exports";
169 | 
170 |     return R;
171 | 
172 | }(document));
173 | 


--------------------------------------------------------------------------------
/require1k.min.js:
--------------------------------------------------------------------------------
1 | R=function(e,n){function t(e,o,u,a){if(e.g)return o(e.e,e);var c=e.g=e.l,f=new XMLHttpRequest;f.onload=function(i,l){function s(){l--||o(n,e)}200==f.status||e.t?(i=[],(e.t=e.t||f.response).replace(/(\/\*[\w\W]*?\*\/|\/\/[^\n]*|[.$]r)|\brequire\s*\(\s*["']([^"']*)["']\s*\)/g,function(e,n,t){n||i.push(t)}),l=i.length,i.map(function(o){t(r(e.l,o),s,"."!=o[0]?c+"/../":n,o)}),s()):u?t(e.n=r(u+="../",a),o,u,a):(e.e=f,o(f,e))},e.t?f.onload():(f.open("GET",c,!0),f.send())}function r(e,n,t){if(e.e)throw e.e;return n?(f.href=e,i.href="."!=n[0]?"./node_modules/"+n:n,t=i.href+".js",f.href="",u[t]=u[t]||{l:t}):e.n?r(e.n):(e[c]||(e.f||a("(function(require,"+c+",module){"+e.t+"\n})//# sourceURL="+e.l))(function(n){return r(r(e.l,n))},e[c]={},e),e[c])}function o(e,n){t(e.call?{l:"",t:""+e,f:e}:r("",e),function(t,o){try{e=r(o)}catch(u){t=u}n&&n(t,e)})}var u={},a=eval,c="createElement",f=e[c]("base"),i=e[c]("a");return e.head.appendChild(f),c=e.querySelector("script[data-main]"),c&&o(c.dataset.main),c="exports",o}(document);


--------------------------------------------------------------------------------
/test/comment/index.js:
--------------------------------------------------------------------------------
 1 | console.log("comments");
 2 | 
 3 | /*
 4 |   foo
 5 |   require("./should-not-load");
 6 |   bar
 7 | */
 8 | 
 9 | // require("./should-not-load");
10 | function $require() {}
11 | function _require() {}
12 | function irequire() {}
13 | var o = {require: function(){}};
14 | 
15 | $require("./should-not-load");
16 | _require("./should-not-load");
17 | irequire("./should-not-load");
18 | o.require("./should-not-load");
19 | 
20 | // this is still problematic if uncommented:
21 | // console.log('require("./should-not-load")')
22 | 
23 | assert(
24 |     (require)("./should-not-load") !== 4,
25 |     "Should not load modules from commented out code and lookalikes"
26 | );
27 | 


--------------------------------------------------------------------------------
/test/comment/should-not-load.js:
--------------------------------------------------------------------------------
1 | module.exports = 4
2 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>require1k test</title>
 6 |     <script type="text/javascript" src="../require1k.min.js"></script>
 7 |     <script type="text/javascript">
 8 |         window.assert = function (value, message) {
 9 |             if (!value) {
10 |                 throw new Error("Assertion failure: " + message);
11 |             }
12 |         }
13 |     </script>
14 |     <script type="text/javascript">
15 |     R("./index", function (error) {
16 |         if (error) {
17 |             throw error;
18 |         }
19 |     });
20 | 
21 |     R(function (require, exports, module) {
22 |         console.log("module");
23 |         var three = require("./three");
24 |         module.exports = three;
25 |     }, function (err, exports) {
26 |         console.log("html R callback");
27 |         assert(err === undefined, "err in callback should be undefined");
28 |         assert(exports === "three", "exports from function should be correct");
29 |     });
30 |     </script>
31 | </head>
32 | <body>
33 | 
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
 1 | console.log("loaded index.js");
 2 | 
 3 | var second = require("./second");
 4 | assert(second.thing === "asd", "required export should be correct");
 5 | 
 6 | R("./three", function (err, exports) {
 7 |     console.log("R callback");
 8 |     assert(err === undefined, "err in callback should be undefined");
 9 |     assert(exports === "three", "exports in callback should be correct");
10 | });
11 | 
12 | require("dep/index");
13 | 
14 | require("./multi-require/index");
15 | 
16 | require("./comment/index");
17 | 


--------------------------------------------------------------------------------
/test/multi-require/a.js:
--------------------------------------------------------------------------------
1 | module.exports = "a";
2 | 


--------------------------------------------------------------------------------
/test/multi-require/b.js:
--------------------------------------------------------------------------------
1 | module.exports = "b";
2 | 


--------------------------------------------------------------------------------
/test/multi-require/index.js:
--------------------------------------------------------------------------------
1 | var a = require("./a"); var b = require("./b");
2 | assert(a === "a", "first require on a line should run");
3 | assert(b === "b", "second require on a line should run");
4 | 


--------------------------------------------------------------------------------
/test/node_modules/dep/index.js:
--------------------------------------------------------------------------------
1 | console.log("dep/index run");
2 | 
3 | require("dep2/dep2");
4 | 


--------------------------------------------------------------------------------
/test/node_modules/dep/index2.js:
--------------------------------------------------------------------------------
1 | console.log("dep index2");
2 | 


--------------------------------------------------------------------------------
/test/node_modules/dep/node_modules/dep2/dep2.js:
--------------------------------------------------------------------------------
1 | console.log("dep2/dep2 run!");
2 | 
3 | require("dep/index2");
4 | 


--------------------------------------------------------------------------------
/test/second.js:
--------------------------------------------------------------------------------
1 | console.log("loaded second");
2 | 
3 | exports.thing = "asd";
4 | 
5 | require("./index");
6 | assert(require("./three") === "three", "require should return exports")
7 | 


--------------------------------------------------------------------------------
/test/three.js:
--------------------------------------------------------------------------------
1 | module.exports = "three";
2 | 


--------------------------------------------------------------------------------