Vertex: Server Side JSX View Engine

Vertex :eyeglasses:

Powerful JSX View Engine

How it works:Vertex compiles and caches your JSX views to Hyperscript so they will get easily rendered to HTML using vhtml .

Views will get compiled only when needed, giving you the performance boost.

To include partials in your view use the include directive.

Getting Started

Installation

npm install --save @vivida/vertex vhtml

Usage

Create the needed views

• View: views/index.jsx

const Header = include('header');
const Footer = include('footer');

module.exports = (props) => <div>
    <Header/>
    <div>{{ props.message }}</div>
    <Footer/>
</div>

• View: views/header.jsx

module.exports = (props) => <div class="header">Header</div>

• View: views/footer.jsx

module.exports = (props) => <div class="footer">Footer</div>

• File: index.js

const Vertex = require('@vivida/vertex').Vertex;

// the views directory
const viewLocation = __dirname + '/views';

// the cache directory
const cacheLocation = __dirname + '/cache';

const v = new Vertex(viewLocation, cacheLocation);

v.render('index', {message: 'Hello Vertex'}).then(html => console.log(html));

output:

<div>
    <div class="header">Header</div>
    <div>Hello Vertex</div>
    <div class="footer">Footer</div>
</div>

Using async/await instead

import { Vertex } from '@vivida/vertex';

// the views directory
const viewLocation = __dirname + '/views';

// the cache directory
const cacheLocation = __dirname + '/cache';

const v = new Vertex(viewLocation, cacheLocation);

async function main() {

    const html = await v.render('index', {message: 'Hello Vertex'});

    console.log(html);

}

main();

Note:The cacheLocation directory should be writable by user process

Follow https://twitter.com/ahmadmuzavi for any updates about Vertex.