Skip to content

Latest commit

 

History

History
executable file
·
333 lines (216 loc) · 10 KB

api.en.md

File metadata and controls

executable file
·
333 lines (216 loc) · 10 KB
Raw

Technologies API

The package includes the following technologies:

bemhtml

Collects bemhtml.js files for blocks in a single file: a ?.bemhtml.js bundle, which is used for working both in the browser and in Node.js. It does not require connecting the template source files.

Supports YModules and partially supports CommonJS, since require will not work correctly in bemhtml.js files.

If the executable environment doesn't have any modular systems, the module will be provided to the BEMHTML global variable.

Options

Options are specified in the configuration file (.enb/make.js).

target

Type: String. Default: ? .bemhtml.js.

The name of the compiled file for saving the build result with the necessary bemhtml.js project files.

filesTarget

Type: String. Default: ?.files.

The name of the target for accessing the list of source files for the build. The file list is provided by the files technology in the enb-bem-techs package.

sourceSuffixes

Type: String | String[]. Default: ['bemhtml.js'].

The file suffixes to use for filtering BEMHTML template files for the build.

requires

Type: Object. Default: {}.

Specifies the names or paths for connecting third-party libraries.

For information on how it works, see the section Connecting third-party libraries.

exportName

Type: String. Default: BEMHTML.

The name for accessing the BEMHTML module. The ways it can be used depend on whether a modular system is available, and what type it is. This module can be used in the following cases:

  • Template execution in Node.js.

    var BEMHTML = require('bundle.bemhtml.js').BEMHTML;

BEMHTML.apply({ block: 'button' }); // <button class="button">...</button>

  • Template execution in a browser without a modular system.

    BEMHTML.apply({ block: 'button' }); // <button class="button">...</button>

  • Template execution in a browser with YModules.

    modules.require(['BEMHTML'], function(BEMHTML) {
    BEMHTML.apply({ block: 'button' }); // <button class="button">...</button>
});

forceBaseTemplates

Type: Boolean. Default: false.

Whether to include the kernel in the build, if there are no custom templates.

By default, if there are no custom templates, then the bem-xjst kernel code is not included in the assembly, either.

engineOptions

Type: Object. Default: {}.

Passes the BEMHTML engine settings for bem-xjst.

naming

Deprecated. Use engineOptions.naming.

Type: Object. Default: { elem: '__', mod: '_' }.

The naming convention for BEM entities for generating CSS classes:

  • String elem – Separates the name of the element from the block.
  • String mod – Separates the names and values ​​of modifiers from blocks and elements.

Example

{
    block : 'button',
    mods : { disabled : true },
    content : 'Inactive'
}

By default, CSS classes will be generated according to the original naming convention for BEM entities.

<button class="button button_disabled">Inactive</button>

To follow Two Dashes style, use -- to separate the modifier.

naming: { elem: '__', mod: '--' }

The result is the following HTML:

<button class="button button--disabled">Inactive</button>

Example

var BemhtmlTech = require('enb-bemxjst/techs/bemhtml'),
    FileProvideTech = require('enb/techs/file-provider'),
    bemTechs = require('enb-bem-techs');

 module.exports = function(config) {
     config.node('bundle', function(node) {
         // Getting the FileList
         node.addTechs([
             [FileProvideTech, { target: '?.bemdecl.js' }],
             [bemTechs.levels, { levels: ['blocks'] }],
             [bemTechs.deps],
             [bemTechs.files]
         ]);

         // Creating a BEMHTML file
         node.addTech(BemhtmlTech);
         node.addTarget('?.bemhtml.js');
     });
 };

bemtree

Collects bemtree.js files for blocks in a single file: a ? .bemtree.jsbundle, which is used for working both in the browser and in Node.js. It does not require connecting the template source files.

Supports YModules and partially supports CommonJS, since require will not work correctly in bemhtml.js files.

If the executable environment doesn't have any modular systems, the module will be provided to the BEMTREE global variable.

Options

