# Lisio-engine

This package can render a single page application based on TypeScript components. It's written in TypeScript and based on component-based architecture.  
It tends to be as light and efficient as possible to be in harmony with Lisio's values.  

## Introduction

To use it properly, you need to understand what is component-based architecture. To be brief, this architecture aims to make a software with small and loosely-coupled components. Each components has to be responsible of a simple task and be modular for a better reuse.  
For exemple, if we modelize a car as a sofwtare, engine, wheel, steering wheel, light, etc will be components. Each with they logic, materials to be reusable in another car.  
  
[For more details](https://www.mendix.com/blog/what-is-component-based-architecture/#:~:text=Component%2Dbased%20architecture%20is%20a,application%20without%20modifying%20other%20components.)

## How it works

![Engine diagram](media://engine_diagram.webp)

How it works is very simple, the engine use and HTML renderer to create an HTML representation of a component and CSS renderer to stylized this component.  
Components have 2 states, the first one is the "initialization state", it's the base state of each component when they are instancied at the beginning of the programm.  
The second one, is the "rendered state", in this state the component was rendered and hsi representation was added in the page DOM. To be in this state, the component need to be called by the HTML renderer, style are only applied at this state.

### How to create a component

See [LisioComponent](./classes/Src_Core_Components.LisioComponent.html)

### How to stylized a component

See [LisioComponent](./classes/Src_Core_Components.LisioComponent.html)