Skip to content

Commit f69293e

Browse files
miripirunimiripiruni
authored
bem-xjst: short syntax for simple modes (#497)
* jshintrc fixed * bem-xjst: short syntax for simple modes (fix #444) * test/fextures: JSDoc fixed * Tests: anonym mode should return null if null passed * Docs: methods shorthand * Readme examples: shortcuts for tag mode * def() mode as def shortcut * Docs: modern ecmascript in examples
1 parent 117146e commit f69293e

16 files changed

+1256
-567
lines changed

‎.jshintrc

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,6 @@
2828
// "double" : require double quotes
2929
"undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
3030
"unused" : true, // true: Require all defined variables be used
31-
"predef" : [
32-
// Subpredicates:
33-
"block", "elem", "mod", "elemMod", "match",
34-
// Runtime related:
35-
"oninit", "xjstOptions", "apply", "applyNext", "applyCtx", "local",
36-
// Output generators:
37-
"wrap", "replace", "extend", "mode", "def",
38-
"content", "appendContent", "prependContent",
39-
"attrs", "addAttrs", "js", "addJs", "mix", "addMix",
40-
"mods", "addMods", "elemMods", "addElemMods",
41-
"tag", "cls", "bem"
42-
],
4331
"strict" : false, // true: Requires all functions run in ES5 Strict Mode
4432
"maxparams" : false, // {int} Max number of formal params allowed per function
4533
"maxdepth" : 5, // {int} Max depth of nested blocks (within functions)
@@ -99,6 +87,41 @@
9987
"globals" : {
10088
"module": true,
10189
"test": true,
102-
"BEMXJSTError": true
90+
"BEMXJSTError": true,
91+
// Subpredicates:
92+
"block": true,
93+
"elem": true,
94+
"mod": true,
95+
"elemMod": true,
96+
"match": true,
97+
// Runtime related:
98+
"oninit": true,
99+
"xjstOptions": true,
100+
"apply": true,
101+
"applyNext": true,
102+
"applyCtx": true,
103+
"local": true,
104+
// Output generators:
105+
"wrap": true,
106+
"replace": true,
107+
"extend": true,
108+
"mode": true,
109+
"def": true,
110+
"content": true,
111+
"appendContent": true,
112+
"prependContent": true,
113+
"attrs": true,
114+
"addAttrs": true,
115+
"js": true,
116+
"addJs": true,
117+
"mix": true,
118+
"addMix": true,
119+
"mods": true,
120+
"addMods": true,
121+
"elemMods": true,
122+
"addElemMods": true,
123+
"tag": true,
124+
"cls": true,
125+
"bem": true
103126
}
104127
}

‎README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@ redefinition via new templates but also using ‘modes’. E.g. it may be a tag
1717
or its content.
1818

1919
```js
20-
block('link').tag()('span');
20+
block('link')({ tag: 'span' });
2121
// The template sets tag to `span` for all `link` blocks.
22-
// And tag() mode can be redefined if any condition passed.
22+
// And tag mode can be redefined if any condition passed.
2323

24-
block('link').match(function(node, ctx) { return ctx.url; }).tag()('a');
25-
// The template sets tag to `a` only if block `link` have `url` field.
24+
block('link').match((node, ctx) => ctx.url)({ tag: 'a' });
25+
// The template sets tag to `a` only if block `link` have `url` field.
2626
// Otherwise tag will be ‘span’ as previous template says.
2727
```
2828

@@ -31,8 +31,8 @@ block('link').match(function(node, ctx) { return ctx.url; }).tag()('a');
3131
Templates are written using [pattern matching](/docs/en/7-runtime.md#how-templates-are-selected-and-applied) for the values and structure of input data
3232

3333
```js
34-
block('list').tag()('ul');
35-
block('item').tag()('li');
34+
block('list')({ tag: 'ul' });
35+
block('item')({ tag: 'li' });
3636
```
3737

3838
We can apply these two declarative-style templates templates to data:

‎README.ru.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@
1616
частей вывода: HTML-тега, HTML-атрибутов или содержимого узла. Например:
1717

1818
```js
19-
block('link').tag()('span');
19+
block('link')({ tag: 'span' });
2020
// Этот шаблон определяет тег для всех блоков `link`.
21-
// Режим `tag()` может быть переопределен по произвольному условию.
21+
// Режим `tag` может быть переопределен по произвольному условию.
2222

23-
block('link').match(function(node, ctx) { return ctx.url; }).tag()('a');
23+
block('link').match((node, ctx) => ctx.url)({ tag: 'a' });
2424
// Этот шаблон определяет тег `a` только в случае если в блоке `link` есть поле `url`.
2525
// Иначе тег будет `span`, как определено в предыдущем шаблоне.
2626
```
@@ -31,8 +31,8 @@ block('link').match(function(node, ctx) { return ctx.url; }).tag()('a');
3131
соответствие шаблону.
3232

3333
```js
34-
block('list').tag()('ul');
35-
block('item').tag()('li');
34+
block('list')({ tag: 'ul' });
35+
block('item')({ tag: 'li' });
3636
```
3737

3838
Для каждого блока `list` выполнится шаблон про тег `ul`. Для каждого блока

‎docs/en/2-quick-start.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ var bemxjst = require('bem-xjst');
2020
var bemhtml = bemxjst.bemhtml;
2121

2222
// Add templates using the `compile` method
23-
var templates = bemhtml.compile(function() {
24-
block('text').tag()('span');
23+
var templates = bemhtml.compile(() => {
24+
block('text')({ tag: 'span' });
2525
});
2626

2727
// Add data in BEMJSON format

‎docs/en/3-api.md

Lines changed: 52 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ var bemxjst = require('bem-xjst');
2626
var bemhtml = bemxjst.bemhtml;
2727

2828
// Add a template
29-
var templates = bemhtml.compile(function() {
30-
block('quote').tag()('q');
29+
var templates = bemhtml.compile(() => {
30+
block('quote')({ tag: 'q' });
3131
});
3232

3333
// Add data
@@ -50,14 +50,16 @@ var bemxjst = require('bem-xjst');
5050
var bemtree = bemxjst.bemtree;
5151

5252
// Add a template
53-
var templates = bemtree.compile(function() {
54-
block('phone').content()({ mask: '8-800-×××-××-××', mandatory: true });
55-
56-
block('page').content()([
57-
{ block: 'header' },
58-
{ block: 'body' },
59-
{ block: 'footer' }
60-
]);
53+
var templates = bemtree.compile(() => {
54+
block('phone')({ content: { mask: '8-800-×××-××-××', mandatory: true } });
55+
56+
block('page')({
57+
content: [
58+
{ block: 'header' }
59+
{ block: 'body' },
60+
{ block: 'footer' }
61+
]
62+
});
6163
});
6264

6365
// Add data
@@ -93,8 +95,8 @@ To add templates to the `templates` instance, use the `compile` method.
9395
var bemxjst = require('bem-xjst');
9496

9597
// Instantiating the 'templates' class
96-
var templates = bemxjst.bemhtml.compile(function() {
97-
block('header').tag()('h1');
98+
var templates = bemxjst.bemhtml.compile(() => {
99+
block('header')({ tag: 'h1' });
98100
});
99101

100102
// Add data
@@ -105,7 +107,7 @@ var html = templates.apply(bemjson);
105107

106108
// Add templates to the created instance of the 'templates' class
107109
templates.compile(function() {
108-
block('header').tag()('h2');
110+
block('header')({ tag: 'h2' });
109111
});
110112

111113
html = templates.apply(bemjson);
@@ -121,7 +123,7 @@ If you need to [bundle](https://en.bem.info/methodology/build/#build-results) al
121123

122124
```js
123125
var bemxjst = require('bem-xjst');
124-
var templates = bemxjst.bemhtml.compile(function() {
126+
var templates = bemxjst.bemhtml.compile(() => {
125127
// This example doesn’t add any templates.
126128
// HTML will be rendered using the default behavior of the template engine.
127129
}, {
@@ -158,7 +160,7 @@ bem-xjst have `elemJsInstances` option for support JS instances for elems ([bem-
158160

159161
```js
160162
var bemxjst = require('bem-xjst');
161-
var templates = bemxjst.bemhtml.compile(function() {
163+
var templates = bemxjst.bemhtml.compile(() => {
162164
// In this example we will add no templates.
163165
// Default behaviour is used for HTML rendering.
164166
}, {
@@ -199,7 +201,7 @@ Example for v6.2.0:
199201

200202
```js
201203
var bemxjst = require('bem-xjst');
202-
var templates = bemxjst.bemhtml.compile(function() {
204+
var templates = bemxjst.bemhtml.compile(() => {
203205
// In this example we didn’t add templates
204206
// bem-xjst will render by default
205207
}, {
@@ -228,7 +230,7 @@ You can find list of optional end tags in specifications:
228230

229231
```js
230232
var bemxjst = require('bem-xjst');
231-
var templates = bemxjst.bemhtml.compile(function() {
233+
var templates = bemxjst.bemhtml.compile(() => {
232234
// In this example we will add no templates.
233235
// Default behaviour is used for HTML rendering.
234236
}, {
@@ -266,7 +268,7 @@ You can use `unquotedAttrs` option to do so.
266268

267269
```js
268270
var bemxjst = require('bem-xjst');
269-
var templates = bemxjst.bemhtml.compile(function() {
271+
var templates = bemxjst.bemhtml.compile(() => {
270272
// In this example we will add no templates.
271273
// Default behaviour is used for HTML rendering.
272274
}, {
@@ -293,7 +295,7 @@ You can set `escapeContent` option to `true` to escape string values of `content
293295

294296
```js
295297
var bemxjst = require('bem-xjst');
296-
var templates = bemxjst.bemhtml.compile(function() {
298+
var templates = bemxjst.bemhtml.compile(() => {
297299
// In this example we will add no templates.
298300
// Default behaviour is used for HTML rendering.
299301
}, {
@@ -322,7 +324,7 @@ If you want avoid escaping in content [use special value](4-data.md#content): `{
322324

323325
```js
324326
var bemxjst = require('bem-xjst');
325-
var templates = bemxjst.bemhtml.compile(function() {
327+
var templates = bemxjst.bemhtml.compile(() => {
326328
// In this example we will add no templates.
327329
// Default behaviour is used for HTML rendering.
328330
}, {
@@ -359,12 +361,14 @@ About these warnings you can read [migration guide](https://github.com/bem/bem-x
359361
var bemxjst = require('bem-xjst');
360362
var bemhtml = bemxjst.bemhtml;
361363

362-
var templates = bemhtml.compile(function() {
363-
block('b').content()('yay');
364+
var templates = bemhtml.compile(() => {
365+
block('b')({ content: 'yay' });
364366

365-
block('mods-changes').def()(function() {
366-
this.ctx.mods.one = 2;
367-
return applyNext();
367+
block('mods-changes')({
368+
def: (ctx, json) => {
369+
json.mods.one = 2;
370+
return applyNext();
371+
}
368372
});
369373
}, { runtimeLint: true });
370374

@@ -406,11 +410,13 @@ You can use option `production` to render whole BEMJSON even if one template con
406410
**Example**
407411

408412
```js
409-
var template = bemxjst.compile(function() {
410-
block('b1').attrs()(function() {
411-
var attrs = applyNext();
412-
attrs.undef.foo = 'bar';
413-
return attrs;
413+
var template = bemxjst.compile(() => {
414+
block('b1')({
415+
attrs: () => {
416+
var attrs = applyNext();
417+
attrs.undef.foo = 'bar';
418+
return attrs;
419+
}
414420
});
415421
}, { production: true });
416422
var html = template.apply({ block: 'page', content: { block: 'b1' } });
@@ -472,10 +478,12 @@ For example:
472478
`lib-name` module will be accessible in templates body like this:
473479

474480
```js
475-
block('button').content()(function () {
476-
var lib = this.require('lib-name');
481+
block('button')({
482+
content: (node) => {
483+
var lib = node.require('lib-name');
477484

478-
return lib.hello();
485+
return lib.hello();
486+
}
479487
});
480488
```
481489

@@ -511,7 +519,7 @@ You don’t need to to provide path to module:
511519
{
512520
requires: {
513521
moment: {
514-
commonJS: 'moment', // path to CommonJS module, relative bundle file
522+
commonJS: 'moment' // path to CommonJS module, relative bundle file
515523
}
516524
}
517525
}
@@ -521,11 +529,13 @@ In templates body the module will be acessible as `this.require('moment')`.
521529
You can use the template in any browser or in `Node.js`:
522530

523531
```js
524-
block('post').elem('data').content()(function() {
525-
var moment = this.require('moment');
532+
block('post').elem('data')({
533+
content: (node, ctx) => {
534+
var moment = node.require('moment');
526535

527-
return moment(this.ctx.date) // Time in ms from server
528-
.format('YYYY-MM-DD HH:mm:ss');
536+
return moment(ctx.date) // Time in ms from server
537+
.format('YYYY-MM-DD HH:mm:ss');
538+
}
529539
});
530540
```
531541

@@ -543,9 +553,9 @@ templates.BEMContext.prototype.hi = function(name) {
543553
};
544554

545555
// Add templates
546-
templates.compile(function() {
547-
block('b').content()(function() {
548-
return this.hi('templates');
556+
templates.compile(() => {
557+
block('b')({
558+
content: (node) => node.hi('templates')
549559
});
550560
});
551561

@@ -569,7 +579,7 @@ browser to get the `templates` object.
569579

570580
```js
571581
var bemxjst = require('bem-xjst');
572-
var bundle = bemxjst.bemhtml.generate(function() {
582+
var bundle = bemxjst.bemhtml.generate(() => {
573583
// user-defined templates
574584
// …
575585
});

0 commit comments

Comments
 (0)