Introducing ImportJS

Update: ImportJS has been upgraded to 3.0 and has a dedicated site! See here: http://importjs.org/

So I’ve gone ahead and cleaned up my GitHub account to make room for this new JavaScript library I’ve made called ImportJS!

ImportJS is a library with 3 primary features:

• Batch preloading external JavaScript files (with ready and error callbacks)
• Organizing definitions into anonymously scoped functions represented as “classpaths“
• Resolving dependencies between definitions (including circular references!)

At first glance this might soundsimilar to RequireJS or JSClass, but I’ve tried to simplify it as much as possible by having it resemble a Flash AS3-like syntax. My goal with this library was to simulate how ActionScript 3 packages work, but at the same time add some preloading functionality so that you could potentially run an entire application through a single line of code (e.g. “new Main()”). I personally find libraries like RequireJS or JSClass to have more features than I need, and are a bit confusing to understand. So I hope you’ll try out my library and use it as a packaging system of your own!

(Another cool feature is that if you don’t care for the packaging features you can use ImportJS solely as preloading library with guaranteed load order! 😉 )

Here’s some quick examples:

//Assume we have our files under js/com/project/ directory
ImportJS.preload({
    baseUrl: 'js',
    files: {
        com: {
            project: {
                CircRef: 'CircRef.js',
                Class1: 'Class1.js',
                Dependency: 'Dependency.js'
            }
        }
    },
    ready: function(arr) {
        console.log('Loaded files: ' + arr.join(', '));
        //Create a new instance of Class1 and print some info
        var Class1 = ImportJS.unpack('com.project.Class1');
        var myClass = new Class1();

        myClass.init();
        myClass.circRef.init();

        console.log(myClass.toString()); //Prints "[Class1] (has CircRef instance: [Object])"
        console.log(myClass.circRef.toString()); //Prints "[Class1] (has Class1 instance: [Object])"
        console.log(myClass.dependency.toString()); //Prints "[Dependency]"
    },
    error: function(arr) {
        console.log('Error loading files: ' + arr.join(', '));
    }
});

Or alternatively, if you want to write all your code in the same file:

ImportJS.pack(‘com.project.Class1’, function() {
//Initial imports
var Dependency = ImportJS.unpack(‘com.project.Dependency’);
var CircRef; //We make the reference now, import later

//Class definition (Can be named whatever)
var Definition = function() {
this.dependency = null;
this.circRef = null;
this.init = function() {
this.dependency = new Dependency();
this.circRef = new CircRef();
}
this.toString = function() {
return “[Class1] (has CircRef instance: ” + (this.circRef != null) + “)”;
}
};
//Return as an array
return [Definition, function() {
//Now it’s safe to import
CircRef = ImportJS.unpack(‘com.project.CircRef’);
}];
}, false); //<-False to specify this is an "uncompiled" class ImportJS.pack('com.project.CircRef', function() { //Prep import var Class1; //Class definition var Definition = function() { this.class1 = null; this.init = function() { this.class1 = new Class1(); } this.toString = function() { return "[CircRef] (has Class1 instance: " + (this.class1 != null) + ")"; } }; return [Definition, function() { //Safe to import Class1 = ImportJS.unpack('com.project.Class1'); }]; }, false); ImportJS.pack('com.project.Dependency', function() { //Class definition (simpler so we'll return right away) return function() { this.toString = function() { return "[Dependency]"; } }; }); //<- no false passed since this class does not need to be compiled //Compile all ImportJS.compile(); //Create a new instance of Class1 and print some info var Class1 = ImportJS.unpack('com.project.Class1'); var myClass = new Class1(); myClass.init(); myClass.circRef.init(); console.log(myClass.toString()); //Prints "[Class1] (has CircRef instance: [Object])" console.log(myClass.circRef.toString()); //Prints "[Class1] (has Class1 instance: [Object])" console.log(myClass.dependency.toString()); //Prints "[Dependency]"[/code] With ImportJS loaded in your browser you can paste the above text into your browser console to see the output. For the full documentation with more examples, check out the repository on GitHub: https://github.com/Cleod9/importjs

(P.S. This also works great with my last library I made, OOPS.js!)