Requires Option

[Andrew Abramov]

Now we can use modulesDeps option to require dependencies from YModules:

{ 
    modulesDeps: {
        vow: 'Vow'
    } 
}

After compilation dependencies are provided in base templates as "global" variables.

modules.define('BEMHTML', ['vow'], function (provide, Vow) {
    // Base templates of BEMTREE expect `vow` module from `Vow` variable.
});

Shortcomings

• It is impossible get the module from global scope.
• It is impossible get the module using CommonJS.
• Interface expects variables from global scope.

Problem Solution

{ 
    requires: {
        'lib-name': {
            globals: 'dependName',      // var name from global scope
            ym: 'depend-name',          // module name from YModules
            commonJS: 'path/to/module', // relative path to CommonJS module from target
        }
    } 
}

For templates dependencies will be available in this.requre('lib-name'):

block('block').content(function () {
    var lib = this.require('lib-name');

    return lib.method();
});

In bundle file will be as follows:

// For global scope
oninit(function(exports, context) {
    context.BEMContext.prototype.requre = function(name) {
        return dependName; 
    };
});

// For YModules
modules.define('BEMHTML', ['depend-name'], function (provide, libName) {
    /* core + templates */
    oninit(function(exports, context) {
        context.BEMContext.prototype.requre = function(name) {
            return libName; 
        };
    });
});

// For CommonJS
oninit(function(exports, context) {
    var deps = context.BEMContext.prototype.libs = {};

    context.BEMContext.prototype.requre = function(name) {
        return require('path/to/module'); 
    };
});

If you want to get the dependency from the global scope for all modular systems:

{ 
    requires: {
        libName: {
            globals: 'dependName' // var name from global scope
        }
    } 
}

In bundle file will be as follows:

// For global scope
oninit(function(exports, context) {
    context.BEMContext.prototype.requre = function(name) {
        return dependName; 
    };
});

// For YModules
modules.define('BEMHTML', function (provide) {
    /* core + templates */
    oninit(function(exports, context) {
        context.BEMContext.prototype.requre = function(name) {
            return dependName; 
        };
    });
});

// For CommonJS
oninit(function(exports, context) {
    context.BEMContext.prototype.requre = function(name) {
        return dependName; 
    };
});

[Andrew Abramov]

Part of the discussion has gone into this thread: bem/bem-xjst#41 (comment).