U I L I T E

Uilite is a typescript module to build website with web server

Getting Start

> ### Installation
npm install @uilite/ui

> ### Create Project
npx uilite create

> ### Directory Structure

>> #### Controller
In this directory define the webserver structure of rest api
eg
import { Controller, RequestBody, RequestMap, RequestParam, RequestQuery } from "@uilite/ui/web/WebAnotation";
@Controller({url:""})
export class TestController{
@RequestMap("post","/stu/:id")
getStudent(@RequestParam("id") id,@RequestQuery("id") id1,@RequestBody data):any{
return {msg:"test",id:id,id1,data}
}
}

Please check below code for refrence

>> #### public
In this directory store only static file like css, js, html, .env etc

>> #### Server
In this directory use for create web server
>>> #### .env
TEMPLATE_PATH=views
CORS=true

>>> #### configration.ts
let envirementFileName=".env"
if(process.argv.length>=3){
envirementFileName=process.argv[2]+".env";
}
require('dotenv').config({path:__dirname+"/"+envirementFileName})
import * as bodyParser from "body-parser";
import * as express from "express"
let cors=require("cors")
export function configServer(){
let isCors=false;
if(process.env.CORS){
isCors=(process.env.CORS=="true")?true:false
}
var app=express();
if(isCors){
app.use(cors());
console.log("cors is enable");
}
else{
console.log("cors is disable")
}
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.set('views', __dirname+ '/views');
app.set('view engine', 'ejs');
app.use("/asset",express.static(__dirname+"/"+(process.env.TEMPLATE_PATH || "views")+"/asset"))
return app;
}

In this file configration are there like enable cors,body and template engine

>>> #### index.ts
import { TestController } from "../Controller/Test.controller" // this controller is define in above
import { Server } from "@uilite/ui/web/WebAnotation"
import {configServer} from "./configration"
var app=configServer();
app.get("/page",(req,res)=>{
res.render("index",{title:"Testing page"})
})
Server.setApp(app);
Server.addController(new TestController());
app.listen(4600,()=>{
console.log("server start");
})

>> #### Src

>>> ### Component
import {UILite,ComponentUI} from "@uilite/ui"
@ComponentUI({tagName:"app-demo",template:'

'})
class AppDemo extends UILite{

}
>>> ### Component hooks

>>>> #### beforeInit()

This hook will call when component is created not init
>>>> #### init()

This hook will call when component is init

>>>> #### afterInit()

This hook will call when after init of component

>>>> #### reInit()

Re-init hook will call when component is removeed in view from parent component and agin add in view then re-init hook will call

>>>> #### updateComponent()

Use of this method you re-render the view of component

>>>> #### onChangeAttribute(attr:{oldValue:any,newValue:any})

this hook will call when component will change with attribute

>>> ### Component Directive

>>>

>>> ### Module
import {ModuleUI} from "@uilite/ui"
import {AppDemo} from "/component/path"
@ModuleUI({component:[
AppDemo
],
module:[]
})
export class AppModule{
}

>>> ### Module Execution

import { AppModule } from "module/path";
import {moduleExecutionUI} from "@uilite/ui"
moduleExecutionUI(new AppModule())

>> ## Html Predefine Attribute

>>> ### __if

it will use for condition if condition is true the element will appear other wise remove

eg-1

output
display

>>> ### __for

it will use for itration for same type of elements
eg

In for loop there are two part

1st part item in this.itemList
here itemList is array of item and item will bind with __fs which is a globle veriable of component and share to child elemnts

2nd part i after semiclone i is a veriable which contain index of for loop

>>> ### __routerpath

it will show the elemnt if router path is match

eg

here when i hit url {base_url}/demo then this element will appear

>>> ### __routerlink

it is a just like hyper link without refresh page

eg
demo

>>> ### __bind-ref

bind-ref is bind the html element with component veriable

eg
component code
import {ComponentUI,UILite} from "@uilite/ui"
import EleRef from "@uilite/ui/FormUtil/EleRef"
import "./SlideBar.scss"
let html=require('./SlideBar.html');
@ComponentUI({tagName:"app-demo",'

':})
export class Demo extends UILite{
slider=new EleRef();
changeColor(){
this.slider.getElement().style.color='red'
}
}

>> ## update particular element in component

example
in html

in ts file
this.updateComponent({pointerList:[
{
key:"key1"
},
{
key:"key2",
__fs:{name:"ram"} // local function state data which is define in html
}
],
__fs:{} // // globel function state data which is define in html and comman for all pointerList.
})