haxcv Js

what is Haxcv ?

Haxcv is Javascript framework based on the idea of ease of work and flexibility in the implementation of projects with new features that enable you to write HTML with Javascript through a technique called jsH It also contains all the components you need as a developer.

what should I know first ?

You must have a background or knowledge about HTML, Javascript, CSS

You must have a background or knowledge about JSON

what it's new ?

with jsH you can control with content by Javascript Expression another word you don't need to use DOM Selector to render Content jsH is working like server side language . anything in Javascript can be use in jsH

why I need jsH ?

jsH is useful when you try to create dynamic application and you can use it in Components , modules , router , single page Application beside if you need to use JS loop , if-else statement , etc... ok let's create a simple Component

haxcv Contents

Components

jsH

MVC

SPA

Route

jsH :-

<div fn-init >
  {%
    var name = prompt("what is your name ?");
   if(name == 'admin'){
     {{
      <h1>welcome  {{+name+}} to control panel </h1>
     }}
  }else{
    {{
      <h1>hello single user {{+name+}} </h1>
    }}
  }
  %}
</div>

Components :-

 
<script type="text/jsh"  myComponent >
 	<table>
 		<tr>
 		<td>Name</td>
 		<td>Price</td>
 		</tr>
    {%
    var items = [
    {name:"iphone" , price:"180.56 $"},
    {name:"car"    , price:"12,000.00 $"},
    {name:"Bitcoin" , price:"14,443 $"}
    ];
     for(var i =0; i < items.length; i++)
     {
      {{
  	    <tr>
 		<td>{{+items[i].name+}}</td>
 		<td>{{+items[i].price+}}</td>
 		</tr>
      }} 
     }
    %}
    </table>
</script>

Note :

variable case :
if you need to call variable from external component make sure that variable 
is defined as global with window Object
but the good news is any data can be accessed 
from script whatever the location of the tag
because jsH is working when the DOM load

Module -> Controller

<div fn-module="myController" >
   <div >Name : <span v-scope="myController.name"></span> </div>
   <div >Age  : <span v-scope="myController.age"></span>  </div>
   <div fn-click fn-exec="myController.alert(5 , 5)" >alert</div>
</div>   
 
<script type="text/javascript">
haxcv.module("myController" , ($xes) => { 
   
    myController.name = "Manassa Joseph";
    myController.age  = 23;
    myController.alert = function(a , b){
       alert( a + b);
    }
 
});
</script>

Simple Directives

<div fn-click fn-store="div" sel >hello from DIV</div>       
<div fn-click fn-store="div" fn-copy="sel">use above div </div>       
<div fn-click fn-store="div" fn-script="myScript">use script Component </div>       
<div fn-click fn-store="div" fn-call="div">use div variable </div>       
<div fn-click fn-store="div" fn-exec="myfun()">use function </div>       
<script type="text/javascript" >
function myfun(){ alert('hello');}
</script> 
<script type="text/jsh" myScript >
{%
 {{
   <p>date is {{+new Date()+}}</p>
 }}
%}
</script>     
<div v-render="div">div var will be show here</div>

Route

<script>
var app =  Router.View("fn-data");
    app.createSPA({
        v1:{
            when:"page1",
            title:"",
            url:"page1.php"
        },
        v2:{
            when:"about",
            title:"",
            url:"page2.php"
        },
        v3:{
            when:"contact",
            title:"",
            url:"page3.php"
        },
});
</script>

Route to Component you can route Component with jsH with getComponent key but you need to unset url key .

<div fn-data ></div>  
<a href="#login" >login</a> 
 
<Component hidden loginComponent >
  <form>
     <input type="text" name="user" />
     <input type="password" name="pass" />
     <input type="submit"   name="login" value="login" />
  </form>
</Component>
    
<script>
var app =  Router.View("fn-data");
    app.createSPA({	   
        login:{
            when:"login",
            title:"",
            getComponent:"loginComponent"
        },
});
</script>