riot.brawl v0.0.1

riot.brawl

If you use riot and you have hundred of tags, you should load them only when it's needed. to save some loading time and browser resources.

This riot extension will help you to load tag with require.js (or other library)

Example

An example with require.js

1 - Tag definition

lemontree.riot.html

riot.brawl(function(){

<lemontree>

    <lemon></lemon>
    <lemon></lemon>

</lemontree>

},["lemon"]);  // define the dependence with the lemon tag

lemon.riot.html

riot.brawl(function(){

<lemon>

    <div>I'm a lemon</lemon>

</lemon>

},[]);  // lemon has no dependence

2 - Compile tags

Once our tag are written just compile them with the riot compiler. For this example we have this file structure :

lemon_project
|
│---src
|   |
|   |---tags
|       |    lemontree.riot.html
|       |    lemon.riot.html
|
|---dist
    |
    |---tags
        |    lemontree.js
        |    lemon.js

3 - Setup the Brawler

Setup a require.js package named tag and use it in the loader

    requirejs.config({
        packages: [
            {
                name: "tag"                 // CREATE THE TAG PACKAGE
                location: "dist/tags"
            }
        ]
    });
    
    var brawler = new riot.Brawler(
        new Brawler.Loader.RequireJs("tag") // USE THE TAG PACKAGE
    );
    
    
    brawler.loadTag("lemontree", function(){
    
        // now lemontree tag and lemon tag are available in the application
        riot.mount('*');
    
    }); 
    

Events

Events are available :

• loadTag : is fired when a tag starts loading
• tagLoaded : is fired when a tag a finished to load

Event Example

    brawler.on(Brawler.events.loadTag, function(tagName){

        console.log("Loading tag : " + tagName);
    
    });
    
    brawler.on(Brawler.events.tagLoaded, function(tagName){
    
        console.log("Tag Loaded : " + tagName);
    
    });
    
    brawler.loadTag("myTag");
    // OUTPUT :
    // Loading tag : myTag
    // Tag Loaded : myTag
    
    
    // call it a second time 
    brawler.loadTag("myTag");
    
    // There is no output because tag is already loaded