- namespace [%fileName%]
- include 'posts/*'

- template main()
  - forEach posts => post
    /// A тут уже делаем всё, что нам нужно

{% for post in posts %}
     <h1>{{ post.name </h1>
     <p>{{ post.date }}</p>
{% endfor %}

{% for post in posts %}
     <h1>{{ post.name </h1>
     <p>{{ post.date }}</p>
     <span>{{ post.user.reg_date }}</span>
{% endfor %}

- namespace posts[%fileName%] /// тоже самое, что и написать явно posts.foo

/// Главный шаблон назовём main, он содержит основной пост
- template main()
  < .hello
    Hello world!

/// А это шаблон с превью статьи
- template preview()
  Hello!

- namespace contents
- include 'posts/*' /// Подключаем по маске все файлы из папки posts

- template main()
  /// Т.к. все посты у нас лежат в неймспейсе posts, то просто делаем обход этого объекта 
  - forEach posts => post
    += post.preview() /// Вызываем шаблон превею и выводим его текст

- namespace myMd

/// Здесь будем использовать вариант синтаксиса без управляющих пробелов, для более удобной генерации
/// И также включим режим "терпимости к пробелам", чтобы сохранить структуру пробелов, т.к. мы генерируем md
{template index(data) @= tolerateWhitespaces true}
# Hello world

{forEach data => el}
  * {el}
{/}

{/template}

- namespace contents
- include 'posts/*'

- template main()
  - var contents = []

  - forEach posts => post
    ? contents.push({preview: post.preview(), content: post.main()})

  /// Т.к. у нас результатом шаблона будет JSON, то убираем html экранирование
  {contents|json|!html}

var foo = 1;

function bar(a) {
  return a + foo;
}

- var foo = 1

- template bar(a)
  {a + foo}

/// Вернёт <div class="hello"></div>
- template foo()
  < .hello

/// Вернёт DocumentFragment
- template bar() @= renderMode 'dom'
  < .hello

- namespace foo

- template bar()
  < .foo

if (typeof foo === undefined) {
  var foo = {};
}

module.exports = foo;

foo.bar = function bar() {
  return '<div class="foo"></div>';
}

// Компилируем шаблоны
Snakeskin.compile(document.getElementById('templates'));

// Вызываем наш скомпилированный шаблон, как простую JS функцию
document.getElementById('test').innerHTML = demo.helloWorld();

....
connector myData
  ~ // do something with data
  ~
  ~ var myVar = <get something from outer template scope>.someMethod() + something // ..etc 
  ~ ...
  ~ var bar = <get something from outer template scope>.someMethod() + something // ..etc 
  ~ myVar.foo = bar.
  ~ ...
  ~ // do something with data
  share bar, myVar
....

var tpl = ss('my_tpl.ss'); // не знаю как там, но суть ясна
var bar = tpl.connectors.myData.bar;
var myVar = tpl.connectors.myData.myVar;

- namespace contents
- include 'posts/*'

- template main()
  - var contents = []

  - forEach posts => post
    ? contents.push({preview: post.preview(), content: post.main()})

  /// Явно указываем return,
  /// чтобы результатом был исходный массив
  - return contents

var tpl = ss.compile(someGlobalVars);
var всеЧтоМнеНужноИзШаблона = tpl.main();
var html = tpl.render(someLocalVars);

var ss = require('snakeskin');
ss.compileFile('myFile.ss') // Функция вернёт объект с функциями (которые были шаблонами)

var ss = require('snakeskin');
var tpl = ss.compileFile('myFile.ss', someGlobalVars); // Функция вернёт объект с функциями (которые были шаблонами)
var всеЧтоМнеНужноИзШаблона = tpl.main(someLocalVars);
var html = tpl.render(someLocalVars); // render - не знаю как там эта функция называется, ну в общем вроде понятно

var tpl = ss.compileFile('myFile.ss', {vars: someGlobalVars});

import { testModule } from './template.ss';

console.log(
	testModule.markup({
		buttonText: 'Кнопка'
	}),

	testModule.mainCode({
		toggleClass: 'active'
	})
);

- namespace testModule

- template markup(@params)
	< button
		{ @buttonText }

- template mainCode()
	# op
		$('.button').on('click', function() {
			$(this).toggleClass('activsssse');
		});

{ template mainCode() }
{/ template }

{template foo()}
  /// Допустим нам нужно объявить какой то JS:
  /// просто декларируем директиву в синтаксисе #{ ... }
  /// и все вложенные директивы будут работать с таким же синтаксисом
  #{script}
    var a = {a: 1, b: #{1 + 2}};
  #{/}
{/}

{template foo()}
  {script}
    var a = \{a: 1, b: {1 + 2}};
  {/}
{/}

{template foo()}
  /// Допустим нам нужно объявить какой то JS:
  /// просто декларируем директиву в синтаксисе #{ ... }
  /// и все вложенные директивы будут работать с таким же синтаксисом
  #{script}
    var a = {a: 1, b: #{1 + 2}};
  #{/}
{/}

- namespace testModule

{ template markup(@params) }
<button>{ @buttonText }</button> // Обычная разметка
{/ template }


{ template mainCode() @= tolerateWhitespaces true @= renderMode 'raw' } // отображать как есть. Правда я не понимаю, как тогда здесь ставить переменные :)
var a = { 1: 2 };
{/ template }

- namespace demo

- template myButton(@params)
 < .button
   {@value}

#{template myJS(foo)}
var a = {
  foo: 'bar'
  bla: #{1 + 2},
  baz: '#{foo ? "baz" : "bla"}'
};
#{/}