z-views v1.0.40

this is a part of ZadaheaD's owner core tools for easier much more efficiant way to work with HTML, CSS, and Javascripts

look at z-http, if you want a lightweight "express like" http server engine

I never liked working with ejs, or these kind of tools cos I find them very messy, and I always liked working as clean and as seperated as possible. so in this project, I will use the same logic as ejs but with much cleaner way to handle HTML files and manipulate JS objects.

z-views

z-views is a server-side rendering module, inspired by ejs,

but aimed to be more html friendly and less of a "spaghetti code" type

To install, run npm install for your package.json dependencies:

npm install z-views

.
.

Render a simple html page

1) create and html file, inside views folder

project
|
└─── views
│   │   index.html

index.html

<h1>hello world</h1>

2) render the html

var zview = require('z-views');
zview.init();

zview.render('index', {}, (htmlContent) => {
     console.log(htmlContent) //html content  
});

3) use z-http to respond html on route

var http = require('z-http');

var zview = require('z-views');
zview.init();

http.start(3000, function (route, method) {
    return (data, callback) => {

        zview.render('index', {}, (htmlContent) => {
            callback(htmlContent)
        });

    }
}, {});

.
.

If you want to change views folder, you can set this on init.

zview.init({
    path: 'another_views_folder'
});

.
.

Data Objects - in order to pass data into the html you want to render, use that {{__param__}} key.

index.html

<h1>hello {{value}} world</h1>

zview.render

  zview.render('index', {
            value: 'great'
        }, (htmlContent) => {
            //rendered html is here
        });

response

<h1>hello great world</h1>

.
.

Global Values - are also possible by passing res object on init.

init

zview.init({
    res: {
        headline: 'Base Headline'
    }
});

index.html

<h1>{{res.defaultHeadline}}</h1>
<h2>hello {{value}} world</h2>

zview.render

  zview.render('index', {
            value: 'great'
        }, (htmlContent) => {
            //rendered html is here
        });

response

<h1>Base Headline</h1>
<h2>hello great world</h2>

.
.

Conditioned Rendering - is possible by {${__condition__}} key

index.html

<h2 style="color: {${data.hightlight ? 'red' : 'yellow'}}">html will be red, if hightlight param is passed as data</h2>

zview.render

  zview.render('index', {
            hightlight: true
        }, (htmlContent) => {
            //rendered html is here
        });

response

<h2 style="color: red">html will be red, if hightlight param is passed as data</h2>

.
.

Loops - <loop> is an z-view html tag, this will load a list and repeat the content while rendering data for each element

index.html

<h1>Loops</h1>
<div>
    <loop list>
        <div>{{name}}</div>
    </loop>
</div>

zview.render

  zview.render('index', {
            list: [
                { name: 'Mosh' },
                { name: 'David' },
                { name: 'Baruch' }
            ]
        }, (htmlContent) => {
            //rendered html is here
        });

response

<h1>Loops</h1>
<div>
  <div>Mosh</div>
  <div>David</div>
  <div>Baruch</div>
</div>

.
.

If - <if> is an z-view html tag, this will render its children if a condition is true.

index.html

<h1>If</h1>
<if cond="renderBlock">
    <div>this block will render if "renderBlock" is true</div>
</if>

zview.render

  zview.render('index', {
            renderBlock: true
        }, (htmlContent) => {
            //rendered html is here
        });

response

<h1>If</h1>
<div>this block will render if "renderBlock" is true</div>

.
.

If -> Then -> Else - <if><then><else> are z-view html tags, this is a fallback for the "if" tag.

index.html

<h1>If-Then-Else</h1>
<if cond="renderBlock">
    <then>
        <div>this block will render if "renderBlock" is true</div>
    </then>
    <else>
        <div>this will render if not</div>
    </else>
</if>

zview.render

  zview.render('index', {
            renderBlock: false
        }, (htmlContent) => {
            //rendered html is here
        });

response

<h1>If-Then-Else</h1>
<div>this will render if not</div>

. .

Copy -> Paste, <copy><paste> are z-view html tags. there are cases you want to copy a specific block of html to another location in page. this is why copy / paste was created

<h1>Copy-Paste</h1>
<copy divcopy>
    <div>this is an html template you want to copy</div>
</copy>

<paste divcopy></paste>
<paste divcopy></paste>

zview.render

  zview.render('index', {}, (htmlContent) => {
            //rendered html is here
        });

response

<h1>Copy-Paste</h1>
<div>this is an html template you want to copy</div>
<div>this is an html template you want to copy</div>

.
.

Templates, <template> is a z-view html tag, it aimed to use content from a different file location.

1) create another html file, inside views folder

project
|
└─── views
│   │   index.html
│   │   some_template.html

some_template.html

<h2>this is a template</h2>

index.html

<h1>Templates</h1>
<template src="some_template"></template>

zview.render

  zview.render('index', {}, (htmlContent) => {
            //rendered html is here
        });

response

<h1>Templates</h1>
<h2>this is a template</h2>

for more info, please contact me at: zadahead@gmail.com

thank you, and enjoy programing