Marko v3: Added more complete syntax tests

This commit is contained in:
Patrick Steele-Idem 2016-02-17 11:41:21 -07:00
parent 4ca4ce9f37
commit db4949dcfb
21 changed files with 277 additions and 0 deletions

View File

@ -0,0 +1,4 @@
<!DOCTYPE html> <html lang="en"><head><title>Marko Templating Engine</title></head><body><h1>Marko Templating Engine</h1><p>Marko is a <i>fast</i> and lightweight templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags. It supports both a familiar HTML syntax and a concise, indentation-based syntax.</p><ul class="features"><li>async</li><li>streaming</li><li>custom-tags</li><li>readable</li><li>modules</li></ul><div>No colors!</div><div class="tabs"><ul><li>Tab 1</li><li>Tab 2</li></ul><div class="tab-content"><div class="tab">Body content for Tab 1</div><div class="tab">Body content for Tab 2</div></div></div><script type="text/javascript">if (foo) {
alert('Marko is awesome!');
}
</script><ul><li><a class="nav-link active" href="/">Home</a></li><li><a class="nav-link" href="/docs">Docs</a></li><li><a class="nav-link" href="/blog">Blog</a></li></ul></body></html>

View File

@ -0,0 +1,3 @@
{
"<tabs>": "./tabs/marko-tag.json"
}

View File

@ -0,0 +1,7 @@
{
"renderer": "./renderer",
"@orientation": "string",
"@tabs <tab>[]": {
"@title": "string"
}
}

View File

@ -0,0 +1,9 @@
var template =require('./template.marko');
exports.renderer = function(input, out) {
var tabs = input.tabs;
template.render({
tabs: tabs
}, out);
};

View File

@ -0,0 +1,14 @@
<var tabs=data.tabs/>
<div class="tabs">
<ul>
<li for(tab in tabs)>
${tab.title}
</li>
</ul>
<div class="tab-content">
<div class="tab" for(tab in tabs)>
<invoke tab.renderBody(out) if(tab.renderBody)/>
</div>
</div>
</div>

View File

@ -0,0 +1,48 @@
var pageTitle="Marko Templating Engine"
var currentPage='home'
<!DOCTYPE html>
html lang="en"
head
title - ${pageTitle}
body
h1 - ${pageTitle}
p
---
Marko is a <i>fast</i> and lightweight templating engine that
compiles templates to CommonJS modules and supports streaming,
async rendering and custom tags. It supports both a familiar
HTML syntax and a concise, indentation-based syntax.
---
ul.features
li for(feature in ['async', 'streaming', 'custom-tags', 'readable', 'modules'])
${feature}
ul if(notEmpty(data.colors))
li for(color in data.colors) - ${color}
div else
- No colors!
tabs
tabs:tab title="Tab 1"
- Body content for Tab 1
tabs:tab title="Tab 2"
- Body content for Tab 2
script type='text/javascript'
---
if (foo) {
alert('Marko is awesome!');
}
---
macro navLink(id, href, title)
li
a.nav-link class=(id === currentPage && 'active') href=href - ${title}
ul
navLink('home', '/', 'Home')
navLink('docs', '/docs', 'Docs')
navLink('blog', '/blog', 'Blog')

View File

@ -0,0 +1 @@
exports.templateData = {};

View File

@ -0,0 +1,5 @@
<!DOCTYPE html> <html lang="en"><head><title>Marko Templating Engine</title></head><body><h1>Marko Templating Engine</h1><p>Marko is a <i>fast</i> and lightweight templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags. It supports both a familiar HTML syntax and a concise, indentation-based syntax.</p><ul class="features"><li>async</li><li>streaming</li><li>custom-tags</li><li>readable</li><li>modules</li></ul><div>No colors!</div><div class="tabs"><ul><li>Tab 1</li><li>Tab 2</li></ul><div class="tab-content"><div class="tab">Body content for Tab 1</div><div class="tab">Body content for Tab 2</div></div></div><script type="text/javascript">
if (foo) {
alert('Marko is awesome!');
}
</script><ul><li><a class="nav-link active" href="/">Home</a></li><li><a class="nav-link" href="/docs">Docs</a></li><li><a class="nav-link" href="/blog">Blog</a></li></ul></body></html>

View File

@ -0,0 +1,3 @@
{
"<tabs>": "./tabs/marko-tag.json"
}

View File

@ -0,0 +1,7 @@
{
"renderer": "./renderer",
"@orientation": "string",
"@tabs <tab>[]": {
"@title": "string"
}
}

View File

@ -0,0 +1,9 @@
var template =require('./template.marko');
exports.renderer = function(input, out) {
var tabs = input.tabs;
template.render({
tabs: tabs
}, out);
};

View File

