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

Removed unused features and renamed core custom tags/attributes

Browse Source 
Renamed:
c-if —> if
c-var —> var
c-require —> require
c-for —> for
c-def —> def
c-invoke —> invoke
c-attrs —> attrs
c-include —> include
c-with —> with
c-for-each —> for-each

Removed:
c-replace
c-content
c-strip
c-choose
c-when
c-otherwise
This commit is contained in:
Patrick Steele-Idem 2014-09-19 08:43:30 -06:00
parent 1b1143c898
commit 6b603568aa
94 changed files with 396 additions and 907 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
README.md
View File

@ -31,7 +31,6 @@ Marko is an extensible, streaming, asynchronous, [high performance](https://gith
- [Variables](#variables)
- [Conditionals](#conditionals)
- [if...else-if...else](#ifelse-ifelse)
- [choose…when…otherwise](#choose…when…otherwise)
- [Shorthand conditionals](#shorthand-conditionals)
- [Looping](#looping)
- [for](#for)
@ -44,9 +43,6 @@ Marko is an extensible, streaming, asynchronous, [high performance](https://gith
- [invoke](#invoke)
- [Structure Manipulation](#structure-manipulation)
- [attrs](#attrs)
- [content](#content)
- [replace](#replace)
- [strip](#strip)
- [Comments](#comments)
- [Helpers](#helpers)
- [Custom Tags and Attributes](#custom-tags-and-attributes)
@ -102,12 +98,12 @@ __Marko:__
```html
Hello ${data.name}!
<ul c-if="notEmpty(data.colors)">
<li class="color" c-for="color in data.colors">
<ul if="notEmpty(data.colors)">
<li class="color" for="color in data.colors">
${color}
</li>
</ul>
<div c-else>
<div else>
No colors!
</div>
```
@ -144,12 +140,12 @@ A basic template with text replacement, looping and conditionals is shown below:
```html
Hello ${data.name}!
<ul c-if="notEmpty(data.colors)">
<li style="color: $color" c-for="color in data.colors">
<ul if="notEmpty(data.colors)">
<li style="color: $color" for="color in data.colors">
$color
</li>
</ul>
<div c-else>
<div else>
No colors!
</div>
```
@ -522,14 +518,14 @@ Almost all of the Raptor templating directives can be used as either an attribut
_Applying directives using attributes:_
```html
<!-- Colors available -->
<ul c-if="notEmpty(colors)">
<li c-for="color in colors">
<ul if="notEmpty(colors)">
<li for="color in colors">
$color
</li>
</ul>
<!-- No colors available -->
<div c-if="empty(colors)">
<div if="empty(colors)">
No colors!
</div>
```
@ -537,22 +533,22 @@ _Applying directives using attributes:_
_Applying directives using elements:_
```html
<!-- Colors available -->
<c-if test="notEmpty(colors)">
<if test="notEmpty(colors)">
<ul>
<c-for each="color in colors">
<for each="color in colors">
<li>
$color
</li>
</c-for>
</for>
</ul>
</c-if>
</if>
<!-- No colors available -->
<c-if test="empty(colors)">
<if test="empty(colors)">
<div>
No colors!
</div>
</c-if>
</if>
```
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.
@ -601,23 +597,23 @@ JavaScript Operator | Raptor Equivalent
For example, both of the following are valid and equivalent:
```html
<div c-if="searchResults.length > 100">
<div if="searchResults.length > 100">
Show More
</div>
```
```html
<div c-if="searchResults.length gt 100">
<div if="searchResults.length gt 100">
Show More
</div>
```
## Includes
Other Marko files can be included using the `<c-include>` tag and a relative path. For example:
Other Marko files can be included using the `<include>` tag and a relative path. For example:
```html
<c-include template="./greeting.marko" name="Frank" count="30"/>
<include template="./greeting.marko" name="Frank" count="30"/>
```
## Variables
@ -625,33 +621,33 @@ Other Marko files can be included using the `<c-include>` tag and a relative pat
Input data passed to a template is made available using a special `data` variable. It's possible to declare your own variables as shown in the following sample code:
```html
<c-var name="name" value="data.name.toUpperCase()" />
<var name="name" value="data.name.toUpperCase()" />
```
## Conditionals
### if...else-if...else
Any element or fragment of HTML can be made conditional using the `c-if`, `c-else-if` or `c-else` directive.
Any element or fragment of HTML can be made conditional using the `if`, `else-if` or `else` directive.
_Applied as attributes:_
```html
<!--Simple if-->
<div c-if="someCondition">
<div if="someCondition">
Hello World
</div>
<!--Complex if-->
<div c-if="test === 'a'">
<div if="test === 'a'">
A
</div>
<div c-else-if="test === 'b'">
<div else-if="test === 'b'">
B
</div>
<div c-else-if="test === 'c'">
<div else-if="test === 'c'">
C
</div>
<div c-else>
<div else>
Something else
</div>
```
@ -660,67 +656,33 @@ _Applied as elements:_
```html
<!-- Colors available -->
<!--Simple if-->
<c-if test="someCondition">
<if test="someCondition">
<div>
Hello World
</div>
</c-if>
</if>
<!--Complex if-->
<c-if test="test === 'a'">
<if test="test === 'a'">
<div>
A
</div>
</c-if>
<c-else-if test="test === 'b'">
</if>
<else-if test="test === 'b'">
<div>
B
</div>
</c-else-if>
<c-else-if test="test === 'c'">
</else-if>
<else-if test="test === 'c'">
<div>
C
</div>
</c-else-if>
<c-else>
</else-if>
<else>
<div>
Something else
</div>
</c-else>
```
### choose…when…otherwise
The `c-choose` directive, in combination with the directives `c-when` and `c-otherwise` provides advanced conditional processing for rendering one of several alternatives. The first matching `c-when` branch is rendered, or, if no `c-when` branch matches, the `c-otherwise` branch is rendered.
_Applied as an attribute:_
```html
<c-choose>
<div c-when="myVar === 'A'">
A
</div>
<div c-when="myVar === 'B'">
B
</div>
<div c-otherwise="">
Something else
</div>
<c-choose>
```
_Applied as an element:_
```html
<c-choose>
<c-when test="myVar === 'A'">
<div>A</div>
</c-when>
<c-when test="myVar === 'B'">
<div>B</div>
</c-when>
<c-otherwise>
<div>Something else</div>
</c-otherwise>
<c-choose>
</else>
```
### Shorthand conditionals
@ -763,13 +725,13 @@ With a value of `false` for `active`, the output would be the following:
### for
Any element can be repeated for every item in an array using the `c-for` directive. The directive can be applied as an element or as an attribute.
Any element can be repeated for every item in an array using the `for` directive. The directive can be applied as an element or as an attribute.
_Applied as an attribute:_
```html
<ul>
<li c-for="item in items">${item}</li>
<li for="item in items">${item}</li>
</ul>
```
@ -777,9 +739,9 @@ _Applied as an element:_
```html
<ul>
<c-for each="item in items">
<for each="item in items">
<li>${item}</li>
</c-for>
</for>
</ul>
```
@ -802,14 +764,14 @@ The output would be the following:
#### Loop Status Variable
The `c-for` directive also supports a loop status variable in case you need to know the current loop index. For example:
The `for` directive also supports a loop status variable in case you need to know the current loop index. For example:
```html
<ul>
<li c-for="color in colors; status-var=loop">
<li for="color in colors; status-var=loop">
${loop.getIndex()+1}) $color
<c-if test="loop.isFirst()"> - FIRST</c-if>
<c-if test="loop.isLast()"> - LAST</c-if>
<if test="loop.isFirst()"> - FIRST</if>
<if test="loop.isLast()"> - LAST</if>
</li>
</ul>
```
@ -817,10 +779,10 @@ The `c-for` directive also supports a loop status variable in case you need to k
#### Loop Separator
```html
<c-for each="color in colors" separator=", ">$color</c-for>
<for each="color in colors" separator=", ">$color</for>
<div>
<span c-for="color in colors; separator=', '" style="color: $color">$color</span>
<span for="color in colors; separator=', '" style="color: $color">$color</span>
</div>
```
@ -832,7 +794,7 @@ The `from`, `to` and `step` values must be numerical expressions. If not specifi
```html
<ul>
<li c-for="i from 0 to 10">
<li for="i from 0 to 10">
$i
</li>
</ul>
@ -840,7 +802,7 @@ The `from`, `to` and `step` values must be numerical expressions. If not specifi
```html
<ul>
<li c-for="i from 0 to 10 step 2">
<li for="i from 0 to 10 step 2">
$i
</li>
</ul>
@ -848,7 +810,7 @@ The `from`, `to` and `step` values must be numerical expressions. If not specifi
```html
<ul>
<li c-for="i from 0 to myArray.length-1">
<li for="i from 0 to myArray.length-1">
${myArray[i]}
</li>
</ul>
@ -859,7 +821,7 @@ The `from`, `to` and `step` values must be numerical expressions. If not specifi
```html
<ul>
<li c-for="(name,value) in settings">
<li for="(name,value) in settings">
<b>$name</b>:
$value
</li>
@ -868,24 +830,24 @@ The `from`, `to` and `step` values must be numerical expressions. If not specifi
## Macros
Parameterized macros allow for reusable fragments within an HTML template. A macro can be defined using the `<c-def>` directive.
Parameterized macros allow for reusable fragments within an HTML template. A macro can be defined using the `<def>` directive.
### def
The `<c-def>` directive can be used to define a reusable function within a template.
The `<def>` directive can be used to define a reusable function within a template.
```html
<c-def function="greeting(name, count)">
<def function="greeting(name, count)">
Hello $name! You have $count new messages.
</c-def>
</def>
```
The above macro can then be invoked as part of any expression. Alternatively, the [`<c-invoke>`](#invoke) directive can be used invoke a macro function using named attributes. The following sample template shows how to use macro functions inside expressions:
The above macro can then be invoked as part of any expression. Alternatively, the [`<invoke>`](#invoke) directive can be used invoke a macro function using named attributes. The following sample template shows how to use macro functions inside expressions:
```html
<c-def function="greeting(name, count)">
<def function="greeting(name, count)">
Hello $name! You have $count new messages.
</c-def>
</def>
<p>
${greeting("John", 10)}
@ -897,15 +859,15 @@ The above macro can then be invoked as part of any expression. Alternatively, th
### invoke
The `<c-invoke>` directive can be used to invoke a function defined using the `<c-def>` directive or a function that is part of the input to a template. The `<c-invoke>` directive allows arguments to be passed using element attributes, but that format is only supported for functions that were previously defined using the `<c-def>` directive.
The `<invoke>` directive can be used to invoke a function defined using the `<def>` directive or a function that is part of the input to a template. The `<invoke>` directive allows arguments to be passed using element attributes, but that format is only supported for functions that were previously defined using the `<def>` directive.
```html
<c-def function="greeting(name, count)">
<def function="greeting(name, count)">
Hello ${name}! You have ${count} new messages.
</c-def>
</def>
<c-invoke function="greeting" name="John" count="${10}"/>
<c-invoke function="greeting('Frank', 20)"/>
<invoke function="greeting" name="John" count="${10}"/>
<invoke function="greeting('Frank', 20)"/>
```
The output for the above template would be the following:
@ -919,7 +881,7 @@ The output for the above template would be the following:
</p>
```
_NOTE:_ By default, the arguments will be of type "string" when using `<c-invoke>.` However, argument attributes support JavaScript expressions which allow for other types of arguments. Example:
_NOTE:_ By default, the arguments will be of type "string" when using `<invoke>.` However, argument attributes support JavaScript expressions which allow for other types of arguments. Example:
```html
count="10" <!-- string argument -->
count="${10}" <!-- number argument -->
@ -930,10 +892,10 @@ count="${10}" <!-- number argument -->
### attrs
The `c-attrs` attribute allows attributes to be dynamically added to an element at runtime. The value of the c-attrs attribute should be an expression that resolves to an object with properties that correspond to the dynamic attributes. For example:
The `attrs` attribute allows attributes to be dynamically added to an element at runtime. The value of the attrs attribute should be an expression that resolves to an object with properties that correspond to the dynamic attributes. For example:
```html
<div c-attrs="myAttrs">
<div attrs="myAttrs">
Hello World!
</div>
```
@ -952,60 +914,6 @@ The output would then be the following:
</div>
```
### content
This directive replaces any nested content with the result of evaluating the expression:
```html
<ul>
<li c-content="myExpr">Hello</li>
</ul>
```
Given a value of `"Bye!"` for the value of `myExpr`, the output of the above template would be the following:
```html
<ul>
<li>Bye!</li>
</ul>
```
### replace
This directive replaces the element itself with the result of evaluating the expression:
```html
<div>
<span c-replace="myExpr">Hello</span>
</div>
```
Given a value of "Bye!" for the value of "myExpr", the output of the above template would be the following:
```html
<div>
Bye!
</div>
```
### strip
This directive conditionally strips the top-level element from the output. If the expression provided as the attribute value evaluates to true then the element is stripped from the output:
```html
<div>
<span c-strip="true"><b>Hello</b></span>
</div>
```
_Output:_
```html
<div>
<b>Hello</b>
</div>
```
## Comments
Standard HTML comments can be used to add comments to your template. The HTML comments will not show up in the rendered HTML.
@ -1049,7 +957,7 @@ The above module can then be imported into a template as shown in the following
_src/template.marko_:
```html
<c-require module="./util" var="util" />
<require module="./util" var="util" />
<div>${util.reverse('reverse test')}</div>
```
@ -1127,7 +1035,7 @@ _default-layout.marko:_
<title><layout-placeholder name="title"/></title>
</head>
<body>
<h1 c-if="data.showHeader !== false">
<h1 if="data.showHeader !== false">
<layout-placeholder name="title"/>
</h1>
<p>
@ -1372,15 +1280,15 @@ _components/tabs/template.marko:_
```html
<div class="tabs">
<ul class="nav nav-tabs">
<li class="tab" c-for="tab in data.tabs">
<li class="tab" for="tab in data.tabs">
<a href="#${tab.id}" data-toggle="tab">
${tab.title}
</a>
</li>
</ul>
<div class="tab-content">
<div id="${tab.id}" class="tab-pane" c-for="tab in data.tabs">
<c-invoke function="tab.invokeBody()"/>
<div id="${tab.id}" class="tab-pane" for="tab in data.tabs">
<invoke function="tab.invokeBody()"/>
</div>
</div>
</div>

66
taglibs/core/ChooseNode.js
View File

@ -1,66 +0,0 @@
/*
* Copyright 2011 eBay Software Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
var WhenNode = require('./WhenNode');
var OtherwiseNode = require('./OtherwiseNode');
function ChooseNode(props) {
ChooseNode.$super.call(this);
}
ChooseNode.prototype = {
doGenerateCode: function (template) {
var otherwiseNode = null;
var foundWhenNode = false;
var allowedNodes = [];
this.forEachChild(function (child) {
if (child.isTextNode()) {
var trimmed = child.getText().trim();
if (trimmed !== '') {
this.addError('Static text "' + trimmed + '" is not allowed in ' + this.toString() + ' tag.');
}
} else if (child.getNodeClass() === WhenNode) {
if (otherwiseNode) {
this.addError(otherwiseNode + ' tag must be last child of tag ' + this + '.');
return;
}
if (!foundWhenNode) {
foundWhenNode = true;
child.firstWhen = true;
}
allowedNodes.push(child);
} else if (child.getNodeClass() === OtherwiseNode) {
if (otherwiseNode) {
this.addError('More than one ' + otherwiseNode + ' tag is not allowed as child of tag ' + this + '.');
return;
}
otherwiseNode = child;
allowedNodes.push(otherwiseNode);
} else {
this.addError(child + ' tag is not allowed as child of tag ' + this + '.');
child.generateCode(template); //Generate the code for the children so that we can still show errors to the user for nested nodes
}
}, this);
allowedNodes.forEach(function (child, i) {
child.hasElse = i < allowedNodes.length - 1;
child.generateCode(template);
});
if (!foundWhenNode) {
this.addError('' + otherwiseNode + ' tag is required to have at least one sibling <c-when> tag.');
}
}
};
module.exports = ChooseNode;

2
taglibs/core/ElseIfNode.js
View File

@ -15,7 +15,7 @@
*/
'use strict';
function ElseIfNode(props) {
ElseIfNode.$super.call(this, 'c-else-if');
ElseIfNode.$super.call(this, 'else-if');
if (props) {
this.setProperties(props);
}

2
taglibs/core/ElseNode.js
View File

@ -15,7 +15,7 @@
*/
'use strict';
function ElseNode(props) {
ElseNode.$super.call(this, 'c-else');
ElseNode.$super.call(this, 'else');
if (props) {
this.setProperties(props);
}

2
taglibs/core/IfNode.js
View File

@ -15,7 +15,7 @@
*/
'use strict';
function IfNode(props) {
IfNode.$super.call(this, 'c-if');
IfNode.$super.call(this, 'if');
if (props) {
this.setProperties(props);
}

34
taglibs/core/OtherwiseNode.js
View File

@ -1,34 +0,0 @@
/*
* Copyright 2011 eBay Software Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
function OtherwiseNode(props) {
OtherwiseNode.$super.call(this);
if (props) {
this.setProperties(props);
}
}
OtherwiseNode.prototype = {
doGenerateCode: function (template) {
template.line('else {').indent(function () {
this.generateCodeForChildren(template);
}, this).line('}');
},
toString: function () {
return '<c-otherwise>';
}
};
module.exports = OtherwiseNode;

41
taglibs/core/WhenNode.js
View File

@ -1,41 +0,0 @@
/*
* Copyright 2011 eBay Software Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
function WhenNode(props) {
WhenNode.$super.call(this);
if (props) {
this.setProperties(props);
}
}
WhenNode.prototype = {
doGenerateCode: function (template) {
var test = this.getProperty('test');
if (!test) {
this.addError('"test" attribute is required for ' + this.toString() + ' tag.');
}
var ifCode = 'if (' + test + ')';
if (!this.firstWhen) {
template.line('else ' + ifCode + ' {');
} else {
template.statement(ifCode + ' {');
}
template.indent(function () {
this.generateCodeForChildren(template);
}, this).line('}');
}
};
module.exports = WhenNode;

81
taglibs/core/core-tag-transformer.js
View File

@ -20,15 +20,11 @@ function removeDashes(str) {
});
}
var extend = require('raptor-util').extend;
var WriteNode = require('./WriteNode');
var ForNode = require('./ForNode');
var IfNode = require('./IfNode');
var ElseIfNode = require('./ElseIfNode');
var ElseNode = require('./ElseNode');
var WithNode = require('./WithNode');
var WhenNode = require('./WhenNode');
var OtherwiseNode = require('./OtherwiseNode');
var TagHandlerNode = require('./TagHandlerNode');
var IncludeNode = require('./IncludeNode');
@ -58,38 +54,21 @@ var coreAttrHandlers = [
}
],
[
'c-when', function(attr, node) {
var whenNode = this.compiler.createNode(WhenNode, {
test: this.template.makeExpression(attr),
pos: node.getPosition()
});
node.parentNode.replaceChild(whenNode, node);
whenNode.appendChild(node);
}
],
[
'c-otherwise', function(attr, node) {
var otherwiseNode = this.compiler.createNode(OtherwiseNode, { pos: node.getPosition() });
node.parentNode.replaceChild(otherwiseNode, node);
otherwiseNode.appendChild(node);
}
],
[
'c-attrs', function(attr, node) {
'attrs', function(attr, node) {
if (!node.addDynamicAttributes) {
node.addError('Node does not support the "c-attrs" attribute');
node.addError('Node does not support the "attrs" attribute');
} else {
node.addDynamicAttributes(attr);
}
}
],
[
'c-for-each', function(attr, node) {
'for-each', function(attr, node) {
this['for'](attr, node);
}
],
[
'c-for', function(attr, node) {
'for', function(attr, node) {
var forEachProps = this.compiler.parseAttribute(attr, {
each: { type: 'custom' },
separator: { type: 'expression' },
@ -103,7 +82,7 @@ var coreAttrHandlers = [
removeDashes: true,
defaultName: 'each',
errorHandler: function (message) {
node.addError('Invalid c-for attribute of "' + attr + '". Error: ' + message);
node.addError('Invalid for attribute of "' + attr + '". Error: ' + message);
}
});
forEachProps.pos = node.getPosition();
@ -116,7 +95,7 @@ var coreAttrHandlers = [
}
],
[
'c-if', function(attr, node) {
'if', function(attr, node) {
var ifNode = this.compiler.createNode(IfNode, {
test: this.template.makeExpression(attr),
pos: node.getPosition()
@ -128,7 +107,7 @@ var coreAttrHandlers = [
}
],
[
'c-else-if', function(attr, node) {
'else-if', function(attr, node) {
var elseIfNode = this.compiler.createNode(ElseIfNode, {
test: this.template.makeExpression(attr),
pos: node.getPosition()
@ -140,7 +119,7 @@ var coreAttrHandlers = [
}
],
[
'c-else', function(attr, node) {
'else', function(attr, node) {
var elseNode = this.compiler.createNode(ElseNode, { pos: node.getPosition() });
//Surround the existing node with an "if" node by replacing the current
//node with the new "if" node and then adding the current node as a child
@ -149,7 +128,7 @@ var coreAttrHandlers = [
}
],
[
'c-with', function(attr, node) {
'with', function(attr, node) {
var withNode = this.compiler.createNode(WithNode, {
vars: attr,
pos: node.getPosition()
@ -158,21 +137,6 @@ var coreAttrHandlers = [
withNode.appendChild(node);
}
],
[
'c-body-content', function(attr, node) {
this.content(attr);
}
],
[
'c-content', function(attr, node) {
var newChild = this.compiler.createNode(WriteNode, {
expression: attr,
pos: node.getPosition()
});
node.removeChildren();
node.appendChild(newChild);
}
],
[
'c-trim-body-indent', function(attr, node) {
if (attr === 'true') {
@ -180,25 +144,6 @@ var coreAttrHandlers = [
}
}
],
[
'c-strip', function(attr, node) {
if (!node.setStripExpression) {
node.addError('The c-strip directive is not allowed for target node');
}
node.setStripExpression(attr);
}
],
[
'c-replace', function(attr, node) {
var replaceWriteNode = this.compiler.createNode(WriteNode, {
expression: attr,
pos: node.getPosition()
});
//Replace the existing node with an node that only has children
node.parentNode.replaceChild(replaceWriteNode, node);
return replaceWriteNode;
}
],
[
'c-input', function(attr, node) {
this.inputAttr = attr;
@ -302,7 +247,7 @@ function findNestedAttrs(node, compiler, template) {
module.exports = function transform(node, compiler, template) {
//Find and handle nested <c-attrs> elements
//Find and handle nested <attrs> elements
findNestedAttrs(node, compiler, template);
var tag;
@ -418,9 +363,9 @@ module.exports = function transform(node, compiler, template) {
}
if (node.addDynamicAttribute) {
node.addDynamicAttribute(name, value);
node.setDynamicAttributesProperty(attrDef.targetProperty);
node.setDynamicAttributesProperty(attrDef.targetProperty);
} else {
node.setProperty(name, value);
node.setProperty(name, value);
}
} else {
node.setProperty(name, value);
@ -438,4 +383,4 @@ module.exports = function transform(node, compiler, template) {
});
}
}
};
};

6
taglibs/core/else-tag-transformer.js
View File

@ -17,8 +17,8 @@
module.exports = function transform(node, compiler) {
var curNode = node.previousSibling;
var matchingNode;
var IfNode = compiler.getNodeClass('c-if');
var ElseIfNode = compiler.getNodeClass('c-else-if');
var IfNode = compiler.getNodeClass('if');
var ElseIfNode = compiler.getNodeClass('else-if');
var whitespaceNodes = [];
while (curNode) {
if (curNode.getNodeClass() === ElseIfNode || curNode.getNodeClass() === IfNode) {
@ -39,7 +39,7 @@ module.exports = function transform(node, compiler) {
curNode = curNode.previousSibling;
}
if (!matchingNode) {
node.addError('<c-if> or <c-else-if> node not found immediately before ' + node.toString() + ' tag.');
node.addError('<if> or <else-if> node not found immediately before ' + node.toString() + ' tag.');
return;
}
whitespaceNodes.forEach(function (whitespaceNode) {

65
taglibs/core/marko-taglib.json
View File

@ -23,35 +23,32 @@
"type": "custom",
"allow-expressions": false
},
"c-for": {
"for": {
"allow-expressions": false,
"type": "string"
},
"c-for-each": {
"for-each": {
"allow-expressions": false,
"type": "string"
},
"c-if": {
"if": {
"type": "expression"
},
"c-else": {
"else": {
"type": "empty"
},
"c-else-if": {
"else-if": {
"type": "expression"
},
"c-attrs": {
"attrs": {
"type": "expression"
},
"c-when": {
"when": {
"type": "expression"
},
"c-with": {
"with": {
"type": "custom"
},
"c-otherwise": {
"type": "empty"
},
"c-parse-body-text": {
"type": "boolean",
"allow-expressions": false
@ -60,16 +57,6 @@
"type": "boolean",
"allow-expressions": false
},
"c-strip": {
"type": "boolean",
"allow-expressions": false
},
"c-content": {
"type": "expression"
},
"c-replace": {
"type": "expression"
},
"c-input": {
"type": "expression"
}
@ -79,7 +66,7 @@
"priority": 0
}
},
"c-for": {
"for": {
"node-class": "./ForNode",
"attributes": {
"each": {
@ -116,7 +103,7 @@
}
}
},
"c-if": {
"if": {
"node-class": "./IfNode",
"attributes": {
"test": {
@ -124,7 +111,7 @@
}
}
},
"c-else": {
"else": {
"node-class": "./ElseNode",
"transformer": {
"path": "./else-tag-transformer",
@ -133,7 +120,7 @@
}
}
},
"c-else-if": {
"else-if": {
"attributes": {
"test": {
"type": "expression"
@ -147,7 +134,7 @@
}
}
},
"c-invoke": {
"invoke": {
"node-class": "./InvokeNode",
"attributes": {
"function": {
@ -161,21 +148,7 @@
}
}
},
"c-choose": {
"node-class": "./ChooseNode"
},
"c-when": {
"node-class": "./WhenNode",
"attributes": {
"test": {
"type": "expression"
}
}
},
"c-otherwise": {
"node-class": "./OtherwiseNode"
},
"c-def": {
"def": {
"node-class": "./DefNode",
"attributes": {
"function": {
@ -188,7 +161,7 @@
}
}
},
"c-with": {
"with": {
"node-class": "./WithNode",
"attributes": {
"vars": {
@ -197,7 +170,7 @@
}
}
},
"c-include": {
"include": {
"node-class": "./IncludeNode",
"attributes": {
"template": {
@ -234,7 +207,7 @@
}
}
},
"c-var": {
"var": {
"node-class": "./VarNode",
"attributes": {
"name": {
@ -258,7 +231,7 @@
}
}
},
"c-require": {
"require": {
"node-class": "./RequireNode",
"attributes": {
"module": {
@ -286,4 +259,4 @@
"text-transformer": {
"path": "./core-text-transformer"
}
}
}

46
test/render-rhtml-tests.js
View File

@ -170,34 +170,11 @@ describe('marko/marko' , function() {
testRender("test-project/html-templates/attrs.marko", {"myAttrs": {style: "background-color: #FF0000; <test>", "class": "my-div"}}, done);
});
it("should allow for choose...when statements", function(done) {
testRender("test-project/html-templates/choose-when.marko", {}, done);
});
it("should not allow <c-otherwise> to be before a <c-when> tag", function(done) {
var e;
function fakeDone() {
done('Error expected');
}
try {
testRender("test-project/html-templates/choose-when-invalid-otherwise-not-last.marko", {}, fakeDone);
}
catch(_e) {
e = _e;
}
expect(e != null).to.equal(true);
done();
});
it("should allow for <c-def> functions", function(done) {
it("should allow for <def> functions", function(done) {
testRender("test-project/html-templates/def.marko", {}, done);
});
it("should allow for <c-with> functions", function(done) {
it("should allow for <with> functions", function(done) {
testRender("test-project/html-templates/with.marko", {}, done);
});
@ -205,27 +182,12 @@ describe('marko/marko' , function() {
testRender("test-project/html-templates/scriptlet.marko", {}, done);
});
it("should allow for when and otherwise as attributes", function(done) {
testRender("test-project/html-templates/choose-when-attributes.marko", {}, done);
});
it("should allow for elements to be stripped out at compile time", function(done) {
testRender("test-project/html-templates/strip.marko", {}, done);
});
it("should allow for body content to be replaced with the result of an expression", function(done) {
testRender("test-project/html-templates/content.marko", {}, done);
});
it("should allow for an element to be replaced with the result of an expression", function(done) {
testRender("test-project/html-templates/replace.marko", {message: "Hello World!"}, done);
});
it("should allow for includes", function(done) {
testRender("test-project/html-templates/include.marko", {}, done);
});
it("should allow for <c-invoke function... />", function(done) {
it("should allow for <invoke function... />", function(done) {
testRender("test-project/html-templates/invoke.marko", {}, done);
});
@ -407,6 +369,6 @@ describe('marko/marko' , function() {
}, done);
});
});

45
test/render-rxml-tests.js
View File

@ -151,34 +151,11 @@ describe('marko/xml' , function() {
testRender("test-project/xml-templates/attrs.marko.xml", {"myAttrs": {style: "background-color: #FF0000; <test>", "class": "my-div"}}, done);
});
it("should allow for choose...when statements", function(done) {
testRender("test-project/xml-templates/choose-when.marko.xml", {}, done);
});
it("should not allow <c-otherwise> to be before a <c-when> tag", function(done) {
var e;
function fakeDone() {
done('Error expected');
}
try {
testRender("test-project/xml-templates/choose-when-invalid-otherwise-not-last.marko.xml", {}, fakeDone);
}
catch(_e) {
e = _e;
}
expect(e != null).to.equal(true);
done();
});
it("should allow for <c-def> functions", function(done) {
it("should allow for <def> functions", function(done) {
testRender("test-project/xml-templates/def.marko.xml", {}, done);
});
it("should allow for <c-with> functions", function(done) {
it("should allow for <with> functions", function(done) {
testRender("test-project/xml-templates/with.marko.xml", {}, done);
});
@ -186,27 +163,11 @@ describe('marko/xml' , function() {
testRender("test-project/xml-templates/scriptlet.marko.xml", {}, done);
});
it("should allow for when and otherwise as attributes", function(done) {
testRender("test-project/xml-templates/choose-when-attributes.marko.xml", {}, done);
});
it("should allow for elements to be stripped out at compile time", function(done) {
testRender("test-project/xml-templates/strip.marko.xml", {}, done);
});
it("should allow for body content to be replaced with the result of an expression", function(done) {
testRender("test-project/xml-templates/content.marko.xml", {}, done);
});
it("should allow for an element to be replaced with the result of an expression", function(done) {
testRender("test-project/xml-templates/replace.marko.xml", {message: "Hello World!"}, done);
});
it("should allow for includes", function(done) {
testRender("test-project/xml-templates/include.marko.xml", {}, done);
});
it("should allow for <c-invoke function... />", function(done) {
it("should allow for <invoke function... />", function(done) {
testRender("test-project/xml-templates/invoke.marko.xml", {}, done);
});

8
test/taglib-lookup-test.js
View File

@ -21,7 +21,7 @@ describe('taglib-lookup' , function() {
var taglibLookup = require('../compiler').taglibs.lookup;
var lookup = taglibLookup.buildLookup(nodePath.join(__dirname, 'test-project'));
// console.log('LOOKUP: ', Object.keys(lookup.attributes));
var ifAttr = lookup.getAttribute('div', 'c-if');
var ifAttr = lookup.getAttribute('div', 'if');
expect(ifAttr != null).to.equal(true);
expect(ifAttr.type).to.equal('expression');
});
@ -29,9 +29,9 @@ describe('taglib-lookup' , function() {
it('should lookup core tag for top-level template', function() {
var taglibLookup = require('../compiler').taglibs.lookup;
var lookup = taglibLookup.buildLookup(nodePath.join(__dirname, 'test-project'));
var ifTag = lookup.getTag('c-if');
var ifTag = lookup.getTag('if');
expect(ifTag != null).to.equal(true);
expect(ifTag.name).to.equal('c-if');
expect(ifTag.name).to.equal('if');
});
it('should lookup core template for top-level template', function() {
@ -172,7 +172,7 @@ describe('taglib-lookup' , function() {
var taglibLookup = require('../compiler').taglibs.lookup;
var lookup = taglibLookup.buildLookup(nodePath.join(__dirname, 'test-project/nested'));
lookup.forEachTagTransformer('c-else', function(transformer) {
lookup.forEachTagTransformer('else', function(transformer) {
transformers.push(transformer);
});

2
test/test-project/html-templates/async-fragment-args.marko
View File

@ -1,5 +1,5 @@
<ul>
<li c-for="userId in [0, 1, 2, 3]">
<li for="userId in [0, 1, 2, 3]">
<async-fragment data-provider="userInfo" var="userInfo" arg-userId="$userId">
<ul>
<li>

6
test/test-project/html-templates/async-fragment-macros.marko
View File

@ -1,7 +1,7 @@
<c-def function="asyncMacro(num)">
<def function="asyncMacro(num)">
$num
</c-def>1
</def>1
<async-fragment data-provider="D1">
<c-invoke function="asyncMacro" num="2"/>
<invoke function="asyncMacro" num="2"/>
</async-fragment>
3

4
test/test-project/html-templates/async-fragment.marko
View File

@ -5,7 +5,7 @@ A
<async-fragment data-provider="messages" arg-user="${user}" var="messages">
You have $messages.length new messages. Messages:
<ul>
<li c-for="message in messages">$message.text</li>
<li for="message in messages">$message.text</li>
</ul>
</async-fragment>
asyncB2
@ -14,7 +14,7 @@ B
<async-fragment data-provider="todos" var="todos">
asyncA1
<ul>
<li c-for="todo in todos">$todo.text (status: $todo.status)</li>
<li for="todo in todos">$todo.text (status: $todo.status)</li>
</ul>
asyncA2
</async-fragment>

4
test/test-project/html-templates/attrs.marko
View File

@ -1,5 +1,5 @@
<c-var name="myAttrs" value="data.myAttrs"/>
<var name="myAttrs" value="data.myAttrs"/>
<div c-attrs="myAttrs" data-encoding="&quot;hello&quot;">
<div attrs="myAttrs" data-encoding="&quot;hello&quot;">
Hello World!
</div>

4
test/test-project/html-templates/beginAsync.marko
View File

@ -1,3 +1,3 @@
<c-var name="helper" value="data.helper"/>
<var name="helper" value="data.helper"/>
A<c-invoke function="helper.beginAsync(context)"/>C
A<invoke function="helper.beginAsync(context)"/>C

18
test/test-project/html-templates/caching.marko
View File

@ -1,15 +1,15 @@
<c-var name="count" value="0"/>
<var name="count" value="0"/>
<c-def function="foo(cacheName, cacheKey)">
<def function="foo(cacheName, cacheKey)">
<cached-fragment cache-key="$cacheKey" cache-name="$cacheName">
Count: ${count++}
</cached-fragment>
</c-def>
</def>
<c-invoke function="foo('cacheA', 'keyA')"/>
<c-invoke function="foo('cacheA', 'keyA')"/>
<c-invoke function="foo('cacheA', 'keyB')"/>
<invoke function="foo('cacheA', 'keyA')"/>
<invoke function="foo('cacheA', 'keyA')"/>
<invoke function="foo('cacheA', 'keyB')"/>
<c-invoke function="foo('cacheB', 'keyA')"/>
<c-invoke function="foo('cacheB', 'keyA')"/>
<c-invoke function="foo('cacheB', 'keyB')"/>
<invoke function="foo('cacheB', 'keyA')"/>
<invoke function="foo('cacheB', 'keyA')"/>
<invoke function="foo('cacheB', 'keyB')"/>

14
test/test-project/html-templates/choose-when-attributes.marko
View File

@ -1,14 +0,0 @@
<div id="one">
<c-choose>
<div c-when="false">A</div>
<div c-when="false">B</div>
<div c-otherwise="">TRUE</div>
</c-choose>
</div>
<div id="two">
<c-choose>
<div c-when="false">A</div>
<div c-when="true">TRUE</div>
<div c-otherwise="">C</div>
</c-choose>
</div>

1
test/test-project/html-templates/choose-when-attributes.marko.expected.html
View File

@ -1 +0,0 @@
<div id="one"><div>TRUE</div></div><div id="two"><div>TRUE</div></div>

12
test/test-project/html-templates/choose-when.marko
View File

@ -1,12 +0,0 @@
<c-choose>
<c-when test="0">A</c-when>
<c-when test="false">B</c-when>
<c-when test="true">TRUE</c-when>
<c-otherwise>C</c-otherwise>
</c-choose>,
<c-choose>
<c-when test="false">A</c-when>
<c-when test="false">B</c-when>
<c-otherwise>TRUE</c-otherwise>
</c-choose>

1
test/test-project/html-templates/choose-when.marko.expected.html
View File

@ -1 +0,0 @@
TRUE, TRUE

1
test/test-project/html-templates/content.marko
View File

@ -1 +0,0 @@
<div c-content="'Hello'"><b>This content will be replaced with the text "Hello"</b></div>

1
test/test-project/html-templates/content.marko.expected.html
View File

@ -1 +0,0 @@
<div>Hello</div>

12
test/test-project/html-templates/def.marko
View File

@ -1,12 +1,12 @@
<c-def function="greeting(name)">
<def function="greeting(name)">
<p class="greeting">Hello, ${name}!</p>
</c-def>
</def>
${greeting("World")},
${greeting("Frank")}
<c-def function="section(url, title, body)" body-param="body">
<def function="section(url, title, body)" body-param="body">
<div class="section">
<h1>
<a href="$url">
@ -17,10 +17,10 @@ ${greeting("Frank")}
${body}
</p>
</div>
</c-def>
</def>
<c-invoke function="section" url="http://www.ebay.com/" title="ebay">
<invoke function="section" url="http://www.ebay.com/" title="ebay">
<i>
Visit eBay
</i>
</c-invoke>
</invoke>

74
test/test-project/html-templates/errors.marko
View File

@ -8,71 +8,71 @@ ${greeting("World")
<c-for>
<for>
Missing each attribute
</c-for>
</for>
<c-for each="item">
</c-for>
<for each="item">
</for>
<c-for each="item in items" invalid="true">
<for each="item in items" invalid="true">
Invalid attribute
</c-for>
</for>
<c-for each="item in items" separator="${;">
<for each="item in items" separator="${;">
Invalid separator
</c-for>
</for>
<c-invalidTag>
</c-invalidTag>
<div c-for="item in items; invalid=true">
<div for="item in items; invalid=true">
</div>
<c-choose>
<c-when test="true">A</c-when>
<c-otherwise>INVALID</c-otherwise>
<c-when test="true">B</c-when>
</c-choose>
<choose>
<when test="true">A</when>
<otherwise>INVALID</otherwise>
<when test="true">B</when>
</choose>
<c-choose>
<choose>
<c-when test="false">A</c-when>
<when test="false">A</when>
INVALID TEXT
<c-when test="true">TRUE</c-when>
<c-otherwise>C</c-otherwise>
</c-choose>
<when test="true">TRUE</when>
<otherwise>C</otherwise>
</choose>
<c-def>
</c-def>
<def>
</def>
<c-def function="invalid-function-name()">
<def function="invalid-function-name()">
<c-invalidTag2></c-invalidTag2>
</c-def>
</def>
<c-include>Missing template attribute</c-include>
<include>Missing template attribute</include>
<c-with vars="x=1;b=2;1">
</c-with>
<with vars="x=1;b=2;1">
</with>
<c-if test="false">
<if test="false">
A
</c-if>
</if>
INVALID
<c-else>
<else>
C
</c-else>
</else>
<c-if test="false">
<if test="false">
A
</c-if>
</if>
INVALID
<c-else-if test="false">
<else-if test="false">
A
</c-else-if>
<c-else>
</else-if>
<else>
C
</c-else>
</else>
<div class="test">
<c-attr name="class" value="duplicate"/>
@ -81,5 +81,5 @@ INVALID
<test-popover title="Popover Title" invalidAttr1="invalidValue1">
<c-attr name="invalidAttr2" value="invalidValue2"/>
<c-attr name="invalidAttr3">invalidValue3</c-attr>
<c-attr name="invalidAttr4" c-if="invalidIf">invalidValue4</c-attr>
<c-attr name="invalidAttr4" if="invalidIf">invalidValue4</c-attr>
</test-popover>

34
test/test-project/html-templates/if-else.marko
View File

@ -1,33 +1,33 @@
<c-if test="true">
<if test="true">
A
</c-if>
<c-else>
</if>
<else>
B
</c-else>
</else>
,
<c-if test="false">
<if test="false">
A
</c-if>
<c-else>
</if>
<else>
B
</c-else>
</else>
,
<c-if test="false">
<if test="false">
A
</c-if>
<c-else-if test="false">
</if>
<else-if test="false">
B
</c-else-if>
<c-else>
</else-if>
<else>
C
</c-else>
</else>
,
<div c-if="false">
<div if="false">
A
</div>
<div c-else-if="false">
<div else-if="false">
B
</div>
<div c-else>
<div else>
C
</div>

6
test/test-project/html-templates/include-nested-content.marko
View File

@ -1,6 +1,6 @@
<c-var name="name" value="data.name"/>
<c-var name="count" value="data.count"/>
<c-var name="invokeBody" value="data.invokeBody"/>
<var name="name" value="data.name"/>
<var name="count" value="data.count"/>
<var name="invokeBody" value="data.invokeBody"/>
<div class="nested">
<h1>

2
test/test-project/html-templates/include-resource-static.marko
View File

@ -1,3 +1,3 @@
BEGIN
<c-include resource="include-resource-target.txt" static="true"/>
<include resource="include-resource-target.txt" static="true"/>
END

4
test/test-project/html-templates/include-target.marko
View File

@ -1,4 +1,4 @@
<c-var name="name" value="data.name"/>
<c-var name="count" value="data.count"/>
<var name="name" value="data.name"/>
<var name="count" value="data.count"/>
Hello $name! You have $count new messages.

10
test/test-project/html-templates/include.marko
View File

@ -1,10 +1,10 @@
<c-include template="./include-target.marko" name="${'Frank'}" count="20"/>
<c-include template="./include-target.marko" name="Frank" count="${20}"/>
<c-include template="./include-target.marko" template-data="{name: 'Frank', count: 20}"/>
<c-include template="./include-nested-content.marko" name="Frank" count="${20}">
<include template="./include-target.marko" name="${'Frank'}" count="20"/>
<include template="./include-target.marko" name="Frank" count="${20}"/>
<include template="./include-target.marko" template-data="{name: 'Frank', count: 20}"/>
<include template="./include-nested-content.marko" name="Frank" count="${20}">
Have a
<b>
wonderful
</b>
day!
</c-include>
</include>

2
test/test-project/html-templates/inline-script.marko
View File

@ -1,4 +1,4 @@
<c-var name="name" value="data.name"/>
<var name="name" value="data.name"/>
<html>
<head>

10
test/test-project/html-templates/invoke.marko
View File

@ -12,16 +12,16 @@
A
<p>
<c-invoke function="test('World')"/>
<invoke function="test('World')"/>
<c-write value="test2('World')"/>
</p>
B
<p>
<c-def function="greeting(name, count)">
<def function="greeting(name, count)">
Hello ${name}! You have ${count} new messages.
</c-def>
<c-invoke function="greeting" name="Frank" count="${10}"/>
<c-invoke function="greeting('John', 20)"/>
</def>
<invoke function="greeting" name="Frank" count="${10}"/>
<invoke function="greeting('John', 20)"/>
</p>

2
test/test-project/html-templates/layout-default.marko
View File

@ -1,4 +1,4 @@
<h1 c-if="data.showHeader !== false">
<h1 if="data.showHeader !== false">
<layout-placeholder name="header">
DEFAULT TITLE
</layout-placeholder>

12
test/test-project/html-templates/looping-iterator.marko
View File

@ -1,17 +1,17 @@
<c-for each="item in ['a', 'b', 'c']" iterator="data.reverseIterator">
<for each="item in ['a', 'b', 'c']" iterator="data.reverseIterator">
${item}
</c-for>
</for>
<c-for each="item in ['a', 'b', 'c']" iterator="data.reverseIterator" status-var="status">
<for each="item in ['a', 'b', 'c']" iterator="data.reverseIterator" status-var="status">
${status.index}-${item}
</c-for>
</for>
<div c-for="item in ['a', 'b', 'c']; iterator=data.reverseIterator">
<div for="item in ['a', 'b', 'c']; iterator=data.reverseIterator">
${item}
</div>
<div c-for="item in ['a', 'b', 'c']; iterator=data.reverseIterator; status-var=status">
<div for="item in ['a', 'b', 'c']; iterator=data.reverseIterator; status-var=status">
${status.index}-${item}
</div>

6
test/test-project/html-templates/looping-props.marko
View File

@ -1,9 +1,9 @@
<c-for each="(name,value) in {'foo': 'low', 'bar': 'high'}">
<for each="(name,value) in {'foo': 'low', 'bar': 'high'}">
[$name=$value]
</c-for>
</for>
<ul>
<li c-for="(name, value) in {'foo': 'low', 'bar': 'high'}">
<li for="(name, value) in {'foo': 'low', 'bar': 'high'}">
[$name=$value]
</li>
</ul>

28
test/test-project/html-templates/looping-range.marko
View File

@ -1,27 +1,27 @@
<c-for each="i from 0 to 9">
<for each="i from 0 to 9">
$i
</c-for>
</for>
-
<c-for each="i from 9 to 0">
<for each="i from 9 to 0">
$i
</c-for>
</for>
-
<c-for each="i from 9 to 0 step -1">
<for each="i from 9 to 0 step -1">
$i
</c-for>
</for>
-
<c-for each="i from 0 to 9 step 2">
<for each="i from 0 to 9 step 2">
$i
</c-for>
</for>
-
<c-for each="i from 9 to 0 step -2">
<for each="i from 9 to 0 step -2">
$i
</c-for>
</for>
-
<c-for each="i from 0 to 'abc'.length">
<for each="i from 0 to 'abc'.length">
$i
</c-for>
</for>
-
<c-for each="i from ''.length to 'abc'.length">
<for each="i from ''.length to 'abc'.length">
$i
</c-for>
</for>

10
test/test-project/html-templates/looping.marko
View File

@ -1,9 +1,9 @@
<c-for each="item in ['a', 'b', 'c']">
<for each="item in ['a', 'b', 'c']">
${item}
</c-for>
<c-for each="item in ['a', 'b', 'c']" separator=", " status-var="loop">
</for>
<for each="item in ['a', 'b', 'c']" separator=", " status-var="loop">
${item} - ${loop.isFirst()} - ${loop.isLast()} - ${loop.getIndex()} - ${loop.getLength()}
</c-for>
<div c-for="item in ['red', 'green', 'blue']; separator = ', '; status-var=loop" >
</for>
<div for="item in ['red', 'green', 'blue']; separator = ', '; status-var=loop" >
${item} - ${loop.isFirst()} - ${loop.isLast()} - ${loop.getIndex()} - ${loop.getLength()}
</div>

4
test/test-project/html-templates/nested-attrs.marko
View File

@ -1,4 +1,4 @@
<c-var name="active" value="data.active"/>
<var name="active" value="data.active"/>
<test-popover>
<c-attr name="title">Popover Title</c-attr>
@ -14,6 +14,6 @@
<div>
<c-attr name="title">
<c-for each="color in ['red', 'green', 'blue']"> $color! </c-for>
<for each="color in ['red', 'green', 'blue']"> $color! </for>
</c-attr>
</div>

4
test/test-project/html-templates/nested-handlers.marko
View File

@ -1,4 +1,4 @@
<c-var name="showConditionalTab" value="data.showConditionalTab"/>
<var name="showConditionalTab" value="data.showConditionalTab"/>
<test-tabs>
<test-tab title="Tab 1">
@ -9,7 +9,7 @@
Tab 2 content
</test-tab>
<test-tab title="Tab 3" c-if="showConditionalTab">
<test-tab title="Tab 3" if="showConditionalTab">
Tab 3 content
</test-tab>
</test-tabs>

2
test/test-project/html-templates/optimizer-dynamic.marko
View File

@ -1,7 +1,7 @@
<optimizer-page name="optimizer-dynamic">
<dependencies>
<module name="${data.dependency}"/>
<module name="test/optimizer/mixedB" c-if="data.mixedBEnabled"/>
<module name="test/optimizer/mixedB" if="data.mixedBEnabled"/>
</dependencies>
</optimizer-page>

4
test/test-project/html-templates/replace.marko
View File

@ -1,4 +0,0 @@
<c-var name="message" value="data.message"/>
<div c-replace="'Hello'"><b>This content and parent DIV will be replaced with the text "Hello"</b></div>,
<div c-replace="message"><b>This content and parent DIV will be replaced with the value of the "message" variable</b></div>

1
test/test-project/html-templates/replace.marko.expected.html
View File

@ -1 +0,0 @@
Hello, Hello World!

2
test/test-project/html-templates/require.marko
View File

@ -1,3 +1,3 @@
<c-require module="./test-helpers" var="testHelpers" />
<require module="./test-helpers" var="testHelpers" />
Hello ${testHelpers.upperCase("world")}!
Hello ${testHelpers.trim(" World ")}!

4
test/test-project/html-templates/simple-conditionals.marko
View File

@ -1,5 +1,5 @@
<c-var name="name" value="data.name"/>
<c-var name="count" value="data.count"/>
<var name="name" value="data.name"/>
<var name="count" value="data.count"/>
<div class="{?count>50;over-50}"></div>
<div class="{?count lt 50;under-50}"></div>

2
test/test-project/html-templates/simple-handlers.marko
View File

@ -1,4 +1,4 @@
<c-var name="dynamic" value="data.dynamic"/>
<var name="dynamic" value="data.dynamic"/>
<ul>
<li>

12
test/test-project/html-templates/simple.marko
View File

@ -1,13 +1,13 @@
<c-var name="rootClass" value="data.rootClass"/>
<c-var name="colors" value="data.colors"/>
<c-var name="message" value="data.message"/>
<var name="rootClass" value="data.rootClass"/>
<var name="colors" value="data.colors"/>
<var name="message" value="data.message"/>
<div class="hello-world ${rootClass}">${message}</div>
<ul c-if="notEmpty(colors)">
<li class="color" c-for="color in colors">${color}</li>
<ul if="notEmpty(colors)">
<li class="color" for="color in colors">${color}</li>
</ul>
<div c-if="empty(colors)">
<div if="empty(colors)">
No colors!
</div>

4
test/test-project/html-templates/string-expressions.marko
View File

@ -1,4 +1,4 @@
<c-var name="name" value="data.name"/>
<c-var name="count" value="data.count"/>
<var name="name" value="data.name"/>
<var name="count" value="data.count"/>
${name != null ? "Hello ${name.toUpperCase()}! You have $count new messages." : null}

13
test/test-project/html-templates/strip.marko
View File

@ -1,13 +0,0 @@
<div>
<span c-strip="true"><b>A</b></span>
</div>
<div>
<span c-strip="false"><b>B</b></span>
</div>
<div>
<span c-strip="1 === 1"><b>c</b></span>
</div>
<div>
<span c-strip="1 === 2"><b>d</b></span>
</div>

1
test/test-project/html-templates/strip.marko.expected.html
View File

@ -1 +0,0 @@
<div><b>A</b></div><div><span><b>B</b></span></div><div><b>c</b></div><div><span><b>d</b></span></div>

2
test/test-project/html-templates/text-replacement.marko
View File

@ -1,3 +1,3 @@
<c-var name="person" value="data.person"/>
<var name="person" value="data.person"/>
Hello $person.name. You are from ${person.address.city}, $person.address.state

6
test/test-project/html-templates/var.marko
View File

@ -1,11 +1,11 @@
<c-var name="colors" value="['red', 'green', 'blue']"/>
<var name="colors" value="['red', 'green', 'blue']"/>
<div c-for="color in colors">
<div for="color in colors">
$color
</div>
<c-assign var="colors" value="['orange', 'purple', 'yellow']"/>
<div c-for="color in colors">
<div for="color in colors">
$color
</div>

2
test/test-project/html-templates/whitespace.marko
View File

@ -29,7 +29,7 @@ should <!-- This whitespace should be normalized --> retain spacing between l
<div c-space="preserve">
begin <!-- this whitespace should not be normalized --> end
</div>
<c-if test="true">begin <!-- this whitespace should be preserved -->end</c-if>
<if test="true">begin <!-- this whitespace should be preserved -->end</if>
<!--
- In not "xml:space" === "preserve":
- newline followed by whitespace should be removed

2
test/test-project/html-templates/widgets.marko
View File

@ -9,6 +9,6 @@
</test-container>
</w-widget>
<c-include template="/test-templates/widgets_nested"/>
<include template="/test-templates/widgets_nested"/>
<w-init-widgets/>

4
test/test-project/html-templates/with.marko
View File

@ -1,5 +1,5 @@
<c-with vars="x=1; y=7; z=x+10; a">$x $y $z</c-with>
<with vars="x=1; y=7; z=x+10; a">$x $y $z</with>
<div c-for="i in [1, 2, 3]" c-with="message=i+ ') hello'">
<div for="i in [1, 2, 3]" with="message=i+ ') hello'">
$message
</div>

4
test/test-project/html-templates/xml-escaping.marko
View File

@ -1,5 +1,5 @@
<c-var name="name" value="data.name"/>
<c-var name="welcome" value="data.welcome"/>
<var name="name" value="data.name"/>
<var name="welcome" value="data.welcome"/>
$!welcome
$!{welcome}

8
test/test-project/popover.marko
View File

@ -1,7 +1,7 @@
<c-var name="tag" value="data.tag"/>
<c-var name="content" value="data.content"/>
<c-var name="title" value="data.title"/>
<var name="tag" value="data.tag"/>
<var name="content" value="data.content"/>
<var name="title" value="data.title"/>
<span title="$title" data-content="$content">
<c-invoke function="tag.invokeBody()" c-if="tag.invokeBody"/>
<invoke function="tag.invokeBody()" if="tag.invokeBody"/>
</span>

8
test/test-project/tabs.marko
View File

@ -1,16 +1,16 @@
<c-var name="tabs" value="data.tabs"/>
<var name="tabs" value="data.tabs"/>
<div class="tabs">
<ul class="nav nav-tabs">
<li class="${tab.liClass}" c-for="tab in tabs">
<li class="${tab.liClass}" for="tab in tabs">
<a href="#${tab.id}" data-toggle="tab">
${tab.title}
</a>
</li>
</ul>
<div class="tab-content">
<div id="${tab.id}" class="${tab.divClass}" c-for="tab in tabs">
<c-invoke function="tab.invokeBody()"/>
<div id="${tab.id}" class="${tab.divClass}" for="tab in tabs">
<invoke function="tab.invokeBody()"/>
</div>
</div>
</div>

2
test/test-project/xml-templates/async-fragment-args.marko.xml
View File

@ -1,7 +1,7 @@
<c-template>
<ul>
<li c-for="userId in [0, 1, 2, 3]">
<li for="userId in [0, 1, 2, 3]">
<async-fragment dependency="userInfo" var="userInfo" arg-userId="$userId">
<ul>
<li>

6
test/test-project/xml-templates/async-fragment-macros.marko.xml
View File

@ -1,9 +1,9 @@
<c-template>
<c-def function="asyncMacro(num)">
<def function="asyncMacro(num)">
$num
</c-def>1
</def>1
<async-fragment dependency="D1">
<c-invoke function="asyncMacro" num="2"/>
<invoke function="asyncMacro" num="2"/>
</async-fragment>
3
</c-template>

4
test/test-project/xml-templates/async-fragment.marko.xml
View File

@ -7,7 +7,7 @@
<async-fragment dependency="messages" arg-user="${user}" var="messages">
You have $messages.length new messages. Messages:
<ul>
<li c-for="message in messages">$message.text</li>
<li for="message in messages">$message.text</li>
</ul>
</async-fragment>
asyncB2
@ -16,7 +16,7 @@
<async-fragment dependency="todos" var="todos">
asyncA1
<ul>
<li c-for="todo in todos">$todo.text (status: $todo.status)</li>
<li for="todo in todos">$todo.text (status: $todo.status)</li>
</ul>
asyncA2
</async-fragment>

2
test/test-project/xml-templates/attrs.marko.xml
View File

@ -1,6 +1,6 @@
<c-template
params="myAttrs">
<div c-attrs="myAttrs" data-encoding="&quot;hello&quot;">
<div attrs="myAttrs" data-encoding="&quot;hello&quot;">
Hello World!
</div>
</c-template>

2
test/test-project/xml-templates/beginAsync.marko.xml
View File

@ -1,7 +1,7 @@
<c-template
params="helper">
A<c-invoke function="helper.beginAsync(context)"/>C
A<invoke function="helper.beginAsync(context)"/>C
</c-template>

18
test/test-project/xml-templates/caching.marko.xml
View File

@ -1,19 +1,19 @@
<c-template
params="">
<c-var name="count" value="0"/>
<var name="count" value="0"/>
<c-def function="foo(cacheName, cacheKey)">
<def function="foo(cacheName, cacheKey)">
<cached-fragment cache-key="$cacheKey" cache-name="$cacheName">
Count: ${count++}
</cached-fragment>
</c-def>
</def>
<c-invoke function="foo('cacheA', 'keyA')"/>
<c-invoke function="foo('cacheA', 'keyA')"/>
<c-invoke function="foo('cacheA', 'keyB')"/>
<invoke function="foo('cacheA', 'keyA')"/>
<invoke function="foo('cacheA', 'keyA')"/>
<invoke function="foo('cacheA', 'keyB')"/>
<c-invoke function="foo('cacheB', 'keyA')"/>
<c-invoke function="foo('cacheB', 'keyA')"/>
<c-invoke function="foo('cacheB', 'keyB')"/>
<invoke function="foo('cacheB', 'keyA')"/>
<invoke function="foo('cacheB', 'keyA')"/>
<invoke function="foo('cacheB', 'keyB')"/>
</c-template>

18
test/test-project/xml-templates/choose-when-attributes.marko.xml
View File

@ -1,18 +0,0 @@
<c-template>
<div id="one">
<c-choose>
<div c-when="false">A</div>
<div c-when="false">B</div>
<div c-otherwise="">TRUE</div>
</c-choose>
</div>
<div id="two">
<c-choose>
<div c-when="false">A</div>
<div c-when="true">TRUE</div>
<div c-otherwise="">C</div>
</c-choose>
</div>
</c-template>

1
test/test-project/xml-templates/choose-when-attributes.marko.xml.expected.html
View File

@ -1 +0,0 @@
<div id="one"><div>TRUE</div></div><div id="two"><div>TRUE</div></div>

16
test/test-project/xml-templates/choose-when.marko.xml
View File

@ -1,16 +0,0 @@
<c-template>
<c-choose>
<c-when test="0">A</c-when>
<c-when test="false">B</c-when>
<c-when test="true">TRUE</c-when>
<c-otherwise>C</c-otherwise>
</c-choose>,
<c-choose>
<c-when test="false">A</c-when>
<c-when test="false">B</c-when>
<c-otherwise>TRUE</c-otherwise>
</c-choose>
</c-template>

1
test/test-project/xml-templates/choose-when.marko.xml.expected.html
View File

@ -1 +0,0 @@
TRUE, TRUE

6
test/test-project/xml-templates/content.marko.xml
View File

@ -1,6 +0,0 @@
<c-template
params="">
<div c-content="'Hello'"><b>This content will be replaced with the text "Hello"</b></div>
</c-template>

1
test/test-project/xml-templates/content.marko.xml.expected.html
View File

@ -1 +0,0 @@
<div>Hello</div>

12
test/test-project/xml-templates/def.marko.xml
View File

@ -1,14 +1,14 @@
<c-template>
<c-def function="greeting(name)">
<def function="greeting(name)">
<p class="greeting">Hello, ${name}!</p>
</c-def>
</def>
${greeting("World")},
${greeting("Frank")}
<c-def function="section(url, title, body)" body-param="body">
<def function="section(url, title, body)" body-param="body">
<div class="section">
<h1>
<a href="$url">
@ -19,11 +19,11 @@
${body}
</p>
</div>
</c-def>
</def>
<c-invoke function="section" url="http://www.ebay.com/" title="ebay">
<invoke function="section" url="http://www.ebay.com/" title="ebay">
<i>
Visit eBay
</i>
</c-invoke>
</invoke>
</c-template>

74
test/test-project/xml-templates/errors.marko.xml
View File

@ -12,71 +12,71 @@
<c-for>
<for>
Missing each attribute
</c-for>
</for>
<c-for each="item">
</c-for>
<for each="item">
</for>
<c-for each="item in items" invalid="true">
<for each="item in items" invalid="true">
Invalid attribute
</c-for>
</for>
<c-for each="item in items" separator="${;">
<for each="item in items" separator="${;">
Invalid separator
</c-for>
</for>
<c-invalidTag>
</c-invalidTag>
<div c-for="item in items; invalid=true">
<div for="item in items; invalid=true">
</div>
<c-choose>
<c-when test="true">A</c-when>
<c-otherwise>INVALID</c-otherwise>
<c-when test="true">B</c-when>
</c-choose>
<choose>
<when test="true">A</when>
<otherwise>INVALID</otherwise>
<when test="true">B</when>
</choose>
<c-choose>
<choose>
<c-when test="false">A</c-when>
<when test="false">A</when>
INVALID TEXT
<c-when test="true">TRUE</c-when>
<c-otherwise>C</c-otherwise>
</c-choose>
<when test="true">TRUE</when>
<otherwise>C</otherwise>
</choose>
<c-def>
</c-def>
<def>
</def>
<c-def function="invalid-function-name()">
<def function="invalid-function-name()">
<c-invalidTag2></c-invalidTag2>
</c-def>
</def>
<c-include>Missing template attribute</c-include>
<include>Missing template attribute</include>
<c-with vars="x=1;b=2;1">
</c-with>
<with vars="x=1;b=2;1">
</with>
<c-if test="false">
<if test="false">
A
</c-if>
</if>
INVALID
<c-else>
<else>
C
</c-else>
</else>
<c-if test="false">
<if test="false">
A
</c-if>
</if>
INVALID
<c-else-if test="false">
<else-if test="false">
A
</c-else-if>
<c-else>
</else-if>
<else>
C
</c-else>
</else>
<div class="test">
<c-attr name="class" value="duplicate"/>
@ -85,6 +85,6 @@
<test-popover title="Popover Title" invalidAttr1="invalidValue1">
<c-attr name="invalidAttr2" value="invalidValue2"/>
<c-attr name="invalidAttr3">invalidValue3</c-attr>
<c-attr name="invalidAttr4" c-if="invalidIf">invalidValue4</c-attr>
<c-attr name="invalidAttr4" if="invalidIf">invalidValue4</c-attr>
</test-popover>
</c-template>

34
test/test-project/xml-templates/if-else.marko.xml
View File

@ -1,36 +1,36 @@
<c-template>
<c-if test="true">
<if test="true">
A
</c-if>
<c-else>
</if>
<else>
B
</c-else>
</else>
,
<c-if test="false">
<if test="false">
A
</c-if>
<c-else>
</if>
<else>
B
</c-else>
</else>
,
<c-if test="false">
<if test="false">
A
</c-if>
<c-else-if test="false">
</if>
<else-if test="false">
B
</c-else-if>
<c-else>
</else-if>
<else>
C
</c-else>
</else>
,
<div c-if="false">
<div if="false">
A
</div>
<div c-else-if="false">
<div else-if="false">
B
</div>
<div c-else="">
<div else="">
C
</div>

2
test/test-project/xml-templates/include-resource-static.marko.xml
View File

@ -2,6 +2,6 @@
params="">
BEGIN
<c-include resource="include-resource-target.txt" static="true"/>
<include resource="include-resource-target.txt" static="true"/>
END
</c-template>

10
test/test-project/xml-templates/include.marko.xml
View File

@ -1,14 +1,14 @@
<c-template
params="">
<c-include template="./include-target.marko.xml" name="${'Frank'}" count="20"/>
<c-include template="./include-target.marko.xml" name="Frank" count="${20}"/>
<c-include template="./include-target.marko.xml" template-data="{name: 'Frank', count: 20}"/>
<c-include template="./include-nested-content.marko.xml" name="Frank" count="${20}">
<include template="./include-target.marko.xml" name="${'Frank'}" count="20"/>
<include template="./include-target.marko.xml" name="Frank" count="${20}"/>
<include template="./include-target.marko.xml" template-data="{name: 'Frank', count: 20}"/>
<include template="./include-nested-content.marko.xml" name="Frank" count="${20}">
Have a
<b>
wonderful
</b>
day!
</c-include>
</include>
</c-template>

10
test/test-project/xml-templates/invoke.marko.xml
View File

@ -13,18 +13,18 @@
A
<p>
<c-invoke function="test('World')"/>
<invoke function="test('World')"/>
<c-write value="test2('World')"/>
</p>
B
<p>
<c-def function="greeting(name, count)">
<def function="greeting(name, count)">
Hello ${name}! You have ${count} new messages.
</c-def>
<c-invoke function="greeting" name="Frank" count="${10}"/>
<c-invoke function="greeting('John', 20)"/>
</def>
<invoke function="greeting" name="Frank" count="${10}"/>
<invoke function="greeting('John', 20)"/>
</p>
</c-template>

2
test/test-project/xml-templates/layout-default.marko.xml
View File

@ -1,5 +1,5 @@
<c-template>
<h1 c-if="data.showHeader !== false">
<h1 if="data.showHeader !== false">
<layout-placeholder name="header">
DEFAULT TITLE
</layout-placeholder>

12
test/test-project/xml-templates/looping-iterator.marko.xml
View File

@ -1,21 +1,21 @@
<c-template
params="">
<c-for each="item in ['a', 'b', 'c']" iterator="data.reverseIterator">
<for each="item in ['a', 'b', 'c']" iterator="data.reverseIterator">
${item}
</c-for>
</for>
<c-for each="item in ['a', 'b', 'c']" iterator="data.reverseIterator" status-var="status">
<for each="item in ['a', 'b', 'c']" iterator="data.reverseIterator" status-var="status">
${status.index}-${item}
</c-for>
</for>
<div c-for="item in ['a', 'b', 'c']; iterator=data.reverseIterator">
<div for="item in ['a', 'b', 'c']; iterator=data.reverseIterator">
${item}
</div>
<div c-for="item in ['a', 'b', 'c']; iterator=data.reverseIterator; status-var=status">
<div for="item in ['a', 'b', 'c']; iterator=data.reverseIterator; status-var=status">
${status.index}-${item}
</div>

6
test/test-project/xml-templates/looping-props.marko.xml
View File

@ -1,12 +1,12 @@
<c-template
params="">
<c-for each="(name,value) in {'foo': 'low', 'bar': 'high'}">
<for each="(name,value) in {'foo': 'low', 'bar': 'high'}">
[$name=$value]
</c-for>
</for>
<ul>
<li c-for="(name, value) in {'foo': 'low', 'bar': 'high'}">
<li for="(name, value) in {'foo': 'low', 'bar': 'high'}">
[$name=$value]
</li>
</ul>

10
test/test-project/xml-templates/looping.marko.xml
View File

@ -1,13 +1,13 @@
<c-template
params="">
<c-for each="item in ['a', 'b', 'c']">
<for each="item in ['a', 'b', 'c']">
${item}
</c-for>
<c-for each="item in ['a', 'b', 'c']" separator=", " status-var="loop">
</for>
<for each="item in ['a', 'b', 'c']" separator=", " status-var="loop">
${item} - ${loop.isFirst()} - ${loop.isLast()} - ${loop.getIndex()} - ${loop.getLength()}
</c-for>
<div c-for="item in ['red', 'green', 'blue']; separator = ', '; status-var=loop" >
</for>
<div for="item in ['red', 'green', 'blue']; separator = ', '; status-var=loop" >
${item} - ${loop.isFirst()} - ${loop.isLast()} - ${loop.getIndex()} - ${loop.getLength()}
</div>
</c-template>

2
test/test-project/xml-templates/nested-attrs.marko.xml
View File

@ -15,7 +15,7 @@
<div>
<c-attr name="title">
<c-for each="color in ['red', 'green', 'blue']"> $color! </c-for>
<for each="color in ['red', 'green', 'blue']"> $color! </for>
</c-attr>
</div>
</c-template>

2
test/test-project/xml-templates/nested-handlers.marko.xml
View File

@ -10,7 +10,7 @@
Tab 2 content
</test-tab>
<test-tab title="Tab 3" c-if="showConditionalTab">
<test-tab title="Tab 3" if="showConditionalTab">
Tab 3 content
</test-tab>
</test-tabs>

2
test/test-project/xml-templates/optimizer-dynamic.marko.xml
View File

@ -3,7 +3,7 @@
<optimizer-page name="optimizer-dynamic">
<dependencies>
<module name="${data.dependency}"/>
<module name="test/optimizer/mixedB" c-if="data.mixedBEnabled"/>
<module name="test/optimizer/mixedB" if="data.mixedBEnabled"/>
</dependencies>
</optimizer-page>

7
test/test-project/xml-templates/replace.marko.xml
View File

@ -1,7 +0,0 @@
<c-template
params="message">
<div c-replace="'Hello'"><b>This content and parent DIV will be replaced with the text "Hello"</b></div>,
<div c-replace="message"><b>This content and parent DIV will be replaced with the value of the "message" variable</b></div>
</c-template>

1
test/test-project/xml-templates/replace.marko.xml.expected.html
View File

@ -1 +0,0 @@
Hello, Hello World!

2
test/test-project/xml-templates/require.marko.xml
View File

@ -1,5 +1,5 @@
<c-template>
<c-require module="./test-helpers" var="testHelpers" />
<require module="./test-helpers" var="testHelpers" />
Hello ${testHelpers.upperCase("world")}!
Hello ${testHelpers.trim(" World ")}!
</c-template>

6
test/test-project/xml-templates/simple.marko.xml
View File

@ -5,11 +5,11 @@
<div class="hello-world ${rootClass}">${message}</div>
<ul c-if="notEmpty(colors)">
<li class="color" c-for="color in colors">${color}</li>
<ul if="notEmpty(colors)">
<li class="color" for="color in colors">${color}</li>
</ul>
<div c-if="empty(colors)">
<div if="empty(colors)">
No colors!
</div>

18
test/test-project/xml-templates/strip.marko.xml
View File

@ -1,18 +0,0 @@
<c-template
params="">
<div>
<span c-strip="true"><b>A</b></span>
</div>
<div>
<span c-strip="false"><b>B</b></span>
</div>
<div>
<span c-strip="1 === 1"><b>c</b></span>
</div>
<div>
<span c-strip="1 === 2"><b>d</b></span>
</div>
</c-template>

1
test/test-project/xml-templates/strip.marko.xml.expected.html
View File

@ -1 +0,0 @@
<div><b>A</b></div><div><span><b>B</b></span></div><div><b>c</b></div><div><span><b>d</b></span></div>

6
test/test-project/xml-templates/var.marko.xml
View File

@ -1,14 +1,14 @@
<c-template>
<c-var name="colors" value="['red', 'green', 'blue']"/>
<var name="colors" value="['red', 'green', 'blue']"/>
<div c-for="color in colors">
<div for="color in colors">
$color
</div>
<c-assign var="colors" value="['orange', 'purple', 'yellow']"/>
<div c-for="color in colors">
<div for="color in colors">
$color
</div>

2
test/test-project/xml-templates/whitespace.marko.xml
View File

@ -31,7 +31,7 @@
<div c-space="preserve">
begin <!-- this whitespace should not be normalized --> end
</div>
<c-if test="true">begin <!-- this whitespace should be preserved -->end</c-if>
<if test="true">begin <!-- this whitespace should be preserved -->end</if>
<!--
- In not "xml:space" === "preserve":
- newline followed by whitespace should be removed

2
test/test-project/xml-templates/widgets.marko.xml
View File

@ -11,7 +11,7 @@
</test-container>
</w-widget>
<c-include template="/test-templates/widgets_nested"/>
<include template="/test-templates/widgets_nested"/>
<w-init-widgets/>

4
test/test-project/xml-templates/with.marko.xml
View File

@ -1,8 +1,8 @@
<c-template>
<c-with vars="x=1; y=7; z=x+10; a">$x $y $z</c-with>
<with vars="x=1; y=7; z=x+10; a">$x $y $z</with>
<div c-for="i in [1, 2, 3]" c-with="message=i+ ') hello'">
<div for="i in [1, 2, 3]" with="message=i+ ') hello'">
$message
</div>
</c-template>