Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] Refactoring ENB config #1349

Closed
wants to merge 17 commits into from
Closed

[WIP] Refactoring ENB config #1349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
793e65e
Moved browsers from ENB config
Feb 9, 2015
53678fd
Moved sets from ENB config
Feb 9, 2015
ea3ae61
Used autoprefixer with stylus tech
Feb 9, 2015
4dac632
Moved langs from ENB config
Feb 9, 2015
a34071b
Moved platforms from ENB config
Feb 9, 2015
62a8554
Moved levels from ENB config
Feb 9, 2015
6e63c8d
Moved sub configs to `.enb/config`
Feb 9, 2015
7a2f6fb
Moved `specs` task from ENB config
Feb 9, 2015
ab39e6e
Moved `tmpl-specs` task from ENB config
Feb 9, 2015
f11eb0a
Moved `tests` task from ENB config
Feb 9, 2015
3d347cf
Moved `examples` task from ENB config
Feb 9, 2015
94907a0
Moved `docs` task from ENB config
Feb 9, 2015
687857a
Wrapped tasks
Feb 9, 2015
906fb64
Moved `dist` task from ENB config
Feb 9, 2015
7e30e0c
Moved helper for page configure from ENB config
Feb 10, 2015
e576215
Moved techs from ENB config
Feb 10, 2015
94d8228
Updated ENB dependencies
Feb 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions .enb/config/browsers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
module.exports = {
desktop : [
'last 2 versions',
'ie 10',
'ff 24',
'opera 12.16'
],
touch : [
'android 4',
'ios >= 5',
'ie 10'
],
'touch-pad' : [
'android 4',
'ios 5'
],
'touch-phone' : [
'android 4',
'ios 6',
'ie 10'
]
};
4 changes: 4 additions & 0 deletions .enb/config/langs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
var langs = process.env.BEM_I18N_LANGS,
DEFAULT_LANGS = ['ru', 'en'];

module.exports = langs? langs.split(' ') : [].concat(DEFAULT_LANGS);
7 changes: 7 additions & 0 deletions .enb/config/levels.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe it's better to call this file sets.js?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh, there's sets as well )

desktop : ['common.blocks', 'desktop.blocks'],
touch : ['common.blocks', 'touch.blocks'],
'touch-pad' : ['common.blocks', 'touch.blocks', 'touch-pad.blocks'],
'touch-phone' : ['common.blocks', 'touch.blocks', 'touch-phone.blocks'],
test : ['test.blocks']
};
26 changes: 26 additions & 0 deletions .enb/config/libs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
module.exports = {
'bem-core' : {
path : 'libs/bem-core',
levels : {
desktop : ['libs/bem-core/common.blocks', 'libs/bem-core/desktop.blocks'],
touch : ['libs/bem-core/common.blocks', 'libs/bem-core/touch.blocks'],
'touch-pad' : ['libs/bem-core/common.blocks', 'libs/bem-core/touch.blocks'],
'touch-phone' : ['libs/bem-core/common.blocks', 'libs/bem-core/touch.blocks']
}
},
'bem-pr' : {
path : 'libs/bem-pr',
levels : {
spec : ['libs/bem-pr/spec.blocks']
}
},
'design' : {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you sure about semantical correctness of treating design as external library?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its behavior is no different from the usual library. The only difference is that it is inside bem-components.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we have levels and libs. and we treat them as different things. so semantically there's difference.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we need two different files: one for libs, and the other one for design?

path : 'design',
levels : {
desktop : ['design/common.blocks', 'design/desktop.blocks'],
touch : ['design/common.blocks', 'design/touch.blocks'],
'touch-pad' : ['design/common.blocks', 'design/touch.blocks', 'design/touch-pad.blocks'],
'touch-phone' : ['design/common.blocks', 'design/touch.blocks', 'design/touch-phone.blocks']
}
}
};
1 change: 1 addition & 0 deletions .enb/config/platforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = ['desktop', 'touch-phone', 'touch-pad'];
6 changes: 6 additions & 0 deletions .enb/config/sets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
desktop : ['common', 'desktop'],
touch : ['common', 'touch'],
'touch-phone' : ['common', 'touch'],
'touch-pad' : ['common', 'touch']
};
149 changes: 149 additions & 0 deletions .enb/lib/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
var techs = require('./techs');

