xtpl

Template Engine with CSS-JS-like syntaxis.

Get started

import xtpl from 'xtpl';
import stringMode from 'xtpl-mode-string';

// Create template factory
const templateFactory = xtpl.fromString('h1.title | Hi, ${props.name}!', {
	mode: stringMode({prettify: true}),
	scope: ['props'],
});

// Get template
const template = templateFactory();

// Usage
cont html = template({
	props: {
		name: 'xtpl'
	},
});

---

Syntaxis

Basic

• .foo.bar -> <div class="foo bar"/>
• h1.caption -> <h1 class="caption"/>
• .welcome | Hi! -> <h2 class="welcome">Hi!</h2>
• form[method="post"] -> <form method="post"/>

Attributes

• input[type="text"][value="..."] — css-like enumerable
• input[type="text" value="..."] — space separated

Interpolation

• className: .is-${state}.${someClassName}
• tag + className: ${tagName}.is-${state}
• attributes: form[method="${type}" action="api/${method}"]
• text: h1 | Hi, ${username}!

Comments

// Bla-bla-bla
.text | ok

Multiline text

.text |>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean mattis at sapien elementum tempor.
Aliquam consequat egestas nisl quis pharetra.<|

HTML fragment

.main |# Click <a href="#next">me</a>. #|

---

Nesting and Adjacent sibling operator

> / Nesting

.panel
	.&-title > h1 | ${title}
	p.&-text | ${text}

          ⏬ ⏬ ⏬

<div class="panel">
	<div class="panel-title"><h1>...</h1></div>
	<p class="panel-text">...</p>
</div>

+ / Adjacent sibling operator

i.left + i.right

          ⏬ ⏬ ⏬

<i class="left"></i>
<i class="right"></i>

---

Parent reference

.panel
	.&-title > .&-close + | Wow!
	.&-content | Bla-bla-bal

          ⏬ ⏬ ⏬

<div class="panel">
	<div class="panel-title">
		<div class="panel-title-close"><div>
		Wow!
	</div>
	<p class="panel-content">Bla-bla-bal</p>
</div>

---

Parent reference and BEM modifiers

.button
	class.&_${attrs.type}: true
	| ${attrs.text}

          ⏬ ⏬ ⏬

<div class="button button_primary">
	OK
</div>

---

Custom elements

// Define
btn = [text, type]
	button.button
		class.&_${attrs.type}: true
		| ${text}

// Usage
btn[text="Continue"]
btn[text="Send" type="primary"]

          ⏬ ⏬ ⏬

<button class="button">Continue</div>
<button class="button button_primary">Send</div>

---

Custom elements + slots

Default slot

// Define
box = []
	.box > __default() // Call default

// Usage
box
	h2 | News
	p | ...

          ⏬ ⏬ ⏬

<div class="box">
	h2 | News
	p | ...
</div>

Multi slots

// Define
panel = []
	.&__head > head() // Call slot
	.&__body > body()

	// Checking the existence of slot
	if (typeof footer === 'undefined')
		.&__footer > footer()
	else
		.&__footer-empty

// Usage
panel
	// Define slot
	head = ()
		h2 | Wow!
	body = ()
		p | Bla-bla-bla...

          ⏬ ⏬ ⏬

<div class="panel">
	<div class="panel__head"><h2>Wow!</h2></div>
	<div class="panel__body"><p>Bla-bla-bla...</p></div>
	<div class="panel__footer-empty"><p>Bla-bla-bla...</p></div>
</div>

Default slot content

// Define
box = []
	content = ()
		h1 | default
	.body > content()

Slot with parameters

// Define
hello = [name]
	content = (text)
		| Hi, ${text}!
	.body > content(name.charAt(0).toUpperCase() + name.substr(1))

// Usage
hello[name="rubaxa"]

Inherit slots

// Define
hello = [name]
	content = (text)
		| Hi, ${text}!
	.body > content(name.charAt(0).toUpperCase() + name.substr(1))

// Usage
hello[name="rubaxa"]
	// Override slot and added `h1` wrapper
	content = (text)
		h1 > super.content(text)

// Or can define a combined block.
BigHello = [name]
	hello[name="${name}"]
		// Override slot and added `h1` wrapper
		content = (text)
			h1 > super.content(text)

// and usage
BigHello[name="rubaxa"]

---

Space between the tags

• a[<] — before
• a[>] — after
• a[<>] — at both sides

p > img[<] + img[<>] + img[>]

          ⏬ ⏬ ⏬

<p> <img/> <img/> <img/> </p>