Options are specified in the configuration file (.enb/make.js).

target

Type: String. Default: ?.bemtree.js.

The name of the compiled file for saving the build result with the necessary bemtree.js project files.

filesTarget

Type: String. Default: ?.files.

The name of the target for accessing the list of source files for the build. The file list is provided by the files technology in the enb-bem-techs package.

sourceSuffixes

Type: String | String[]. Default: ['bemtree.js'].

The file suffixes to use for filtering BEMHTML template files for the build.

requires

Type: Object. Default: {}.

Specifies the names or paths for connecting third-party libraries.

For information on how it works, see the section Connecting third-party libraries.

exportName

Type: String. Default: BEMTREE.

The name for accessing the BEMTREE module. The ways it can be used depend on whether a modular system is available, and what type it is. This module can be used in the following cases:

  • Template execution in Node.js.

    var BEMTREE = require('bundle.bemtree.js').BEMTREE;

BEMTREE.apply({ block: 'page' }); // { block: 'page', content: [...] }

  • Template execution in a browser without a modular system.

    BEMTREE.apply({ block: 'page' }); // { block: 'page', content: [...] }

  • Template execution in a browser with YModules.

    modules.require(['BEMTREE'], function(BEMTREE) {
    BEMTREE.apply({ block: 'button' }); // { block: 'page', content: [...] }
});

forceBaseTemplates

Type: Boolean. Default: false.

Whether to include the kernel in the build, if there are no custom templates.

By default, if there are no custom templates, then the bem-xjst kernel code is not included in the assembly, either.

engineOptions

Type: Object. Default: {}.

Passes the BEMTREE engine settings for bem-xjst.

Example

var BemtreeTech = require('enb-bemxjst/techs/bemtree'),
    FileProvideTech = require('enb/techs/file-provider'),
    bemTechs = require('enb-bem-techs');

 module.exports = function(config) {
     config.node('bundle', function(node) {
         // Getting the FileList
         node.addTechs([
             [FileProvideTech, { target: '?.bemdecl.js' }],
             [bemTechs.levels, { levels: ['blocks'] }],
             [bemTechs.deps],
             [bemTechs.files]
         ]);

         // Creating a BEMTREE file
         node.addTech(BemtreeTech);
         node.addTarget('?.bemtree.js');
     });
 };

bemjson-to-html

Designed for generating an HTML file. Accepts BEMJSON and a compiled ?.bemhtml.js file (resulting from bemhtml technologies) and returns HTML (a ?.html file).

Options

Options are specified in the configuration file (.enb/make.js).

target

Type: String. Default: ?.html.

The HTML file is the result of applying the compiled templates to the specified BEMJSON file.

bemhtmlFile

Type: String. Default: ? .bemhtml.js.

The name of the file that contains the templates that were compiled using the bemhtml technology. Used for converting BEMJSON to HTML.

bemjsonFile

Type: String. Default: ?.bemjson.js.

The name of the BEMJSON file to apply the compiled ?.bemhtml.js template to (resulting from bemhtml) in order to get HTML.

Example

var BemjsonToHtmlTech = require('enb-bemxjst/techs/bemjson-to-html'),
    BemhtmlTech = require('enb-bemxjst/techs/bemhtml'),
    FileProvideTech = require('enb/techs/file-provider'),
    bemTechs = require('enb-bem-techs');

module.exports = function(config) {
    config.node('bundle', function(node) {
        // Getting the BEMJSON file
        node.addTech([FileProvideTech, { target: '?.bemjson.js' }]);

        // Getting the FileList
        node.addTechs([
            [bemTechs.levels, { levels: ['blocks'] }],
            [bemTechs.bemjsonToBemdecl],
            [bemTechs.deps],
            [bemTechs.files]
        ]);

        // Compiling the BEMHTML file
        node.addTech(BemhtmlTech);
        node.addTarget('?.bemhtml.js');

        // Creating the HTML file
        node.addTech(BemjsonToHtmlTech);
        node.addTarget('?.html');
    });
};