vtml v0.2.2

VTML

VTML is a templating engine for XML documents. It uses a syntax inspired by Vue, but it can be used for any XML document, not just HTML.

Installation

npm install --save vtml

Usage

Import VTML by whichever means necessary.

import VTML from 'vtml'

Use {{ delimiters }} to interpolate values into a template

<div>
  <span>{{ foo }}</span>
</div>

Templates need to be registered before they can be used.

VTML.register('myCoolTemplate', 'template source')
// or
const template = VTML.register('myCoolTemplate', 'template source')

Render a template by providing a name and some data to VTML.render or call the render function on the template directly

VTML.render('myCoolTemplate', { foo: 'bar' })
template.render({ foo: 'bar' })

Templates render with interpolated text

<div>
  <span>bar</span>
</div>

Directives

Iteration

Iterate over arrays using the v-for Directives

<ul>
  <li v-for="item in items">
    <span>{{ item }}</span>
  </li>
</ul>

<ul>
  <li v-for="(item, index) in items">
    <span>{{ index }}. {{ item.name }} {{ item.value }}</span>
  </li>
</ul>

Conditionals

Conditional rendering with v-if, v-else-if and v-else

<div>
  <div v-if="x === false">x is false</div>
  <div v-else-if="y > 4">y is greater than 4</div>
  <div v-else>What?</div>
</div>

Text

Provide raw text for an element.

const data = {
  text: 'Hello'
}

<div v-text="text" />

<div>Hello</div>

Partials

Call partials by name and providing local data

<div class="green">
  <my-cool-list v-bind="{ list }" />
</div>

<!-- myCoolList.html -->
<ul>
  <li v-for="item in list">{{ item }}</li>
</ul>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Todo

• A more convenient way of registering many templates
• Better error reporting
• Slots
• Improve documentation

Acknowledgements

VTML is based on the Vue template compiler. The basic architecture and a few functions are the same, but most of the code is original.

License

MIT