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

2025-12-08 19:26:05 +00:00 · 2016-08-19 14:19:22 -06:00 · 2016-08-19 14:19:22 -06:00 · d930ee29bb
commit d930ee29bb
parent f98a1aea45 bd488be548
11 changed files with 101 additions and 34 deletions
--- a/README.md
+++ b/README.md
@ -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
--- a/docs/compiler.md
+++ b/docs/compiler.md
@ -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) {
--- a/docs/language-guide.md
+++ b/docs/language-guide.md
@ -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
--- a/docs/marko-v3-presentation.md
+++ b/docs/marko-v3-presentation.md
@ -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) {
--- a/docs/overview.md
+++ b/docs/overview.md
@ -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>
--- a/docs/what-is-new-marko-v3.md
+++ b/docs/what-is-new-marko-v3.md
@ -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) {
--- a/runtime/deprecate.js
+++ b/runtime/deprecate.js
@ -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);
+    };
+};
--- a/test/autotests/render/helpers-empty-notEmpty-import/expected.html
+++ b/test/autotests/render/helpers-empty-notEmpty-import/expected.html
@ -0,0 +1 @@
+<div>notEmpty-YES</div><div>empty-YES</div>
--- a/test/autotests/render/helpers-empty-notEmpty-import/template.marko
+++ b/test/autotests/render/helpers-empty-notEmpty-import/template.marko
@ -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>
--- a/test/autotests/render/helpers-empty-notEmpty-import/test.js
+++ b/test/autotests/render/helpers-empty-notEmpty-import/test.js
@ -0,0 +1,3 @@
+exports.templateData = {
+    "name": "John"
+};