vasille/README.md

The same framework which is designed to build bulletproof frontends (core library).

# Vasille

![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v4/doc/img/logo.png)

`Vasille Web` is a front-end framework, which is developed to provide bulletproof frontends.

[![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)

## Table of content

* [Installation](#installation)
* [How to use Vasille](#how-to-use-vasille)
* [How SAFE is Vasille](#how-safe-is-vasille)
* [How INTUITIVE is Vasille](#how-intuitive-is-vasille)
* [How POWERFUL is Vasille](#how-powerful-is-vasille)
* [Road Map](#road-map)


<hr>

## Installation

```
npm install vasille-web --save
```

## How to use Vasille

Create an app from a template

```bash
$ npm create vasille
```

### Full documentation:
* [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v4/doc/V4-API.md)
* [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v4/doc/Router-API.md)
* [Vasille Compostion function](https://github.com/vasille-js/vasille-js/blob/v4/doc/Compositions.md)

### Examples
* [TypeScript Example](https://github.com/vasille-js/example-typescript)
* [JavaScript Example](https://github.com/vasille-js/example-javascript)

<hr>

## How SAFE is Vasille

The safe of your application is ensured by
* `100%` coverage of code by unit tests.
  Each function, each branch is working as designed.
* OOP, DRY, KISS and SOLID principles are applied.
* `strong typing` makes your javascript/typescript code safe as C++ code.
All entities of `vasille` core library are strongly typed, including:
  * data fields & properties.
  * computed properties (function parameters and result).
  * methods.
  * events (defined handlers & event emit).
  * DOM events & DOM operation (attributing, styling, etc.).
  * slots of components.
  * references to children.
* No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.

## How INTUITIVE is Vasille

There is the "Hello World":
```typescript jsx
import { compose, mount } from "vasille-dx";

const App = compose(() => {
  <p>Hello world</p>;
});

mount(document.body, App, {});
```

## How POWERFUL is Vasille

All of these are supported:
* Components.
* Reactive values (observables).
* Inline computed values.
* Multiline computed values.
* HTML & SVG tags.
* Component custom slots.
* 2-way data binding in components.
* Logic block (if, else).
* Loops (array, map, set).

<hr>

## Road map

* [x] Update the `Vasille Core` library to version 3.0.
* [x] `100%` Test Coverage for core Library v3.
* [x] Develop the `Vasille JSX` library.
* [x] `100%` Test Coverage for the JSX library.
* [x] Develop the `Vasille Babel Plugin`.
* [x] `100%` Test Coverage fot babel plugin.
* [x] Add CSS support (define styles in components).
* [x] Add router.
* [x] Add SSG (static site generation).
* [ ] Add SSR (server side rendering).
* [ ] Develop tools extension for debugging.

## Change log

### 4.2.0

Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator.

### 4.1.0

Added SSG (static site generation) as build option `vasille-web build static`.

### 4.0.0

Initial version of the framework with file based routing and building scripts (`vasille-web dev` and `vasille-web build spa`).

## Questions

If you have questions, feel free to contact the maintainer of the project:

* [Author's Email](mailto:vas.lixcode@gmail.com)
* [Author's Telegram](https://t.me/lixcode)

<hr>

**Made in Moldova** 🇲🇩