archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2025-12-08 19:26:05 +00:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/issue-357' into marko-v4

Browse Source
This commit is contained in:
Patrick Steele-Idem 2016-08-19 14:19:22 -06:00
commit d930ee29bb
11 changed files with 101 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
README.md
View File

@ -12,7 +12,7 @@ Marko is a [_really_ fast](https://github.com/marko-js/templating-benchmarks) an
# Get Involved
- **Contributing**: Pull requests are welcome!
- **Contributing**: Pull requests are welcome!
- Read [`CONTRIBUTING.md`](.github/CONTRIBUTING.md) and check out our [bite-sized](https://github.com/marko-js/marko/issues?q=is%3Aissue+is%3Aopen+label%3Adifficulty%3Abite-sized) and [help-wanted](https://github.com/marko-js/marko/issues?q=is%3Aissue+is%3Aopen+label%3Astatus%3Ahelp-wanted) issues
- Submit github issues for any feature enhancements, bugs or documentation problems
- **Support**: Join our [gitter chat](https://gitter.im/marko-js/marko) to ask questions to get support from the maintainers and other Marko developers
@ -42,7 +42,38 @@ Marko supports _both_ a familiar HTML syntax, as well as a more concise indentat
Hello ${data.name}!
</h1>
<ul if(notEmpty(data.colors))>
<if(data.colors.length)>
<ul>
<for(color in data.colors)>
<li>
${color}
</li>
</for>
</ul>
</if>
<else>
<div>
No colors!
</div>
</else>
</body>
</html>
```
Alternatively, you can choose to apply rendering logic as "attributes":
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Marko Templating Engine</title>
</head>
<body>
<h1>
Hello ${data.name}!
</h1>
<ul if(data.colors.length)>
<li for(color in data.colors)>
${color}
</li>
@ -65,7 +96,7 @@ html lang="en"
title - Marko Templating Engine
body
h1 - Hello ${data.name}!
ul if(notEmpty(data.colors))
ul if(data.colors.length)
li for(color in data.colors)
${color}
div else
@ -86,7 +117,7 @@ html lang="en"
<h1>
Hello ${data.name}!
</h1>
ul if(notEmpty(data.colors))
ul if(data.colors.length)
li for(color in data.colors)
${color}
div else

4
docs/compiler.md
View File

@ -46,8 +46,6 @@ require('marko/compiler').compileFile(path, function(err, src) {
```javascript
function create(__helpers) {
var str = __helpers.s,
empty = __helpers.e,
notEmpty = __helpers.ne,
escapeXml = __helpers.x,
forEach = __helpers.f,
escapeXmlAttr = __helpers.xa;
@ -57,7 +55,7 @@ function create(__helpers) {
escapeXml(data.name) +
'! ');
if (notEmpty(data.colors)) {
if (data.colors.length) {
out.w('<ul>');
forEach(data.colors, function(color) {

16
docs/language-guide.md
View File

@ -11,13 +11,13 @@ _Applying directives using attributes:_
```xml
<!-- Colors available -->
<ul if(notEmpty(colors))>
<ul if(colors.length)>
<li for(color in colors)>
${color}
</li>
</ul>
<!-- No colors available-->
<div if(empty(colors))>
<div else>
No colors!
</div>
```
@ -26,7 +26,7 @@ _Applying directives using elements:_
```xml
<!-- Colors available -->
<if(notEmpty(colors))>
<if(colors.length)>
<ul>
<for(color in colors)>
<li>
@ -37,11 +37,11 @@ _Applying directives using elements:_
</if>
<!-- No colors available -->
<if(empty(colors))>
<else>
<div>
No colors!
</div>
</if>
</else>
```
The disadvantage of using elements to control structural logic is that they change the nesting of the elements which can impact readability. For this reason it is often more suitable to apply directives as attributes.
@ -849,12 +849,6 @@ Usage inside template:
<div>${data.reverse('reverse test')}</div>
```
Aside from custom helpers that can be built per-project, Marko has some built-in helpers with support for common tasks.
__empty()/notEmpty()__
To deal with "empty" data, Marko provides the empty() and notEmpty() helpers. Both helpers can be used to check for empty objects (objects, that are set to null), arrays of length zero or empty strings; empty() returns true for these cases exclusively. Therefore, not all "falsy" JavaScript values are reported as "empty" - e.g.: a boolean value that is set to "false" is not empty, hence notEmpty() would return "true". As their name already suggests, both helpers are contrary to each other.
# Miscellaneous
## invoke

10
docs/marko-v3-presentation.md
View File

@ -127,7 +127,7 @@ Source: https://github.com/marko-js/templating-benchmarks
<!-- Welcome to Marko! -->
<app-hello name=data.name/>
<ul if(notEmpty(data.colors))>
<ul if(data.colors.length)>
<li for(color in data.colors)>
${color}
</li>
@ -151,7 +151,7 @@ html lang="en"
body
// Welcome to Marko!
app-hello name=data.name
ul if(notEmpty(data.colors))
ul if(data.colors.length)
li for(color in data.colors)
${color}
div else
@ -171,7 +171,7 @@ html lang="en"
body
// Welcome to Marko!
<app-hello name=data.name/>
ul if(notEmpty(data.colors))
ul if(data.colors.length)
li for(color in data.colors)
${color}
div else
@ -852,7 +852,7 @@ Usage:
```xml
<my-custom-tag name="World"/>
<ul if(notEmpty(data.colors))>
<ul if(data.colors.length)>
<li for(color in data.colors)>
${color}
</li>
@ -877,7 +877,7 @@ function create(__helpers) {
name: "World"
}, out);
if (notEmpty(data.colors)) {
if (data.colors.length) {
out.w("<ul>");
forEach(data.colors, function(color) {

10
docs/overview.md
View File

@ -36,7 +36,7 @@ Syntax highlighting is available in the following editors and IDEs:
Hello ${data.name}!
</h1>
<ul if(notEmpty(data.colors))>
<ul if(data.colors.length)>
<li for(color in data.colors)>
${color}
</li>
@ -59,7 +59,7 @@ html lang="en"
title - Marko Templating Engine
body
h1 - Hello ${data.name}!
ul if(notEmpty(data.colors))
ul if(data.colors.length)
li for(color in data.colors)
${color}
div else
@ -80,7 +80,7 @@ html lang="en"
<h1>
Hello ${data.name}!
</h1>
ul if(notEmpty(data.colors))
ul if(data.colors.length)
li for(color in data.colors)
${color}
div else
@ -95,7 +95,7 @@ _hello-world.marko:_
```xml
<h2>Hello ${data.name}!</h2>
<ul if(notEmpty(data.colors))>
<ul if(data.colors.length)>
<li style="color: ${color}" for(color in data.colors)>
${color}
</li>
@ -195,7 +195,7 @@ __Marko:__
```xml
<h2>Hello ${data.name}!</h2>
<ul if(notEmpty(data.colors))>
<ul if(data.colors.length)>
<li class="color" for(color in data.colors)>
${color}
</li>

10
docs/what-is-new-marko-v3.md
View File

@ -109,7 +109,7 @@ The code snippets below show how each syntax variant compares.
Hello ${data.name}!
</h1>
<ul if(notEmpty(data.colors))>
<ul if(data.colors.length)>
<li for(color in data.colors)>
${color}
</li>
@ -133,7 +133,7 @@ html lang="en"
body
// Welcome to Marko!
h1 - Hello ${data.name}!
ul if(notEmpty(data.colors))
ul if(data.colors.length)
li for(color in data.colors)
${color}
div else
@ -186,7 +186,7 @@ html lang="en"
<h1>
Hello ${data.name}!
</h1>
ul if(notEmpty(data.colors))
ul if(data.colors.length)
li for(color in data.colors)
${color}
div else
@ -894,7 +894,7 @@ For example, given the following input template:
```xml
<my-custom-tag name="World"/>
<ul if(notEmpty(data.colors))>
<ul if(data.colors.length)>
<li for(color in data.colors)>
${color}
</li>
@ -921,7 +921,7 @@ function create(__helpers) {
name: "World"
}, out);
if (notEmpty(data.colors)) {
if (data.colors.length) {
out.w("<ul>");
forEach(data.colors, function(color) {

2
helpers/README.md
View File

@ -8,4 +8,4 @@ This directory contains helpers that were deprecated in Marko v3. Marko v4 no lo
var empty = require('marko/helpers/empty');
var notEmpty = require('marko/helpers/notEmpty');
</script>
```
```

23
runtime/deprecate.js Normal file
View File

@ -0,0 +1,23 @@
var logger = typeof console !== 'undefined' && console.warn && console;
module.exports = function(o, methodName, message) {
if (!logger) {
return;
}
var originalMethod = o[methodName];
var maxWarn = 20;
var currentWarn = 0;
o[methodName] = function() {
if (currentWarn < maxWarn) {
if (++currentWarn === maxWarn) {
o[methodName] = originalMethod;
}
logger.warn(message, 'Stack: ' + new Error().stack);
}
return originalMethod.apply(o, arguments);
};
};

1
test/autotests/render/helpers-empty-notEmpty-import/expected.html Normal file
View File

@ -0,0 +1 @@
<div>notEmpty-YES</div><div>empty-YES</div>

17
test/autotests/render/helpers-empty-notEmpty-import/template.marko Normal file
View File

@ -0,0 +1,17 @@
<script marko-init>
var notEmpty = require('marko/helpers/notEmpty');
var empty = require('marko/helpers/empty');
</script>
<div if(notEmpty(['a', 'b', 'c']))>
notEmpty-YES
</div>
<div if(notEmpty([]))>
notEmpty-NO
</div>
<div if(empty(['a', 'b', 'c']))>
empty-NO
</div>
<div if(empty([]))>
empty-YES
</div>

3
test/autotests/render/helpers-empty-notEmpty-import/test.js Normal file
View File

@ -0,0 +1,3 @@
exports.templateData = {
"name": "John"
};