Plugr.js

Stop losing time with your plugins and libraries integration

With Plugr, you can add / remove your plugins in a less effort and you don't have to lose your time tracking your different plugin's Scripts or stylesheets.

jQuery free

Plugr does not use jQuery to work, or any other third party libraries

Lightweight

Plugr is light as a feather, it's less than 1ko weight minified

Works everywhere

From IE to Chrome, or a mobile to a desktop, Plugr will work on any browser that have JavaScript enabled.

How to use it

Plugr is really simple to use, you just have to download the plugin, and load it to your document as the following :

Load all files at the same time

<html>
    <head>
        <title> Your website </title>
    </head>

    <body>
    <!-- Your content -->

    <script type="text/javascript" src="path/to/plugr.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            plugr(['aCssFramework','aResponsiveStylesheet'], ['aJavascriptPlugin', 'anOtherPlugin']);
        }
    </script>    
    </body>
</html>

Load some files with a delay

<html>
    <head>
        <title> Your website </title>
    </head>

    <body>
    <!-- Your content -->

    <script type="text/javascript" src="path/to/plugr.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            plugr(['someCss'], ['jquery']);  
            plugrDelay([''], ['anOtherScript'], 100);
        }
    </script>    
    </body>
</html>

Log the results to debug

<html>
    <head>
        <title> Your website </title>
    </head>

    <body>
    <!-- Your content -->

    <script type="text/javascript" src="path/to/plugr.js"></script>
    <script type="text/javascript">
    window.onload = function (){
        plugr(['!someCss'], ['!jquery']);  
        plugrDelay([''], ['!anOtherScript'], 100);
    }
    </script>    
    </body>
</html>

Plugr syntax

When you are using Plugr, you have to keep in mind the syntax of the code. It's not that hard, and once you master it, you will discover the real power of Plugr.

Basic Plugr :

window.onload = function(){
    // The first part is for css
    // The second part is for the JS
    plugr(['someCss'], ['jquery']);
}

You can load as much scripts and styles as you want :

window.onload = function(){
    plugr(['someCss', 'someOtherCss', 'someOtherCss', 'someOtherCss'], ['jquery', 'otherLib', 'andAnOherJustForFun']);
}

Delayed Plugr :

Sometimes, you will have to load scripts with a small delay, let's say that you load a third party library on your website with Plugr, and that library uses jQuery, the problem will be that the console will tell you that $ is undefined, even if you load it before the third party library.

The solution will be to load jQuery with Plugr, and then, load your third party library with a delayed Plugr. Let's see how you could do that :

window.onload = function(){
    // The first plugr is applied directly on load.
    plugr(['someCss'], ['jquery']);

    // Then you add your delayed plugr
    plugrDelayed(['cssFramework','otherCssFramework'], ['thirdPartyLib'], 100);
}

Notice the last value of the plugrDelayed function, which is 100. This value indicate with which delay the scripts and styles will be loaded on the page.

Needed Structure

In order to use Plugr, you have to follow this folder structure into your project :

your_project/
            |
            |_ index.html
            |
            |_ plugins/
                      |_ plugin_1_name/
                      |               |_ plugin_1_name.js
                      |               |_ plugin_1_name.css
                      |
                      |_ plugin_2_name/
                      |               |_ plugin_2_name.js
                      |               |_ plugin_2_name.css   
                      |
                      |_ plugin_3_name/
                                      |_ plugin_3_name.js
                                      |_ plugin_3_name.css

So as you see, all the scripts have to be listed in a plugins folder, and the CSS / JS have to get the same name as the plugin itself.