module.exports = function(node, options) {
var levels = options.levels || [],
browsers = options.browser || [],
langs = options.langs || [],
templateEngine = options.templateEngine || 'BH';

// essential
node.addTechs([
[techs.bem.levels, { levels : levels }],
[techs.bem.bemjsonToBemdecl, {
target : '.tmp.bemdecl.js'
}],
[techs.bem.deps, {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

tech.levels({ levels : levels }),
tech.bemjsonToBemdecl('.tmp.bemdecl.js'), // sugar for target

etc. ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reopened old issue in this topic. I propose to continue the discussion there.

bemdeclFile : '.tmp.bemdecl.js',
target : '.tmp.deps.js'
}],
[techs.bem.files, {
depsFile : '.tmp.deps.js'
}]
]);

// css
node.addTech([techs.css, {
target : '.tmp.css',
browsers : browsers
}]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

tech.css('.tmp.css', { browsers : browsers }),

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reopened old issue in this topic. I propose to continue the discussion there.

node.mode('development', function() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather use borschik in both dev and prod modes but in dev without minify option.
and I think we can switch freeze on by default because without .borschik config there won't be any changes and as soon as it appear freezing should be applied.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agree

node.addTech([techs.files.copy, {
source : '.tmp.css',
target : '?.css'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

tech.copy('.tmp.css.js', '?.css'), // sugar for source and dest (target)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reopened old issue in this topic. I propose to continue the discussion there.

}]);
});
node.mode('production', function() {
node.addTech([techs.process, {
source : '.tmp.css',
target : '?.css',
minify : true,
tech : 'cleancss'
}]);
});
node.addTarget('?.css');

// JavaScript for browsers
node.addTechs([
// Template engine for JavaScript
[techs.bem.depsByTechToBemdecl, {
target : '.tmp.js-template.bemdecl.js',
sourceTech : 'js',
destTech : 'bemhtml'
}],
[techs.bem.deps, {
target : '.tmp.js-template.deps.js',
bemdeclFile : '.tmp.js-template.bemdecl.js'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a source named bemdeclFile, right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition to bemdeclFile there is still lavelsTarget option which is also source.

I created issue about the names of options. I propose to continue the discussion there.

}],
[techs.bem.files, {
depsFile : '.tmp.js-template.deps.js',
filesTarget : '.tmp.js-template.files',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it a target named filesTarget?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition to filesTarget there is still dirsTarget option which is also target.

I created issue about the names of options. I propose to continue the discussion there.

dirsTarget : '.tmp.js-template.dirs'
}],
templateEngine === 'BH'? [techs.engines.bhClient, {
target : '.tmp.js-template.js',
filesTarget : '.tmp.js-template.files',
jsAttrName : 'data-bem',
jsAttrScheme : 'json',
mimic : 'BEMHTML'
}] : [techs.engines.bemhtml, {
target : '.tmp.js-template.js',
filesTarget : '.tmp.js-template.files',
devMode : false
}],

// JavaScript Files
[techs.bem.depsByTechToBemdecl, {
target : '.tmp.required-js.bemdecl.js',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why required?

sourceTech : 'js',
destTech : 'js'
}],
[techs.bem.mergeBemdecl, {
sources : ['.tmp.bemdecl.js', '.tmp.required-js.bemdecl.js'],
target : '.tmp.js.bemdecl.js'
}],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

tech.mergeBemdecl(['.tmp.bemdecl.js', '.tmp.required-js.bemdecl.js'], '.tmp.js.bemdecl.js'); // sugar for sourceS and target (dest)

upd swapped sources and target — sources as first arg is more intuitive, right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reopened old issue in this topic. I propose to continue the discussion there.

[techs.bem.deps, {
target : '.tmp.js.deps.js',
bemdeclFile : '.tmp.js.bemdecl.js'
}],
[techs.bem.files, {
depsFile : '.tmp.js.deps.js',
filesTarget : '.tmp.js.files',
dirsTarget : '.tmp.js.dirs'
}],

// JavaScript
[techs.browser.js, {
filesTarget : '.tmp.js.files',
target : '.tmp.source.js'
}],
[techs.browser.ym, {
source : '.tmp.source.js',
target : '.tmp.js'
}]
]);
node.mode('development', function() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same story about having borschik in dev mode as well. and also I suggest to use js-borschik-include by default

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay

node.addTech([techs.files.copy, {
source : '.tmp.js',
target : '?.js'
}]);
});
node.mode('production', function() {
node.addTech([techs.process, {
source : '.tmp.js',
target : '?.js',
minify : true
}]);
});
node.addTarget('?.js');