@ -0,0 +1,14 @@
<var tabs=data.tabs/>
<div class="tabs">
<ul>
<li for(tab in tabs)>
${tab.title}
</li>
</ul>
<div class="tab-content">
<div class="tab" for(tab in tabs)>
<invoke tab.renderBody(out) if(tab.renderBody)/>
</div>
</div>
</div>

View File

@ -0,0 +1,52 @@
<var pageTitle="Marko Templating Engine"/>
<var currentPage='home'/>
<!DOCTYPE html>
html lang="en"
head
title - ${pageTitle}
body
h1 - ${pageTitle}
p
---
Marko is a <i>fast</i> and lightweight templating engine that
compiles templates to CommonJS modules and supports streaming,
async rendering and custom tags. It supports both a familiar
HTML syntax and a concise, indentation-based syntax.
---
ul.features
li for(feature in ['async', 'streaming', 'custom-tags', 'readable', 'modules'])
${feature}
ul if(notEmpty(data.colors))
li for(color in data.colors) - ${color}
div else
- No colors!
tabs
tabs:tab title="Tab 1"
- Body content for Tab 1
tabs:tab title="Tab 2"
- Body content for Tab 2
<script type='text/javascript'>
if (foo) {
alert('Marko is awesome!');
}
</script>
<macro navLink(id, href, title)>
<li>
<a.nav-link class=(id === currentPage && 'active') href=href>
${title}
</a>
</li>
</macro>
<ul>
<navLink('home', '/', 'Home')/>
<navLink('docs', '/docs', 'Docs')/>
<navLink('blog', '/blog', 'Blog')/>
</ul>

View File

@ -0,0 +1 @@
exports.templateData = {};

View File

@ -0,0 +1,5 @@
<!DOCTYPE html> <html lang="en"><head><title>Marko Templating Engine</title></head><body><h1>Marko Templating Engine</h1><p>Marko is a <i>fast</i> and lightweight templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags. It supports both a familiar HTML syntax and a concise, indentation-based syntax.</p><ul class="features"><li>async</li><li>streaming</li><li>custom-tags</li><li>readable</li><li>modules</li></ul><div>No colors!</div><div class="tabs"><ul><li>Tab 1</li><li>Tab 2</li></ul><div class="tab-content"><div class="tab">Body content for Tab 1</div><div class="tab">Body content for Tab 2</div></div></div><script type="text/javascript">
if (foo) {
alert('Marko is awesome!');
}
</script><ul><li><a class="nav-link active" href="/">Home</a></li><li><a class="nav-link" href="/docs">Docs</a></li><li><a class="nav-link" href="/blog">Blog</a></li></ul></body></html>

View File

@ -0,0 +1,3 @@
{
"<tabs>": "./tabs/marko-tag.json"
}

View File

@ -0,0 +1,7 @@
{
"renderer": "./renderer",
"@orientation": "string",
"@tabs <tab>[]": {
"@title": "string"
}
}

View File

@ -0,0 +1,9 @@
var template =require('./template.marko');
exports.renderer = function(input, out) {
var tabs = input.tabs;
template.render({
tabs: tabs
}, out);
};

View File

@ -0,0 +1,14 @@
<var tabs=data.tabs/>
<div class="tabs">
<ul>
<li for(tab in tabs)>
${tab.title}
</li>
</ul>
<div class="tab-content">
<div class="tab" for(tab in tabs)>
<invoke tab.renderBody(out) if(tab.renderBody)/>
</div>
</div>
</div>

View File

@ -0,0 +1,61 @@
<var pageTitle="Marko Templating Engine"/>
<var currentPage='home'/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>${pageTitle}</title>
</head>
<body>
<h1>${pageTitle}</h1>
<p>
Marko is a <i>fast</i> and lightweight templating engine that
compiles templates to CommonJS modules and supports streaming,
async rendering and custom tags. It supports both a familiar
HTML syntax and a concise, indentation-based syntax.
</p>
<ul.features>
<li for(feature in ['async', 'streaming', 'custom-tags', 'readable', 'modules'])>
${feature}
</li>
</>
<ul if(notEmpty(data.colors))>
<li for(color in data.colors)>${color}</li>
</ul>
<div else>
No colors!
</div>
<tabs>
<tabs:tab title="Tab 1">
Body content for Tab 1
</tabs:tab>
<tabs:tab title="Tab 2">
Body content for Tab 2
</tabs:tab>
</tabs>
<script type='text/javascript'>
if (foo) {
alert('Marko is awesome!');
}
</script>
<macro navLink(id, href, title)>
<li>
<a.nav-link class=(id === currentPage && 'active') href=href>
${title}
</a>
</li>
</macro>
<ul>
<navLink('home', '/', 'Home')/>
<navLink('docs', '/docs', 'Docs')/>
<navLink('blog', '/blog', 'Blog')/>
</ul>
</body>
</html>

View File

@ -0,0 +1 @@
exports.templateData = {};