Skip to content

A Nodejs Template Engine Inspired by EJS, Angular and Laravel Blade

Notifications You must be signed in to change notification settings

RamanSharma100/vyuha

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vyuha (व्यूह)

A Node.js Template Engine inspired by EJS, Angular and Laravel Blade.

Installation

NPM

npm install vyuha

Yarn

yarn add vyuha

PNPM

pnpm add vyuha

Features

  • Control Flow with @ @end
  • Interpolation with {{ }}
  • Javascript expressions with {{ }}
  • Pipes with {{ <expression> | <pipe> }}
  • Compiles With Express view system
  • Use without Express in Native Node.js
  • Typescript Support
  • Custom .vyuha file extension

Supported Control Flow

  • Extend Layouts with @extends
  • Create Blocks with @block
  • @if, @else and end with @endif
  • @if {{ <expression> }} or @if ( <expression> ) and end with @endif
  • @switch, @case, @default and end with @endswitch
  • Start with @<controlName> and end with @end<controlName>
  • More to come, stay tuned!

Supported Pipes

  • uppercase
  • lowercase
  • capitalize
  • reverse

Usage

CommonJS (Javascript)

const Vyuha = require('vyuha');

const template = `
  <h1>{{ title | uppercase }}</h1>
  <p>{{ description }}</p>
`;

const data = {
	title: 'Hello, World!',
	description: 'This is a simple example of Vyuha.',
};

const template = new Vyuha(template);
const compiled = template.render(data);

console.log(compiled);

ES6 (Typescript)

import { Vyuha } from 'vyuha';

const template = `
  <h1>{{ title | uppercase }}</h1>
  <p>{{ description }}</p>
`;

const data = {
	title: 'Hello, World!',
	description: 'This is a simple example of Vyuha.',
};

const template = new Vyuha(template);
const compiled = template.render(data);

console.log(compiled);

Express

import express from 'express';
import VyuhaEngine from 'vyuha';

const app = express();

const __dirname = path.resolve(path.dirname(''));

// set view engine
app.set('view engine', 'vyuha');
app.set('views', path.join(__dirname, 'views'));

app.engine('vyuha', VyuhaEngine.render);

// routes

app.get('/', (req, res) => {
	return res.render('index', {
		title: 'Hello World',
		name: 'Vyuha',
	});
});

app.get('/welcome', (req, res) => {
	return res.render('extended', {
		title: 'Welcome to Vyuha',
		name: 'Vyuha',
	});
});

app.listen(3000, () => {
	console.log('Server started on http://localhost:3000');
});

Examples

Control Flow

<!-- index.vyuha -->
@extends "layout"

@block title
<h1>{{ title }}</h1>
@endblock

@block content
<p>{{ description }}</p>
@endblock
<!-- layout.vyuha -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  @block content
  @endblock
</body>

@if and @switch Control Flow

<!-- index.vyuha -->
<!DOCTYPE html>
    <html>
        <head>
            <title>
                {{ title }}
            </title>
        </head>
        <body>
            <h1>Hello, {{ name }}</h1>
            
            @if (test) then
                <h2>Test is test true</h2>
            @endif

            @if {{false}} then
                <h2>Test is true 1</h2>
            @else
                <h2>Test is false</h2>
            @endif

            @if {{name}} then
                <h2>Test is true</h2>
            @else
                <h2>Test is false</h2>
            @endif

            @switch {{name}} then

            @case "Raman Sharma"
                <h2>Test is true 1</h2>

            @default
                <h2>Test is false</h2>
            @endswitch


            @switch (test) then

            @case "Raman Sharma"
                <h2>Test is true 2</h2>
            @case false
                <h2>Test is true 3</h2>
            @default
                <h2>Test is false</h2>
            @endswitch
        </body>
    </html>

Pipes

<!-- index.vyuha -->
@extends "layout"

@block title
<h1>{{ title }}</h1>
@endblock

@block content
<h1>{{ title | uppercase }}</h1>
<!-- HELLO, WORLD! -->
<p>{{ description | lowercase }}</p>
<!-- this is a simple example of vyuha. -->
@endblock

Important

  • This is a work in progress, expect breaking changes.
  • Please report any issues you find.

Client-Side Support

  • CDN Support coming soon!
  • Standalone Vyuha.js file coming soon!

String Compilation

import { Vyuha } from 'vyuha';

const template = `
  <h1>{{ title | uppercase }}</h1>
  <p>{{ description }}</p>
`;

const data = {
	title: 'Hello, World!',
	description: 'This is a simple example of Vyuha.',
};

const template = new Vyuha(template);
const compiled = template.render(data);

console.log(compiled);

Output

<h1>HELLO, WORLD!</h1>
<p>This is a simple example of Vyuha.</p>

CLI Support

CLI Support coming soon!

Syntax Highlighting

Syntax Highlighting for VSCode coming soon!

License

MIT

Author

Raman Sharma

Contributing

Contributions are welcome! Feel free to open an issue or a pull request.

Inspiration

Support

If you like this project, consider supporting it by starring the repository.

Disclaimer

  • This is a personal project and is not affiliated with any organization.
  • This project is not affiliated with EJS or Angular in any way.

Changelog

  • 0.1.0 - Initial Release (Beta)
  • 0.1.1 - Typo Fixes in Readme (commonjs)

Roadmap

  • 0.2.0 - Add All Basic Control Flow
  • 0.3.0 - Add All Basic Pipes
  • 0.4.0 - Add Cache Support
  • 0.5.0 - Add CLI Support
  • 0.6.0 - Add Syntax Highlighting for VSCode
  • 0.7.0 - Add CDN Support
  • 0.8.0 - Add Standalone Vyuha.js file
  • 1.0.0 - Stable Release

Enjoy Vyuha!