// Htmls by langs
node.addTechs([
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

node.addOptionalTechs which can gracefully fail if there are no built sources?

upd like: no bemjson → no html, but have bemdecl → all is fine, just no html.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1, if it's possible with ENB

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not? target: 'bemdecl.js', source: 'bemjsonToBemdecl.apply(readFile(bemjson.js)) OR readFile(bemdecl)'. One entry, one exit for each bundle. No problems.

templateEngine === 'BH'? [techs.engines.bhServer, {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's think about universal declaration for any template engine with the help of something like

module.exports = {
    engine: 'bhServer',
    opts: {
        jsAttrName : 'data-bem',
        jsAttrScheme : 'json'
    }
}

and

module.exports = {
    engine: 'bemhtml',
    opts: {
        devMode : false
    }
}

and then

var templateEngineConf = require(templateEngine === 'BH'? `./bh.conf.js` : './bemhtml.conf.js');

[techs.engines[templateEngineConf.engine], extend({
    target : 'bemhtml.dev.js'
}, templateEngineConf.options)]

BTW, looks like there's no way to switch to dev mode in BEMHTML?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need some proxy modules or agreement for that (oh, wait, there are enb techs already?).
Yes, we can.

target : 'bemhtml.dev.js',
jsAttrName : 'data-bem',
jsAttrScheme : 'json'
}] : [techs.engines.bemhtml, {
target : 'bemhtml.dev.js',
devMode : false
}],
[techs.process, {
source : 'bemhtml.dev.js',
target : 'bemhtml.js',
minify : true
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's the reason to minify bemhtml? and anyways it should depend on env

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agree

}],
templateEngine === 'BH'? [techs.html.bh, {
bhFile : 'bemhtml.js'
}] : [techs.html.bemhtml]
]);
node.addTargets(['?.html']);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or maybe addOptionalTargets? to build if possible without an error?


langs.forEach(function(lang) {
var target = '?.' + lang + '.html';

node.addTech([techs.files.copy, {
source : '?.html',
target : target
}]);
node.addTarget(target);
});
};
22 changes: 22 additions & 0 deletions .enb/lib/techs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
module.exports = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we can extend this file and publish as npm module with all the deps bundled?

bem : require('enb-bem-techs'),
css : require('enb-stylus/techs/css-stylus-with-autoprefixer'),
files : {
copy : require('enb/techs/file-copy'),
merge : require('enb/techs/file-merge')
},
browser : {
js : require('enb-diverse-js/techs/browser-js'),
ym : require('enb-modules/techs/prepend-modules')
},
engines : {
bemhtml : require('enb-bemxjst/techs/bemhtml-old'),
bhServer : require('enb-bh/techs/bh-server-include'),
bhClient : require('enb-bh/techs/bh-client-module')
},
html : {
bemhtml : require('enb-bemxjst/techs/html-from-bemjson'),
bh : require('enb-bh/techs/html-from-bemjson')
},
process : require('enb-borschik/techs/borschik')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know you want abstraction from borschik but in this case I'd say explicit is better than implicit.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay

};
Loading